/* hero-film.css — the opening with a loop film in the background, the copy
   on a translucent Ink panel rising from the base (homepage H01, chosen on
   7 Oct 2026; About A01 uses the same composition. For Clubs dropped its loop
   and The Science its closing film on 8 Oct).

   .hero-film            full-bleed section, at least one screen tall
   .hero-film__media     the film layer: the poster <img> paints first;
                         hero-video.js attaches the film after load, fades it
                         in, offers Pause, and skips it under reduced motion
                         and Save-Data (the poster stays)
   .hero-film__panel     70% Ink over the film. That keeps Chalk text at 5.5:1
                         or better even over pure white (64% is the 4.5:1
                         floor), so contrast never depends on the frame.
                         Through it Soft Line would fall below 3:1, so the
                         label and control borders use Chalk. No veil and no
                         gradient: the film keeps its own colour around and
                         behind the panel. */
.hero-film {
  --panel-ink: 70%;
  --clear-top: calc(var(--space-4) + var(--target-preferred) + var(--space-5));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h) - var(--review-offset, 0px));
  padding-block: 0;
  overflow: clip;
  background: var(--on-bg);
}
.hero-film__media { position: absolute; inset: 0; z-index: -1; }
.hero-film__media img,
.hero-film__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}
.hero-film__media video { opacity: 0; transition: opacity var(--duration-expressive) var(--ease-out); }
.hero-film__media video.is-playing { opacity: 1; }

.hero-film__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-block: var(--space-9) 0;
}
.hero-film__panel {
  max-width: 46rem;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-ink-panel);   /* Ink at 70% (tokens.css) */
  --on-muted: var(--color-text);
  --on-control: var(--color-text);
}
.hero-film__panel h1 { font-size: clamp(2.5rem, 1.5rem + 2.8vw, 4rem); } /* 40 → 64 inside the panel */
.hero-film__panel > :last-child { margin-bottom: 0; }
.hero-film .hero__lede { margin-bottom: var(--space-6); }

/* Pause (no page has one since 9 Oct): bottom right on wide screens; top
   left below 1024 px, where the panel can reach the bottom corner. */
.hero-film .hero__pause { left: auto; right: var(--page-margin); bottom: var(--space-5); }
@media (max-width: 1023px) {
  .hero-film .hero__pause { top: var(--space-4); bottom: auto; left: var(--page-margin); right: auto; }
  .hero-film__content { padding-top: var(--clear-top); }
}
@media (max-width: 639px) {
  .hero-film__content { padding-inline: 0; }
  .hero-film__panel { padding-bottom: var(--space-7); }
  /* the two actions fill the panel's row: side by side where they fit,
     otherwise one under the other at the same width */
  .hero-film .hero__actions > .btn { flex: 1 1 auto; }
}

/* phones and tablets (mobile check, 9 Oct 2026). Below 1024 px the copy
   only has to clear the film's note at the top (one line; two below
   355 px), so the opening is no taller than its content needs. */
@media (max-width: 1023px) {
  .hero-film:has(.hero-film__note) { --clear-top: calc(var(--space-4) + 1.35 * var(--text-caption) + 8px + var(--space-4)); }
}
@media (max-width: 354.98px) {
  .hero-film:has(.hero-film__note) { --clear-top: calc(var(--space-4) + 2.7 * var(--text-caption) + 8px + var(--space-3)); }
}
/* short portrait screens (an SE-sized phone under the browser's bars):
   tighter steps, so the headline, lede and both actions fit one screen */
@media (max-width: 1023px) and (max-height: 700px) and (orientation: portrait) {
  .hero-film__panel h1 { font-size: 2.25rem; margin-bottom: var(--space-4); }
  .hero-film__panel .label { margin-bottom: var(--space-3); }
  .hero-film .hero__lede { margin-bottom: var(--space-5); }
  .hero-film__panel { padding-bottom: var(--space-5); }
}
/* landscape phones: a compact panel, the actions side by side */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .hero-film__panel { padding: var(--space-5); }
  .hero-film__panel .label { margin-bottom: var(--space-3); }
  .hero-film__panel h1 { font-size: 2rem; margin-bottom: var(--space-3); }
  .hero-film .hero__lede { max-width: none; margin-bottom: var(--space-4); }
  .hero-film .hero__actions > .btn { flex: none; }
}

/* the film's note (9 Oct 2026): small and discreet, on the same 70% Ink as
   the panel so it reads over any frame; beside the scroll cue on wide
   screens, top right over the film below 1024 px (the panel holds the
   bottom there) */
.hero-film__note {
  position: absolute;
  z-index: 1;
  top: var(--space-4);
  right: var(--page-margin);
  max-width: calc(100% - 2 * var(--page-margin));
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-control);
  background: var(--color-ink-panel);
  font-size: var(--text-caption);
  line-height: 1.35;
  color: var(--color-text);
}
@media (min-width: 1024px) {
  .hero-film__note { top: auto; bottom: calc(var(--space-6) + (var(--target-preferred) - 1.35em - 8px) / 2); right: calc(var(--page-margin) + var(--target-preferred) + var(--space-4)); }
}

/* the scroll cue is the shared .scroll-cue (ui.css); over the film it sits
   on an Ink panel like the hero's own */
.hero-film .scroll-cue { --scroll-cue-bg: var(--color-ink-panel); --scroll-cue-edge: transparent; }