/*
 * textSection — een kop met lopende tekst.
 *
 * De breedtes komen als custom property uit het component, want in het ontwerp
 * verschillen ze per sectie (R9). Het blok staat altijd binnen de gewone
 * container: gecentreerd of tegen de linkerkant.
 */

/*
 * De ruimte boven en onder een sectie verschilt per instantie: op de homepage is
 * het 150 en onder 768px 40, op /website-laten-maken/ 150 / 100 / 75. Vandaar
 * drie custom properties per kant, die op elkaar terugvallen.
 */
.textSection {
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

@media (max-width: 1024px) {
  .textSection {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }
}

/*
 * flow-root, zodat de marge onder het tekstblok bínnen dit blok blijft en niet
 * met de marge van de sectie samenvalt. Zonder dat doet "Tekstblok omhoog
 * trekken" niets aan de hoogte van de sectie, maar wel aan de ruimte eronder.
 */
.textSectionBlock {
  display: flow-root;
  max-width: var(--textSectionWidth, none);
}

.textSectionBlockCenter {
  margin-inline: auto;
}

.textSectionTitle {
  max-width: var(--textSectionTitleWidth, none);
  margin-bottom: var(--textSectionTitleGap, 40px);
}

/* ------------------------------------------------------------------
   Gecentreerde tekst
   ------------------------------------------------------------------ */

/*
 * De sectie "Een webdesign bureau met bewezen resultaten?" staat op
 * samdesign.nl niet links maar in het midden, en het blok houdt daar 160px
 * marge aan weerszijden — onder 768px is dat 10px, met een sectiepadding van
 * 30px in plaats van 20. Gemeten op samdesign.nl: 960@240 (1440), 664@180
 * (1024), 687@40 (767) en 310@40 (390).
 */
.textSectionCentered .textSectionBlock {
  max-width: min(var(--textSectionWidth, 100%), 100% - 320px);
  text-align: center;
}

/* De lopende tekst is er 30px smaller dan de kop erboven. */
.textSectionCentered .textSectionText {
  max-width: calc(100% - 30px);
}

@media (max-width: 767px) {
  .textSection {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 40px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 40px)));
  }

  .textSectionTitle {
    margin-bottom: var(--textSectionTitleGapMobile, 20px);
  }

  /*
   * De gecentreerde variant doet het mobiele ritme van 40px níet mee: die houdt
   * ook onder 768px zijn 150px lucht boven en onder, en krijgt er 60px padding
   * onderaan bij. Zo staat het op samdesign.nl, gemeten op 390 en 767px.
   *
   * Dat is hier geen smaakkwestie: de foto van de specialist op de contactkaart
   * eronder wordt met een negatieve marge 50px boven die kaart getild. Met 40px
   * ertussen viel die foto dwars over de laatste regel van deze sectie
   * ("… ons volgende succesverhaal.").
   */
  .textSectionCentered {
    margin-block: 150px;
    padding-bottom: 60px;
    --containerPadding: 30px;
  }

  .textSectionCentered .textSectionBlock {
    max-width: calc(100% - 20px);
  }
}

/*
 * De witregel onder de laatste alinea en het vaste stukje dat Elementor er weer
 * afhaalt. Netto is dat niets op een breed scherm en 7,5px minder onder 768px —
 * zie mediaText.css voor het hele verhaal.
 */
.textSectionTextTrailing > :last-child {
  margin-bottom: 1.5em;
}

.textSectionTextPull {
  margin-bottom: calc(var(--textSectionTextPull, 0px) * -1);
}

/*
 * Een kop midden in de lopende tekst.
 *
 * Op twaalf van de tweeënzeventig stadspagina's van §30 en §31 staat er in een
 * tekstblok een kop die op samdesign.nl geen sectiekop is maar een kop in de
 * alinea's — "Stap 1: Inventarisatie" op /website-laten-maken-leiden/, "Wat kost
 * webdesign in Den Haag?" op /webdesign-den-haag/. Die halen we dus niet uit de
 * tekst naar het kopveld: daar zou hij de maat en de plek van een sectiekop
 * krijgen, terwijl hij op samdesign.nl tussen de alinea's staat. De sectie heeft
 * dan geen kop en rendert een `<div>` (Parts\block_tag()).
 *
 * Zelfde maten als bij `mediaText`; de twee niveaus gedragen zich verschillend, en dat is nagemeten op 1440,
 * 1024, 767 en 390px:
 *
 *  - een `h2` in een tekstblok is overal 59/59 → 50/55 → 35/35, precies de
 *    breekpunten van `.sectionTitleSmall` met de regelhoogte van 59 erboven.
 *    Vandaar vaste waarden: op alle twaalf de pagina's staat er dezelfde maat.
 *  - een `h3` staat per widget ingesteld en verschilt dus per instantie: 30/66
 *    op /webdesign-spijkenisse/, 30/36 op /webdesign-bureau-dordrecht/ en 20/22
 *    op /webdesign-den-haag/, waar hij onder 768px ook nog naar 14/22 gaat.
 *    Vandaar de velden, met de 30/66 hieronder als standaard.
 */
.textSectionText h2 {
  margin: 0 0 20px;
  font-size: 59px;
  font-weight: 500;
  line-height: 59px;
  letter-spacing: -2.95px;
}

.textSectionText h3 {
  margin: 0 0 20px;
  font-size: var(--textSectionTextHeadingSize, 30px);
  font-weight: 500;
  line-height: var(--textSectionTextHeadingLine, 66px);
  letter-spacing: var(--textSectionTextHeadingSpace, -1.5px);
}

@media (max-width: 1024px) {
  .textSectionText h2 {
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -2.5px;
  }
}

@media (max-width: 767px) {
  .textSectionText h2 {
    font-size: 35px;
    line-height: 35px;
    letter-spacing: -1.75px;
  }

  .textSectionText h3 {
    font-size: var(--textSectionTextHeadingSizeMobile, var(--textSectionTextHeadingSize, 30px));
    line-height: var(--textSectionTextHeadingLineMobile, var(--textSectionTextHeadingLine, 66px));
    letter-spacing: var(--textSectionTextHeadingSpaceMobile, var(--textSectionTextHeadingSpace, -1.5px));
  }
}