/* Hero (hero builder). Keeps the shared header, headline type and glass CTA from
   layout.css / split-flap.css / glass-cta.css. Overrides only the old hero grid, which
   expected a portrait scene plus two stat rails: the hero is now one copy block over the
   film, which spans wider than the centre column. */

.hero.hero--film {
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
  grid-template-rows: auto auto;
  grid-template-areas:
    ". copy ."
    "film film film";
}
.hero--film .hero-copy { grid-area: copy; }
.hero--film > .film { grid-area: film; }

/* The board holds 13 tiles ("Camera tricks"), so it scales down a step sooner. */
.hero-flap { contain-intrinsic-inline-size: calc(var(--flap-w) * 13 + var(--flap-gap) * 12); }

/* The tail is short now ("in every call"), so it no longer needs the step-down size. */
.hero--film .headline .headline-tail { font-size: min(var(--hl-size), 100cqi / 14.4); }

@media (max-width: 1099px) {
  .hero.hero--film {
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
    grid-template-areas:
      ". copy ."
      "film film film";
  }
}

/* 2026-10-12: a roomy hero. The copy sits in the middle of the first screen and only
   the top ~20% of the film peeks in below it (the film viewport is 600/1280 of its width;
   phones use a square film, so the peek is 20% of its width). */
.hero--film {
  --film-w: min(1360px, 100vw - 2 * var(--gutter));
  --film-peek: calc(var(--film-w) * 600 / 1280 * .3);
  --film-cue-h: 64px;   /* the "Verified at work" cue above the film */
}
.hero--film .hero-copy {
  justify-content: center;
  min-height: calc(100svh - var(--l-topbar-h, 56px) - var(--film-peek) - var(--film-cue-h));
  padding-top: clamp(32px, 6svh, 72px);
  padding-bottom: clamp(32px, 6svh, 72px);
}
.hero--film .headline,
.hero--film .headline:where(*) { gap: clamp(10px, 1.6svh, 18px); margin-bottom: clamp(28px, 4.5svh, 48px); }
.hero--film .subtitle { margin-bottom: clamp(32px, 5svh, 52px); line-height: 1.6; }
@media (max-width: 639px) {
  .hero--film { --film-peek: calc(var(--film-w) * .3); }
}

/* 2026-10-12: a large headline (about 1.35x the original) inside the widened centre
   column (layout.css --l-center); the display lines and split-flap tiles scale with the
   viewport. */
.hero--film .hero-copy { padding-inline: 24px; }
.hero--film .headline {
  --hl-poster: clamp(34px, min(4.75vw, 7.6svh), 80px);
  width: 100%;
  max-width: none;
}
.hero--film .headline .headline-statement,
.hero--film .headline .headline-tail { font-size: var(--hl-poster); line-height: 1.05; white-space: nowrap; }
.hero-flap {
  --flap-w: clamp(30px, min(4.75vw, 7.6svh), 80px);
  --flap-h: calc(var(--flap-w) * 1.25);
  --flap-gap: calc(var(--flap-w) * .1333);
  --flap-pad: calc(var(--flap-w) / 6);
  contain-intrinsic-inline-size: calc(var(--flap-w) * 13 + var(--flap-gap) * 12);
}
@media (max-width: 639px) {
  .hero--film .headline { --hl-poster: 8.6vw; }
}

/* The one primary action scales with the headline. */
.hero--film .button.cta-glass.cta-hero {
  min-height: clamp(48px, 6.4svh, 64px);
  padding-inline: clamp(24px, 2.6vw, 44px);
  border-radius: clamp(12px, 1.4svh, 16px);
  font-size: clamp(15px, 1.3vw, 19px);
  gap: clamp(10px, 1vw, 14px);
}
.hero--film .button.cta-glass.cta-hero svg { width: clamp(16px, 1.3vw, 20px); height: clamp(16px, 1.3vw, 20px); }
@media (max-width: 639px) {
  .hero--film .button.cta-glass.cta-hero { width: 100%; align-self: stretch; }
}
/* Air between the flap row and the rails ("Face swaps" also shifts half a tile right). */
.hero--film .hero-flap { padding-inline: 40px; box-sizing: border-box; }

/* Phones: no full-screen hero (the copy keeps natural height with modest air), the flap
   row fills the headline width (a 10-tile board, see js/sec-hero.js), and the CTA sits
   8px inside the rails like the other sections. */
@media (max-width: 639px) {
  .hero--film .hero-copy { min-height: 0; padding: 40px 8px 32px; }
  .hero--film .hero-flap { padding-inline: 0; }
  .hero-flap { --flap-w: 11vw; }
}