/* ============================================================
   AirQualityStudioSection — "Quality Studio" feature section

   Card layout mirrors WorkforceSection: white card, alternating
   1fr-text / 2fr-visual rows. Kept local — extract to shared
   primitive if a third section needs the same pattern.
   ============================================================ */

.air-qs {
  background: var(--background);
}

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

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

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

.air-qs__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
  width:          100%;
}

/* Header + mini-steps are one logical group; this stack owns their
   Figma 36px rhythm instead of the generic container. */
.air-qs__header-stack {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;
}


/* ---- Mini-steps row --------------------------------------- */

.air-qs__mini-steps {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items:           stretch;
  width:                 100%;
}

.air-qs__mini-step-slot {
  display: contents;
}

.air-qs__step-arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           32px;
  color:           var(--color-brand-beige-300);
}

.air-qs__mini-step {
  display:      flex;
  align-items:  center;
  gap:          var(--spacing-3);
  flex:         1;
  padding:      1.75rem;
  background:   var(--secondary);
  border:       0.5px solid var(--border);
  border-radius: 12px;
  min-width:    0;
}

.air-qs__mini-step-label {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  color:       var(--foreground);
  min-width:   0;
}


/* ---- Feature card ----------------------------------------
   Built with the shared <SplitCard> primitive. Only the flow-diagram
   visual is section-specific: an asset-TODO placeholder that fills the
   SplitCard frame until the exported image lands. */

.air-qs__img-placeholder {
  width:      100%;
  height:     100%;
  background: linear-gradient(180deg, rgba(89, 183, 217, 0.15) 0%, rgba(89, 183, 217, 0.25) 100%),
              var(--secondary);
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .air-qs__content {
    gap: 4rem;
  }

  .air-qs__header-stack {
    gap: 4rem;
  }

  .air-qs__mini-steps {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-3);
  }

  .air-qs__mini-step-slot {
    display: contents;
  }

  .air-qs__mini-step {
    gap: var(--spacing-6);
  }

  .air-qs__step-arrow {
    display:   flex;
    align-self: center;
    width:     16px;
    height:    16px;
    transform: rotate(90deg);
  }

  .air-qs .split-card__footer {
    padding-top:    0;
    padding-bottom: 3rem;
  }
}


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

@media (max-width: 767px) {
  .air-qs__mini-steps {
    margin: 0 -1rem;
    width:  calc(100% + 2rem);
  }

  /* SplitCard sets the visual to min-height: auto on mobile, so the
     placeholder provides its own height. */
  .air-qs__img-placeholder {
    min-height: 280px;
  }
}