/**
 * SRD sponsors: [srd_sponsors] (sponsors page) and [srd_sponsors_summary]
 * (homepage).
 *
 * The tier device is the SRD25 one, brought back at the owner's request on
 * 2026-09-18: a strip in the tier's gradient (set inline as --srdspn-grad from
 * the plugin's map) across the top of every logo box, carrying the tier's
 * name. Everything around it is the 2026 language the programme, speakers and
 * exhibitors share: square, ruled, Outfit, on navy.
 *
 *   Sponsors page  one sponsor per row, tiers in rank order, no tier headings:
 *                  the logo box on the left, then name, description and
 *                  website. Phones: the box beside the name and the website,
 *                  the description underneath. theme="light" for a white page.
 *   Summary        logo boxes only, a centred row per tier from tablet up;
 *                  on phones two per row, the tiers running on.
 *
 * Widths follow Elementor's breakpoints: tablet from 768px, desktop from
 * 1025px. Logos sit on white 4:3 plates, cropped to their drawn part and sized
 * by visual area (SRD_Schedule_Logo_Box sets the custom properties).
 *
 * NOTE: no container-type. Inside Elementor's flex wrappers it collapses the
 * element to width 0.
 *
 * @package SRD_Schedule
 */

.srdspn,
.srdspn-sum {
  --srdspn-rule:    #16405c;
  --srdspn-ink:     #eaf1f6;
  --srdspn-ink-60:  #9fb3c4;
  --srdspn-red:     #ff4a3d;
  --srdspn-tag-ink: #0b1a26;
  --srdspn-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--srdspn-font);
  color: var(--srdspn-ink);
}

/* A white page: the site's own navy and red, and a rule round the plates. */
.srdspn--light {
  --srdspn-rule:   #d3dce4;
  --srdspn-ink:    #062846;
  --srdspn-ink-60: #3f566a;
  --srdspn-red:    #cc251c;
}

.srdspn *,
.srdspn *::before,
.srdspn *::after,
.srdspn-sum *,
.srdspn-sum *::before,
.srdspn-sum *::after { box-sizing: border-box; }

/* The structural lists and their items; a description keeps its own lists. */
.srdspn .srdspn-list,
.srdspn .srdspn-row,
.srdspn-sum .srdspn-sum-list,
.srdspn-sum .srdspn-sum-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* hello-elementor colours links #c36; neutralised at (0,1,1). */
.srdspn a,
.srdspn-sum a {
  color: inherit;
  background-color: transparent;
  box-shadow: none;
}

.srdspn :focus-visible,
.srdspn-sum :focus-visible {
  outline: 2px solid var(--srdspn-red);
  outline-offset: 2px;
}

/* -- Logo box: the tier strip over the white plate ------------------------------ */

.srdspn .srdspn-box,
.srdspn-sum .srdspn-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.srdspn .srdspn-tag,
.srdspn-sum .srdspn-tag {
  position: relative;
  display: block;
  padding: .42rem .6rem .38rem;
  background: var(--srdspn-grad);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--srdspn-tag-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srdspn .srdspn-plate,
.srdspn-sum .srdspn-plate {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #fff;
}

.srdspn--light .srdspn-plate {
  border: 1px solid var(--srdspn-rule);
  border-top: 0;
}

/* -- Cropped logo ------------------------------------------------------------------
   The server measures each logo's drawn part and sets, on the plate:
     --lw   span width in px          --lr   the part's width / height
     --liw  image width, % of span    --lih  image height, % of span
     --lx   image left, % of span     --ly   image top, % of span
   The span is centred in the plate and its height follows from the ratio. Its
   width is capped twice: 14px short of each side, and, because every plate is
   4:3, by the plate's height (three quarters of its width) less 10px top and
   bottom, times the ratio, so a tall logo on a narrow plate cannot spill out.
   The image inside is oversized and shifted so the drawn part fills the span,
   and the span clips the rest. */

.srdspn .srdspn-logo,
.srdspn-sum .srdspn-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(var(--lw, 100px), calc(100% - 28px), calc((100% * 3 / 4 - 20px) * var(--lr, 2)));
  aspect-ratio: var(--lr, 2);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

/* (0,2,1): one class more than Elementor's `.elementor img { height: auto }`
   (0,1,1), which loads later and wins a tie. */
.srdspn .srdspn-logo img,
.srdspn-sum .srdspn-logo img {
  position: absolute;
  top: var(--ly, 0%);
  left: var(--lx, 0%);
  display: block;
  width: var(--liw, 100%);
  height: var(--lih, 100%);
  max-width: none;
  max-height: none;
  /* contain, not fill: for a measured logo the oversized box already has the
     image's proportions, so nothing changes; for an unmeasured one the span's
     ratio is a guess, and fill would stretch the logo to it. */
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.srdspn .srdspn-noname,
.srdspn-sum .srdspn-noname {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #0b1a26;
}

/* ============================================================================
   Homepage summary
   ============================================================================ */

/* Phones: two per row, every tier in one run. */
.srdspn-sum .srdspn-sum-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.srdspn-sum .srdspn-sum-list > .srdspn-sum-break { display: none; }

.srdspn-sum .srdspn-sum-item { min-width: 0; }

/* From tablet up: a centred row per tier. The break between two tiers is a
   full-width item of no height, so the next tier starts a new line; it also
   doubles the row gap there, which is what separates the tiers. */
@media (min-width: 768px) {
  .srdspn-sum { --srdspn-sum-w: 11rem; }

  .srdspn-sum .srdspn-sum-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1rem 1.2rem;
  }

  .srdspn-sum .srdspn-sum-item { flex: 0 0 var(--srdspn-sum-w); }

  .srdspn-sum .srdspn-sum-list > .srdspn-sum-break {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }
}

@media (min-width: 1025px) {
  .srdspn-sum { --srdspn-sum-w: 12.5rem; }

  .srdspn-sum .srdspn-sum-list { gap: 1.4rem 1.5rem; }
}

/* A frame drawn off the box on hover, no movement. */
.srdspn-sum a.srdspn-box {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color .15s linear;
}

.srdspn-sum a.srdspn-box:hover,
.srdspn-sum a.srdspn-box:focus-visible {
  outline-color: var(--srdspn-red);
  outline-offset: 3px;
}

/* ============================================================================
   Sponsors page
   ============================================================================ */

.srdspn .srdspn-list { border-top: 1px solid var(--srdspn-rule); }

/* Phones: the box beside the name and the website, the description under
   both. The two rows beside the box split its height, so the name sits just
   above its middle and the website just below. */
.srdspn .srdspn-row {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "box  name"
    "box  link"
    "desc desc";
  column-gap: 1rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--srdspn-rule);
  scroll-margin-top: 7rem;
}

.srdspn .srdspn-box  { grid-area: box; align-self: start; }
.srdspn .srdspn-name { grid-area: name; align-self: end; }
.srdspn .srdspn-link { grid-area: link; align-self: start; }
.srdspn .srdspn-desc { grid-area: desc; }

/* A sponsor landed on from the homepage: a red rule along the top of its row
   and a red name. */
.srdspn .srdspn-row:target { box-shadow: inset 0 3px 0 var(--srdspn-red); }
.srdspn .srdspn-row:target .srdspn-name { color: var(--srdspn-red); }

.srdspn .srdspn-name {
  margin: 0 0 .45rem;
  padding: 0;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--srdspn-ink);
  text-wrap: balance;
}

.srdspn .srdspn-desc {
  max-width: 65rem;
  margin: 1.1rem 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--srdspn-ink-60);
}

.srdspn .srdspn-desc p { margin: 0 0 .8em; padding: 0; }
.srdspn .srdspn-desc > :last-child { margin-bottom: 0; }

.srdspn .srdspn-desc ul,
.srdspn .srdspn-desc ol {
  margin: 0 0 .8em;
  padding: 0 0 0 1.15em;
}

.srdspn .srdspn-desc ul { list-style: square; }
.srdspn .srdspn-desc li { margin: 0 0 .3em; padding: 0; }
.srdspn .srdspn-desc li::marker { color: var(--srdspn-red); }

.srdspn .srdspn-desc strong,
.srdspn .srdspn-desc b { font-weight: 600; color: var(--srdspn-ink); }

.srdspn .srdspn-desc a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.srdspn .srdspn-desc a:hover { color: var(--srdspn-red); }

.srdspn .srdspn-link {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.srdspn .srdspn-link a {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--srdspn-ink);
  border-bottom: 2px solid var(--srdspn-red);
  padding-bottom: .1rem;
  overflow-wrap: anywhere;
  transition: color .12s linear;
}

.srdspn .srdspn-link a::after {
  content: " \2197";
  font-weight: 500;
}

.srdspn .srdspn-link a:hover { color: var(--srdspn-red); }

/* From 600px: the box on the left of the name, the description and the
   website, all top-aligned with it. The last row takes up whatever height the
   box has left over, so the others stay as tall as their content. */
@media (min-width: 600px) {
  .srdspn .srdspn-row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "box name"
      "box desc"
      "box link"
      "box .";
    column-gap: 1.8rem;
    padding: 2rem 0;
  }

  .srdspn .srdspn-name { align-self: start; margin-bottom: .75rem; font-size: 1.35rem; }
  .srdspn .srdspn-desc { margin: 0 0 1rem; }
}

@media (min-width: 1025px) {
  .srdspn .srdspn-row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 3rem;
    padding: 2.6rem 0;
  }

  .srdspn .srdspn-name { font-size: 1.5rem; }
}

.srdspn .srdspn-empty {
  margin: 0;
  padding: 2rem 0;
  font-size: 16px;
  color: var(--srdspn-ink-60);
}

/* ============================================================================
   Entrance (1.20.0)
   Only under .srdspn-reveal, which the inline script sets before the first
   paint when IntersectionObserver exists and motion is not reduced, so the
   views are fully visible without JavaScript and to crawlers. srd-sponsors.js
   adds .is-in as a row or box enters the viewport, with --d staggering the
   ones that enter together.

   Sponsors page: the rules of the list stay put and the content fills them.
   The logo box rises, its tier strip sweeps in from the left, a glint crosses
   the strip once, and the name, description and link follow a beat apart.
   Summary: each box rises, then the same strip sweep, glint and logo settle.
   ============================================================================ */

.srdspn-reveal .srdspn-row > .srdspn-box,
.srdspn-reveal .srdspn-row > .srdspn-name,
.srdspn-reveal .srdspn-row > .srdspn-desc,
.srdspn-reveal .srdspn-row > .srdspn-link,
.srdspn-reveal .srdspn-sum-item {
  transition:
    opacity .6s cubic-bezier(.2, .7, .2, 1) var(--srdspn-t, var(--d, 0ms)),
    transform .7s cubic-bezier(.2, .7, .2, 1) var(--srdspn-t, var(--d, 0ms));
}

.srdspn-reveal .srdspn-row > .srdspn-name { --srdspn-t: calc(var(--d, 0ms) + 140ms); }
.srdspn-reveal .srdspn-row > .srdspn-desc { --srdspn-t: calc(var(--d, 0ms) + 220ms); }
.srdspn-reveal .srdspn-row > .srdspn-link { --srdspn-t: calc(var(--d, 0ms) + 300ms); }

.srdspn-reveal .srdspn-row:not(.is-in) > .srdspn-box,
.srdspn-reveal .srdspn-sum-item:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

.srdspn-reveal .srdspn-row:not(.is-in) > .srdspn-name,
.srdspn-reveal .srdspn-row:not(.is-in) > .srdspn-desc,
.srdspn-reveal .srdspn-row:not(.is-in) > .srdspn-link {
  opacity: 0;
  transform: translateY(12px);
}

/* The strip sweeps in from the left, a beat after its box. */
.srdspn-reveal .srdspn-tag {
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s cubic-bezier(.6, 0, .2, 1) calc(var(--d, 0ms) + 160ms);
}

.srdspn-reveal :not(.is-in) > .srdspn-box .srdspn-tag,
.srdspn-reveal .srdspn-sum-item:not(.is-in) .srdspn-tag {
  clip-path: inset(0 100% 0 0);
}

/* The logo settles onto its plate. The span keeps its centring translate. */
.srdspn-reveal .srdspn-logo {
  transition:
    opacity .5s ease calc(var(--d, 0ms) + 260ms),
    transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 260ms);
}

.srdspn-reveal :not(.is-in) > .srdspn-box .srdspn-logo,
.srdspn-reveal .srdspn-sum-item:not(.is-in) .srdspn-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
}

/* One glint across the tier strip once it is in, like light over metal. */
.srdspn .srdspn-tag::after,
.srdspn-sum .srdspn-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}

.srdspn-reveal .is-in .srdspn-tag::after {
  animation: srdspn-glint 1.1s ease-in-out calc(var(--d, 0ms) + 700ms) 1 both;
}

@keyframes srdspn-glint {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .srdspn *,
  .srdspn-sum * { transition: none !important; }

  .srdspn .srdspn-tag::after,
  .srdspn-sum .srdspn-tag::after { animation: none !important; }
}