/* ---------- production-design.html ----------
   Standalone, unlisted page (same convention as kuma-studio.html/
   social-grid.html — not linked from the main nav, reachable only via a
   direct link or the floating "Production" footer cloud added to every
   page's shared footer, see .footer-cloud-production in style.css).
   Shares .site-header/.site-footer and the --cream/--ink/--pink tokens
   from style.css; this file only covers what's specific to this page.

   2026-09-03 (Chloe, against Production Design Layout.png): rebuilt
   from a simple "all 4 projects stacked, masonry grid each" page into a
   two-section layout — a hero (title over a 3x2 grid of real stills),
   then a single-project-at-a-time viewer (scrolling thumbnail grid +
   one featured image + prev/next paging between projects). See
   js/production-design.js for the render/interaction logic.

   2026-09-03, same day: both sections made full-screen with scroll-snap
   between them (Chloe's call: "locks the user into a full screen
   project viewing experience" — scroll-snap, not real scroll-hijacking,
   since every other scroll effect on this site stays reversible and
   never intercepts the user's own scroll input, see main.js's Clear
   Skies/Social Media comments). scroll-snap-type lives on html, not
   .pd-main, since the page itself is the scroll container (nothing here
   scrolls in its own overflow box) — this file is only loaded on this
   one page, so there's no risk of it leaking elsewhere. */

html {
  scroll-snap-type: y mandatory;
}

/* Without its own snap-align, the footer is just "trailing content"
   past the last defined snap point (.pd-viewer) — confirmed via testing
   that this makes mandatory snapping actively fight scrolling into it
   (a forced scrollTop jump toward the document's end settled well
   short, at ~528px, not near the actual end), which would make the
   footer's contact/social links genuinely hard to reach with real
   scroll input too, not just a testing artifact. Giving it its own
   start-aligned snap zone turns it into a proper third destination
   instead of an ambiguous tail end. */
.production-design-page .site-footer {
  scroll-snap-align: start;
}

.pd-back {
  position: fixed;
  top: 1.5rem;
  left: var(--edge);
  z-index: 10;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.7;
}

.pd-back:hover { opacity: 1; }

.pd-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--edge);
}

/* ---------- Hero ---------- */

/* height:100vh (not min-height) — this section's content (the 3x2 grid
   + title) is fixed/bounded and meant to fill exactly one screen on
   arrival, not grow taller than the viewport.
   --p (0-1, set by js/production-design.js's scroll-scrubbed handler)
   drives the "scroll away" fade + scale-down as the user scrolls from
   here into .pd-viewer — defaults to 0 (fully visible, full size) if
   the custom property is never set, e.g. under prefers-reduced-motion,
   where the JS deliberately skips wiring up the scroll listener. */
.pd-hero {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: calc(1 - var(--p, 0));
  transform: scale(calc(1 - 0.08 * var(--p, 0)));
  will-change: opacity, transform;
}

/* Width is set inline by js/production-design.js to match
   .pd-hero-title's own measured rendered width exactly (Chloe's call:
   the grid's outer edge should line up with the title text's edge) —
   this min(90vw,50rem) is only the fallback shown before that
   measurement runs (and if JS fails). Measuring at runtime rather than
   hand-tuning a fixed width in CSS also means it stays correct once
   deployed even though it can't be visually verified locally right now
   (Widescreen Ex is domain-locked, see the Adobe Fonts comment in
   index.html's <head> — the title renders in a fallback font of a
   different width here than it will on the real domain, and measuring
   live sidesteps that entirely instead of baking in a number tuned
   against the wrong font).
   grid-template-columns is even fractions now, not a fixed minmax —
   with an externally-driven container width, the tiles just need to
   divide it evenly; aspect-ratio (below) sets each tile's own height
   instead of the old fixed-row-height approach. */
.pd-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  position: relative;
  width: min(90vw, 50rem);
}

.pd-hero-tile {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Absolutely positioned + centered against .pd-hero-grid's own rendered
   box (that's what its position:relative above is for), rather than
   placed as a grid item spanning both rows — a spanning grid item
   sounds like the more "correct" grid-native approach, but the 6 tiles'
   height:100% inside minmax() row tracks makes each row's own auto-size
   indeterminate (percentage heights are treated as 0/auto during grid
   track-sizing to avoid a circular dependency), so align-self:center
   was centering the title against a collapsed/wrong height — confirmed
   via getBoundingClientRect at 5 widths, title landed 67-148px above
   the grid's actual visual center every time, not a close call.
   Absolute positioning against the container's real rendered
   dimensions sidesteps that circularity entirely.

   Stays auto-width/hugging its own text (not 100% of the grid) — the
   JS hero-grid-width sync measures THIS element's own rendered width to
   size the grid, so making it 100% of the grid would be circular
   (title.width would always just equal whatever the grid's width
   already was, never actually driving it from the text's own size). The
   fix for the "lines" below uses a separate full-bleed ::before instead
   of widening this element itself, specifically to keep that
   measurement independent. */
.pd-hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  padding: 0.15em 0.3em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 6vw, 4rem);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* The actual visible cream background — full-bleed via the same
   100vw/-50vw breakout trick used elsewhere on the site (e.g.
   .package-cloud, .video-grid), rather than on .pd-hero-title itself
   (see that rule's comment for why). z-index:-1 is scoped to the
   stacking context .pd-hero-title's own position+z-index establishes,
   so this renders behind the title's text but still above the grid's
   tiles, not behind everything on the page.
   2026-09-03 (Chloe): flagged "lines going down from the corners of the
   hero images towards the header" — confirmed via
   document.elementsFromPoint that nothing at that position had a
   border/outline; it was .pd-hero-grid's own column gaps reading as
   bare vertical channels wherever no tile covers them, most visible
   running straight through this row since the title used to only have
   a background the width of its own text. This bar spans the full
   width instead, blocking those channels at the header rather than
   letting them show through it. */
.pd-hero-title::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--cream);
  z-index: -1;
}

/* ---------- Project viewer ---------- */

/* min-height, not height — a project's content can legitimately exceed
   one screen (e.g. the mobile breakpoint below stacks the grid and
   feature image instead of sitting side by side), and min-height still
   satisfies "full screen on arrival" for the common case without
   clipping anything on shorter viewports. */
.pd-viewer {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0;
}

.pd-project-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

/* The project's medium (Short Film / Music Video / Documentary) —
   quieter than the title, same idea as .package-tier's eyebrow-style
   label on the homepage's Packages cards. */
.pd-project-type {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* 2026-09-03, later same day: replaced the scrolling thumbnail grid +
   separate feature panel with a peek carousel (Chloe's call) — one
   photo in full view, a partial slice of the previous/next photo
   showing at each edge as a direct "click to go there" control. Fully
   circular in both directions (a project's own photos loop start<->end;
   this is separate from and doesn't touch the project-to-project
   prev/next below, which stays one-way — see js/production-design.js). */
.pd-carousel {
  display: flex;
  align-items: stretch;
  gap: clamp(0.5rem, 2vw, 1rem);
  height: min(34rem, 60vh);
}

.pd-carousel-peek {
  flex: 0 0 clamp(3rem, 8vw, 7rem);
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--ink);
  border-radius: 0.2rem;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.pd-carousel-peek:hover,
.pd-carousel-peek:focus-visible {
  opacity: 0.85;
}

/* Peeks are a deliberately partial teaser, not the actual display
   image, so cropping them (object-fit:cover) is fine — unlike
   .pd-carousel-current below, which is the real display image and
   never crops (same principle as case-study.css's .cs-photo-frame:
   object-fit:contain on a solid-color field, letterboxing whatever
   doesn't fill the box rather than cutting the composition). */
.pd-carousel-peek img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-carousel-current {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ink);
  border-radius: 0.2rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-carousel-current img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-project-nav {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}

.pd-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1rem;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.pd-nav-btn:hover { opacity: 1; }

.pd-nav-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Works whether or not .pd-nav-prev is present/hidden — pushes next to
   the far right either way, so .pd-project-nav doesn't need its own
   justify-content:space-between + separate "only one child" handling. */
.pd-nav-next {
  margin-left: auto;
}

@media (max-width: 760px) {
  .pd-hero-grid {
    gap: 0.6rem;
  }

  .pd-carousel {
    height: min(24rem, 55vh);
  }
}