/*
 * De stadspagina's — de uitzonderingen van deze familie.
 *
 * Tweeënzeventig pagina's met één ontwerp: de acht /website-laten-maken-<stad>/
 * van §31 en de vierenzestig /webdesign-<stad>/ van §30. Op samdesign.nl is dat
 * één en hetzelfde gedupliceerde Elementor-sjabloon — dezelfde element-id per
 * sectie, dezelfde vier afbeeldingen, dezelfde maten — en nagemeten op
 * /webdesign-amsterdam/ en /website-laten-maken-amsterdam/ staat op 1440 én
 * 390px elk gat en elke padding daar op de pixel gelijk. Ze verschillen alleen
 * in tekst, dus laadt dit bestand op de hele familie in één keer — op het
 * voorvoegsel van de slug en niet tweeënzeventig keer op naam; zie
 * PAGE_STYLE_FAMILIES in inc/assets.php.
 *
 * Dit bestand heette `websiteLatenMakenStad.css` toen alleen die acht er waren.
 *
 * De elf secties komen uit het atelier en hebben hun opmaak bij hun component.
 * Het ritme tussen de secties staat als veld op de instantie waar het component
 * daar een veld voor heeft (mediaText, textSection, processSlider); wat hier
 * staat is wat een component standaard ánders doet dan deze pagina's willen, en
 * wat op samdesign.nl per instantie apart ingesteld is.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/website-laten-maken-amsterdam/
 * (R9) op 1440, 1024, 767 en 390px — met een gewekte Swiper, zie
 * docs/beslissingen.md over `/root/samshots/swiperprobe.js`.
 *
 * Laadt alleen op deze familie; zie inc/assets.php.
 */

/* ==================================================================
   De USP-lijst naast "Wat kun je van SAM Design verwachten?"
   ================================================================== */

/*
 * Deze instantie zet de lijst anders dan /visitekaartjes/, waar het veld `usps`
 * voor gemaakt is. Daar staat 20px tussen twee punten en begint de lijst op de
 * rooilijn van de tekstkolom; hier springt de hele lijst in en staan de punten
 * strak onder elkaar, precies één regel hoog.
 *
 * Gemeten op samdesign.nl: de lijst begint 60px binnen de tekstkolom (45 onder
 * 768px) en is 198px hoog bij zes punten van 33 — dus nul ruimte ertussen. Bij
 * ons was hij 298 en dat is boven 1024px onzichtbaar (het beeld ernaast is
 * hoger), maar zodra de kolommen stapelen schoof het de halve pagina op.
 */
.mediaTextUsps {
  margin-left: 60px;

  /*
   * 30px boven de lijst en 22,5 onder 768px — anderhalve regel, zoals overal op
   * samdesign.nl. Het component zet daar `--textSize * 1,5 + 15px`, en van die
   * som verdwijnt 30 in de negatieve marge onder de laatste alinea (`textPull`
   * staat op deze instantie op 30). Vandaar +30 in plaats van +15: dat is
   * precies de 15px die er gemeten aan de bovenkant ontbrak.
   */
  margin-top: calc(var(--textSize) * 1.5 + 30px);
}

/* En 25px tussen de lijst en de knop in plaats van de 50 van het component. */
.mediaTextUsps ~ .mediaTextActions {
  margin-top: 25px;
}

.mediaTextUsps li:not(:last-child) {
  padding-bottom: 0;
}

.mediaTextUsps li:not(:first-child) {
  margin-top: 0;
}

/* ==================================================================
   Het ritme rond de twee sliders
   ================================================================== */

/*
 * `reviewSlider` en `teamSlider` hebben geen ruimtevelden — hun marges staan in
 * hun eigen CSS op de 150 van de homepage. Deze pagina's wijken daar op twee
 * plekken van af, dus staat het hier en niet bij het component: dat zou de
 * homepage en /over-ons/ meenemen.
 */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Op een tablet is de lucht om de teamrij 100 en niet 150. */
  .teamSlider {
    margin-block: 100px;
  }
}

@media (max-width: 767px) {
  /*
   * Onder 768px staat er 75px boven de klantverhalen en 100 eronder, waar het
   * component 150 aan beide kanten zet.
   */
  .reviewSlider {
    margin-top: 75px;
    margin-bottom: 100px;
  }

  /* De lijst springt hier 45 in in plaats van 60. */
  .mediaTextUsps {
    margin-left: 45px;
  }

  /* En de knop staat 17,5 onder de lijst. */
  .mediaTextUsps ~ .mediaTextActions {
    margin-top: 17.5px;
  }
}