/* ============================================================
   Marcelle Lunam — components
   Slideshow + dots, still panels, header, menu overlay, title block,
   trailer button and dialog. Measurements: BUILD-SPEC §6 (at 1920 / 414).
   ============================================================ */

/* ---- Slideshow (§6.4) --------------------------------------------------- */
.slideshow {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
  touch-action: pan-y;           /* vertical scroll still works; we handle horizontal swipes */
  isolation: isolate;
}
.slideshow--hero { height: 100vh; height: 100svh; min-height: 560px; }
.slideshow--panel { aspect-ratio: 8 / 5; }
@media (min-width: 768px) {
  .slideshow--panel { aspect-ratio: 12 / 5; }
}
.slideshow:focus-visible { outline-offset: -6px; }

.slideshow__track { position: absolute; inset: 0; z-index: 0; }
.slideshow__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
}
.slideshow__slide.is-active { opacity: 1; z-index: 1; }
.slideshow__slide picture { display: contents; }
.slideshow__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none; -webkit-user-drag: none;
}
@media (max-width: 767px) {
  .slideshow__img { object-position: var(--focus-x, 50%) 50%; }
}

/* Optional per-slide shade behind white text (§13, off by default). */
.slideshow__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}

.slideshow__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.slideshow__overlay > * { pointer-events: auto; }

/* Dots: hollow white circles, active one filled (J2). Marcelle (6 Oct): at
   least 50% smaller than drawn — 11px desktop, 7px phone — each still a 24px
   tap target. Centre 38px (phone) → 53px (desktop) above the bottom edge. */
.slideshow__dots {
  position: absolute; z-index: 3;
  left: 50%; bottom: 38px;
  transform: translate(-50%, 50%);
  display: flex;
}
.slideshow__dot {
  position: relative;
  width: 24px; height: 24px;      /* 24px tap target (WCAG 2.2) */
  display: grid; place-items: center;
}
.slideshow__dot::before {
  content: "";
  width: 7px; height: 7px;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  transition: background-color .3s var(--ease);
}
.slideshow__dot[aria-current="true"]::before { background: var(--c-white); }
.slideshow__dot:focus-visible { outline: none; }
.slideshow__dot:focus-visible::before { outline: 2px solid var(--c-white); outline-offset: 3px; }
@media (hover: hover) {
  .slideshow__dot:hover::before { background: rgba(255,255,255,.5); }
  .slideshow__dot[aria-current="true"]:hover::before { background: var(--c-white); }
}
@media (min-width: 768px) {
  .slideshow__dots { bottom: clamp(2.375rem, 2.118rem + 0.996vw, 3.3125rem); }  /* centre 38px (phone) → 53px (desktop) up */
  .slideshow__dot { width: 24px; height: 24px; }
  .slideshow__dot::before { width: 11px; height: 11px; }
}

/* ---- Still panels (§6.6): stacked slideshows with a 4px white line between ---- */
.panels {
  display: grid;
  gap: var(--panel-gap);
  background: var(--c-white);
}

/* ---- Header (§6.1) -------------------------------------------------------
   Absolute over the first image, not sticky (J4). Everything is vertically
   centred on one line: desktop centre y ≈ 75.5 (burger lines at 62 / 88),
   phone centre y ≈ 29. Fluid values interpolate 414 → 1920. */
.site-header {
  --header-h:   clamp(3.625rem, 2.0275rem + 6.175vw, 9.4375rem);  /* 58 → 151 */
  --burger-x:   clamp(1.1875rem, 0.74rem + 1.726vw, 2.8125rem);   /* 19 → 45 */
  --burger-w:   clamp(1.625rem, 0.8688rem + 2.922vw, 4.375rem);   /* 26 → 70 */
  --burger-h:   clamp(0.656rem, 0.3728rem + 1.0956vw, 1.6875rem); /* 10.5 → 27: line to line + 1 */
  --burger-gap: clamp(0.719rem, 0.435rem + 1.0956vw, 1.75rem);    /* 11.5 → 28 */
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding-inline: var(--burger-x) clamp(1.25rem, 1.1rem + .6vw, 1.375rem);
  color: var(--c-white);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header--dark { color: var(--c-black); }

.menu-btn {
  position: absolute; left: var(--burger-x); top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--burger-gap);
  min-height: 44px; padding-block: 8px;
  color: inherit;
  font-size: var(--fs-menu-btn); font-weight: var(--fw-light); line-height: 1;
  letter-spacing: -0.015em;  /* MENU 1.svg says -0.05em; -0.015em matches the mockup width */
}
.menu-btn__lines {
  display: block; width: var(--burger-w); height: var(--burger-h);
  border-block: 1px solid currentColor;
}
.menu-btn__label { display: block; }
.menu-btn:focus-visible { outline-offset: 2px; }

.lockup-wrap { font: inherit; margin: 0; }
.lockup {
  display: flex; align-items: baseline; gap: clamp(0.36rem, 0.2rem + 0.6vw, 0.85rem);  /* name → slash ink: 8.5px phone, 16px desktop */
  white-space: nowrap;
  color: inherit;
  line-height: 1;
  transform: translateY(calc(-0.9px - 0.29vw));  /* lockup baseline sits ~2px (phone) to ~6.5px (desktop) above MENU's */
}
.lockup__name {
  font-size: var(--fs-logo); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-display);
}
.lockup__role { font-size: var(--fs-director); font-weight: var(--fw-light); letter-spacing: -0.01em; }
.lockup:focus-visible { outline-offset: 6px; }

@media (min-width: 768px) {
  .site-header { justify-content: center; padding-right: var(--burger-x); }
  /* the whole lockup (name + "/ director") is centred on the page */
}

/* ---- Menu overlay (§6.2) ---------------------------------------------- */
.menu-overlay { position: fixed; inset: 0; z-index: 100; }
.menu-overlay[hidden] { display: none; }
.menu-overlay__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity 350ms var(--ease);
}
.menu-overlay__panel {
  position: absolute; inset: 0 auto 0 0;
  width: 100%;
  background: var(--c-black); color: var(--c-white);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform 350ms var(--ease);
}
.menu-overlay.is-open .menu-overlay__backdrop { opacity: 1; }
.menu-overlay.is-open .menu-overlay__panel { transform: none; }
@media (min-width: 600px) {
  .menu-overlay__panel { width: 450px; }
}

/* Close: an X in the burger's spot, MENU beside it (desktop X box 49px at x 60, y 48). */
.menu-btn--close {
  --burger-x:   clamp(1.1875rem, 0.53rem + 2.55vw, 3.75rem);        /* 19 → 60 */
  --x-size:     clamp(1.25rem, 0.73rem + 2.02vw, 3.0625rem);        /* 20 → 49 */
  --burger-gap: clamp(0.719rem, 0.109rem + 2.357vw, 2.9375rem);    /* 11.5 → 47 */
  top: calc(clamp(3.625rem, 2.0275rem + 6.175vw, 9.4375rem) / 2);
}
.menu-btn__x { position: relative; display: block; width: var(--x-size); height: var(--x-size); }
.menu-btn__x::before, .menu-btn__x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 141.4%; height: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-btn__x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Items: Inter Semibold 47/56, x 62, first ascender at y ≈ 188. */
.menu-overlay__nav { padding: 178px 20px 60px 62px; }
.menu-overlay__list { list-style: none; margin: 0; padding: 0; }
.menu-overlay__list a {
  display: inline-block;
  font-size: var(--fs-menu-item); font-weight: var(--fw-semibold); line-height: 56px;
  letter-spacing: var(--track-display);
  color: var(--c-grey);
  transition: color .2s var(--ease);
}
.menu-overlay__list .current-menu-item > a,
.menu-overlay__list a[aria-current="page"],
.menu-overlay__list a:hover,
.menu-overlay__list a:focus-visible { color: var(--c-white); }
.menu-overlay__list a:focus-visible { outline-offset: 2px; }
@media (max-width: 599px) {
  .menu-overlay__nav { padding: 120px var(--gutter-hero) 48px; }
  .menu-overlay__list a { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.9375rem); line-height: 1.25; }
}

body.menu-is-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay__panel, .menu-overlay__backdrop { transition: none; }
}

/* ---- Film title block (§6.3) -------------------------------------------
   Sizes are in em of the title, so laurels and gaps scale with it.
   Desktop (title 80px): title baseline → meta cap top 22px; laurel gap 39px
   from the title, 30px between laurels. */
.film-title { font-size: var(--fs-title); color: var(--c-white); }
.film-title__name {
  font-size: 1em; font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.film-title__name a { color: inherit; }
.film-title__name a:focus-visible { outline-offset: 6px; }
.film-title__meta {
  font-size: var(--fs-sub); font-weight: var(--fw-light); line-height: var(--lh-sub);
  margin-top: .36em;     /* title baseline → meta cap top: 22px at 1920 */
  letter-spacing: -0.01em;
  text-wrap: nowrap;
}
.film-title__laurels { display: flex; align-items: flex-end; gap: .375em; list-style: none; margin: 0; padding: 0; }
.laurel { width: auto; max-width: none; }
/* Display heights measured off the mockups by laurel width (spec said 110/96/85). */
.laurel--tiff     { height: 1.325em; }   /* 106px */
.laurel--standard { height: 1.225em; }   /* 98px */
.laurel--short    { height: 1.1375em; }  /* 91px */

/* Inline (home hero): laurels to the right; their bottom sits on the baseline
   of the first meta line. (Centring on title + meta, as the spec suggests,
   put the TIFF laurel 28px lower than drawn.) */
.film-title--inline {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "name laurels" "meta laurels";
  grid-template-rows: auto 1fr;
  column-gap: .4875em;
  justify-content: start;
}
.film-title--inline .film-title__name { grid-area: name; }
.film-title--inline .film-title__meta { grid-area: meta; align-self: start; }
.film-title--inline .film-title__laurels {
  grid-area: laurels; align-self: end;
  margin-bottom: calc(var(--fs-sub) * 1.436);
}

/* Stacked (film page panel 2): title → meta → laurels. */
.film-title--stacked .film-title__laurels { margin-top: .375em; }

/* ---- Home hero ----------------------------------------------------------- */
.hero__films {
  position: absolute; left: var(--gutter-hero); right: var(--gutter-hero);
  bottom: clamp(4rem, 4.957rem - 0.797vw, 4.75rem);   /* last meta line 70px above the edge at 1920 */
  display: grid; gap: .1625em;
  font-size: var(--fs-title);
  pointer-events: none;
}
.hero__films > * { pointer-events: auto; justify-self: start; }
/* Phones: the meta (14px, larger than the mockup's ~8px for legibility) is wider
   than the title, so it runs full width and the laurels sit beside the title only. */
@media (max-width: 767px) {
  .film-title--inline { grid-template-areas: "name laurels" "meta meta"; grid-template-rows: auto auto; }
  .film-title--inline .film-title__laurels { margin-block: -.4em -.12em; }  /* overhang upwards rather than push the meta down */
}

/* ---- Film page top panels (§6.7) --------------------------------------- */
/* Panel 2: stacked title block top-left — left 60px, title cap top 72px below
   the panel edge at 1920; 20px / ~24px on phones. */
.film-top__title .slideshow__overlay > .film-title {
  position: absolute;
  left: var(--gutter-hero);
  top: clamp(1.25rem, 0.5456rem + 2.722vw, 3.8125rem);
}
.film-title--stacked .film-title__laurels { margin-top: .3325em; }  /* meta → laurels: 32px ink gap at 1920 */

/* PLAY TRAILER (J14: 1× PNG until an outlined SVG arrives; J17: centred). */
.trailer-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(6.875rem, 4.7rem + 5.6vw, 12.125rem);   /* 110 → 194 */
  transition: opacity .2s var(--ease);
}
.trailer-btn img { width: 100%; height: auto; }
.trailer-btn:hover { opacity: .85; }
.trailer-btn:focus-visible { outline: 2px solid var(--c-white); outline-offset: 6px; }

/* ---- Vimeo background clips in panels (Joel, 5 Oct 2026) -----------------
   The clip covers the panel and is cropped to it — never taller than the
   1920×800 window. Poster still shows until Vimeo reports it's playing. */
.slideshow { container-type: size; }
.slideshow__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slideshow__video iframe {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * var(--video-ar, 1.7778)));
  height: max(100cqh, calc(100cqw / var(--video-ar, 1.7778)));
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0; transition: opacity .6s var(--ease);
}
.slideshow__video.is-playing iframe { opacity: 1; }

/* ---- Inline trailer (replaces the §6.8 dialog) ---------------------------
   Plays inside panel 1, as large as fits (16:9 in a 12:5 panel is full
   height with black either side; on phones full width). */
.trailer-player { position: absolute; inset: 0; z-index: 5; background: var(--c-black); }
.trailer-player__frame {
  position: absolute; left: 50%; top: 50%;
  width: min(100cqw, calc(100cqh * var(--video-ar, 1.7778)));
  height: min(100cqh, calc(100cqw / var(--video-ar, 1.7778)));
  transform: translate(-50%, -50%);
  border: 0;
}
.trailer-player__close {
  position: absolute; z-index: 1;
  top: clamp(.75rem, .4rem + 1.4vw, 2rem); right: clamp(.75rem, .4rem + 1.4vw, 2rem);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--c-white);
}
.trailer-player__close .menu-btn__x { width: 32px; height: 32px; }
.trailer-player__close:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.is-playing-trailer .slideshow__dots { display: none; }
/* The header overlays panel 1, so it steps aside while the trailer plays. */
.trailer-is-playing .site-header { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }

/* ---- Home hero: film title rollover (Joel, 8 Oct 2026) -------------------
   The title fills with black from left to right on hover / keyboard focus.
   Two-tone background clipped to the text, slid across; 0.9s so it reads as
   a wipe rather than a flash. Instant under reduced motion. */
.hero .film-title__name a {
  color: transparent;
  background-image: linear-gradient(to right, var(--c-black) 50%, var(--c-white) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position .9s var(--ease);
}
.hero .film-title__name a:hover,
.hero .film-title__name a:focus-visible { background-position: 0 0; }
.hero .film-title__name a:focus-visible { outline-color: var(--c-white); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .film-title__name a { color: var(--c-white); background: none; }
  .hero .film-title__name a:hover, .hero .film-title__name a:focus-visible { color: var(--c-black); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .film-title__name a { transition: none; }
}