/*
 * approachSteps + approachStep — "Onze aanpak": zes genummerde stappen langs een
 * verticale lijn, met een gecentreerde slotstap eronder.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/onze-aanpak/ (R9), gemeten op 1440,
 * 1024, 767 en 390px. De 420px onderaan is een eigen grens van die site.
 *
 * De kop en de tekst van een stap zijn #222 en niet --colorText: op samdesign.nl
 * staat dit blok als losse HTML in de pagina en erft het de bodykleur van het
 * thema daar in plaats van de donkerblauwe tekstkleur van Elementor. Zie
 * docs/beslissingen.md.
 */

.approachSteps {
  --approachStepText: #222222;
  --approachStepNumber: #d1d2d8;
  --approachStepLine: #e7e8eb;

  /*
   * Het roze streepje voor een kop, in twee maten. Als achtergrond kan hier
   * niet: het streepje schuift de tekst opzij, dus is het een `content` op een
   * ::before en daarmee een echt inline-vak. Bewust niet in main.css — de
   * minifier van global.min.css struikelt over een url() met haakjes erin, en
   * die zitten in de matrix() hieronder (docs/openstaand.md).
   */
  --approachStepMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='29' viewBox='0 0 14 29'%3E%3Cg transform='translate(-329 -1106)'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,331.806,1143.815)' fill='%23dc0356'/%3E%3C/g%3E%3C/svg%3E");
  --approachStepMarkSmall: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='15' viewBox='0 0 7 15'%3E%3Cg transform='translate(-329.487 -1106.26)'%3E%3Cpath d='M0,11,.132,9.725a.5.5,0,0,1,.163-.51L9.506.1c.149-.124.319-.109.581-.094l.24.031.992.082a.5.5,0,0,1,.114.838L.807,11.26A.5.5,0,0,1,0,11' transform='matrix(0.914,-0.407,0.407,0.914,325.464,1110.923)' fill='%23dc0356'/%3E%3C/g%3E%3C/svg%3E");

  margin-block: 80px 150px;
}

/* ------------------------------------------------------------------
   De lijn tussen de stappen
   ------------------------------------------------------------------ */

/*
 * De baan is precies zo hoog als de rij stappen; de slotstap staat eronder,
 * buiten deze baan, want de lijn rekent met de hoogte hiervan.
 */
.approachStepsTrack {
  position: relative;
}

/*
 * Het roze deel van de lijn is geen JavaScript maar `background-attachment:
 * fixed`: het verloop staat dan stil ten opzichte van het venster — roze in de
 * bovenste helft, grijs in de onderste — en de lijn schuift eronderdoor. Wat
 * boven het midden van het scherm staat, is dus roze. Zo doet samdesign.nl het
 * ook.
 *
 * De twee kleurstops op 50% maken er een harde grens van in plaats van een
 * verloop.
 *
 * Safari op iOS legt `fixed` uit als `scroll`. Daar staat de grens dus vast op
 * de helft van de lijn zelf in plaats van mee te schuiven. Zo is het op
 * samdesign.nl ook, dus nemen we het over (R9).
 */
.approachStepsLine {
  position: absolute;
  top: 125px;
  left: calc(50% - 1.5px);
  width: 3px;
  height: calc(100% - 250px);
  border-radius: 100px;
  background: linear-gradient(
    180deg,
    var(--colorPinkDeep) 0%,
    var(--colorPinkDeep) 50%,
    var(--approachStepLine) 50%,
    var(--approachStepLine) 100%
  );
  background-attachment: fixed;
}

/* ------------------------------------------------------------------
   De stappen
   ------------------------------------------------------------------ */

.approachStepsList {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  row-gap: 45px;
  /* De teller waaruit het nummer van een stap komt. */
  counter-reset: approachStep;
}

.approachStep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 30px;
}

/*
 * Het nummer. Een teller op ::before en geen element in de markup: het getal
 * herhaalt alleen de plek in de lijst. `order` zet het tussen de tekst en het
 * beeld — een ::before is anders het eerste vak van de flexbox.
 */
.approachStep::before {
  counter-increment: approachStep;
  content: counter(approachStep);
  order: 1;
  flex: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 81px;
  height: 81px;
  border-radius: 100px;
  background: var(--approachStepNumber);
  color: var(--colorWhite);
  font-size: 35px;
  line-height: 40px;
  text-align: center;
  transition: background-color 0.2s;
}

/* De stap waar je bent, en alles wat je gehad hebt (approachSteps.js). */
.approachStepIsHere::before {
  background: var(--colorNavyMenu);
}

/*
 * De twee kolommen krimpen gelijk op met het venster, en groeien niet voorbij
 * hun 512,96px — daarboven doet `space-between` het werk. Dat moet met
 * `flex-basis` en niet met `width: 100%` + `max-width`: bij dat laatste
 * verdeelt de flexbox het tekort niet gelijk over de twee kolommen (op 1050px
 * werd de tekst 376 en het beeld 493), en dan staat het nummer niet meer op de
 * lijn in het midden. Gemeten op samdesign.nl is de tekstkolom op 1050px 434,5
 * breed en staat het hart van elk nummer op 525 — precies de helft. `min-width`
 * moet mee: een <img> heeft anders een automatische minimummaat en krimpt niet.
 */
.approachStepBody,
.approachStepImage {
  flex: 0 1 512.96px;
  min-width: 0;
}

.approachStepBody {
  order: 0;
}

/* Kop én tekst zijn smaller dan de kolom waarin ze staan. */
.approachStepBody > * {
  max-width: 438px;
}

.approachStepTitle {
  margin: 0 0 15px;
  color: var(--approachStepText);
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -2px;
}

.approachStepTitle::before {
  content: var(--approachStepMark);
  margin-right: 7px;
}

/*
 * De uitleg is de maat van de body (17/25,5) en niet die van de lopende tekst
 * elders (20/33): dit blok erft op samdesign.nl de bodystijl.
 */
.approachStepText {
  color: var(--approachStepText);
  font-size: 17px;
  line-height: 1.5;
}

.approachStepImage {
  order: 2;
}

/*
 * Drie classes, want de reset zet `height: auto` op img[width][height] en dat
 * weegt zwaarder dan één.
 */
.approachSteps .approachStep .approachStepImage {
  height: 328.63px;
  object-fit: cover;
}

/* Bij een omgekeerde stap staat het beeld links; het nummer blijft ertussen. */
.approachStepReverse .approachStepImage {
  order: 0;
}

.approachStepReverse .approachStepBody {
  order: 2;
}

/* ------------------------------------------------------------------
   De slotstap
   ------------------------------------------------------------------ */

/*
 * Geen nummer, gecentreerd, en 100px onder de laatste stap. De 100px staat hier
 * en niet als row-gap op de lijst, want dit blok staat buiten die lijst.
 */
.approachStepsFinal {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  text-align: center;
}

.approachStepsFinal .approachStepBody > * {
  margin-inline: auto;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  /*
   * Beeld boven, tekst onder, en het nummer links op de lijn in plaats van
   * ertussen. Ook bij een omgekeerde stap: op samdesign.nl staat het beeld hier
   * altijd bovenaan.
   */
  .approachStep {
    position: relative;
    flex-direction: column;
    row-gap: 30px;
  }

  /*
   * De rij staat hier op een kolom, en dan is `flex-basis` de hóogte. De 512,96
   * van hierboven moet dus terug naar de breedte, precies zoals het hier stond
   * vóór die basis erbij kwam — anders zouden de twee vakken 512,96px hóóg
   * worden.
   */
  .approachStep .approachStepBody,
  .approachStep .approachStepImage {
    flex: 0 0 auto;
    width: 100%;
    max-width: 512.96px;
  }

  .approachStep::before {
    position: absolute;
    top: calc(50% - 40.5px);
    left: 0;
  }

  .approachStep .approachStepImage {
    order: 0;
  }

  .approachStep .approachStepBody {
    order: 2;
  }

  .approachStepsLine {
    top: 250px;
    left: 40px;
    height: calc(100% - 500px);
  }
}

@media (max-width: 767px) {
  .approachSteps {
    margin-block: 75px;
  }

  /* Ruimte voor het nummer, dat hier tegen de linkerrand van de kolom staat. */
  .approachStep,
  .approachStepsFinal {
    padding-left: 100px;
  }

  .approachStep::before {
    min-width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .approachStepTitle {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .approachSteps .approachStep .approachStepImage {
    height: 200px;
  }

  .approachStepsLine {
    top: 200px;
    left: 29px;
    height: calc(100% - 400px);
  }

  /* De slotstap staat hier links uitgelijnd, maar blijft wel in het midden van
     de kolom staan. */
  .approachStepsFinal {
    text-align: left;
  }
}

/* Een eigen grens van samdesign.nl: hier worden de koppen en het streepje
   kleiner. */
@media (max-width: 420px) {
  .approachStepTitle {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -1.1px;
  }

  .approachStepTitle::before {
    content: var(--approachStepMarkSmall);
  }
}