/* ===========================================================================
   v2 hero — 50/50 split, product visual right.
   =========================================================================== */

/* hero.php requires the LIVE partials/dashboard-mockup.php rather than a copy,
   so the mockup on v2 can never drift from the one on `/`. The legacy token
   names its stylesheet expects (--hero-*, --bloom-*, --space-*, --radius-lg)
   are bridged once in sections.css rather than here, so there is a single
   place to look when a reused component needs a name v2 doesn't define. The
   mockup's own --dm-* palette is self-declared on .dm-window and needs
   nothing. */
.v2 .hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-8);
  /* Contains the mockup's right-side bleed on narrow screens without turning
     the page into a scroll container — see the note on body overflow in
     base.css. */
  overflow-x: clip;
}

.v2 .hero-grid {
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`. An auto-sized track grows to fit
     its widest item, and below the split breakpoint that item is the mockup,
     deliberately set to 145vw so it can bleed off the right edge. The track
     therefore stretched to the mockup's width and took the copy column with
     it: at a 390px viewport the headline and body text were laid out 542px
     wide and ran 176px off-screen, where `overflow-x: clip` below silently
     cut them off. The 0 floor is the load-bearing part — a plain 1fr has an
     auto minimum and behaves the same way. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 980px) {
  .v2 .hero-grid {
    /* The reference puts the product shot at 50%+ of viewport width. Slightly
       favouring the visual reads better than a literal 50/50, because the copy
       column is text-capped by max-width anyway. */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--s-5);
  }
}

/* ===== Copy column ===== */
.v2 .hero-copy { max-width: 620px; }

.v2 .hero-title { margin-bottom: var(--s-3); }

.v2 .hero-sub {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: var(--s-4);
  text-wrap: pretty;
}

.v2 .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.v2 .hero-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== Visual column ===== */
.v2 .hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Fill the column rather than sitting at the mockup's own content width.
   .dm-window-wrap is a plain block, so as a flex item it defaults to
   `flex: 0 1 auto` and sized itself to its content — which pinned the window
   to ~473px at every desktop width, from 980px all the way to 1920px, and
   meant the deliberate 0.92fr/1.08fr split above changed only where the mockup
   sat, never how big it was. Filling the column is also what makes the window
   land in landscape proportions, which is how the real admin actually looks. */
@media (min-width: 980px) {
  .v2 .hero-visual .dm-window-wrap { width: 100%; }
}

/* Radial glow behind the product shot, per the reference: "hero glow uses a
   radial gradient overlay, not a box-shadow". The mockup brings its own corner
   blooms; this is the broader field they sit in. */
.v2 .hero-visual::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(
    closest-side,
    rgba(108, 192, 255, 0.16),
    rgba(221, 120, 103, 0.10) 55%,
    transparent 78%
  );
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.v2 .hero-visual > * { position: relative; z-index: 1; }

/* --- Narrow screens ---
   Below the split breakpoint the mockup keeps near-desktop width and bleeds off
   the right edge rather than being shrunk to fit. Shrinking it to a phone width
   turns nine legible stat cards into an unreadable smudge; cropping keeps what
   is visible at full fidelity.

   Width is viewport-proportional, not a fixed pixel value: a fixed width made
   the visible *fraction* of the mockup swing between phone sizes, so the hero
   recomposed itself device to device. */
@media (max-width: 979px) {
  .v2 .hero-visual {
    justify-content: flex-start;
    margin-right: calc(var(--s-3) * -1);
  }
  .v2 .hero-visual .dm-window-wrap {
    width: clamp(500px, 145vw, 660px);
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .hero-visual::before { filter: none; }
}