/* ==========================================================================
   Step-card grid layout (was the Section "journey" variant).
   Attaches automatically when a Section contains a grid of Haga Step Cards,
   so authors don't have to flag the section with a variant.
   ========================================================================== */

.section:has(.step-card) {
  --pb: var(--s-72);
  --gap: var(--s-60);
}

/* grid */

.grid:has(> .step-card) {
  --journey-grid-max: 32rem;
  --journey-grid-gap: var(--s-32);

  --cols: 1;
  --cols-lg: 3;

  gap: var(--journey-grid-gap);
  margin-inline: auto;
  max-width: min(100%, var(--journey-grid-max));
}

.section:has(.step-card) .text-block {
  align-items: flex-start; /* default to left alignment for mobile */
}

.section:has(.step-card) .text-block :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: left;
}

.section:has(.step-card) .cta-block {
  padding-top: var(--s-60);
  max-width: min(80vw, 30rem);
}

/* breakpoints */

/* -- custom breakpoint aligned with max width of grid */

@media (min-width: 32rem) {
  .section:has(.step-card) .text-block {
    align-items: center;
  }

  .section:has(.step-card) .text-block :is(h1, h2, h3, h4, h5, h6, p) {
    text-align: center;
  }
}

@media (min-width: 40rem) {
  .grid:has(> .step-card) {
    --journey-grid-max: 28rem;
  }
}

@media (min-width: 64rem) {
  .section:has(.step-card) {
    --pb: var(--s-144);
    --gap: var(--s-72);
  }

  .grid:has(> .step-card) {
    --journey-grid-max: min(95vw, 80rem);
    --journey-grid-gap: var(--s-48);
  }
}

@media (min-width: 90rem) {
  .grid:has(> .step-card) {
    --journey-grid-max: min(80vw, 80rem);
  }
}