/* =================================================================================================
   showcase.css: the Sponsor video player, "Meet our Sponsors" on the home page, the video spot at
   the head of /sponsors, the video-service block of /sponsors/apply, the video section of the
   Sponsor Portal, and the people/businesses line on the home page (owner: showcase).

   Businesses look like businesses: square logos, square corners, the dark chip ("Sponsor",
   "Honorary Sponsor"); people stay round on their own pages. Retire.do's own cards (the video
   service) wear the sun border and round corners, the owner's logo once on a white plate, never a
   square logo or a Sponsor chip. Every control is at least 48 px (--tap). Captions show large on a
   dark band. Logical properties only (css-logical gate); tokens from base.css.
   ================================================================================================= */

/* ---- The people / businesses line (site/_people_business_line.twig) ------------------------- */
.people-business-line .line-ambassador .icon,
.people-business-line .line-sponsor .icon {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  padding: 0.45rem;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--sand-deep);
}
.people-business-line .line-ambassador .icon { border-radius: 50%; }
.people-business-line .line-sponsor .icon { border-radius: 4px; }

/* The landing's empty #video section (nothing to offer yet): no padded empty band. */
.sponsors-video:has(> #video-transcript:empty) { display: none; }

/* ---- The player --------------------------------------------------------------------------------- */
.sv-player {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}
.sv-stage {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink);
}
.sv-video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ink);
}
.sv-video::cue {
  font-size: 1.35em;
  line-height: 1.35;
  color: #fff;
  background: rgb(10 20 35 / 0.86);
}
.sv-label {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 2;
  margin: 0;
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--display);
  font-size: var(--text-s);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.sv-bigplay {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 5rem;
  block-size: 5rem;
  border: 0;
  border-radius: 50%;
  background: var(--coral);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-l);
}
.sv-bigplay[hidden] { display: none; }
.sv-bigplay .sv-icon { inline-size: 2.4rem; block-size: 2.4rem; }
.sv-bigplay:focus-visible { outline: var(--focus); outline-offset: 4px; }

.sv-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
.sv-btn-sound .sv-icon,
.sv-btn-full .sv-icon {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-btn-sound .sv-icon-sound path:first-child,
.sv-btn-sound .sv-icon-silent path:first-child { fill: currentColor; }

.sv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: rgb(10 20 35 / 0.92);
  color: var(--on-dark);
}
.sv-controls[hidden] { display: none; }
.sv-btn {
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-family: var(--display);
  font-weight: 800;
  cursor: pointer;
}
.sv-btn[hidden] { display: none; }
.sv-btn:hover { background: rgb(255 255 255 / 0.12); }
.sv-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sv-btn-cc[aria-pressed="true"] { background: var(--on-dark); color: var(--ink); }
.sv-player .sv-icon-pause,
.sv-player[data-state="playing"] .sv-icon-play,
.sv-btn-sound .sv-icon-silent,
.sv-player[data-sound="off"] .sv-btn-sound .sv-icon-sound { display: none; }
.sv-player[data-state="playing"] .sv-icon-pause,
.sv-player[data-sound="off"] .sv-btn-sound .sv-icon-silent { display: block; }
.sv-seek {
  flex: 1 1 8rem;
  min-block-size: var(--tap);
  accent-color: var(--coral);
  cursor: pointer;
}
.sv-seek:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sv-time {
  font-family: var(--display);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  padding-inline: var(--space-2xs);
}
.sv-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-l);
}
.sv-meta {
  font-weight: 600;
  font-size: var(--text-s);
  color: var(--ink-soft);
}
/* Full screen is asked for the <figure>: the label, the controls and the title stay. */
.sv-player.sv-fullscreen,
.sv-player:fullscreen {
  background: #000;
  align-content: center;
  padding: var(--space-s);
}
.sv-player:fullscreen .sv-title { color: var(--on-dark); }
.sv-player:fullscreen .sv-meta { color: var(--on-dark-soft); }
.sv-player:fullscreen .sv-video { max-block-size: 80vh; }

/* ---- The strip under a large player, the rail, chips ------------------------------------------ */
.sv-chip {
  /* Its own width, text centred in the box (base .chip's 2.2rem height). */
  display: inline-flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  margin: 0;
  padding-block: 0.15rem;
  padding-inline: 0.6rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-s);
  box-shadow: none;
}
.sv-chip[hidden] { display: none; }
.sv-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-s);
  align-items: start;
  padding: var(--space-s);
  background: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow-s);
}
.sv-strip-logo img {
  display: block;
  inline-size: 4rem;
  block-size: 4rem;
  object-fit: contain;
  border-radius: 2px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--sand-deep);
}
.sv-strip-logo img[hidden] { display: none; }
.sv-strip-text > * { margin: 0; }
.sv-strip-top { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.sv-kind { font-family: var(--display); font-weight: 700; color: var(--ink-soft); }
.sv-strip-name { font-size: var(--h4); margin-block: var(--space-3xs) !important; }
.sv-strip-facts { color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }
.sv-strip-go {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
}
.sv-strip-go a[hidden] { display: none; }
.sv-transcript-link { display: inline-flex; align-items: center; min-block-size: var(--tap); }

.sv-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.sv-rail-title-h { font-size: var(--h4); margin-block: 0 var(--space-xs); }
.sv-rail-item {
  display: grid;
  /* The thumbnail gives way on a phone (at most 40 % of the row), so the name and chip fit at 320 px. */
  grid-template-columns: minmax(0, min(8.5rem, 40%)) minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
  min-block-size: var(--tap);
  padding: var(--space-2xs);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-s);
}
.sv-rail-item:hover { box-shadow: var(--shadow); }
.sv-rail-item:focus-visible { outline: var(--focus); outline-offset: 3px; }
.sv-rail-thumb {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
}
.sv-rail-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sv-rail-play {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: var(--ink);
}
.sv-rail-play .sv-icon { inline-size: 1.1rem; block-size: 1.1rem; }
/* A small thumbnail (a phone): the play circle moves to the top corner, clear of the duration. */
@container (max-width: 9rem) {
  .sv-rail-play { inset-block-end: auto; inset-inline-end: auto; inset-block-start: 0.3rem; inset-inline-start: 0.3rem; margin: 0; inline-size: 1.7rem; block-size: 1.7rem; }
  .sv-rail-play .sv-icon { inline-size: 0.9rem; block-size: 0.9rem; }
}
.sv-rail-duration {
  position: absolute;
  inset-block-end: 0.3rem;
  inset-inline-end: 0.3rem;
  padding-inline: 0.35rem;
  border-radius: 3px;
  background: rgb(10 20 35 / 0.85);
  color: #fff;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
}
.sv-rail-text { display: grid; gap: 0.1rem; min-inline-size: 0; overflow-wrap: anywhere; }
.sv-rail-name { font-family: var(--display); font-weight: 800; }
.sv-rail-kind, .sv-rail-title { color: var(--ink-soft); font-size: var(--text-s); }

.sv-note-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-s);
  color: var(--ink-soft);
}
.sv-disclosure { font-size: var(--text-s); color: var(--ink-soft); max-inline-size: var(--measure); }
.sv-sq {
  display: inline-block;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  margin-inline-end: 0.45rem;
  background: var(--ink);
  border-radius: 2px;
  vertical-align: baseline;
}

/* ---- "Meet our Sponsors" (home, last band) ---------------------------------------------------- */
.sv-meet > * + * { margin-block-start: var(--space-l); }
.sv-meet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-s);
}
.sv-meet-head h2 { margin-block: var(--space-3xs) var(--space-2xs); }
.sv-meet-head .lead { margin: 0; max-inline-size: 46rem; }
.sv-kicker { margin: 0; }
.sv-kinds ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-xs);
}
.sv-kind {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  min-block-size: var(--tap);
  padding: var(--space-xs);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-s);
}
.sv-kind:hover { box-shadow: var(--shadow); }
.sv-kind:focus-visible { outline: var(--focus); outline-offset: 3px; }
.sv-kind-art { inline-size: 100%; max-inline-size: 9rem; block-size: auto; }
.sv-kind-sq { inline-size: 2.2rem; block-size: 2.2rem; background: var(--foam-deep); border-radius: 3px; }

.sv-spotlight {
  display: grid;
  /* One column that may shrink below its content's width (no sideways scroll at 320 px). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: var(--shadow-s);
}
.sv-spotlight-head > * { margin: 0; }
.sv-spotlight-head p { color: var(--ink-soft); margin-block-start: var(--space-3xs); }
.sv-spotlight-main { display: grid; gap: var(--space-xs); }
.sv-spotlight-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-content: start; }
.sv-spotlight-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); align-items: center; }
.sv-spotlight-foot p { margin: 0; }
@media (min-width: 60rem) {
  .sv-spotlight {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-areas: "head head" "main side" "foot foot";
  }
  .sv-spotlight-head { grid-area: head; }
  .sv-spotlight-main { grid-area: main; }
  .sv-spotlight-side { grid-area: side; }
  .sv-spotlight-foot { grid-area: foot; }
}
.sv-guide {
  display: grid;
  gap: 0.15rem;
  min-block-size: var(--tap);
  padding: var(--space-s);
  border-radius: 6px;
  background: var(--foam);
  color: var(--ink);
  text-decoration: none;
}
.sv-guide[hidden] { display: none; }
.sv-guide-k { font-family: var(--display); font-weight: 700; font-size: var(--text-s); color: var(--ink-soft); }
.sv-guide-name { font-family: var(--display); font-weight: 800; font-size: var(--text-l); }
.sv-wide {
  display: grid;
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-s);
}
.sv-wide-cover { aspect-ratio: 16 / 7; background: var(--sand-deep); }
.sv-wide-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sv-wide-plate { display: grid; place-items: center; background: var(--white); border-block-end: 1px solid var(--sand-deep); padding: var(--space-m); }
.sv-wide-plate img { inline-size: auto; block-size: 100%; max-inline-size: 100%; object-fit: contain; }
.sv-wide-body { display: grid; gap: var(--space-2xs); padding: var(--space-s); }
.sv-wide-body > * { margin: 0; }
.sv-wide-what { font-size: var(--text-l); }
.sv-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min(100%, …): one full-width column on a 320 px phone instead of a 16rem one that overflows. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-s);
}
.sv-cards > li { min-inline-size: 0; }
.sv-meet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.sv-meet-foot p { margin: 0; }
.sv-bizline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
}

/* ---- The /sponsors video spot ----------------------------------------------------------------- */
.sv-spot { display: grid; gap: var(--space-m); margin-block: var(--space-m) var(--space-xl); }
.sv-spot-main { display: grid; gap: var(--space-xs); }
.sv-spot-disclosure { margin: 0; }
@media (min-width: 60rem) {
  .sv-spot-featured { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
  .sv-spot-featured > .sv-offer { grid-column: 1 / -1; }
}

/* Retire.do's own card: the sun border, round corners, the logo once on a white plate. */
.sv-ours {
  border: 3px solid var(--coral);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--gold-tint), var(--shell));
  padding: var(--space-m);
}
.sv-ours-plate {
  display: inline-grid;
  place-items: center;
  padding: var(--space-2xs);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-s);
}
.sv-ours-logo { inline-size: 8rem; block-size: auto; display: block; }
.sv-ours-tag {
  display: inline-block;
  margin: 0;
  padding-block: 0.2rem;
  padding-inline: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--coral-tint);
  color: var(--coral-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-s);
}
.sv-ours-tag-onphoto {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  background: var(--white);
}
.sv-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.sv-offer > * { margin: 0; }
.sv-offer-text { flex: 1 1 18rem; display: grid; gap: var(--space-3xs); }
.sv-offer-text p { margin: 0; }
.sv-offer-price, .sv-price { font-family: var(--display); font-weight: 800; font-size: var(--text-l); }
.sv-advert, .sv-service {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}
@media (min-width: 52rem) {
  .sv-advert, .sv-service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .sv-service-transcript { grid-column: 1 / -1; }
}
.sv-advert-copy > *, .sv-service-copy > * { margin-block: 0 var(--space-xs); }
.sv-advert-kicker { font-family: var(--display); font-weight: 800; color: var(--coral-ink); }
.sv-advert-caption { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); align-items: center; margin-block: var(--space-2xs) 0; }
.sv-points { padding-inline-start: 1.2rem; display: grid; gap: var(--space-3xs); }
.sv-still { position: relative; }
.sv-still .frame { border-radius: var(--radius); overflow: hidden; }
.sv-service-portal span { font-weight: 700; }
.sv-service-transcript {
  padding: var(--space-s);
  border-radius: var(--radius);
  background: var(--white);
}
.sv-service-transcript h3 { margin-block: 0 var(--space-xs); }

/* ---- Sponsor Portal --------------------------------------------------------------------------- */
.sv-portal { display: grid; gap: var(--space-s); margin-block-start: var(--space-l); }
.sv-portal > * { margin: 0; }
.sv-status { font-family: var(--display); font-weight: 700; font-size: var(--text-l); }
.sv-review { margin: 0; display: grid; gap: var(--space-2xs); }
.sv-review-video, .admin-video-preview {
  inline-size: 100%;
  max-inline-size: 48rem;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 6px;
}
.sv-review-video::cue, .admin-video-preview::cue { font-size: 1.3em; background: rgb(10 20 35 / 0.86); color: #fff; }
.sv-decide { display: grid; gap: var(--space-xs); max-inline-size: 40rem; }
.sv-portal-published { display: grid; gap: var(--space-xs); }
.sv-portal-published > * { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sv-rail-item, .sv-kind { transition: none; }
}