/* ==========================================================================
   HERO VARIANTS — /hero1a/, /hero1b/, /hero2a/, /hero2b/

   Loaded only by the four hero test templates, on top of home_sept.css. Every
   class here is new (`hv-`), and the handful of overrides are all scoped to
   `.hv-hero`, so the live homepage cannot be touched by this file.

   The variant heroes keep `.hs-hero` on the section — the painting order in
   home_sept.css (`.hs > .hs-hero { z-index: 0 }`) and the scroll stack depend
   on it — and layer `.hv-hero` over the parts that differ.
   ========================================================================== */

/* ── Shared: no garden, copy runs left ──────────────────────────────────── */

/* The garden scene is gone, so the tall bottom padding that existed to stand
   the grass and bok choy in goes with it. */
/* The homepage's garden scene stands behind these heroes too, so the base
   colour is the homepage's and the bottom padding is deep enough for the bok
   choy row to stand in — .hs-garden is up to 156px tall and sits on the section
   floor, so anything shallower and the sprouts grow through the copy. Still
   well short of the homepage's own 188px: the copy runs left here, and the
   right half of that band is behind the recording rather than empty sky. */
.hs-hero.hv-hero {
  padding-block: clamp(30px, 3.2vw, 48px) clamp(104px, 10vw, 150px);
  background: #eef1fd;
}

/* Copy left, recording right, centred as a pair. The copy keeps a readable
   measure so it is never squeezed to three-word lines. The recording used to
   take everything the copy left over, which held it at ~850px from 1440px up:
   the same pixels on a laptop as on a 1920px monitor, so on the laptop it ran
   edge to edge and off the bottom of the screen (at 1536px it was wider than
   on the monitor). Sized from the viewport instead, a laptop gets the
   monitor's proportions and the slack becomes margin on both sides.

   The recording: ~650px at 1280, ~700px at 1440, 850px from about 1920 up.
   The height term keeps its bottom edge on the first screen of a short
   window, e.g. a 1080p laptop at 125% scaling, which leaves ~730px. Its 300px
   is the navbar, the Upcoming banner, the hero's top padding and the player's
   title bar and caption, plus a little air. */
.hv-hero {
  --hv-vid-w: clamp(420px, min(30vw + 270px, (100vh - 300px) * 16 / 9), 850px);
}
.hv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, clamp(430px, 34vw, 620px)) minmax(0, var(--hv-vid-w));
  justify-content: center;
  gap: clamp(24px, 2.6vw, 40px);
  align-items: center;
}

/* Stacks at 1100, not 940. Between those two widths there is not enough room to
   give the copy a readable measure AND the recording a watchable one, and side
   by side both lose. Stacked, the video keeps a ceiling rather than taking the
   full width: at 1024px that was a 960px player filling the screen below the
   copy. Left-aligned, under the left-aligned copy. */
@media (max-width: 1100px) {
  .hv-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hv-hero .hv-vid { max-width: 720px; }
}
/* Past the site's 1200px measure: room for both columns at their ceilings
   (620 + 40 + 850) plus the gutters. Below that the viewport caps it. */
@media (min-width: 1101px) {
  .hv-hero .hs-wrap { max-width: 1560px; }
}

.hv-hero__copy {
  display: grid;
  gap: 17px;
  justify-items: start;
  text-align: left;
}

/* home_sept.css centres the homepage hero. Same specificity, later file. */
/* Sized to the 520px column: at the old 50px cap the headline broke into four
   short lines and read as a list rather than a sentence. It reaches 46px at
   1920 rather than 1440, so on a laptop it shrinks with the recording beside
   it: ~35px at 1280, ~38px at 1440. */
.hv-hero .hs-display {
  font-size: clamp(30px, 13px + 1.72vw, 46px);
  max-width: 18ch;
  margin-inline: 0;
  text-wrap: balance;
}
/* Same idea for the lead: 19px at 1920, ~17px at 1440 and below. */
.hv-hero .hs-lead {
  font-size: clamp(17px, 12px + 0.37vw, 19px);
  max-width: 46ch;
}
.hv-hero .ch-btn-row { justify-content: flex-start; }
@media (max-width: 1100px) {
  .hv-hero .hs-display { max-width: 20ch; }
}

/* ── Hero 1 · rewards: the stat row ─────────────────────────────────────── */

.hv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 2.6vw, 34px);
  align-items: flex-start;
}
.hv-stat { display: grid; gap: 2px; }
.hv-stat b {
  font-family: var(--FontHeadingLg);   /* Poppins Bold, as .hs-display */
  font-weight: normal;
  font-size: 27px;
  line-height: 1.1;
  color: var(--ch-primary);
}
.hv-stat span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ch-muted);
  max-width: 15ch;
}

/* ── Hero 2 · AI builder: the recording ─────────────────────────────────── */

/* Same browser chrome as the portal recording further down the page, in light
   trim because this hero sits on the pale wash rather than the dark band. */
.hv-vid { margin: 0; }
.hv-vid__frame {
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ch-line);
  background: #fff;
  box-shadow: 0 26px 60px rgba(30, 36, 51, 0.16);
}
.hv-vid__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--ch-line);
  background: #f5f7fe;
}
.hv-vid__bar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(80, 95, 171, 0.22);
}
.hv-vid__bar em {
  margin-left: 10px; font-style: normal; font-size: 12.5px;
  color: var(--ch-muted);
}
/* preload="none": nothing is fetched until play is pressed, so the video has no
   intrinsic size to offer — the stage holds the box. 16/9 is the source. */
.hv-vid__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #10163a;
}
.hv-vid__stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #10163a;
}

/* The cover. Stands in for the poster frame the file cannot give us while it is
   unfetched, and says what pressing it will cost in time. */
.hv-vid__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  border: 0;
  cursor: pointer;
  font-family: var(--fontFamily);
  background:
    radial-gradient(56% 70% at 50% 34%, rgba(156, 107, 255, 0.34) 0%, rgba(156, 107, 255, 0) 70%),
    linear-gradient(142deg, #2c3566 0%, #3d4a90 52%, #5262af 100%);
}
.hv-vid__cover[hidden] { display: none; }
.hv-vid__cover img {
  width: clamp(54px, 7vw, 78px);
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(8, 12, 30, 0.45));
}
.hv-vid__play {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--ch-primary);
  box-shadow: 0 10px 26px rgba(8, 12, 30, 0.35);
  transition: transform 220ms ease;
}
.hv-vid__play svg { width: 26px; height: 26px; margin-left: 3px; }
.hv-vid__cover:hover .hv-vid__play,
.hv-vid__cover:focus-visible .hv-vid__play { transform: scale(1.08); }
.hv-vid__label {
  font-size: 14px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hv-vid__label em {
  font-style: normal;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: var(--ch-radius-pill);
  background: rgba(255, 255, 255, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .hv-vid__play { transition: none; }
}
.hv-vid figcaption { margin-top: 12px; }