/* ════════════════════════════════════════════════════════════════════════
   sections.css — per-page section styling.
   These rules are specific to each section of the index page.
   If you add a new section, give it its own labeled block here.
   ════════════════════════════════════════════════════════════════════════ */

/* ──────────────── Hero ────────────────
   CodePen-style full-bleed SVG carousel.
   ────────────────────────────────────────────────────────────────────────
   The hero is a single transparent section with a full-bleed SVG covering it.
   Tiles inside the SVG flow horizontally as the user wheels/drags inside
   the hero (Observer captures those events and scrubs tile timelines).
   Outside the hero, the page scrolls normally.

   The hero background is the .bg-onion div (see reset.css, v3.10.23)
   — a real <div> in the markup, position:fixed, with a centered
   radial gradient. Center is #050506 (darker), edges fade to
   #0a0a0c (intentionally darker than the #141417 the other sections
   use, so the onion has its own identity and reads as a distinct
   dark band rather than blending into the next section).

   Layered from back to front:
     z:0 .hero-carousel (the SVG stage, full-bleed)
     z:1 .hero-content  (text, centered — the radial glassy chip
                         on .hero-content handles legibility now)

   EVF portrait is the 2nd big tile inside the SVG (not a separate layer).

   v3.10.19: removed .hero-overlay (the linear gradient). The "onion"
   (darker center) is now on the body, not the hero. The .hero-overlay
   div in index.html is now a no-op (empty div) — left in place to
   avoid a markup change, but it has no CSS rules and no visible effect.
   v3.10.20: radial edge changed from #0b0b0d to #141417 so it
              matched the lighter band of the zebra.
   v3.10.23: onion moved to a real <div class="bg-onion"> in the
              markup (not a body::before pseudo-element — those
              were fragile). Radial edge changed from #141417 to
              #0a0a0c so the onion has its own dark identity and
              doesn't blend into the next section.
   ──────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport — fixes iOS Safari 100vh bug */
  /* v3.10.19: transparent — body's radial gradient (reset.css) shows
     through. The center of that radial is #050506 and is anchored to
     the middle of the viewport, so the hero always shows the darkest
     part of the onion in the middle of the screen. */
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  /* Cursor hint that the hero is interactive (wheel scrubs the carousel). */
  cursor: ew-resize;
  /* v3.10.10: tell the browser to only handle vertical panning on
     touch. The GSAP Observer handles horizontal drag for the
     carousel. Without this, the browser was trying to interpret the
     horizontal touch as a horizontal-scroll gesture on the page,
     causing a jiggling effect on drag (Buddie: "i can see a little
     of jiggling on the images"). pan-y = browser scrolls the page
     vertically, JS gets the horizontal touch. */
  touch-action: pan-y;
  /* v3.10.18: scroll-margin-top leaves room for the sticky
     .site-header (72px tall: 14px pad + 44px nav-toggle + 14px pad)
     when the browser scrolls to #top. Without this, the top edge of
     <section id="top"> lands at the very top of the viewport and
     the sticky nav covers the hero's first ~72px — including the
     eyebrow / headline / lede text packed at the top of the hero
     on mobile. Triggers on (a) page refresh while at #top, and
     (b) clicking the brand link <a class="brand" href="#top">,
     which is the "Tarek Recolons" link in the header.
     (Buddie: "the text is still appearing behind the navbar,
     probably a bad reference of section or something similar,
     this happens when refreshin or when clicking the name tarek
     recolons that directs you to #top".) */
  scroll-margin-top: 80px;
}

.hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  /* Tiles inside are already clipped; allow wheel events to reach the hero. */
  pointer-events: none;
}

/* .hero-overlay removed in v3.10.19.
   The "onion" (darker center) lives on the body now, not the hero.
   The empty <div class="hero-overlay"> in index.html is a no-op. */

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px var(--pad-x) 48px;
  /* Glassy chip behind the text so the moving tiles don't fight legibility.
     This is the only darkening layer left in the hero — the body's radial
     handles the "onion", this handles the text contrast. */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0) 70%
  );
}

/* ──────────────── Mobile hero (≤767px) ────────────────
   v3.10.20: hero is transparent. The body's radial gradient
   (anchored to the viewport) shows through — the 50px margin
   above and below the hero shows the edge of the radial
   (fading toward #141417), which matches .section-posters'
   solid #141417 background. No box-shadow hack, no own
   background, no color seam.

   v3.10.19: same idea, radial edge was #0b0b0d.
   v3.10.18: 50px margin + section owns its #0b0b0d background
              (rendered as box-shadow extending into margin).
   v3.10.17: transparent hero, body #0b0b0d shows through
              (reverted; relied on body being #0b0b0d).
   v3.10.16: box-shadow: 0 0 0 50px #0b0b0d to color the margin.
   v3.10.15: removed the 50px margin (reverted in v3.10.16).
   v3.10.14: deleted the two hero CTA buttons.
   v3.10.13: hero margin 25→50px, button gap 12→16px.
   v3.10.12: mobile INITIAL_OFFSET=550 (center big).
   v3.10.11: DRAG_SENSITIVITY 60→500.
   v3.10.10: touch-action:pan-y, smalls Y narrowed to 100-400.
   v3.10.9:  SCALE=1.0 everywhere, drag fix.
   v3.10.6:  hero shrinks to its content.
   v3.10.3:  SCALE 0.65→0.67, BIG_Y=0 on mobile.

   This block comes AFTER the desktop .hero-content rule above so
   the mobile overrides win on ≤767px viewports. */
@media (max-width: 767px) {
  .hero {
    /* v3.15.2: with the shorter hero text, the hero was collapsing
       and the SVG carousel (preserveAspectRatio="xMidYMid slice")
       sliced the side images. A modest min-height on the content
       box keeps the composition compact on phones while still
       showing enough of the carousel. */
    min-height: 0;
    height: auto;
    /* 50px breathing space above and below. With the hero
       transparent, the margin shows the edge of the body's
       radial — fading toward #0b0b0d, which is exactly the
       color of .section-posters just below. */
    margin: 50px 0;
    cursor: default;
    /* v3.10.19: transparent so the body's radial shows through. */
    background-color: transparent;
  }
  .hero-content {
    /* Text packed at the top (justify-content: flex-start) so it
       sits over the big (anchored at y=0 in the SVG since v3.10.3). */
    min-height: 320px;
    height: auto;
    justify-content: flex-start;
    /* 25px on top and bottom so the text doesn't touch the
       carousel edges. */
    padding: 25px var(--pad-x);
  }
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--c-fg-muted);
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Mobile: ~36px. Big enough to be a headline, fits without overflow. */
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-fg);
  max-width: var(--measure);
}

/* .hero-cta removed in v3.10.14: the "View credits" / "Rental kit"
   buttons were deleted from index.html. Leave the rule absent
   so any future markup using this class is styled from scratch. */

/* ──────────────── Work / poster wall ────────────────
   Every film the same size, same aspect (2:3). Mobile-first: 1 column full-width.
   Gap is intentionally small so the section reads as a wall, not a list.
   Click target is the <a class="poster-link"> wrapping each tile.
   The actual pill-chrome (IMDb, next-section) lives in components.css. */

.section-posters {
  /* v3.10.25: let the .section base padding apply (no zero-out).
     The section background still spans the full viewport (from
     .section base), but the poster wall and chrome now have
     proper gutter from the viewport edges — they fill the
     section's content area, not the raw viewport. On a 1200px
     screen that gives ~120px gutter on each side; on a 1600px
     screen ~320px.
     v3.11.1: on mobile the section is FULL-BLEED again — zero
     horizontal padding so the poster wall reaches the screen
     edges. The poster-aspect (2:3) is already designed to fill
     the viewport vertically on a phone, so edge-to-edge feels
     like the cinema poster you'd see on a wall, not a card
     sitting inside a gutter. Buddie: "on mobile you changed
     the style of the movies. the style i want the previous
     one where they fill all the screen." Desktop/tablet keep
     the guttered layout (v3.10.25). */
  padding-left: 0;
  padding-right: 0;
  position: relative;
  /* v3.10.23: solid #141417. This is the "medium" band of the
     three-shade pattern. The hero is the onion (dark, fixed radial),
     then the four sections after it are #141417 → #1c1c20 → #0b0b0d
     → #141417. Three distinct shades so you can actually see the
     bands changing as you scroll. */
  background: #141417;
}

/* v3.14.46: the poster wall fills the section's content area.
   It opts out of the .section > * container constraint so it
   can be wider than var(--container) on desktop. */
.section-posters > .poster-wall {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* Width comes from .section > * (width: 100% of the section's
     content box). Since the section's horizontal padding is
     symmetric, the wall's center always coincides with the
     viewport center — the slot-model carousel relies on that. */
}
/* v3.10.27: per-section background overrides. The four sections
   after the hero now alternate between a solid band and the
   body's onion radial:
     posters  = #141417  (solid)
     about    = transparent (body's onion shows through)
     rental   = #141417  (solid)
     contact  = transparent (body's onion shows through)
   So scrolling down reads: onion (hero) → solid → onion →
   solid → onion. Five bands, true alternation. The #about and
   .section-cta overrides below make them see-through, overriding
   the .section-alt / .section-cta solid backgrounds. */
#about {
  background: transparent;
}

/* (v3.13.0: #rental rule removed — the slot now hosts #partners.
   The .section-alt class still gives it the solid background.) */

.section-posters > .section-head {
  /* keep the header inside normal section padding; only the wall goes full-bleed */
  padding-left: max(20px, 4vw);
  padding-right: max(20px, 4vw);
}

/* v3.15.1: the poster wall sits right under the section header.
   The section is no longer forced to viewport height, so the only
   space below the carousel is a controlled padding-bottom that keeps
   it from touching the next section without leaving a huge gap. */
.section-posters {
  display: flex;
  flex-direction: column;
  /* v3.15.1: removed the viewport-driven min-height. The fixed
     extra space left a big dark gap between the carousel and the
     About section, especially on mobile. With the wall pinned under
     the header (margin-top: 0) and no forced section height, the
     section now ends right after the carousel content. */
  min-height: 0;
  /* v3.15.3: prevent the absolutely positioned poster tiles from
     creating a horizontal scroll gutter on mobile. The body has
     overflow-x:hidden, but on some mobile browsers the poster wall
     tiles can still extend the scroll width; clipping at the
     section level fixes it without affecting desktop. */
  overflow: hidden;
}
.section-posters > .poster-wall {
  /* v3.14.63: keep the wall right under the header; any residual
     vertical space is handled by padding-bottom, not by
     margin-bottom: auto on a tall section. */
  margin-top: 0;
  margin-bottom: 0;
}
/* Keep a modest air gap so the carousel doesn't touch the next
   section, but don't leave the large gap from the old min-height. */
.section-posters {
  padding-bottom: 48px;
}
@media (min-width: 900px) {
  .section-posters {
    padding-bottom: 64px;
  }
}

/* v3.11.1: on tablet+ restore the guttered layout from v3.10.25.
   Mobile (<560px) stays full-bleed per Buddie's "fill all the
   screen" feedback — the poster wall reaches the screen edges.
   Tablet (560–899) and desktop (900+) get the normal
   max(--pad-x, (100% - --container)/2) gutter so the wall sits
   inside the content area, not the raw viewport. */
@media (min-width: 560px) {
  .section-posters {
    padding-left: max(var(--pad-x), calc((100% - var(--container)) / 2));
    padding-right: max(var(--pad-x), calc((100% - var(--container)) / 2));
  }
}

.poster-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  /* v3.15.0: tile size is a custom property so CSS (height math below)
     and JS (slot pitch) share one source of truth. Mobile default is a
     small card; the min-width:900px block at the bottom of this file
     overrides it to 400px on desktop. */
  --tile-w: clamp(180px, 52vw, 240px);
  /* v3.14.52: NO overflow: hidden on the wall.
     The tiles are absolutely positioned at the wall's center and
     translated by JS (slot-model carousel), so the wall's box never
     matches the tiles' visual positions. The body's overflow-x: hidden
     (reset.css) clips them at the viewport edge instead. */
  display: flex;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* v3.15.0: height derives from --tile-w instead of a fixed 700px.
     Peak visual tile height is 1.5 (2:3 aspect) × 1.10 (peak wave
     scale) = 1.65 × tile width; +40px clearance. On desktop this
     resolves to the same 700px as before; on phones it shrinks with
     the tiles instead of leaving a huge fixed dark box. */
  height: calc(var(--tile-w) * 1.65 + 40px);
  align-items: center;
}
.poster-wall:active {
  cursor: grabbing;
}

.poster-wall > li {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  flex: 0 0 auto;
  /* v3.15.0: width is ALWAYS var(--tile-w). JS measures it once per
     resize and never writes to it — the wave is transform-only, so the
     layout box is stable and slot math stays exact. (Before JS marks
     the wall live, the tiles render as a plain flush flex row — the
     no-JS / pre-JS fallback.) */
  width: var(--tile-w);
  transform-origin: center;
}

/* v3.15.0: once JS is running, tiles leave the flow and are parked at
   the wall's center; every frame setupCarousel() sets translateX +
   scale from a pure slot-space model (see main.js). The margin math
   centers the tile's 2:3 box on the wall's center point. */
.poster-wall.poster-wall--live > li {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--tile-w) / -2);
  margin-top: calc(var(--tile-w) * -0.75);
  will-change: transform;
}

.poster-link {
  display: block;
  position: relative;
  /* v3.14.54: keeping 2:3 aspect ratio. Tile width
     doubled (200px → 400px) so the height doubles
     proportionally to 600px. The poster-img inside
     still uses object-fit: cover so any image gets
     cropped to fit. */
  aspect-ratio: 2 / 3;
  text-decoration: none;
  color: inherit;
}

.poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* cover = every tile fills the same 2:3 frame regardless of source ratio */
  transition: transform 350ms ease;
}

.poster-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem max(0.9rem, 2.5vw) 1.6rem; /* more bottom air vs. floating chrome */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0.15) 80%,
    rgba(0, 0, 0, 0) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: none;
}

.poster-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Hover/touch/keyboard reveal — desktop mouseover and focus-within, but
   also forced-visible on touch devices (mobile) so titles are always legible. */
.poster-link:hover .poster-meta,
.poster-link:focus-visible .poster-meta,
.poster-link:focus-within .poster-meta {
  opacity: 1;
  transform: translateY(0);
}

.poster-link:hover .poster-img,
.poster-link:focus-visible .poster-img { transform: scale(1.03); }

/* ──────────────── About ──────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.about-body {
  font-size: 16px;
  line-height: 1.65;
}

.about-body p {
  margin: 0 0 14px;
}

.about-body em {
  color: var(--c-accent);
  font-style: normal;
  font-weight: 600;
}

.about-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}

.about-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-fg-muted);
}

.about-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-accent);
}

/* ──────────────── Contact ──────────────── */

.contact-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}

.contact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-fg-muted);
}

.contact-value {
  font-size: 16px;
  word-break: break-word;
  color: var(--c-fg);
  font-weight: 500;
}

.contact-value:hover {
  color: var(--c-accent);
}

/* ──────────────── Desktop layout ──────────────── */
@media (min-width: 900px) {
  /* Hero: full-bleed SVG carousel, content centered on top */
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    padding: 96px 32px 96px;
  }

  .display {
    font-size: clamp(48px, 7vw, 84px);
    max-width: 18ch;
  }

  .lede {
    font-size: 17px;
    max-width: 52ch;
  }

  /* .hero-cta desktop override removed in v3.10.14 — the buttons
     were deleted from index.html. */

  /* v3.15.0: desktop tile size. The slot-model carousel reads the
     tile width from layout (see setupCarousel in main.js), so this
     one custom property drives the whole geometry: slot pitch, wave
     falloff, wall height. Mobile keeps the clamp() default declared
     on the base .poster-wall rule. */
  .poster-wall {
    --tile-w: 400px;
  }

  /* Desktop — slightly larger poster title */
  @media (min-width: 1024px) {
    .poster-title { font-size: clamp(1rem, 1.1vw, 1.25rem); }
  }

  /* About: 2-col */
  .about-grid {
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    align-items: start;
  }

  .about-body {
    grid-column: 2;
    max-width: none;
  }

  .about-stats {
    grid-column: 2;
    max-width: 36rem;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contact list: 3-col */
  .contact-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* Touch devices: always show poster titles */
@media (hover: none) {
  .poster-meta {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: drop poster hover zoom */
@media (prefers-reduced-motion: reduce) {
  .poster-img,
  .poster-meta { transition: none; }
  .poster-link:hover .poster-img,
  .poster-link:focus-visible .poster-img { transform: none; }
}