/* ============================================================
   AirHeroSection — Hero for the AIR product page

   Layout: 6-column grid inside a wide-container wrapper.
   Row 1: eyebrow + H1 spanning both 1fr content columns.
   Row 2: left column (CTAs + medals + specs) | right card (bleeds).

   Column template (matches HybridHeroSection):
     [gutter] [spacer 32px] [1fr] [1fr] [spacer 32px] [gutter]
   The gutter columns collapse once the viewport is < 1024px + gutters.
   ============================================================ */


/* ---- Outer section ---------------------------------------- */

.air-hero {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            4rem;          /* 64px — between grid and carousel */
  width:          100%;
  background:     var(--background);
  padding-top:    8rem;          /* 128px — Figma pt-128px */
  padding-bottom: 4rem;          /* 64px */
  font-family:    var(--font-family-default);
  box-sizing:     border-box;
  overflow:       hidden;
}


/* ---- Content wrapper -------------------------------------- */

.air-hero__wrap {
  width:      100%;
  max-width:  1480px;
  padding:    0 48px;
  margin:     0 auto;
  box-sizing: border-box;
}


/* ---- Grid ------------------------------------------------- */

.air-hero__grid {
  display:               grid;
  grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px)
                         32px
                         1fr
                         1fr
                         32px
                         clamp(0px, calc((100% - 1024px) / 2 - 32px), 148px);
  grid-template-rows:    auto auto;
  row-gap:               4rem;     /* 64px between heading row and content row */
  column-gap:            0;
  /* Center row-2 content by default; JS pins the card to the top when it is
     the SHORTER of the two columns (see AirHeroSection.tsx). */
  align-items:           center;
}


/* Heading + left column block. On desktop it's transparent (display:contents)
   so the grid places .air-hero__heading / .air-hero__left / .air-hero__card
   itself; from tablet down it becomes the flex column that owns the
   heading→left gap (see the ≤991 block). */
.air-hero__main {
  display: contents;
}


/* ---- Heading row (spans both 1fr content columns) --------- */

.air-hero__heading {
  grid-column:    3 / 5;         /* spans the two 1fr columns = full 1024px width */
  grid-row:       1;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;        /* 24px */
  max-width:      800px;
}


/* Eyebrow ("Meet your AI receptionist") uses the <Eyebrow> primitive. */


/* ---- Left column (row 2) ---------------------------------- */

.air-hero__left {
  grid-column:    3;
  grid-row:       2;
  display:        flex;
  flex-direction: column;
  gap:            4rem;          /* 64px — between cta-medals group and specs */
  padding:        1rem 2rem 2rem 0;  /* pt-16 pr-32 pb-32 pl-0 */
  box-sizing:     border-box;
  margin-right: 0.5rem;          /* 8px — half of 16px gap between columns */
  min-width: 0;
}

/* CTA group + medal row — outer wrapper with 36px gap */
.air-hero__cta-medals {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;       /* 36px */
}

/* Body text + actions — inner CTA block with 36px gap */
.air-hero__cta {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;       /* 36px */
}

/* ---- Actions row ------------------------------------------ */

/* Primary button + a secondary-cta group (secondary button + guarantee note).
   The layout state is chosen by JS (AirHeroSection.tsx) via data-cta, so the
   note always drops below the secondary button — centered under it — BEFORE
   the two buttons stack. Default (pre-JS) is the inline row. */
.air-hero__actions {
  display:     flex;
  flex-wrap:   nowrap;
  align-items: flex-start;
  gap:         12px;
}

/* secondary button + note: inline by default (note to the right of the button) */
.air-hero__secondary-cta {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* note-stacked & all-stacked: note drops under the secondary button, centered */
.air-hero__actions[data-cta="note-stacked"] .air-hero__secondary-cta,
.air-hero__actions[data-cta="all-stacked"]  .air-hero__secondary-cta {
  flex-direction: column;
  gap:            8px;
      align-items: stretch;
}

/* all-stacked: the two buttons stack as well (narrowest) */
.air-hero__actions[data-cta="all-stacked"] {
  flex-direction: column;
}

.air-hero__guarantee {
  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);
  white-space: nowrap;     /* wrap as a whole unit, never mid-phrase */
  flex-shrink: 0;
}


/* ---- Specs list ------------------------------------------- */

.air-hero__specs {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);  /* 12px */
}

.air-hero__spec {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.air-hero__spec-text {
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       var(--foreground);
}


/* ---- Right card (row 2, bleeds to wide container edge) ---- */

.air-hero__card {
  grid-column:   4 / 7;
  grid-row:      2;
  /* vertical alignment is set by JS: 'start' when the card is shorter than the
     left column, otherwise it follows the grid's center alignment */
  margin-left:   0.5rem;         /* 8px — half of 16px gap between columns */
  padding:       1rem;           /* 16px — Figma p-16px */
  background:    var(--card);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-sizing:    border-box;
}

.air-hero__visual {
  display:       block;
  width:         100%;
  aspect-ratio:  1 / 1;        /* always square */
  object-fit:    cover;
  border-radius: 12px;
  /* Inline hairline stroke: 0.5px, 20% of #282825 (--foreground).
     A border (not inset box-shadow) — inset shadows render behind an
     <img>'s bitmap and stay invisible. box-sizing keeps it inset. */
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  box-sizing:    border-box;
}

.air-hero__visual-placeholder {
  width:         100%;
  aspect-ratio:  1 / 1;        /* always square */
  background:    var(--secondary);
  border-radius: 12px;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  box-sizing:    border-box;
}


/* ============================================================
   Tablet (≤991px) — collapse to stacked layout
   ============================================================ */

@media (max-width: 991px) {
  .air-hero {
    padding-top:    4.5rem;        /* 72px — Figma pt 96px − 24px */
    padding-bottom: 4rem;
  }

  .air-hero__wrap {
    padding: 0 60px;
  }

  .air-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* override base center — columns are full-width when stacked */
    gap:   2.5rem;       /* between the heading+left block and the card */
  }

  /* Now a real flex column: owns the heading→left gap, independent of the
     grid's block→card gap above. */
  .air-hero__main {
    display:        flex;
    flex-direction: column;
    gap:            4rem;   /* heading → left */
  }


  .air-hero__left {
    gap:     4rem;
    padding: 0;
    margin-right:0;
  }

  .air-hero__card {
    margin-left:  -16px;
    margin-right: -16px;
    /* Keep the base white card frame (bg + padding + rounding). The visual
       stays a framed card across every breakpoint, per the Figma design —
       only its width changes when the layout stacks. */
  }

  .air-hero__visual-placeholder {
    min-height: 360px;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {

  .air-hero__wrap {
    padding: 0 2rem;
  }

  .air-hero__card {
    margin-left:  -1rem;
    margin-right: -1rem;
    padding:      12px;        /* Figma mobile card padding (keeps the frame) */
  }

  .air-hero__visual-placeholder {
    min-height: 280px;
  }

  /* No actions override here: the base flex-wrap row already drops the
     guarantee to its own line first, then stacks the buttons when needed. */
}


/* ============================================================
   Badge marquee full-bleed (≤520px)
   When G2BadgeRow switches to its auto-scroll strip (≤520px), the strip must
   run edge-to-edge (full viewport width), same as HomepageHero. Bleed by the
   container padding (2rem at this width). See docs/conventions.md.
   ============================================================ */

@media (max-width: 520px) {
  .air-hero__medals {
    margin-left:  -2rem;
    margin-right: -2rem;
  }
}


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

@media (max-width: 479px) {
  .air-hero {
    padding-top: 4.5rem;        /* 72px — keep parity with ≤767px (Figma 96px − 24px) */
  }

  /* H1 holds 36px on portrait mobile via the global `.page-h1--no-portrait-shrink`
     modifier (applied in AirHeroSection.tsx) — matches the AIR mobile Figma frame. */

  /* Spec gaps: CTA group 36px (.air-hero__cta-medals / .air-hero__cta) and
     specs 12px are already the base values — no portrait override needed. */
  .air-hero__left {
    gap: 2rem;                  /* 32px between cta-medals group and specs */
  }
}

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }

/* ============================================================
   Eyebrow — icon + label kicker. See Eyebrow.tsx.
   ============================================================ */

.eyebrow {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;            /* 8px */
  height:       36px;
  padding:      5px 0;
  width:        fit-content;       /* never stretch in a column-flex parent */
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-sm);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
  white-space:  nowrap;
  box-sizing:   border-box;
}

.eyebrow[data-variant="active"] {
  color:       var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   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;
  }
}