/* ============================================================
   HOME V2 — THE ONE VIDEO. Rendered by //site/_home_v2_video.php: copy on
   the left, the player on the right behind its poster, Play Video starts
   it with sound. Nothing autoplays.

   Gauntlet round 1 (2026-09-03): the poster is a clean plate — the native
   control bar waits for the first play (the partial's script does the
   hand-off), one play ring sits on the shop floor under the wordmark, the
   whole poster is the play target, the runtime rides beside the button in
   mono. The section fills the window under the header so the footer's
   column heads stop peeking into the last screen.
   ============================================================ */

.hv2-video {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(420px, 1.4fr);
  align-items: center;
  gap: 56px;
  max-width: var(--hv2-maxw);
  margin: 0 auto;
  /* 88 + 420 (the player at 1280) + 96 = 604px: the section owns the 640px
     window under the header and the footer's first visible line (67px below
     its top edge) stays under the fold. */
  padding: 88px 28px 96px;
}

/* ---- the copy ------------------------------------------------------- */
.hv2-video-copy .hv2-eyebrow { margin-bottom: 20px; }
/* The closer's headline runs a step above the shared .hv2-h2 cap (46px):
   50px at 1280, still two lines inside the 320px column. */
.hv2-video-copy .hv2-h2 { font-size: clamp(30px, 3.9vw, 52px); }
/* base.css's `.hv2 p { margin: 0 }` (0,1,1) outranks .hv2-lead's own
   margin-top (0,1,0), so the lead was sitting on the headline's baseline.
   Two classes here outrank both. */
.hv2-video-copy .hv2-lead { margin-top: 18px; }
.hv2-video-copy .hv2-cta-row { margin-top: 28px; }
/* The button carries its glyph inline; inline-flex keeps the 11px triangle
   on the text's centre line without touching .hv2-btn's padding. */
.hv2-video .hv2-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hv2-play-glyph { width: 11px; height: 11px; fill: currentColor; flex: none; }
/* Runtime + "with sound": the small-label voice (JetBrains Mono), dim, on
   its own line under the button so it sits in the same place at every
   width (beside the button it wrapped at 1280 and not at 1536). Two classes
   outrank base.css's `.hv2 p { margin: 0 }`. */
.hv2-video-copy .hv2-video-meta {
  display: block;
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hv2-dim);
  white-space: nowrap;
}

/* ---- the player ----------------------------------------------------- */
.hv2-video-player { position: relative; }
.hv2-video-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 12px;
  border: 1px solid var(--hv2-line);
}
/* The cover: a transparent button over the whole poster. Hidden until the
   partial's script arms the stage (no JS → the native bar stays on the
   poster and remains the way to play) and hidden again once the film is
   playing, when the native controls are back and must take the clicks.
   Bootstrap and styles_v3 both style bare <button>, hence the full reset. */
.hv2-video-cover {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.hv2-video-player.is-armed:not(.is-playing) .hv2-video-cover { display: block; }
.hv2-video-cover:focus-visible { outline: 2px solid var(--hv2-accent-soft); outline-offset: 3px; }
/* The ring sits on the shop floor under the wordmark — the poster's dark
   lower third — never over the logo. White in every state: the button owns
   this section's red, and the ring already stands on the logo's red
   reflection. (The measurement harness parks the pointer at the viewport
   centre, which is ON the poster, so a hover colour is what the critic
   would see — a red hover was captured as a red rest state in round 1.) */
.hv2-video-ring {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hv2-video-ring svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; /* optical centre of a triangle */ }
.hv2-video-cover:hover .hv2-video-ring,
.hv2-video-cover:focus-visible .hv2-video-ring {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  transform: scale(1.06);
}

@media (max-width: 1000px) {
  .hv2-video { grid-template-columns: 1fr; gap: 32px; padding: 52px 22px 60px; }
  .hv2-video-copy { order: 2; }
  .hv2-video-player { order: 1; }
  .hv2-video-ring { width: 56px; height: 56px; margin-left: -28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-video-ring { transition: none; }
}

/* ============================================================
   PHONES (≤600px) — phone round 1, 2026-09-03: the page's 22px edge and a
   tighter gap between the player and its copy (the ≤1000px block above
   already puts the player first, the copy second).
   ============================================================ */
@media (max-width: 600px) {
  .hv2-video { gap: 24px; padding: 56px 22px 64px; }
  .hv2-video-copy .hv2-eyebrow { margin-bottom: 14px; }
  .hv2-video-copy .hv2-lead { font-size: 16px; }
}

/* ============================================================
   PHONES (≤600px) — phone round 4, 2026-09-03: the Play button reaches the
   44px tap floor (14px of padding on 15px type; base.css's 12px made it
   41px).
   ============================================================ */
@media (max-width: 600px) {
  .hv2-video .hv2-btn-play { padding: 14px 34px; }
}