/* -- "Hoe werkt het?": 4 stapkaarten, op mobiel een swipe-carrousel -- */

/* Sectie-achtergrond: verloop stopt halverwege de kaarten, daaronder wit */
.vd-sectionSteps {
  --sw-overlap: 180px; /* hoeveel px onderaan wit blijft */
  padding: 0 25px;
  background:
    linear-gradient(to bottom right, #E66A2F 0%, #F17435 55%, #FAA739 100%)
    top / 100% calc(100% - var(--sw-overlap)) no-repeat,
    #FFFFFF;
}
@media (max-width: 1024px) { .vd-sectionSteps { --sw-overlap: 200px; } }
@media (max-width: 767px) { .vd-sectionSteps { --sw-overlap: 250px; } }

.sw-steps {
  /* StudyWorks semantic tokens (Light) */
  --on-brand-text: #FFFFFF;          /* on-brand/text */
  --bg-surface-primary: #FFFFFF;     /* bg-surface/primary */
  --text-primary: #111827;           /* text/primary */
  --text-secondary: #4B5563;         /* text/secondary */
  --bg-surface-brand: #FFF3EE;       /* bg-surface/brand */
  --icon-brand: #F17435;             /* icon/brand */
  --gutter: 25px;                    /* gelijk aan de zijpadding van .vd-sectionSteps */
  box-sizing: border-box;
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px 0;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  color: var(--on-brand-text);
}
.sw-steps *, .sw-steps *::before, .sw-steps *::after { box-sizing: border-box; }
.sw-steps__head { margin-bottom: 32px; }
.sw-steps__eyebrow {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  opacity: .9;
}
.sw-steps .sw-steps__title {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  color: var(--on-brand-text);
}

/* Desktop: 4 kaarten naast elkaar */
.sw-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: sw-step;
}
.sw-steps__list:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 6px; border-radius: 16px; }
.sw-steps__card {
  background: var(--bg-surface-primary);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  counter-increment: sw-step;
}

/* Icoon + automatisch stapnummer */
.sw-steps__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 8px 0 20px 8px;
  border-radius: 9999px;
  background: var(--bg-surface-brand);
  color: var(--icon-brand);
}
.sw-steps__icon svg { display: block; width: 28px; height: 28px; }
.sw-steps__icon::before {
  content: counter(sw-step);
  position: absolute;
  top: -8px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--text-primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.sw-steps .sw-steps__card h3 {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}
.sw-steps__card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sw-steps__nav { display: none; }

/* Tablet: 2 x 2 */
@media (max-width: 1024px) {
  .sw-steps__list { grid-template-columns: repeat(2, 1fr); }
}

/* Mobiel: swipe-carrousel met scroll-snap */
@media (max-width: 767px) {
  .sw-steps { padding: 40px 0 48px; }
  .sw-steps__head { margin-bottom: 24px; }
  .sw-steps__list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* strook loopt van rand tot rand van het scherm, eerste kaart lijnt uit met de tekst */
    margin: 0 calc(var(--gutter) * -1) -16px;
    padding: 4px var(--gutter) 28px; /* onder: ruimte voor de schaduw */
    scroll-padding: 0 var(--gutter);
  }
  .sw-steps__list::-webkit-scrollbar { display: none; }
  .sw-steps__card {
    flex: 0 0 auto;
    width: 85%;
    min-width: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    scroll-snap-align: start;
  }

  /* Pijlen en voortgangsbalk staan op het witte deel van de sectie */
  .sw-steps__nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }
  .sw-steps__btn {
    position: relative;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: var(--bg-surface-brand);
    color: var(--icon-brand);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s, background .2s;
  }
  /* Hele bolletje klikbaar, ook op touchscreens */
  .sw-steps__btn::after { content: ""; position: absolute; inset: -6px; border-radius: 9999px; }
  .sw-steps__btn svg { pointer-events: none; }
  .sw-steps__btn:not(:disabled):active { background: #FBD0B9; }
  .sw-steps__btn:disabled { opacity: .35; cursor: default; }
  .sw-steps__btn:focus:not(:focus-visible) { outline: none; }
  .sw-steps__btn:focus-visible { outline: 3px solid var(--icon-brand); outline-offset: 2px; }
  .sw-steps__progress {
    flex: 1;
    height: 6px;
    border-radius: 9999px;
    background: #E5E7EB;
    overflow: hidden;
  }
  .sw-steps__progress span {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 9999px;
    background: var(--icon-brand);
    transition: width .3s;
  }
}
@media (max-width: 767px) and (hover: hover) {
  .sw-steps__btn:not(:disabled):hover { background: #FDE3D5; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-steps__list { scroll-behavior: auto; }
  .sw-steps__progress span { transition: none; }
}