/* ============================================================
   AirPricingV2Section — AIR page plan comparison.

   Layout: header (badge rail + heading + body) + content block.
   Content block: 3-column plan grid + included pills row.

   The cards themselves (tray + inner card + included list) AND the
   plans-row layout are identical to AirPricingHeroSection — same
   shared AirPricingPlanCard primitive, same wrapper CSS (3 columns,
   subgrid row-alignment, stacks to 1 at tablet/mobile). Keep the two
   wrappers in sync if either changes. See
   docs/component-unification-playbook.md.
   ============================================================ */


/* ---- Single container spanning header + plans + included --
   Header uses the shared .section-header convention (see
   section.css). The container stacks header / plans / included
   with a 64px rhythm. */

.air-pricing-v2.hp-section {
  padding-block: 6rem;   /* AIR page spacing trim: was inherited 8rem */
}

@media (max-width: 991px) {
  .air-pricing-v2.hp-section {
    padding-block: 4.5rem;   /* was inherited 6rem */
  }
}

@media (max-width: 767px) {
  .air-pricing-v2.hp-section {
    padding-block: 3rem;   /* was inherited 4rem */
  }
}

.air-pricing-v2 .container {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px between header, plans, and included */
}


/* ---- Plans grid (shared AirPricingPlanCard; same 3-column + subgrid
   row-alignment wrapper as AirPricingHeroSection's __plans) + the
   commitment banner below the row. ------------------------------- */

.air-pricing-v2__plans-row {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px plans -> commitment banner */
}

.air-pricing-v2__plans {
  display:     flex;
  gap:         1rem;
  align-items: stretch;
}

@supports (grid-template-rows: subgrid) {
  .air-pricing-v2__plans {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows:    repeat(7, auto);
    align-items:           stretch;
  }
}


/* ============================================================
   Included-on-every-plan row
   ============================================================ */

.air-pricing-v2__included {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.air-pricing-v2__included-label {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

.air-pricing-v2__pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
}

/* ============================================================
   Tablet (≤991px) — cards are tall (volume selector + accordion),
   so stack to a single column like the air-pricing hero's own cards
   do at this same breakpoint, instead of a cramped 2-column grid.
   ============================================================ */

@media (max-width: 991px) {
  .air-pricing-v2__plans-row {
    align-items: center;
    gap:         1rem;
  }

  .air-pricing-v2__plans {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    gap:            1rem;
  }

  .air-pricing-v2__plans > .air-pricing-plan-card {
    flex:      none;
    width:     100%;
  }

  .air-pricing-v2__plans-row > .air-pricing-commitment-banner {
    width: 100%;
  }
}