/* ==========================================================================
   WFL — Home (index.html) · page layer, scoped to body.page-home
   Components come from components.css; this file only composes them into the
   "fight night as film" rhythm and fixes page-level fit (first viewport, pinned
   frames that must fit under header + Kassa). Section-specific layers (client picks 2026-10-08) live in
   home-hero / home-crown / home-f16 / home-kroon / home-uitslagen / home-publiek.css. Minimal direction: no scene labels,
   kickers, counters or numbering — the spacing below is tuned for the lean markup.
   Breakpoints: 480 / 768 / 1024 / 1280 / 1440.
   ========================================================================== */

/* Accented capitals (ÉÉN): .line--acc headroom is shared (base.css) */

/* ==========================================================================
   HERO — inset screen, title bottom-left, CTAs bottom-right, programma rail
   ========================================================================== */
/* own stacking context: the docked rail (z 6) stays inside, so the film section can slide over the hero */
.page-home .hero { z-index: 0; }
.page-home .home-hero__copy { position: relative; width: 100%; max-width: none; }
.page-home .home-hero .hero__t .line { white-space: nowrap; }
/* ÉÉN needs ~.17em above the caps; instead of extra headroom on one line only (uneven baselines), all
   lines share one leading that clears the accents — the stack reads as evenly spaced */
.page-home .home-hero .home-hero__t { line-height: .98; }
.page-home .home-hero .home-hero__t .line--acc { margin-top: 0; }
@media (max-width: 767.98px) {
  .page-home .home-hero__t { line-height: .98; }
}
/* the one context line under the H1 */
.page-home .home-hero .home-hero__line { max-width: none; color: var(--bot); text-wrap: balance; }
.page-home .home-hero__aside { display: grid; gap: clamp(12px, 1.6vw, 20px); justify-items: start; width: 100%; }
/* bright shots: .is-hot raises the text-safety gradient to 85% (set by script when a film needs it) */
.page-home .home-hero .screen__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 450ms var(--ease-out);
  background: linear-gradient(to right, rgba(7, 7, 10, .85) 0%, rgba(7, 7, 10, .6) 45%, rgba(7, 7, 10, .3) 100%), linear-gradient(to top, rgba(7, 7, 10, .85), rgba(7, 7, 10, 0) 60%);
}
.page-home .home-hero .screen.is-hot:not(.is-swapped) .screen__media::after { opacity: 1; }
/* reduced-motion still for the mobile hero (closeup_02); hidden everywhere else (lazy → never fetched) */
.page-home .home-hero__rm { display: none !important; }
@media (prefers-reduced-motion: reduce) and (max-width: 767.98px) {
  .page-home .home-hero__rm { display: block !important; }
}

/* mobile: H1 within the screen, bottom-aligned over a 75% gradient */
@media (max-width: 767.98px) {
  .page-home .home-hero .screen--hero .screen__fx { background: linear-gradient(to top, rgba(7, 7, 10, .92) 0%, rgba(7, 7, 10, .62) 38%, rgba(7, 7, 10, 0) 75%), var(--vignet); }
  .page-home .home-hero .home-hero__line { font-size: clamp(1.125rem, 5vw, 1.375rem); line-height: 1.2; }
  /* the H1 fills the width its longest line allows (--wm = that line in em), never above --hm */
  .page-home .home-hero .home-hero__h1 { font-size: min(var(--hm, 11vw), (100vw - 72px) / var(--wm, 6.96)); }
}

/* pause controls (WCAG 2.2.2) sit top-right on every homepage screen —
   the bottom edge belongs to copy, captions and the docked rail */
.page-home .screen__pause { top: max(10px, calc(clamp(16px, 2.4vw, 32px) - 11px)); bottom: auto; right: clamp(16px, 2.4vw, 32px); }

@media (min-width: 768px) {
  .page-home .home-hero .screen__overlay { padding-bottom: calc(var(--rail-h) + 36px); }
}

/* tablet 768–1023: stacked copy, sized to the space above the rail */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-home .home-hero .home-hero__h1 { font-size: clamp(3.5rem, min(var(--fs-mega), (100svh - 520px) / (var(--n, 3) * .98), (100vw - 90px) / var(--wm, 6.96)), 9rem); }
  .page-home .home-hero__aside .hero__ctas { margin-top: var(--s-2); }
}

/* desktop ≥1024: the title stack owns the left; the CTAs sit bottom-right beside the context line.
   --h1 is the largest size that fits (a) the height above the rail for --n lines, (b) the widest line (--wm em)
   across the screen, (c) the last line (--wl em) next to the CTA block — scaled by .48 (client: a smaller hero).
   Content width = 93.2vw − 48px (conservative). Per-variant line metrics: [data-hero] below. */
@media (min-width: 1024px) {
  .page-home .home-hero { --aside: 340px; --gap: clamp(32px, 3.4vw, 56px); }
  .page-home .home-hero .screen__overlay { padding-top: 76px; }
  .page-home .home-hero__copy {
    --h1-room: calc(100svh - var(--header-h) - 2 * var(--screen-inset) - 76px - var(--rail-h) - 36px - 60px);
    --h1: clamp(3rem, calc(var(--k, .48) * min(var(--h1-room) / (var(--n, 3) * .98 + .02), (93.2vw - 48px - var(--aside) - var(--gap)) / var(--wl, 4.96), (93.2vw - 48px) / var(--wm, 6.96))), var(--h1-max, 6.25rem));
    gap: clamp(14px, 1.4vw, 22px);
  }
  .page-home .home-hero__copy .hero__title { font-size: var(--h1); }
  .page-home .home-hero__copy .hero__title .line + .line { margin-top: .04em; }
  .page-home .home-hero__copy .home-hero__line { max-width: calc(100% - var(--aside) - var(--gap)); font-size: clamp(1.125rem, 1.4vw, 1.5rem); }
  .page-home .home-hero__aside { position: absolute; right: 0; bottom: 0; width: var(--aside); justify-items: end; }
  .page-home .home-hero__aside .hero__ctas { margin-top: 0; flex-wrap: nowrap; gap: 14px; }
  /* extra text safety for the CTA block (bottom-right) on top of the left/bottom gradient */
  .page-home .home-hero .screen--hero .screen__fx {
    background: var(--tekstveilig-onder),
      linear-gradient(to right, rgba(7, 7, 10, .7) 0%, rgba(7, 7, 10, .34) 30%, rgba(7, 7, 10, 0) 46%),
      radial-gradient(40% 36% at 100% 88%, rgba(7, 7, 10, .6), rgba(7, 7, 10, 0) 100%),
      var(--vignet);
  }
}
/* copy variants (?hero=a…e): line count, widest line, last line (em of the display face) and mobile cap */
.page-home .home-hero__copy[data-hero="a"] { --n: 3; --wm: 6.96; --wl: 4.96; --hm: 11vw; }
.page-home .home-hero__copy[data-hero="b"] { --n: 2; --wm: 6.7; --wl: 4.2; --hm: 12vw; --k: .5; }
.page-home .home-hero__copy[data-hero="c"] { --n: 1; --wm: 4.4; --wl: 4.4; --hm: 17vw; --k: .58; --h1-max: 7.5rem; }
.page-home .home-hero__copy[data-hero="d"] { --n: 3; --wm: 4.7; --wl: 4.7; --hm: 13vw; }
.page-home .home-hero__copy[data-hero="e"] { --n: 2; --wm: 4.6; --wl: 4.6; --hm: 15vw; --k: .52; --h1-max: 6.5rem; }

/* event states (fight week · live · na afloop · off-season): stacked, two-line title */
.page-home .home-hero__copy--event { gap: clamp(12px, 1.4vw, 18px); }
.page-home .home-hero__title--event { font-size: clamp(3.25rem, min(15vw, 9.5svh + 2vw), 11rem); line-height: .86; }
.page-home .home-hero__vs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; padding-top: .35rem; }
.page-home .home-hero__vs .vs { font-size: 1.75rem; line-height: 1; padding-bottom: .2em; }
.page-home .home-hero__vs .naamslot { --ns: clamp(1.75rem, 3.2vw, 3rem); }
.page-home .hero__meta { color: var(--bot-80); font-size: var(--fs-small); }
.page-home .home-hero__notice { max-width: 640px; }
.page-home .home-hero__live .chip { font-size: var(--fs-mono); }
@media (min-width: 1024px) {
  /* per-state title budgets: room above the rail minus the state's own furniture */
  .page-home .home-hero__copy--event { --room: calc(100svh - var(--header-h) - 2 * var(--screen-inset) - 76px - var(--rail-h) - 36px); }
  .page-home .home-hero__copy--fw { --aside: 400px; --h1: clamp(4rem, min((var(--room) - 112px) / 1.72, (93.2vw - 48px - var(--aside) - var(--gap)) / 4.62), 12rem); }
  .page-home .home-hero__copy--na { --h1: clamp(4rem, min((var(--room) - 120px) / .86, (93.2vw - 48px) / 4.2), 13rem); }
  .page-home .home-hero__copy--off { --h1: clamp(4rem, min((var(--room) - 90px) / 1.72, (93.2vw - 48px) / 6.5), 13rem); }
  .page-home .home-hero__copy--event .hero__title { font-size: var(--h1); }
  .page-home .home-hero__copy--fw .home-hero__aside { gap: 14px; justify-items: start; }
  .page-home .home-hero__copy--fw .home-hero__notice .mededeling { padding-block: 10px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) and (max-height: 900px) {
  .page-home .home-hero__copy--fw .hero__meta, .page-home .home-hero__copy--fw .home-hero__notice { display: none; }
}

/* the film section slides over the sinking hero (page-home.js): its top padding fades from clear to --nacht,
   so the hero dissolves into the dark instead of being sliced */
.page-home .home-film { position: relative; z-index: 1; padding-top: clamp(64px, 11vh, 144px); background: linear-gradient(to bottom, rgba(7, 7, 10, 0) 0, var(--nacht) clamp(64px, 11vh, 144px)); }
/* ==========================================================================
   WAR FOR THE CROWN (sc02) — the editorial cover lives in home-crown.css; here: the fight-week variant
   (hero owns title + notice, the section is only the coda: teaser + CTAs)
   ========================================================================== */
/* fight week / live: the hero owns the title, loop and notice; this section is only the coda */
.page-home .home-film--fw { padding-top: clamp(40px, 7vh, 80px); }
.page-home .home-film__after { display: grid; justify-items: center; text-align: center; gap: var(--s-5); padding-block: clamp(28px, 5vh, 56px) var(--section-y); }
.page-home .home-film__teaser { display: grid; gap: 10px; justify-items: center; }
.page-home .home-film__teaser .serif-l { font-size: clamp(1.75rem, 3.2vw, 3rem); max-width: 22ch; }
.page-home .home-film__ctas { justify-content: center; }
.page-home .home-film__cta { display: contents; }

/* ==========================================================================
   Pinned rail (programma): head inside the pinned frame
   ========================================================================== */
.page-home .home-rail__bar { display: grid; gap: var(--s-5); align-items: end; justify-content: stretch; margin-bottom: clamp(20px, 3vh, 36px); }
.page-home .home-rail__head { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; }
.page-home .home-rail__ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); }
.page-home .home-rail__title .line { white-space: nowrap; }
@media (min-width: 768px) {
  .page-home .home-rail__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .page-home .home-rail--nohead .home-rail__bar { grid-template-columns: minmax(0, 1fr); }
  .page-home .home-rail__ctrl { justify-content: flex-end; }
  .page-home .home-rail__all { margin-right: var(--s-3); }
}
@media (min-width: 1024px) {
  .page-home .home-rail__title .line { display: inline; }
  /* card size from the height left under header (72) + Kassa (48) + head + progress, capped at 28vw */
  .page-home .home-rail { --item: clamp(296px, min(28vw, (100svh - 336px) * .8), 520px); }
}

/* ==========================================================================
   HET PROGRAMMA
   ========================================================================== */
.page-home .home-programma { position: relative; padding-block: var(--section-y); background: var(--nacht); }
.page-home .home-rail--programma .affiche__bill { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) {
  /* the pinned frame (the <section>, pinned at top = header) is one block centred in the space under the
     Kassa: equal air above the head and below the progress line */
  .page-home .home-programma {
    min-height: calc(100svh - var(--header-h)); display: grid; align-content: center;
    padding-block: calc(var(--kassa-h) + 24px) 24px;
  }
}

.page-home .home-film__after,
.page-home .home-f16,
.page-home .home-podcast,
.page-home .home-uitslagen,
.page-home .home-kijk { padding-bottom: calc(var(--section-y) * .6); }
@media (max-width: 1023.98px) {
  .page-home .home-programma { padding-bottom: calc(var(--section-y) * .6); }
}
@media (max-width: 767.98px) {
  .page-home .home-film__after, .page-home .home-f16, .page-home .home-podcast, .page-home .home-uitslagen, .page-home .home-kijk,
  .page-home .home-programma { padding-bottom: calc(var(--section-y) * .45); }
}

/* ==========================================================================
   One rhythm (fine-tuning 2026-10-08): half a --section-y above and below every section, so the visual gap between
   two sections is one --section-y everywhere on the page. Exceptions keep their own reason: the programma's top fades
   over the sinking hero, the pinned champions frame centres itself in the viewport.
   ========================================================================== */
body.page-home main > #programma { padding-bottom: calc(var(--section-y) * .5); }
body.page-home main > #sc02 { padding-top: calc(var(--section-y) * .5); background: var(--nacht); }
body.page-home main > #sc04,
body.page-home main > #sc07,
body.page-home main > #sc08,
body.page-home main > #sc10 { padding-top: calc(var(--section-y) * .5); padding-bottom: calc(var(--section-y) * .5); }
body.page-home main > #presale { padding-top: calc(var(--section-y) * .5); }