.af-werkwijze{
  /* Defaults (aanpasbaar via Bricks Style controls) */
  --af-wz-line: #0b2a5b;
  --af-wz-dash: 18;
  --af-wz-gap: 14;
  --af-wz-dash-offset: 0px; /* verschuift waar de stippels beginnen/eindigen */
  --af-wz-line-width: 6px;

  --af-wz-circle: 112px;
  --af-wz-circle-border: #0b2a5b;
  --af-wz-circle-bg: #ffffff;

  --af-wz-icon: #0b2a5b;
  --af-wz-icon-size: 40px;

  --af-wz-title: #0a0a0a;
  --af-wz-text: #1f1f1f;

  /* spacing */
  --af-wz-top-gap: 26px;
  --af-wz-bottom-gap: 26px;

  /* Track controls (koppel aan Bricks controls) */
  --af-wz-track-left: 0px;      /* start later: hoger getal */
  --af-wz-track-right: 0px;     /* stop eerder: hoger getal */
  --af-wz-track-top: 0px;       /* + = lager, - = hoger */
  --af-wz-track-height: 240px;  /* hoogte van de wave */

  position: relative;
  width: 100%;
  padding: 44px 0;
}

/* stippellijn track (altijd door de cirkels) */
.af-wz-track{
  position: absolute;
  left: var(--af-wz-track-left, 0px);
  right: var(--af-wz-track-right, 0px);

  top: calc(50% + var(--af-wz-track-top, 0px));
  transform: translateY(-50%);

  pointer-events: none;
  z-index: 1;

  overflow: hidden; /* zorgt dat de lijn echt 'stopt' bij left/right */
}

.af-wz-line{
  display: block;
  width: 100%;
  height: var(--af-wz-track-height, 240px);
}

.af-wz-path{
  fill: none;
  stroke: var(--af-wz-line);
  stroke-width: var(--af-wz-line-width);
  stroke-dasharray: var(--af-wz-dash) var(--af-wz-gap);
  stroke-dashoffset: var(--af-wz-dash-offset);
  stroke-linecap: round;
}

/* steps */
.af-wz-steps{
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(14px, 3vw, 52px);

  margin: 0;
  padding: 0;
  list-style: none; /* verwijder 1., 2., 3. */

  min-height: 280px;
}

.af-wz-step{
  flex: 1 1 0;
  max-width: 360px;
  height: 100%;
  text-align: left; /* titel + tekst links */
}

/* GRID: top content - circle - bottom content (circle blijft perfect in het midden) */
.af-wz-stepLink{
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;

  justify-items: start; /* alles links uitlijnen */
  align-items: center;

  text-align: left;
  color: inherit;
  text-decoration: none;
}

.af-wz-circle{
  grid-row: 2;
  justify-self: start;

  width: var(--af-wz-circle);
  height: var(--af-wz-circle);
  border-radius: 999px;
  border: 2px solid var(--af-wz-circle-border);
  background: var(--af-wz-circle-bg);

  display: grid;
  place-items: center;
}

.af-wz-icon{
  color: var(--af-wz-icon);
  line-height: 1;
  display: grid;
  place-items: center;
}

/* font icons */
.af-wz-icon i{
  font-size: var(--af-wz-icon-size);
  line-height: 1;
}

/* svg icons */
.af-wz-icon svg{
  width: var(--af-wz-icon-size);
  height: var(--af-wz-icon-size);
  display: block;
}
.af-wz-icon svg *{
  fill: currentColor;
  /*stroke: currentColor;*/
}

.af-wz-content{
  max-width: 360px;
  padding: 0;
  text-align: left;
  justify-self: start;
}

/* default = bottom tekst */
.af-wz-step .af-wz-content{
  grid-row: 3;
  align-self: start;
  margin-top: var(--af-wz-bottom-gap);
}

/* even steps = top tekst (om-en-om) */
.af-wz-step:nth-child(even) .af-wz-content{
  grid-row: 1;
  align-self: end;
  margin-top: 0;
  margin-bottom: var(--af-wz-top-gap);
}

/* override via classes */
.af-wz-step.is-top .af-wz-content{
  grid-row: 1;
  align-self: end;
  margin-top: 0;
  margin-bottom: var(--af-wz-top-gap);
}
.af-wz-step.is-bottom .af-wz-content{
  grid-row: 3;
  align-self: start;
  margin-top: var(--af-wz-bottom-gap);
  margin-bottom: 0;
}

.af-wz-title{
  font-weight: 700;
  color: var(--af-wz-title);
  font-size: 24px;
  margin: 0 0 10px 0;
}

.af-wz-text{
  color: var(--af-wz-text);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* Responsive: tablet & mobiel (alles onder elkaar) */
@media (max-width: 1024px){
  /* Wave/track verbergen */
  .af-wz-track{ display:none !important; }

  .af-werkwijze{
    padding: 24px 0;
  }

  /* Stappen onder elkaar */
  .af-wz-steps{
    min-height: auto;
    flex-direction: column;
    gap: 28px;
  }

  .af-wz-step{
    max-width: none;
    width: 100%;
  }

  /* Icoon links, content rechts (1 rij) */
  .af-wz-stepLink{
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    column-gap: 18px;
    row-gap: 0;

    justify-items: start;
    align-items: center;
    text-align: left;
  }

  .af-wz-circle{
    grid-column: 1;
    grid-row: 1;
    width: calc(var(--af-wz-circle) * 0.85);
    height: calc(var(--af-wz-circle) * 0.85);
  }

  /* Op tablet/mobiel geen top/bottom alternatie: alles gelijk */
  .af-wz-content{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 0;
    max-width: none;
  }

  .af-wz-step .af-wz-content,
  .af-wz-step:nth-child(even) .af-wz-content,
  .af-wz-step.is-top .af-wz-content,
  .af-wz-step.is-bottom .af-wz-content{
    grid-row: auto !important;
    align-self: start;
    margin: 0 !important;
  }

  .af-wz-title{
    margin: 0 0 6px 0;
  }
}

@media (max-width: 600px){
  .af-wz-steps{ gap: 22px; }

  .af-wz-stepLink{
    column-gap: 14px;
    align-items: flex-start;
  }

  .af-wz-circle{
    width: calc(var(--af-wz-circle) * 0.75);
    height: calc(var(--af-wz-circle) * 0.75);
  }
}