/*
 * processSlider + processStep — "Ons proces." met de rij hoge kaarten.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/website-laten-maken/ (R9), gemeten
 * op 1440, 1024, 767 en 390px.
 *
 * Drie kaarten in beeld op een breed scherm, twee op een tablet en één op een
 * telefoon; ze sluiten op elkaar aan, zonder ruimte ertussen, en de rij loopt
 * tot voorbij de rechterrand van de container. Verschuiven gaat met scroll-snap
 * en dus zonder JavaScript; de pijlen erboven en de stipjes eronder komen uit
 * carousel.{css,js} en zijn een handje erbij, geen voorwaarde.
 *
 * Onder de muis klapt de omschrijving van de stap uit, wordt het beeld groter,
 * zakt het verder weg in het donkerblauw en licht het nummer op. Vier
 * overgangen tussen twee standen die aan één `:hover` hangen, dus CSS en geen
 * Motion (§8).
 */

.processSlider {
  margin-block: 150px;
}

/*
 * De kop en de inleiding kunnen aan beide kanten inspringen. Op
 * /website-laten-maken/ staan ze op de rooilijn; op de stadpagina's (§31) 20px
 * daarbinnen, waardoor de inleiding 40 smaller wordt. De rij eronder blijft
 * staan waar hij staat, dus het is een marge op deze twee en geen padding op de
 * sectie.
 */
.processSliderTitle {
  max-width: var(--titleWidth, none);
  margin-bottom: 35px;
  margin-inline: var(--processHeadInset, 0);
}

/*
 * De tweede regel van de kop: kleiner, op een eigen regel, met het roze schuine
 * streepje ervoor. Het streepje is versiering, dus een achtergrond op ::before
 * en geen teken in de tekst.
 */
.processSliderSubtitle {
  display: block;
  margin-top: 15px;
  font-size: 40px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: normal;
}

.processSliderSubtitle::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 29px;
  margin-right: 8px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='m2.862-8.921.251-2.438a.95.95 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.538-.493' transform='matrix(0.914 -0.407 0.407 0.914 9.556 37.517)' fill='%23dc0356'/%3E%3C/svg%3E") center / cover no-repeat;
}

/*
 * Er staat 150px tussen de inleiding en de eerste kaart, op elke breedte — of
 * de maat die de instantie meegeeft: de stadpagina's zetten er 100.
 */
.processSliderIntro {
  margin-bottom: var(--processRowGap, 150px);
  margin-inline: var(--processHeadInset, 0);
}

.processSliderIntro > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   De rij kaarten
   ------------------------------------------------------------------ */

/*
 * Het omhulsel om de rij heen. Het is de kolom waar de kaarten in staan, en die
 * is op samdesign.nl op elke breedte een andere breedte dan de container: op een
 * breed scherm begint hij op de rooilijn en loopt hij door tot de paginamarge
 * rechts, op een tablet staat hij 12px van links en 20px van rechts, en onder
 * 768px is hij 360 breed in het midden. De maten per breekpunt staan onderaan.
 *
 * Het is ook het ankerpunt voor de pijlen (die hangen aan de randen ervan) en
 * voor de stipjes (die staan onder het midden ervan).
 */
.processSliderRow {
  position: relative;
}

/*
 * De kaarten sluiten op elkaar aan: samen vormen ze één doorlopende band.
 *
 * De 10px lucht boven en onder zit op samdesign.nl als padding op elke slide,
 * waardoor de rij 700 hoog is met kaarten van 680.
 */
.processCards {
  display: flex;
  padding-block: 10px;
  counter-reset: processStep;
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.processCards::-webkit-scrollbar {
  display: none;
}

.processCard {
  position: relative;
  flex: 0 0 100%;
  height: 680px;
  overflow: hidden;
  counter-increment: processStep;
  scroll-snap-align: start;
}

/*
 * Drie classes in de selector, want de reset heeft `img[width][height] { height:
 * auto }` staan en dat weegt zwaarder dan één class.
 */
.processCards .processCard .processCardImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

/*
 * Onder de muis wordt het beeld 1,2 keer zo groot en zakt het 40px, zodat de
 * uitsnede meebeweegt in plaats van alleen op te blazen. Op samdesign.nl staat
 * daar `margin-top: 40px` met `margin-bottom: -40px` naast de schaal; dat komt
 * op dezelfde matrix uit als eerst schalen om het midden en daarna verschuiven,
 * maar dan zonder de layout aan te raken (R6).
 */
.processCard:hover .processCardImage {
  transform: translateY(40px) scale(1.2);
}

/*
 * Het beeld zakt naar onderen weg in donkerblauw, zodat het nummer en de naam
 * leesbaar zijn. Versiering, dus een pseudo-element en geen extra div.
 *
 * De `z-index` is niet overbodig: zodra het beeld onder de muis een `transform`
 * krijgt, wordt het geschilderd in dezelfde ronde als de gepositioneerde
 * kinderen, en die gaan op volgorde in de boom — dan komt het beeld dus over het
 * verloop heen te liggen en verdwijnt de donkere onderkant precies op het moment
 * dat er tekst op moet. Vandaar 1 voor het verloop en 2 voor de tekst.
 */
.processCard::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 317.06px;
  background: linear-gradient(180deg, #fff0 0%, rgba(9, 32, 65, 0.94) 64%, #092041 78%, #092041 100%);
  transition: height 0.4s;
}

/* Onder de muis loopt het verloop verder omhoog, zodat de omschrijving leest. */
.processCard:hover::before {
  height: 554px;
}

/*
 * Het nummer, de naam en de omschrijving staan onderin de kaart: 50px van links,
 * 40px van rechts en 57px van onderen — de padding die de kolom op samdesign.nl
 * heeft. De omschrijving is het laatste kind en is dichtgeklapt nul hoog, dus
 * die 57px is in rust de afstand tot de naam plus zijn eigen 10px.
 *
 * Het blok hangt aan de onderkant, dus klapt de omschrijving naar bóven uit en
 * blijft de onderrand staan.
 */
.processCardBody {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 57px;
  left: 50px;
  color: var(--colorWhite);
}

/*
 * Het nummer van de stap komt uit de lijst en niet uit een veld: het herhaalt de
 * volgorde van de <ol>. Het staat er heel flauw op, net als daar.
 */
.processCardNumber {
  margin: 0 0 10px;
  opacity: 0.1;
  font-size: 59px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: -2.95px;
  transition: opacity 0.4s;
}

.processCard:hover .processCardNumber {
  opacity: 0.5;
}

.processCardNumber::before {
  content: counter(processStep);
}

/*
 * Een flexrij met het roze schuine streepje ervoor, zodat een naam van twee
 * regels netjes onder elkaar blijft staan in plaats van onder het streepje door
 * te lopen. Het streepje is versiering, dus een pseudo-element.
 */
.processCardTitle {
  display: flex;
  margin: 0 0 10px;
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -2px;
}

.processCardTitle::before {
  content: '';
  flex: none;
  width: 35px;
  height: 35px;
  margin: 7px 0 0 -7px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='m2.862-8.921.251-2.438a.95.95 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.538-.493' transform='matrix(0.914 -0.407 0.407 0.914 9.556 37.517)' fill='%23dc0356'/%3E%3C/svg%3E") center / cover no-repeat;
}

/*
 * De omschrijving van de stap staat er altijd — een schermlezer leest hem dus
 * gewoon voor — maar is dichtgeklapt tot hij nul hoog is. Onder de muis gaat het
 * dak eraf; 500px is ruim genoeg voor de langste en komt van samdesign.nl.
 *
 * `max-height` en niet `height: auto`: dat laatste is geen waarde waar een
 * overgang tussen loopt. Typografie en de witregel tussen twee alinea's komen
 * van `.richText` in main.css, want dit is gewoon lopende tekst.
 */
.processCardText {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s;
}

.processCard:hover .processCardText {
  max-height: 500px;
}

/* ------------------------------------------------------------------
   De link eronder
   ------------------------------------------------------------------ */

/*
 * 60px onder de stipjes, die zelf 10px boven en onder houden: samen de 88px die
 * er op samdesign.nl tussen de onderkant van de rij en de link staat.
 */
.processSliderActions {
  margin: 60px 0 0;
  text-align: center;
}

/* ------------------------------------------------------------------
   De pijlen
   ------------------------------------------------------------------ */

/*
 * Hoe ver de knoppen van de randen van de rij staan. Hun maat en uiterlijk staan
 * in carousel.css; dit hangt aan de rij en hoort dus hier.
 *
 * Boven 1024px staat de linker precies op de rooilijn en de rechter 560px rechts
 * van het midden van de rij — de maat die samdesign.nl daar met de hand heeft
 * ingesteld. Bij een rij smaller dan 1120px wordt dat een negatieve waarde en
 * schuift de knop de rij uit; tussen 1025 en 1120px staat hij daar dan ook
 * buiten beeld. Wij klemmen hem op de rechterrand (docs/beslissingen.md).
 */
@media (min-width: 1025px) {
  .processSlider .carouselArrowPrev {
    left: 0;
  }

  .processSlider .carouselArrowNext {
    right: max(calc(50% - 560px), 0px);
  }
}

@media (max-width: 1024px) {
  .processSlider .carouselArrowPrev {
    left: 50px;
  }

  .processSlider .carouselArrowNext {
    right: 50px;
  }
}

/* ==================================================================
   Hoeveel kaarten er in beeld staan
   ================================================================== */

/*
 * Boven 1024px begint de rij op de rooilijn en loopt hij door tot de paginamarge
 * rechts. (100vw - 100%) / 2 is de afstand van de vensterrand tot de container;
 * daar gaat de paginamarge weer vanaf.
 */
@media (min-width: 1025px) {
  /*
   * Waar de rij rechts stopt: normaal op de paginamarge (1340 op 1440px), en
   * met het vinkje "doorlopen tot de vensterrand" op 0 — dan is hij 1360 en
   * zijn de kaarten 453,3. Zo staat het op de stadpagina's (§31).
   */
  .processSliderRow {
    margin-right: calc(var(--processRowEdge, var(--containerPadding)) - 50vw + 50%);
  }

  .processCard {
    flex-basis: calc(100% / 3);
  }
}

/*
 * Op een tablet staat de rij 12px van de linkerrand van het venster en 20px van
 * de rechter. Die 12 is geen tikfout: de sectie heeft op samdesign.nl vanaf
 * 1024px naar beneden een padding van `0 20px 0 12px`.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .processSliderRow {
    width: calc(100vw - 32px);
    margin-left: calc(50% - 50vw + 12px);
  }

  .processCard {
    flex-basis: 50%;
  }
}

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

@media (max-width: 1024px) {
  .processSlider {
    margin-block: 100px;
  }

  .processCardTitle {
    font-size: 34px;
    letter-spacing: -1.7px;
  }

  .processCardNumber {
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -2.5px;
  }
}

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

  .processSliderSubtitle {
    font-size: 30px;
    line-height: 30px;
  }

  .processSliderSubtitle::before {
    width: 11px;
    height: 22px;
  }

  /*
   * Onder 768px is de rij 360 breed in het midden, en smaller zodra het venster
   * dat niet meer toelaat. De container eromheen is daar 400 (`narrow`), dus die
   * 40px verschil is de lucht links en rechts van de kaarten.
   */
  .processSliderRow {
    max-width: 360px;
    margin-inline: auto;
  }

  .processCard {
    height: 400px;
  }

  .processCard::before {
    height: 220px;
  }

  .processCard:hover::before {
    height: 400px;
  }

  .processCardBody {
    right: 30px;
    bottom: 30px;
    left: 30px;
  }

  .processCardTitle {
    font-size: 19px;
    line-height: 25px;
    letter-spacing: -0.95px;
  }

  .processCardTitle::before {
    width: 20px;
    height: 18px;
    margin: 4px 0 0;
    background-size: contain;
  }

  .processCardNumber {
    font-size: 35px;
    line-height: 35px;
    letter-spacing: -1.75px;
  }
}