/*
  steps — genummerde keten.

  De verbindingslijn zit op het nummer-schijfje als een ::after, niet als een
  apart element: zo loopt hij automatisch mee met het aantal stappen en stopt
  hij vanzelf bij de laatste.
*/

/* Familie A (§3): verticaal ritme op de sectie, goot op de inner. */
.bsc-steps {
  padding: var(--block-y, 64px) 0;
  background: var(--surface-page);
  color: var(--text-body);
}

.bsc-steps__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
}

.bsc-steps__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* Eyebrow: alles komt uit .bsc-label (§7), dit blok voegt niets toe. */

.bsc-steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: .98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.bsc-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bsc-step {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.bsc-step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--bsc-yellow-500);
  color: var(--bsc-navy-900);
  border: var(--border-2) solid var(--border-outline);
  font-size: 18px;
  font-weight: var(--weight-bold);
  z-index: 1;
}

/*
  De lijn tussen de schijfjes. Hangt aan de <li> en niet aan het schijfje, want
  alleen de <li> is zo breed als de kolom — op het schijfje was de lijn even
  breed als het schijfje zelf en haalde hij de volgende stap niet.

  Loopt van de rechterrand van het schijfje (52px) tot voorbij de kolomgoot,
  op de verticale hartlijn van het schijfje (26px = de helft van 52px).
*/
.bsc-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(52px + var(--space-3));
  right: calc(var(--space-6) * -1 + var(--space-3));
  height: var(--border-2);
  background: var(--border-hairline);
  transform: translateY(-50%);
}

.bsc-step__body {
  display: grid;
  gap: var(--space-2);
}

.bsc-step__title {
  margin: 0;
  font: var(--weight-extrabold) 17px / 1.25 var(--font-ui);
  color: var(--text-strong);
}

.bsc-step__text {
  margin: 0;
  font: var(--weight-regular) 15px / 1.6 var(--font-ui);
  color: var(--text-body);
  max-width: 34ch;
}

/*
  Onder tablet worden het rijen onder elkaar en draait de lijn mee: verticaal
  langs de linkerkant in plaats van horizontaal.
*/
@media screen and (max-width: 768px) {
  .bsc-steps__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .bsc-step {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  /* Verticaal: van onder het schijfje naar de volgende stap. */
  .bsc-step:not(:last-child)::after {
    top: calc(52px + var(--space-3));
    bottom: calc(var(--space-5) * -1 + var(--space-3));
    left: 26px;
    right: auto;
    width: var(--border-2);
    height: auto;
    transform: translateX(-50%);
  }
}

/* Contentblok: 64 desktop → 40 mobiel, en de smalle goot (§3, §4). */
@media screen and (max-width: 600px) {
  .bsc-steps {
    padding: var(--block-y, 40px) 0;
  }

  .bsc-steps__inner {
    padding: 0 var(--gutter-x, 20px);
  }
}