/*
 * /visitekaartjes/ — de uitzonderingen van deze pagina.
 *
 * De acht secties komen uit het atelier en hebben hun opmaak bij hun component.
 * Het ritme tussen de secties staat als veld op de instantie zelf
 * (spaceTop/spaceBottom en de mobiele varianten), dus niet hier. Wat hier staat
 * is wat een component standaard ánders doet dan deze pagina wil, en wat op
 * samdesign.nl per instantie apart ingesteld is.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/visitekaartjes/ (R9) op 1440,
 * 1024, 767 en 390px.
 *
 * Laadt alleen op deze pagina; zie inc/assets.php.
 */

/* ==================================================================
   De witregel onder de laatste alinea
   ------------------------------------------------------------------
   Onze .richText haalt de marge onder de laatste alinea weg; samdesign.nl laat
   die staan en trekt er per instantie een negatieve marge van af. Op deze
   pagina is dat overal −20, dus blijft er 10px over op een breed scherm en 7,5
   op een telefoon (1,5em van 20 en van 15px).

   Als padding en niet als marge: op een tekstsectie zou die marge door het blok
   en de container heen samenklappen met de marge ónder de sectie, en dan wordt
   de sectie niet hoger maar de ruimte eronder kleiner. Gemeten: de vier secties
   met lopende tekst zijn er samen 40px hoger door op 1440 en 1024px, en 50 op
   767 en 390px.

   De grijze band doet niet mee: daar staat de lijst met punten onder de tekst,
   en die brengt zijn eigen ruimte mee (zie mediaText.css).
   ================================================================== */

.textSection .textSectionText,
.mediaText:not(.mediaTextBand) .mediaTextText {
  padding-bottom: calc(1.5em - 20px);
}

/* ==================================================================
   De ruimte onder de kop van een tekstsectie
   ------------------------------------------------------------------
   Onder 768px zet textSection.css die op 20px; hier blijft het de 40 die als
   veld op de instantie staat, net als op /over-ons/.
   ================================================================== */

@media (max-width: 767px) {
  .textSection .textSectionTitle {
    margin-bottom: var(--textSectionTitleGap, 40px);
  }
}

/* ==================================================================
   "Op maat gemaakte, unieke ontwerpen." — gecentreerd, maar anders
   ------------------------------------------------------------------
   Deze sectie wil alleen zijn tekst gecentreerd hebben. `textAlign = center`
   doet er op de homepage drie dingen bij: de brede buitenmarges van "bewezen
   resultaten" (160px), de lopende tekst 30px smaller dan de kop, en een eigen
   mobiel ritme. Zolang die drie aan dat ene veld vastzitten
   (docs/openstaand.md) staan ze hier weer uit. `.textSectionCentered` is op deze
   pagina uniek: de tweede tekstsectie staat links uitgelijnd.

   Gemeten: blok 850px op 1440 en 1024, 727 op 767 en 350 op 390 — dus gewoon de
   containerbreedte zodra 850 niet meer past. De kop is 600px breed en staat in
   het midden van dat blok; de lopende tekst vult het.
   ================================================================== */

.textSectionCentered .textSectionBlock {
  max-width: var(--textSectionWidth, none);
}

.textSectionCentered .textSectionTitle {
  margin-inline: auto;
}

.textSectionCentered .textSectionText {
  max-width: 100%;
}

/*
 * Onder 768px houdt de gecentreerde variant op de homepage zijn 150px lucht,
 * krijgt hij 60px padding onderaan en staat hij 30px van de rand. Hier is het
 * het gewone ritme van deze pagina: 50px lucht, geen padding, 20px van de rand.
 * Vandaar dat de mobiele ruimte van déze sectie hier staat en niet als veld op
 * de instantie — die zou het van deze regel toch verliezen.
 */
@media (max-width: 767px) {
  .textSectionCentered {
    margin-block: 50px;
    padding-bottom: 0;
    --containerPadding: 20px;
  }
}

/* ==================================================================
   De grijze band — "Een logo laten maken met je doelgroep in gedachte."
   ------------------------------------------------------------------
   Het vlak houdt hier 150px lucht boven en onder, ook op een tablet, en 50px op
   een telefoon. De 100 en 75 van mediaText.css komen van /over-ons/.
   ================================================================== */

/*
 * En het beeld: op een breed scherm een uitsnede van 610px hoog, vanaf 1024px
 * naar beneden zijn eigen verhouding. Dat laatste is geen maat maar het
 * ontbreken ervan, dus gaat het niet als veld maar als custom property.
 */
.mediaTextBand {
  --mediaTextMediaHeightTablet: auto;
}

/*
 * De knop staat op de rooilijn van het streepje voor de inleiding, 30px naar
 * binnen — dezelfde 30px als in de hero. mediaText.actions doet dat niet
 * standaard, want de knoppen op de homepage staan daar tegen de kolomrand.
 */
.mediaTextBand .mediaTextActions {
  padding-left: 30px;
}

@media (max-width: 1024px) {
  .mediaTextBand {
    padding-block: 150px;
  }
}

@media (max-width: 767px) {
  .mediaTextBand {
    padding-block: 50px;
  }
}

/* ==================================================================
   "Succesverhalen."
   ------------------------------------------------------------------
   Twee dingen die op samdesign.nl per pagina verschillen: onder 768px staat
   deze sectie hier 50px onder de vorige in plaats van 150 — de marge eronder
   blijft 150, want dat is precies de ruimte naar de contactkaart — en de kop is
   hier 39px waar hij op /over-ons/ en de homepage 38 is.
   ================================================================== */

@media (max-width: 767px) {
  .reviewSlider {
    margin-top: 50px;
  }

  .reviewSliderTitle {
    font-size: 39px;
    letter-spacing: -1.95px;
  }
}