/*
 * /wordpress-website-laten-maken/ — de uitzonderingen van deze pagina.
 *
 * De tien secties komen uit het atelier en hebben hun opmaak bij hun component.
 * Wat hier staat is wat op deze pagina anders is dan wat die componenten
 * standaard doen.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/wordpress-website-laten-maken/
 * (R9) op 1440, 1024, 767 en 390px.
 *
 * Laadt alleen op deze pagina; zie inc/assets.php.
 */

/* ==================================================================
   "Hoe bouwen wij jouw WordPress website?"
   ================================================================== */

/*
 * De inleiding is hier 995px breed en niet de volle container. Op
 * /website-laten-maken/ staat er één korte regel en viel dat nooit op; hier is
 * het een alinea van vier regels die anders over 1280px uitwaaiert.
 *
 * Tussen de inleiding en de eerste kaart staat hier 180px en niet de 160 van
 * /website-laten-maken/: 20px onder de inleiding, 50 tussen de twee kolommen en
 * 110 voor de pijlen boven de rij. Bij ons hangen die pijlen absoluut in de
 * marge (processSlider.css), dus is het één getal: 140 hier plus de 10 die de
 * rij zelf boven de kaarten laat.
 *
 * De witregel onder de laatste alinea blijft staan en telt mee in de hoogte van
 * het blok — vandaar `flow-root`, anders klapt hij samen met de marge eronder en
 * verschuift de rij onder 768px 7,5px. Dat is dezelfde 1,5em-tegen-30px die §26
 * bij `mediaText` uitlegt; hier zit de −30 al in de 140 verwerkt.
 */
.processSliderIntro {
  display: flow-root;
  max-width: 995px;
  margin-bottom: 140px;
}

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

/*
 * Op een tablet staat deze sectie op samdesign.nl 12px van de linkerrand in
 * plaats van 20, waardoor de kop, de inleiding en de link 4px verder naar links
 * staan dan de container eromheen. De rij kaarten begint daar al op 12, dus die
 * blijft staan waar hij staat.
 */
@media (max-width: 1024px) and (min-width: 768px) {
  .processSliderTitle,
  .processSliderIntro,
  .processSliderActions {
    margin-inline: -4px 4px;
  }
}

/* ==================================================================
   "Samen winnen."
   ================================================================== */

/*
 * De strook van de volgende kaart die in beeld blijft is hier onder 768px 50px
 * en niet de 55 van de homepage: `--swiper-offset-size` staat op deze pagina
 * alleen in het breekpunt van 1024 en erft naar beneden door.
 */
.teamSlider {
  --teamPeek: 50px;
}

/*
 * De inleiding heeft hier géén streepje ervoor, net als in het raster op
 * /over-ons/ maar anders dan op de homepage: op samdesign.nl staat er bij deze
 * instantie alleen `max-width: fit-content` op het widget en geen lijntje.
 */
.teamSliderIntro {
  border-left: 0;
  padding-left: 0;
}

/*
 * En de link staat hier met zijn onderkant gelijk met de inleiding in plaats van
 * met zijn bovenkant: op samdesign.nl heeft deze kolom `align-items: flex-end`,
 * de homepage niet. De kop zelf is een hele regel breed en merkt er niets van.
 */
.teamSliderHeader {
  align-items: flex-end;
}

/*
 * De link naast de kop blijft hier ook onder 768px rechts staan, terwijl hij op
 * de homepage naar het midden zakt: op samdesign.nl heeft dit widget alleen
 * `margin-left: auto` en geen mobiele regel ernaast.
 *
 * En hij staat daar tegen de inleiding aan in plaats van 20px eronder. De 20px
 * tussen de kop en de inleiding blijft wél staan, dus die verhuist van de rij
 * naar de inleiding zelf.
 */
@media (max-width: 767px) {
  .teamSliderHeader {
    row-gap: 0;
  }

  .teamSliderIntro {
    margin-top: 20px;
  }

  .teamSliderHeader > .textLink {
    margin-inline: auto 0;
  }
}