/* ============================================================
   AirCtaSection — AIR page closing CTA.

   Gradient: top half of a two-part gradient that continues
   seamlessly into SiteFooter's bottom half.
   rgba(229,223,213,0.5) → rgba(222,215,204,0.5) here;
   rgba(222,215,204,0.5) → rgba(214,207,194,0.5) in footer.
   ============================================================ */

/* ---- Single container spanning header + content ----------- */

.air-cta .container {
  display:               grid;
  grid-template-columns: minmax(0, 524fr) minmax(0, 464fr);
  grid-template-rows:    auto 1fr;
  column-gap:            2.25rem;   /* 36px — matches Figma gap */
  row-gap:               4rem;      /* 64px between header and content row */
  align-items:           start;
}


.air-cta {
  background: linear-gradient(
                180deg,
                rgba(229, 223, 213, 0.5) 0%,
                rgba(222, 215, 204, 0.5) 100%
              ),
              var(--background);
}

/* Header uses the shared .section-header convention (section.css). */

.air-cta .section-header {
  grid-column: 1;
  grid-row:    1;
  width:       min(50rem, calc(100vw - 35rem));
  z-index:     1;
}


/* ============================================================
   Content: header + copy (left column). display:contents makes
   this wrapper invisible to the grid, so .section-header and
   .air-cta__copy place themselves directly via their own
   grid-column/grid-row below — the illustration is a separate,
   un-wrapped grid item (see "Illustration" below).
   ============================================================ */

.air-cta__content {
  display: contents;
}


/* ---- Copy: body + actions --------------------------------- */

.air-cta__copy {
  grid-column:    1;
  grid-row:       2;
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;   /* 36px */
}

.air-cta__body {
  margin:      0;
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);
  color:       var(--foreground);
  max-width:   100%;
}

/* .btn-pair (section.css) provides the row layout + the content-driven
   equal-width treatment. Reset it to natural per-button widths here —
   this section only wants equal-width-or-wrap on mobile (re-enabled in
   the ≤767px block below). */
.air-cta__actions .btn {
  min-width: 0;
}


/* ---- Illustration ------------------------------------------ */

.air-cta__illustration {
  grid-column: 2;
  grid-row:    1 / span 2;
  align-self:  start;
  width:       100%;
}

.air-cta__illustration-img {
  display: block;
  width:   100%;
  height:  auto;
}


/* ============================================================
   Tablet (≤991px) — single column; illustration restacks below
   the copy at a mid-size (between the 464px desktop column and
   the 338px mobile cap), not hidden — see AirHeroSection's
   tablet block for the same "restack + scale, never hide" pattern.
   ============================================================ */

@media (max-width: 991px) {
  .air-cta .container {
    grid-template-columns: 1fr;
    row-gap:               2.25rem;   /* 36px — content block → illustration, tablet */
  }

  /* No longer transparent: header + copy become a real stacked block
     (heading, then body+buttons), like AirHeroSection's .air-hero__main
     at this breakpoint — one grid item instead of two separate rows. */
  .air-cta__content {
    display:        flex;
    flex-direction: column;
    gap:            2.25rem;   /* 36px — header → body, tablet */
    grid-column:    1;
    grid-row:       1;
  }

  .air-cta .section-header {
    width: 100%;   /* no min()/calc() limit on tablet/mobile — full column width */
  }

  .air-cta__illustration {
    grid-column: 1;
    grid-row:    2;   /* content is now a single row; illustration follows directly */
    width:       100%;
    max-width:   25rem;   /* 400px — midpoint of 464px desktop / 338px mobile */
    margin:      0 auto;
  }

  .air-cta__body {
    max-width: 100%;
  }
}


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

@media (max-width: 767px) {
  .air-cta .container {
    row-gap: 1.5rem;   /* 24px — content block → illustration, mobile */
  }

  .air-cta__content {
    gap: var(--spacing-9);   /* 36px — heading → body, mobile only */
  }

  .air-cta__body {
    font-size:   var(--font-size-lg);
    line-height: var(--line-height-lg);
  }

  /* Re-enable .btn-pair's content-driven equal-width treatment for mobile
     only (see the reset + buttonPairStyle()/.btn-pair docs above). */
  .air-cta__actions .btn {
    min-width: var(--btn-pair-min-w, 0);
  }

  .air-cta__illustration {
    max-width: 21.125rem;  /* 338px */
  }
}