/*
 * /nieuwsbrief-design/ — de uitzonderingen van deze pagina.
 *
 * De zes 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.
 *
 * Deze pagina is het tweelingbroertje van /visitekaartjes/ en /huisstijl/:
 * dezelfde zes soorten secties in dezelfde vorm. Vandaar dat dit bestand bijna
 * regel voor regel visitekaartjes.css is; waar het afwijkt staat het erbij.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/nieuwsbrief-design/ (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 bij alle drie de tekstblokken −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.

   Anders dan op /visitekaartjes/ doet de grijze band hier wél mee: daar staat
   onder de tekst een lijst met punten die zijn eigen ruimte meebrengt, hier
   staat de knop er direct onder.
   ================================================================== */

.textSection .textSectionText,
.mediaText .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/ en /visitekaartjes/.
   ================================================================== */

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

/* ==================================================================
   "Diverse designs voor diverse situaties." — 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.

   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, dat als veld op de instantie staat: 50px
 * lucht, geen padding, 20px van de rand.
 */
@media (max-width: 767px) {
  .textSectionCentered {
    margin-block:
      var(--sectionSpaceTopMobile, 50px)
      var(--sectionSpaceBottomMobile, 50px);
    padding-bottom: 0;
    --containerPadding: 20px;
  }
}

/* ==================================================================
   De twee beelden naast de tekst
   ------------------------------------------------------------------
   Op een breed scherm een uitsnede van 610px hoog, vanaf 1024px naar beneden
   hun eigen verhouding — bij beide secties, waar op /visitekaartjes/ alleen de
   band dat doet. Dat laatste is geen maat maar het ontbreken ervan, dus gaat het
   niet als veld maar als custom property.

   Gemeten: 544,1 op 1024 (480 breed), 396,9 op 767 en 390 voor "Samenwerking
   vanaf het begin.", en 423,3 / 308,5 voor "Uniek ontwerp voor uw nieuwsbrief."
   ================================================================== */

.mediaText {
  --mediaTextMediaHeightTablet: auto;
}

/* ==================================================================
   De grijze band — "Uniek ontwerp voor uw nieuwsbrief."
   ------------------------------------------------------------------
   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/.
   ================================================================== */

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

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

/*
 * De knop staat op de rooilijn van het streepje voor de inleiding, 30px naar
 * binnen — dezelfde 30px als in de hero. mediaText.css doet dat niet standaard,
 * want de knoppen op de homepage staan tegen de kolomrand.
 *
 * En hij staat 50px onder de tekst en niet 40: op samdesign.nl is dat de ruimte
 * tussen twee widgets in deze kolom, dezelfde 50 als onder de kop. De witregel
 * hierboven komt er nog bij, dus netto 60px onder de laatste regel.
 */
.mediaTextBand .mediaTextActions {
  margin-top: 50px;
  padding-left: 30px;
}

/* ==================================================================
   "Succesverhalen."
   ------------------------------------------------------------------
   Twee dingen die op samdesign.nl per pagina verschillen, precies als op
   /visitekaartjes/: onder 768px staat deze sectie hier 50px onder de vorige in
   plaats van 150 — de marge eronder blijft 150, want die klapt samen met de
   150 boven de contactkaart — en de kop is hier 39px waar hij op /over-ons/ en
   de homepage 38 is. De letterafstand blijft een twintigste van de kopmaat.
   ================================================================== */

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

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