/* ── CARD GRID ─────────────────────────────────────────── */
.card-grid {
  background: var(--off-white);
  padding: 110px var(--page-px);
  color: var(--black);
}

.card-grid--dark {
  background: var(--gray-90);
  color: var(--white);
}

.card-grid-heading {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  letter-spacing: -0.025em;
  max-width: 760px;
  margin-bottom: 72px;
}

.card-grid-heading em {
  font-style: normal;
  color: var(--gray-40);
}

.card-grid-body {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  max-width: 640px;
  margin-top: -48px;
  margin-bottom: 56px;
}

/* Column count driven by PHP-set --card-cols (max 3) */
.card-grid .icon-card-grid {
  grid-template-columns: repeat(var(--card-cols, 3), 1fr);
}

/* CTA inside each card */
.card-grid .icon-card .btn-secondary,
.card-grid .icon-card .btn-secondary--dark {
  margin-top: 24px;
}

/* ── Dark mode overrides ─────────────────────────────────── */
.card-grid--dark .icon-card-grid {
  background: var(--gray-60);
}

.card-grid--dark .icon-card {
  background: var(--gray-80);
}

.card-grid--dark .icon-card h3 {
  color: var(--white);
}

.card-grid--dark .icon-card p {
  color: var(--gray-20);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1023px) {
  .card-grid {
    padding: 80px 40px;
  }
  .card-grid-heading {
    margin-bottom: 48px;
  }
  .card-grid .icon-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .card-grid {
    padding: 64px clamp(18px, 5vw, 32px);
  }
  .card-grid-heading {
    margin-bottom: 36px;
  }
}