/* home-publiek.css — homepage section "Het publiek" (sc08), option D "Staand venster". Scoped under body.page-home.
   Desktop (≥1024): portrait screen left (600 × 708 at 1440), heading top-right, stats bottom-right, blue corner
   light on the section, red corner light inside the screen. Below 1024: stacked as on the 390 artboard. */

.page-home .home-publiek {
  position: relative; isolation: isolate; overflow: hidden;
  padding: min(var(--section-y), 96px) var(--margin);
}
.page-home .home-publiek__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }

/* heading: one line on phones/tablets, two lines on desktop */
.page-home .home-publiek__kop .line { display: inline; }

/* ---- the window: L44 at ~1:1, barely dimmed (no text-safety gradient, no vignette) ---- */
.page-home .home-publiek .screen.home-publiek__venster { max-width: none; margin: 28px 0 0; aspect-ratio: 4 / 5; }
.page-home .home-publiek__venster .screen__fx { background: none; }
.page-home .home-publiek__venster .screen__fx::before, .page-home .home-publiek__venster .screen__fx::after { opacity: 0; }
.page-home .home-publiek__venster video { filter: brightness(.96) contrast(1.06); }

/* ---- stats: 3 across, "Uitverkocht" as the wide row ---- */
.page-home .home-publiek__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin: 28px 0 4px; }
.page-home .home-publiek__stats .stat { display: block; padding: 16px 0 22px; border-top: 1px solid var(--touw); }
.page-home .home-publiek__stats .stat__num { display: block; font: 800 40px / .86 var(--font-stencil); color: var(--bot); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.page-home .home-publiek__stats .stat__label { display: block; margin-top: 12px; max-width: 30ch; font-size: 13px; line-height: 1.45; color: var(--bot-80); }
/* country codes run on in the label (desktop only: on phones the column is too narrow) */
.page-home .home-publiek__stats .stat__codes { display: none; margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.page-home .home-publiek__stats .stat__codes::before { content: "\00a0· "; }
.page-home .home-publiek__stats .stat--word { grid-column: 1 / -1; }
.page-home .home-publiek__stats .stat--word .stat__num { font: 800 52px / .86 var(--font-stencil); overflow-wrap: normal; }
.page-home .home-publiek__stats .stat--word .stat__label { max-width: 40ch; font: italic 400 19px / 1.2 var(--font-serif); color: var(--bot); text-wrap: pretty; }
.page-home .home-publiek__link { margin: 0; }

/* ---- tablet: still stacked, a landscape window that stays sharp ---- */
@media (min-width: 768px) {
  .page-home .home-publiek .screen.home-publiek__venster { aspect-ratio: 16 / 10; margin-top: 40px; }
  .page-home .home-publiek__stats { gap: 0 24px; margin-top: 40px; }
  .page-home .home-publiek__stats .stat__num { font-size: 56px; }
  .page-home .home-publiek__stats .stat__label { font-size: 14px; }
  .page-home .home-publiek__stats .stat__codes { display: inline; }
  .page-home .home-publiek__stats .stat--word .stat__num { font-size: 76px; }
  .page-home .home-publiek__stats .stat--word .stat__label { font-size: 22px; }
}

/* ---- desktop: the split ---- */
@media (min-width: 1024px) {
  /* blue corner light, top right of the section */
  .page-home .home-publiek::before {
    content: ""; position: absolute; z-index: 0; right: 0; top: 0; width: min(900px, 70%); height: 100%;
    pointer-events: none; opacity: .5;
    background: radial-gradient(60% 60% at 100% 40%, rgba(0, 51, 255, .42), rgba(0, 14, 92, .14) 50%, transparent 78%);
  }
  .page-home .home-publiek__grid {
    grid-template-columns: clamp(380px, 41.7vw, 600px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6.7vw, 96px);
  }
  .page-home .home-publiek .screen.home-publiek__venster { grid-column: 1; grid-row: 1 / 3; margin: 0; aspect-ratio: 600 / 708; align-self: start; }
  /* red corner light inside the window */
  .page-home .home-publiek__venster .screen__fx::before { opacity: .35; }
  .page-home .home-publiek__kop { grid-column: 2; grid-row: 1; padding-top: 6px; }
  /* fine-tuning 2026-10-08: the same d2 size and one line, like every other section heading */
  /* the figures follow the heading (with the d2 heading, bottom-aligning them left a hole in the middle) */
  .page-home .home-publiek__cijfers { grid-column: 2; grid-row: 2; align-self: start; padding: clamp(40px, 4.4vw, 64px) 0 4px; }
  .page-home .home-publiek__stats { column-gap: 28px; margin: 0 0 30px; }
  .page-home .home-publiek__stats .stat { padding: 22px 0 30px; }
  .page-home .home-publiek__stats .stat__num { font-size: clamp(48px, 5vw, 72px); }
  .page-home .home-publiek__stats .stat--word .stat__num { font-size: clamp(64px, 6.67vw, 96px); }
  .page-home .home-publiek__stats .stat--word .stat__label { font-size: clamp(20px, 1.67vw, 24px); }
}