/* ==================================================================
   monthly-content-production — page-specific overrides

   Filename kept as "monthly-v2" from when this hero treatment was a draft
   (2026-09-11); it's the live Monthly page now (promoted 2026-09-21).
   Loaded only by this page, the only place body.v2-hero-selector exists.
   Everything below is scoped under that class so none of it can reach
   the archived monthly-content-production-legacy-phone-hero/ page, or
   anywhere else .hcar / .hsel are used - same discipline as sprint.css's
   own header comment ("nothing here can affect the Production
   Partnership page").
   ================================================================== */

/* The selector (.hcar, built by hero-carousel.js) used to share its row
   with the phone mock-up and size itself off the viewport width
   (--hcar-h: clamp(320px, 34vw, 480px)). hero-selector-only.js removes
   the phone; alone in the hero's split right column, the selector
   should size off THAT column's width instead of the viewport's -
   width-driven, not height-driven. */
.v2-hero-selector .hcar { width: 100%; margin-top: 0; }
.v2-hero-selector .hcar__stage,
.v2-hero-selector .hcar__viewport,
.v2-hero-selector .hcar__slide { width: 100%; max-width: 100%; }
/* Only one child left in the slide (the collage figure) once the phone
   and the "click here" note are gone - let it fill the column instead
   of sizing to its own intrinsic width. */
.v2-hero-selector .hcar__slide { grid-template-columns: minmax(0, 1fr); }
.v2-hero-selector .hcar__bts--sel { width: 100%; height: auto; }

/* Reserve room for a lifted panel to escape the frame (it scales past
   its own edge on hover/preview) without the page gaining a scrollbar.
   The live page ties this to --hcar-h; here the frame is width-driven,
   so a proportion of its own width is the simpler equivalent. */
.v2-hero-selector .hcar { padding-top: 3%; padding-bottom: 4%; }

@media (max-width: 900px) {
  .v2-hero-selector .hcar { padding-top: 3vw; padding-bottom: 4vw; }
}

/* ---- play cue: removed ----
   Trevor, 2026-09-13: "remove the play button completely. People can
   still play by selecting, but I don't like the orange play button."
   The cue was a ::before on .hsel--hero, positioned per picked panel via
   :has() + :nth-child (V2 to V7, 2026-09-11; that history is in
   ALTERNATES-monthly-v2.md next to this file). A panel click still
   commits the campaign and opens the lightbox exactly as before; the
   hover scale and monochrome remain the affordance. */
.v2-hero-selector .hsel--hero::before { content: none; display: none; }

/* ---- the lift ----
   style.css's own scale (1.2 preview / 1.12 committed) stands: Trevor
   wants the original lift (2026-09-13). What this page adds is room for
   it: the lifted panel grows past the frame on every side, so the stage
   keeps a margin proportional to the collage and never clips or
   overlaps the copy column. */
.v2-hero-selector .hcar { padding: 5% 6% 6%; overflow: visible; }

/* ---- the lifted panel stays on top until it has landed ----
   style.css drops a panel's z-index the instant it loses .is-preview,
   while its 460ms shrink is still running: for that half-second an
   enlarged, still-monochrome panel sits UNDER its neighbours' edges and
   reads as tucked into them (Trevor, 2026-09-13, on the rotation every
   five seconds). Here the z-index only drops once the shrink has
   finished, and a newly lifted panel goes one step higher so it always
   wins the seam while the previous one is still on its way down. */
.v2-hero-selector .hsel__panel {
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 460ms ease, z-index 0s linear 460ms;
}
.v2-hero-selector .hsel__panel.is-preview,
.v2-hero-selector .hsel__panel.is-committed {
  z-index: 11;
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 460ms ease, z-index 0s;
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-selector .hsel__panel, .v2-hero-selector .hsel__panel.is-preview, .v2-hero-selector .hsel__panel.is-committed { transition: filter 140ms linear; }
}
.v2-hero-selector .hcar__stage, .v2-hero-selector .hcar__viewport, .v2-hero-selector .hcar__slide, .v2-hero-selector .hcar__bts--sel { overflow: visible; }