/* ==========================================================================
   Blok: werkwijze. Maat voor maat uit het prototype (sectie 8): outline-cijfers, mobiel een zwarte
   lijn links met oranje streepjes, desktop horizontaal in evenveel kolommen als er stappen zijn.
   ========================================================================== */

.block-process-steps__title {
  max-width: 48rem;
}

.block-process-steps__list {
  --steps: 5;
  position: relative;
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-12);
  padding-left: var(--sp-8);
  border-left: var(--stroke-bold) solid var(--color-black);
}

.block-process-steps__list[data-count="2"] { --steps: 2; }
.block-process-steps__list[data-count="3"] { --steps: 3; }
.block-process-steps__list[data-count="4"] { --steps: 4; }
.block-process-steps__list[data-count="6"] { --steps: 6; }

.block-process-steps__step {
  position: relative;
}

.block-process-steps__tick {
  position: absolute;
  top: var(--sp-1);
  left: calc(-1 * (var(--sp-8) + var(--stroke-bold)));
  width: var(--sp-8);
  height: 2px;
  background: var(--color-primary);
}

.block-process-steps__num {
  font-size: var(--fs-step-num);
  line-height: var(--lh-number);
  font-weight: 780;
  letter-spacing: -0.02em;
}

.block-process-steps__step h3 {
  margin-top: var(--sp-2);
  font-size: var(--fs-step-title);
}

.block-process-steps__step h3 + p {
  margin-top: var(--sp-2);
  color: var(--color-gray);
}

.block-process-steps__cta {
  margin-top: var(--sp-14);
}

@media (min-width: 64em) {
  .block-process-steps__list {
    grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
    gap: var(--sp-8);
    margin-top: var(--sp-14);
    padding-left: 0;
    border-left: 0;
  }

  .block-process-steps__tick {
    display: none;
  }
}

@media (min-width: 90em) {
  .block-process-steps__list {
    gap: var(--sp-12);
  }
}