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



/* ============================================================
   Design refresh — docs/design-refresh-rules.md. White ground (BG-1), the H1
   in Rowan Light 48/60 (TY-1); its bold run becomes the marker in refresh.css.
   ============================================================ */
.air-hero[data-design="refresh"] {
  background: var(--card);
}

[data-design="refresh"] .air-hero__heading .page-h1 {
  font-family: var(--font-family-serif);
  font-size:   var(--font-size-serif-display);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-serif-display);
}

/* The visual's white frame would vanish on white: beige, and no outline on
   the art (BG-8, BD-7). */
[data-design="refresh"] .air-hero__card {
  background: var(--secondary);
}

[data-design="refresh"] .air-hero__visual {
  border: 0;
}

/* Spec icons: the white disc goes beige on white (BG-8). */
[data-design="refresh"] .air-hero__spec .icon-badge {
  background: var(--secondary);
}

/* Testimonial cards ("Testimonials" recipe): white with the 0.5px hairline
   (C5), padding 36 / 32 / 36 / 36, quote Rowan Light 24/32 (TY-5), quote mark
   Rowan Semibold (C9). */
.air-hero[data-design="refresh"] .case-study-card {
  border:  0.5px solid var(--opacity-neutral-40);
  padding: 2.25rem 2rem 2.25rem 2.25rem;
}

.air-hero[data-design="refresh"] .case-study-card .case-study-card__quote-mark {
  font-family: var(--font-family-serif);
  font-weight: 600;   /* no semibold token */
  height:      36px;
}

.air-hero[data-design="refresh"] .case-study-card .case-study-card__quote {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-light);
}

/* The carousel's fades and nav button are painted in `--background`. */
.air-hero[data-design="refresh"] .carousel .carousel__overlay:not(.carousel__overlay--left) {
  background: linear-gradient(to right, transparent 0%, var(--card) 60%);
}

.air-hero[data-design="refresh"] .carousel .carousel__overlay--left {
  background: linear-gradient(to left, transparent 0%, var(--card) 60%);
}

.air-hero[data-design="refresh"] .carousel .carousel__nav-btn,
.air-hero[data-design="refresh"] .carousel .carousel__nav-btn:hover:not(:disabled) {
  background-color: var(--card);
}

@media (max-width: 767px) {
  .air-hero[data-design="refresh"] .case-study-card {
    padding: 1.5rem 2rem 2.25rem 2.25rem;
  }

  .air-hero[data-design="refresh"] .carousel .carousel__overlay:not(.carousel__overlay--left) {
    background: linear-gradient(to right, transparent 0%, var(--card) 50%);
  }

  .air-hero[data-design="refresh"] .carousel .carousel__overlay--left {
    background: linear-gradient(to left, transparent 0%, var(--card) 50%);
  }
}

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

/* ============================================================
   Carousel — Draggable horizontal scroll carousel
   with accessible nav controls and smooth snap-on-release.

   CSS custom properties (set on .carousel or any ancestor):
     --carousel-gutter   Left padding & overlay width.
                         Default: matches the 1024px container breakpoints.
     --carousel-trail    Right padding — trailing scroll space that lets
                         the last card scroll to the snap start position.
                         Computed dynamically by Carousel.tsx.
   ============================================================ */

.carousel {
  --carousel-gutter: max(80px, calc((100% - 1024px) / 2));
  --carousel-trail:  0px;
  position: relative;
  width:    100%;
}


/* ============================================================
   Scrollable track
   ============================================================ */

@media (pointer: fine) {
  .carousel__track { cursor: grab; }
}

.carousel__track {
  display:             flex;
  gap:                 1rem;    /* 16px — Carousel.tsx measures slide positions, so any gap works */
  overflow-x:          auto;
  padding-bottom:      0.5rem;  /* breathing room so box-shadows aren't clipped */
  padding-left:        var(--carousel-gutter);
  scroll-padding-left: var(--carousel-gutter);
  padding-right:       var(--carousel-trail);
  scroll-snap-type:    x mandatory;
  scrollbar-width:     none;    /* Firefox */
}

.carousel__track::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}


/* ---- Slide sizing -----------------------------------------
   Slide width + snap are a carousel concern, so they live here, not on the
   card. Targeted via a descendant selector (not `> *`) because compiled
   Webflow wraps each slide in a `display:contents` code-island element, which
   is not a layout box — only the card itself reliably sizes/snaps in both
   React and Webflow. The card stays width-flexible when used standalone. */
.carousel__track .case-study-card {
  flex:              0 0 36.375rem;   /* 582px */
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .carousel__track .case-study-card {
    width:100%;
    flex: 0 0 100%;
  }
}


/* ============================================================
   Navigation overlays — sit in the gutter on each side so
   they never cover the container content area.
   ============================================================ */

.carousel__overlay {
  align-items: center;
  bottom:      0;
  display:     flex;
  overflow:    hidden;
  position:    absolute;
  top:         0;
  box-sizing: border-box;
  width:       var(--carousel-gutter);
}

/* Right side — gradient fades left; button centered in gutter */
.carousel__overlay:not(.carousel__overlay--left) {
  background:      linear-gradient(to right, transparent 0%, var(--background) 60%);
  justify-content: center;
  right:           0;
}

/* Left side — gradient fades right; button centered in gutter */
.carousel__overlay--left {
  background:      linear-gradient(to left, transparent 0%, var(--background) 60%);
  justify-content: center;
  left:            0;
}

/* When gutter > 2rem + 40px + 1rem (88px), position button 2rem from the edge */
@media (min-width: 1201px) {
  .carousel__overlay:not(.carousel__overlay--left) {
    justify-content: flex-end;
    padding-right:   2rem;
  }

  .carousel__overlay--left {
    justify-content: flex-start;
    padding-left:    2rem;
  }
}


/* ============================================================
   Nav buttons
   ============================================================ */

.carousel__nav-btn {
  align-items:      center;
  background-color: var(--background);
  border:           1px solid var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary);
  cursor:           pointer;
  display:          flex;
  flex-shrink:      0;
  height:           2.5rem;   /* 40px */
  justify-content:  center;
  transform:        translateX(0);
  transition:       border-color     120ms ease,
                    color            120ms ease,
                    opacity          200ms ease,
                    transform        200ms ease;
  width:            2.5rem;
}

.carousel__nav-btn:hover:not(:disabled) {
  background-color: var(--background);
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

/* Left button slides out to the left when at the start */
.carousel__overlay--left .carousel__nav-btn:disabled {
  opacity:   0;
  transform: translateX(-100%);
}

/* Right button slides out to the right when at the end */
.carousel__overlay:not(.carousel__overlay--left) .carousel__nav-btn:disabled {
  opacity:   0;
  transform: translateX(100%);
}

.carousel__nav-btn svg {
  display: block;
  height:  1rem;
  width:   1rem;
}


/* ============================================================
   Visually hidden — accessible to screen readers only
   ============================================================ */

.sr-only {
  clip:        rect(0 0 0 0);
  clip-path:   inset(50%);
  height:      1px;
  overflow:    hidden;
  position:    absolute;
  white-space: nowrap;
  width:       1px;
}


/* ============================================================
   Responsive gutter overrides — mirror container.css breakpoints
   ============================================================ */

@media (max-width: 991px) {
  .carousel { --carousel-gutter: 60px; }

}

@media (max-width: 767px) {
  .carousel { --carousel-gutter: 48px; }

  .carousel__track { padding-right: var(--carousel-gutter); }

  .carousel__nav-btn {
    height: 2rem;
    width:  2rem;
  }

  /* Gradient spans 24px — 50% of the 48px gutter */
  .carousel__overlay:not(.carousel__overlay--left) {
    background: linear-gradient(to right, transparent 0%, var(--background) 50%);
  }

  .carousel__overlay--left {
    background: linear-gradient(to left, transparent 0%, var(--background) 50%);
  }
}

@media (max-width: 479px) {
  .carousel { --carousel-gutter: 48px; }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}

/* ============================================================
   CaseStudySlide — Individual testimonial card styles.
   Used inside the Carousel primitive.
   ============================================================ */

.case-study-card {
  background-color: var(--card);
  border-radius:    var(--radius-lg);   /* 24px */
  box-sizing:       border-box;
  display:          flex;
  flex:             1;   /* expand to fill its flex track by default; height follows content */
  flex-direction:   column;
  justify-content:  space-between;
  overflow:         hidden;
  padding:          2.25rem;
}
/* Slide width + scroll-snap are a carousel concern — applied by Carousel.css
   (`.carousel__track .case-study-card`, which overrides the flex above).
   Standalone cards stay flexible. */


/* ---- Top row: quote mark + CTA ---- */
.case-study-card__top {
  align-items:     flex-start;
  display:         flex;
  justify-content: space-between;
  padding-bottom:  2rem;      /* 32px */
  width:           100%;
}
/* No quote-mark → keep the CTA right-aligned. */
.case-study-card--no-quote-mark .case-study-card__top {
  justify-content: flex-end;
}


/* ---- Optional result / stat line ---- */
.case-study-card__result {
  margin:      0;
  font-size:   var(--font-size-xl);
  line-height: var(--line-height-xl);
  color:       var(--popover-foreground);
}

/* With a result line, the card uses the Figma stack rhythm: 24px between
   button-area / result / quote, and a slightly tighter right padding.
   (Carousel cards have no result and keep the space-between layout.) */
.case-study-card--with-result {
  gap:           1.5rem;   /* 24px */
}
/* Top-align the quote text (default variant centers it within the flex-grown
   paragraph). */
.case-study-card--with-result .case-study-card__quote {
  align-content: flex-start;
}

.case-study-card__quote-mark {
  color:       var(--border);           /* #D6CFC2 — extra-muted-foreground */
  font-size:   3rem;                    /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  height:      38px;
}


/* ---- Body: quote + author ---- */
.case-study-card__body {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;    /* 36px */
  flex: 1 0 0;
}

.case-study-card__quote {
  color:       var(--foreground);
  font-size:   1.5rem;        /* 24px */
  font-weight: 300;           /* Light — no token exists yet */
  line-height: 2rem;          /* 32px */
  margin:      0;
  flex: 1 0 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.case-study-card__author-group {
  align-items: center;
  display:     flex;
  gap:         0.75rem;       /* 12px */
}

.case-study-card__avatar {
  background-color: var(--opacity-primary-20);
  border-radius:    var(--radius-full);
  flex-shrink:      0;
  height:           3rem;     /* 48px */
  overflow:         hidden;
  width:            3rem;
}

.case-study-card__avatar img {
  display:    block;
  height:     100%;
  object-fit: cover;
  width:      100%;
}

.case-study-card__author-meta {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.case-study-card__author-name {
  color:       var(--foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.case-study-card__author-role {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ---- Size variant: lg (bigger avatar, smaller author type) ---- */
.case-study-card--lg .case-study-card__avatar {
  width:  60px;
  height: 60px;
}
.case-study-card--lg .case-study-card__author-name,
.case-study-card--lg .case-study-card__author-role {
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
}


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

@media (max-width: 767px) {
  .case-study-card {
    padding: 1.5rem 2.25rem 2.25rem 2.25rem;
  }

  .case-study-card__quote {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .case-study-card__author-name,
  .case-study-card__author-role {
    font-size:   0.75rem;   /* 12px */
    line-height: 1rem;      /* 16px */
  }
}


/* ---- Optional author-row chip (`tag`) ----------------------
   Added for the Legal Hub case-study carousel, where each quote carries the
   attorney's practice area. Absent by default, so every existing consumer
   renders byte-identically. Pushed to the end of the row so it sits opposite
   the author no matter how long the name/firm run. */
.case-study-card__tag {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-2);
  margin-left:     auto;
  flex-shrink:     0;
  padding:         var(--spacing-2) var(--spacing-3);
  background:      var(--secondary);
  border-radius:   var(--radius-full);
  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;
}

@media (max-width: 767px) {
  /* The chip is `nowrap` + `flex-shrink: 0` (its label must never break
     mid-word), so in a narrow card it ran past the card's edge and got
     clipped. Below 768 it moves to its own line under the author.

     Deliberately a BREAKPOINT rule, not `flex-wrap: wrap` on its own: with
     plain wrapping each slide would decide for itself, so a short label
     ("Family law") stayed inline while a long one ("Criminal defense") dropped
     — and in a carousel the author row has to sit at the same place on every
     slide. `flex-basis: 100%` forces the break for all of them, and
     `margin-left: 0` overrides the desktop `auto` that would otherwise strand
     the chip against the right edge on its own line.

     Scoped with `:has()` so only consumers that pass a `tag` gain wrapping;
     every other card keeps its existing single-line row. */
  .case-study-card__author-group:has(.case-study-card__tag) {
    display:               grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap:            0.75rem;   /* 12px — the flex row's gap */
    row-gap:               0.75rem;
    align-items:           center;
  }

  .case-study-card__author-group:has(.case-study-card__tag) .case-study-card__tag {
    grid-column:  1 / -1;
    /* Hugs its label instead of stretching across the card. */
    justify-self: start;
    /* Cancels the desktop `auto`, which on its own row would strand the chip
       against the right edge. */
    margin-left:  0;
  }
}