/**
 * wc-hc-section-header.css
 * Shared HC section wrapper styles.
 * Layout wrappers for child types are also defined here.
 */

/* ── Section backgrounds ── */
.wc-hc-section {
  background: var(--white);
}

.wc-hc-section--grey {
  background: var(--grey-bg);
}

/* ── Heading spacing ── */
.wc-hc-section__heading {
  margin-bottom: var(--sp-xs);
}

/* ── Content wrapper ── */
.wc-hc-section__content {
  margin-top: var(--sp-md);
}

/* ══════════════════════════════════════════
   BENEFIT STACK layout
   Wraps wc_hc_benefit_item children
   ══════════════════════════════════════════ */
.benefit-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--grey-light);
  border-radius: 6px;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   STEPS ROW layout
   Wraps wc_hc_step_item children
   ══════════════════════════════════════════ */
.steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--grey-light);
  border-radius: 6px;
  overflow: hidden;
  counter-reset: step-counter;
}

/* ══════════════════════════════════════════
   CARD GRID layout
   Wraps wc_hc_card children
   ══════════════════════════════════════════ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-md);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .steps-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}