/* ============================================================
   HomepageHero — Homepage hero section
   Design tokens from src/styles/tokens.css.
   ============================================================ */

/* ---- Outer section ---- */
.homepage-hero {
  position:         relative;
  z-index:          150;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding-top:      8rem;      /* 128px — matches Figma pt-[128px] */
  width:            100%;
  font-family:      var(--font-family-default);
  background:       linear-gradient(180deg, var(--background) 0%, var(--secondary) 100%);
  box-sizing:       border-box;
}

/* ---- Inner container — heading + player stacked ---- */
.homepage-hero .container {
  display:        flex;
  flex-direction: column;
  gap:            6rem;        /* 96px — between heading block and player */
}

@media (max-width: 991px) {
  .homepage-hero .container {
    gap: 6rem;                 /* 96px */
  }
}

@media (max-width: 767px) {
  .homepage-hero .container {
    gap: 2rem;               /* 32px */
  }
}


/* ============================================================
   Heading block
   ============================================================ */

.homepage-hero__heading {
  display:        flex;
  flex-direction: column;
  gap:            4rem;        /* 64px — between H1 and intro row */
  width:          100%;
}


/* ---- Intro grid — body+badges left column, actions right ---- */

.homepage-hero__intro {
  display:               grid;
  grid-template-areas:
    "body    actions"
    "badges  actions";
  grid-template-columns: 1fr auto;
  column-gap:            2.25rem;   /* 36px */
  row-gap:               2rem;      /* 32px */
  align-items:           start;
  width:                 100%;
}

.homepage-hero__body {
  grid-area:   body;
  max-width:   46.875rem;      /* 800px */
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.homepage-hero__actions {
  grid-area:   actions;
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--spacing-3);
  align-items: flex-start;
}

.homepage-hero__secondary-cta {
  display: grid;
  gap:     10px;
}

.homepage-hero__secondary-note {
  margin:       0;
  text-align:   center;
  font-size:    var(--font-size-xs);
  line-height:  var(--line-height-xs);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
}

.homepage-hero__badges {
  grid-area: badges;
  max-width: 46.875rem;   /* match body text max-width so badges row aligns */
}

@media (max-width: 991px) {
  .homepage-hero__intro {
    display:        flex;
    flex-direction: column;
    gap:            2.25rem;
  }

  .homepage-hero__body {
    max-width: 100%;
  }

  .homepage-hero__badges {
    margin-top: calc(2rem - 2.25rem);   /* net gap from actions = 2rem */
  }
}

@media (max-width: 520px) {
  .homepage-hero__badges {
    /* Bleed the G2BadgeRow strip past the container padding */
    margin-left:  -2rem;
    margin-right: -2rem;
  }
}


/* ============================================================
   Built-in player — sits above the skyline illustration
   ============================================================ */

.homepage-hero__player {
  position: relative;
  z-index:  1;
  width:    100%;
}




/* ============================================================
   Bottom decoration image — absolutely positioned, takes no space
   Fixed 1512×126px, centered horizontally
   ============================================================ */

.homepage-hero__decoration {
  position:         absolute;
  bottom:           0;
  left:             50%;
  transform:        translateX(-50%);
  width:            1512px;
  max-width:        none;
  height:           126px;
  pointer-events:   none;
  z-index:          0;
  mask-image:       linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}


/* ============================================================
   No-player fallback — collapse the container gap and add space
   so the illustration is visible:
   64px gap + 126px illustration height = 190px bottom padding
   ============================================================ */

.homepage-hero--no-player {
  padding-bottom: 190px;
}

.homepage-hero--no-player .container {
  gap: 0;
}


/* ============================================================
   Side-by-side layout variant — `layout="side-by-side"`

   Figma: file TQRYxDeQhrpyaPztHCWi8f, node 274:10045 ("Hero ALT2").
   Row: heading 496 | 32 gap | player 596 = 1124px, which is 100px WIDER than
   the 1024px container. Figma keeps the heading flush with the container's
   left gutter (x=244 @1512, where every section below starts) and lets the
   player bleed right to 1368.

   That bleed uses the project's standard **escape-the-container grid** —
   the same technique as VrHeroSection / AirHeroSection / HybridHeroSection.
   See docs/escape-the-container-grid.md for the full pattern and why a
   negative margin or an overflowing flex row is not an acceptable substitute.

   Everything here is CSS. The markup is byte-identical in both layouts —
   only `data-layout` on the section changes — so no text node is added,
   removed, reordered, or re-parented, and A/B tooling bound to these nodes
   keeps matching in either layout.
   ============================================================ */

/* ---- <992px fallback ----
   This variant passes `size="m"` to DemoPlayer at every width (see
   HomepageHero.tsx — the size must be decided at render time or the server
   emits the L player and the browser flashes it before hydration). Below 992px
   the row falls back to stacking, and there the M card is styled to read the
   way the L player used to: full container width, square bottom corners, and
   sitting flush on the skyline with no reserved bottom padding.

   So the floating-card treatment (rounded bottom, reserved padding) lives in
   the >=992px block, NOT here.

   The card keeps DemoPlayerM's own 596px cap at every width — it is not
   stretched to fill the container. Centre it so the capped card does not sit
   orphaned against the container's left edge. A no-op at >=992, where the grid
   column is already <=596. */

.homepage-hero[data-layout="side-by-side"] .demo-player-frame {
  margin-inline: auto;
}


/* ---- Live-demo CTA (Figma node 274:11684) — ALL breakpoints ----
   The CTA restyle belongs to the variant, not to the desktop layout, so it sits
   outside the media query: it drops the 16px outer padding (the box is inset
   only by the card's own 12px), tightens copy->button to 16px, drops the copy
   to 14/20 from 20/28, and bolds the lead sentence onto its own line. The
   bordered box itself already matches Figma (24px padding, 16px radius,
   --secondary, 0.5px --border), as does the `lg` Button (14px, 10px/24px, 40px).

   The `__lead`/`__rest` spans are present in every layout (see HomepageHero.tsx)
   and inline by default, so the stacked layout still reads as one continuous
   sentence — only this variant breaks and boldens them. */
.homepage-hero[data-layout="side-by-side"] .demo-player-live-cta {
  padding: 0 var(--spacing-3) var(--spacing-3);   /* 0 12px 12px */
}

.homepage-hero[data-layout="side-by-side"] .demo-player-live-cta__inner {
  gap: var(--spacing-4);   /* 16px — Figma; DemoPlayer default is 24px */
}

.homepage-hero[data-layout="side-by-side"] .demo-player-live-cta__text {
  font-size:   var(--font-size-sm);     /* 14px — default is 20px */
  line-height: var(--line-height-sm);   /* 20px — default is 28px */
}

.homepage-hero[data-layout="side-by-side"] .demo-player-live-cta__lead {
  display:     block;
  font-weight: var(--font-weight-bold);
}


@media (min-width: 992px) {
  .homepage-hero[data-layout="side-by-side"] {
    /* The skyline decoration is pinned to the section bottom and is 126px tall.
       Stacked puts the player flush on top of it; in the two-column layout the
       content column runs far lower, so reserve the decoration's height plus
       Figma's 19px clearance (skyline top 571 vs content bottom 552) so the
       CTAs never land on it. */
    padding-bottom: 160px;
  }

  /* Here the player is a free-floating rounded card, not flush against the
     decoration, so undo the flatBottom the stacked layout needs. Done in CSS so
     the `flatBottom` prop — and the markup — stay identical in both layouts. */
  .homepage-hero[data-layout="side-by-side"] .demo-player-frame[data-flat-bottom] {
    border-bottom-left-radius:  var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }

  /* The existing `.container` div is re-cast as the wide wrapper + grid, so the
     variant stays CSS-only. 1480/48px are `.container-wide`'s own values.

     Track 1 is the collapsing gutter: `(100% - 1024px) / 2 - 32px` is exactly
     the distance from the wide container's edge to the standard container's
     edge (minus the 32px spacer), so track 3 starts at x=244 @1512 — aligned
     with every `.container` section on the page. As the viewport narrows the
     clamp drives it to 0px and the row reclaims that space instead of
     overflowing. Tracks 3/5 are `minmax(0, …)` so once the gutter is spent
     they shrink instead of pushing the page into horizontal scroll. */
  .homepage-hero[data-layout="side-by-side"] .container {
    display:               grid;
    grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px)
                           32px
                           minmax(0, 496px)
                           32px
                           minmax(0, 596px)
                           1fr;
    align-items:           start;   /* Figma tops both columns at y=0 */
    gap:                   0;
    max-width:             calc(1384px + 96px);   /* 1480 — .container-wide */
    padding:               0 3rem;                /* 48px — .container-wide */
  }

  .homepage-hero[data-layout="side-by-side"] .homepage-hero__heading {
    grid-column: 3;
    /* Paint above the decoration, a later sibling at z-index 0. */
    position:    relative;
    z-index:     1;
    gap:         2rem;   /* 32px — H1 to intro (Figma 191 - 159); stacked uses 4rem */
  }

  .homepage-hero[data-layout="side-by-side"] .homepage-hero__player {
    grid-column: 5;
    min-width:   0;      /* <=596px also makes DemoPlayer's own ResizeObserver
                            render it at size "m" */
  }

  /* Intro drops the stacked grid (body+badges | actions) for a single column,
     body -> badges -> actions. Per-child margins carry the rhythm because
     Figma's three vertical gaps are not uniform. */
  .homepage-hero[data-layout="side-by-side"] .homepage-hero__intro {
    display:        flex;
    flex-direction: column;
    gap:            0;
  }

  .homepage-hero[data-layout="side-by-side"] .homepage-hero__body {
    order:     1;
    max-width: none;
  }

  .homepage-hero[data-layout="side-by-side"] .homepage-hero__badges {
    order:      2;
    max-width:  none;
    margin-top: 2rem;    /* 32px — body to medal row (Figma 116 - 84) */
  }

  /* Figma's medal row is 420px — six 60px badges + five 12px gaps, NOT
     stretched to the column width. Overrides the primitive's count-derived
     115px-per-badge cap, which would let them grow to ~69px in this column. */
  .homepage-hero[data-layout="side-by-side"] .g2-badge-row {
    max-width: 420px;
  }

  /* No hairline above the medal row in this frame — the 32px gap does that job.
     Hidden rather than removed so the DOM matches the stacked layout exactly;
     display:none also collapses .g2-badge-row's own 2rem divider->badges gap. */
  .homepage-hero[data-layout="side-by-side"] .g2-badge-row__divider {
    display: none;
  }

  .homepage-hero[data-layout="side-by-side"] .homepage-hero__actions {
    order:      3;
    margin-top: 2.25rem;   /* 36px — medal row to buttons (Figma 221.17 - 185.17) */
  }

  /* ---- Player card: 520px including the live-demo CTA ----
     Figma "Demo player V3" = 12 pad + 398 body + 10 + 88 CTA + 12 = 520.
     Pin the card and let the body take whatever the CTA leaves, rather than
     hard-coding a body height that would drift the moment the CTA copy
     rewraps. The M transcript pane already scrolls, so it absorbs the change.
     Scoped here only — DemoPlayerM's 474px default is right everywhere else,
     including this hero's own stacked layout. */
  .homepage-hero[data-layout="side-by-side"] .demo-player-frame {
    display:        flex;
    flex-direction: column;
    height:         520px;
  }

  .homepage-hero[data-layout="side-by-side"] .demo-player[data-size="m"] {
    height:     auto;
    flex:       1 1 auto;
    min-height: 0;
  }
}


/* ============================================================
   Mobile — landscape/tablet (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .homepage-hero {
    padding-top: 5rem;         /* 80px */
  }

  .homepage-hero__heading {
    gap:            2rem;    /* 32px */
    padding-bottom: 2rem;      /* 32px */
  }

  .homepage-hero__actions {
    flex-direction: column;
  }

  .homepage-hero__secondary-note {
    padding-left: 1.5rem;
    text-align:   left;
  }
}


/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .homepage-hero {
    padding-top: 4rem;         /* 64px */
  }

}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   G2BadgeRow — Horizontal row of G2 badge images.
   Desktop: static flex row.
   Mobile (≤520px): infinite auto-scroll strip with touch drag,
   driven by JS in G2BadgeRow.tsx.
   ============================================================ */

.g2-badge-row {
  display:        flex;
  flex-direction: column;
  gap:            2rem;   /* divider → badges */
  /* Count-derived cap (set inline in G2BadgeRow.tsx) so no badge exceeds 115px. */
  max-width:      var(--g2-row-max-width, none);
}

.g2-badge-row__divider {
  width:      100%;
  border-top: 1px solid var(--divider);
}

.g2-badge-row__strip {
  mix-blend-mode: multiply;
}

.g2-badge-row__track {
  display:     flex;
  gap:         var(--spacing-3);   /* 12px */
  align-items: center;
  flex-wrap:   nowrap;
}

.g2-badge-row__clone {
  display: none;
}

.g2-badge-row__badge {
  flex:      1 1 60px;
  min-width: 0;
  height:    auto;
}


/* ============================================================
   Mobile scroll strip (≤520px)
   STANDARD: when the row becomes a scroll strip it MUST run full-bleed
   (edge-to-edge, full viewport width) — same as HomepageHero. The primitive
   can't know the caller's padding, so every consumer is responsible for the
   bleed: add negative margins equal to the container's horizontal padding on
   the wrapper around <G2BadgeRow> at ≤520px (e.g. HomepageHero & AirHeroSection
   use `margin: 0 -2rem`). See docs/conventions.md.
   ============================================================ */

@media (max-width: 520px) {
  /* Drop the badge-width cap so the marquee strip stays full-bleed. */
  .g2-badge-row {
    max-width: none;
  }

  .g2-badge-row__strip {
    overflow: hidden;
  }

  .g2-badge-row__track {
    gap:         0;
    will-change: transform;
  }

  /* Each badge owns its trailing gap — both halves equal width → seamless loop */
  .g2-badge-row__badge {
    flex:         none;
    width:        60px;
    margin-right: var(--spacing-3);   /* 12px — must match SET_WIDTH calc in G2BadgeRow.tsx */
  }

  .g2-badge-row__clone {
    display: contents;
  }
}