/*
 * mediaText — afbeelding naast tekst.
 *
 * Vier vormen, alle vier van samdesign.nl overgenomen (R9):
 *
 * mediaTextColumns  Kolommen met een eigen breedte, gecentreerd naast elkaar.
 *                   Onder 1025px staan ze onder elkaar — elk nog steeds op zijn
 *                   eigen breedte en gecentreerd, niet uitgerekt. De afbeelding
 *                   is daar smaller (--mediaTextMediaWidthTablet) en staat
 *                   onderaan.
 * mediaTextHalf     Twee halve kolommen van rand tot rand, met de tekst 10px
 *                   naar binnen. Die stapelen pas onder 768px; op een tablet
 *                   staan ze dus nog naast elkaar, precies als op samdesign.nl.
 * mediaTextStack    Twee kolommen tegen de randen, van boven uitgelijnd. Onder
 *                   1025px onder elkaar in bronvolgorde, dus met de afbeelding
 *                   bovenaan. Deze vorm brengt geen eigen marges mee.
 * mediaTextWrap     Twee kolommen tegen de randen, in het midden uitgelijnd, die
 *                   op een tablet naast elkaar blijven staan en pas omvouwen
 *                   zodra ze samen niet meer passen.
 *
 * Losstaand daarvan: mediaTextBand zet de sectie op een grijs vlak, waar de
 * afbeelding met --mediaTextMediaOffset bovenuit kan steken.
 */

/*
 * De ruimte boven en onder een sectie verschilt per instantie: op de homepage is
 * het overal 150, op /website-laten-maken/ 150 / 100 / 75 met twee secties die
 * daarvan afwijken. Vandaar drie custom properties per kant, die op elkaar
 * terugvallen: mobiel op tablet, tablet op de brede maat, en die op 150.
 */
.mediaText {
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

/*
 * position: relative, want met een blok bóven de kolommen hangt het lijnlogo aan
 * de container en niet aan de tekstkolom (zie mediaText.php).
 */
.mediaTextInner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--mediaTextGap, 20px);
  row-gap: 50px;
}

/*
 * Twee kolommen die samen smaller zijn dan de container staan op samdesign.nl
 * meestal in het midden, maar bij "Nog meer redenen om een website te laten
 * maken" tegen de rechterkant. Vandaar deze variant.
 */
.mediaTextAlignEnd .mediaTextInner {
  justify-content: flex-end;
}

/*
 * De kolommen bovenaan in plaats van in het midden. Op samdesign.nl staat dat
 * per sectie los ingesteld: bij "Waarom ons webdesign bureau in Amsterdam?" en
 * "Hoe gaat ons webdesign bureau in Amsterdam te werk?" begint het beeld
 * bovenaan de rij, terwijl bij "Een WooCommerce webshop laten maken?" (waar het
 * beeld het hoogste item is) de tekst juist in het midden staat (§30).
 *
 * Onder 1025px doet dit niets: daar wint `.mediaTextColumns .mediaTextInner`
 * verderop in dit bestand, en `align-items` gaat in een kolom over de
 * horizontale uitlijning.
 */
.mediaTextAlignTop .mediaTextInner {
  align-items: flex-start;
}

/*
 * Het blok bóven de twee kolommen: een eigen kop met tekst over de volle
 * breedte van de band, gecentreerd in zijn eigen maat (866px op
 * /webdesign-utrecht/ en /webdesign-zoetermeer/).
 *
 * Basis 100%, dus de kolommen vallen erdoor op de volgende regel van de rij.
 * De 20px eronder komt bovenop de `row-gap` van 50 uit `.mediaTextInner`: samen
 * de 70px die samdesign.nl daar tussen dit blok en de kolommen zet.
 */
.mediaTextLead {
  flex: 0 0 100%;
  width: 100%;
  max-width: min(var(--mediaTextLeadWidth, 100%), 100%);
  margin-bottom: 20px;
  margin-inline: auto;
}

/*
 * Een leadblok met alleen een kop en geen tekst eronder. Op samdesign.nl staat
 * de negatieve marge van 30px op de láátste widget van dit blok; is dat de kop
 * zelf, dan komt hij hier terecht in plaats van onder het tekstblok. Gemeten op
 * /webdesign-pakketten/ (§37), het enige leadblok op de site zonder tekst.
 */
.mediaTextLeadPull {
  margin-bottom: calc(20px - var(--mediaTextTextPull, 0px));
}

/*
 * Vanaf 1024px naar beneden komt die 20px er níet bij: de kolommen staan daar
 * onder elkaar met `--mediaTextStackGap` ertussen, en samdesign.nl zet tussen
 * dit blok en de eerste kolom precies datzelfde getal. Gemeten op 1024px, waar
 * de drie kolommen op /webdesign-utrecht/ en op
 * /website-laten-maken/mobiele-website-laten-maken/ allebei 70 / 70 uit elkaar
 * staan; zonder deze regel wordt de eerste 90 en schuift alles eronder 20px op.
 */
@media (max-width: 1024px) {
  .mediaTextLead {
    margin-bottom: 0;
  }

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

.mediaTextMedia {
  flex: 0 1 var(--mediaTextMediaWidth, 50%);
  max-width: var(--mediaTextMediaWidth, 50%);
  margin: 0;
}

/* position: relative, want het lijnlogo hangt hieraan. */
.mediaTextBody {
  position: relative;
  flex: 0 1 var(--mediaTextTextWidth, 50%);
  max-width: var(--mediaTextTextWidth, 50%);
}

/* De afbeelding staat als eerste in de markup; rechts is een kwestie van volgorde. */
.mediaTextRight .mediaTextMedia {
  order: 2;
}

/* ------------------------------------------------------------------
   Twee beelden in dezelfde kolom
   ------------------------------------------------------------------ */

/*
 * Met een tweede afbeelding staan de twee figures in één blok, zodat de kolom
 * één flex-item blijft en de tekst ernaast blijft staan. Het blok neemt de
 * breedte van de kolom over; hoe hoog en hoe breed de twee beelden zijn en hoe
 * ver ze over elkaar heen vallen verschilt per instantie en staat bij de pagina.
 */
.mediaTextMediaStack {
  flex: 0 1 var(--mediaTextMediaWidth, 50%);
  max-width: var(--mediaTextMediaWidth, 50%);
}

.mediaTextMediaStack .mediaTextMedia {
  flex: none;
  max-width: 100%;
}

.mediaTextRight .mediaTextMediaStack {
  order: 2;
}

/*
 * Twee beelden naast elkaar in plaats van onder elkaar, met het tweede omhoog
 * verschoven. De vorm die samonlinemarketing.nl bij "Waar geloven wij in?"
 * gebruikt en die op /over-ons/ staat (§20).
 *
 * `align-items: start` en een negatieve bovenmarge op het tweede beeld: zo
 * bepaalt het éérste beeld de hoogte van de kolom en steekt het tweede er
 * bovenuit, in plaats van dat de kolom meegroeit en de tekst ernaast omlaag
 * duwt.
 *
 * De verschuiving heeft een eigen var en niet die van het uitsteken
 * (--mediaTextMediaOffset): die staat op `.mediaTextMedia` en geldt dus voor
 * béide beelden, waardoor er onderling geen verschil zou ontstaan.
 *
 * Onder 768px staan ze weer onder elkaar: twee beelden van 155px naast elkaar op
 * een telefoon is van beide niets meer te zien.
 */
.mediaTextMediaDuo {
  display: flex;
  align-items: start;
  gap: var(--mediaTextStackGap, 20px);
}

/*
 * Drie classes, en dat is nodig: vanaf 1024px naar beneden zet
 * `.mediaTextColumns .mediaTextMedia` de basis op `auto` en de max-width op de
 * breedte van de héle beeldkolom. Twee beelden naast elkaar horen daar ieder de
 * helft te krijgen, dus moet deze regel zwaarder wegen dan die.
 */
.mediaTextMediaStack.mediaTextMediaDuo .mediaTextMedia {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.mediaTextMediaDuo .mediaTextMediaSecond {
  margin-top: calc(var(--mediaTextDuoOffset, 60px) * -1);
}

@media (max-width: 767px) {
  .mediaTextMediaDuo {
    display: block;
  }

  .mediaTextMediaDuo .mediaTextMediaSecond {
    margin-top: var(--mediaTextStackGap, 20px);
  }
}

@media (max-width: 1024px) {
  .mediaTextWrap .mediaTextMediaStack,
  .mediaTextColumns .mediaTextMediaStack {
    max-width: min(
      var(--mediaTextMediaWidthTablet, var(--mediaTextMediaWidth, 100%)),
      100%
    );
  }

  /*
   * En de basis moet los, om dezelfde reden als bij `.mediaTextColumns
   * .mediaTextMedia` verderop: die vorm staat hier op `flex-direction: column`,
   * en dan gaat `flex-basis` over de hóogte. De 610px die het beeldblok zijn
   * bréedte gaf, maakte het op een tablet 610px hóóg en liet er 190px leeg onder
   * de beelden staan. `.mediaTextWrap` doet dit verderop al voor zijn eigen vorm.
   */
  .mediaTextColumns .mediaTextMediaStack {
    flex-basis: auto;
  }
}

@media (max-width: 767px) {
  .mediaTextWrap .mediaTextMediaStack,
  .mediaTextColumns .mediaTextMediaStack {
    max-width: min(
      var(--mediaTextMediaWidthMobile, var(--mediaTextMediaWidthTablet, var(--mediaTextMediaWidth, 100%))),
      100%
    );
  }
}

/*
 * Geen width: 100% — samdesign.nl rekt een afbeelding niet groter dan zijn
 * eigen maat en zet hem dan in het midden van de kolom. Dat scheelt op 767px
 * bij "meer dan alleen webdesign" 44px aan opgeblazen breedte.
 *
 * Behálve waar de instantie een hoogte of een verhouding zet: dan snijdt
 * samdesign.nl het beeld uit en vult het de kolom wél (`--mediaTextMediaFill`,
 * afgeleid in mediaText.php). Zichtbaar bij het enige beeld dat smaller is dan
 * zijn kolom: "Over ons Sasha" is 592 breed in een kolom van 609,95, en stond
 * daardoor op de vier pagina's van §33 en §36 17,95px te smal en 9px te ver naar
 * rechts.
 */
.mediaTextImage {
  display: block;
  width: var(--mediaTextMediaFill, auto);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/*
 * Een vaste hoogte voor de instanties die daarom vragen: de foto wordt dan
 * uitgesneden in plaats van geschaald. Drie classes in de selector, want de
 * reset heeft `img[width][height] { height: auto }` staan en dat weegt zwaarder
 * dan één class. Zonder --mediaTextMediaHeight verandert er niets.
 */
.mediaText .mediaTextMedia .mediaTextImage {
  height: var(--mediaTextMediaHeight, auto);
  object-fit: cover;
  object-position: center;
}

/*
 * Of een verhouding in plaats van een hoogte. Waar samdesign.nl `aspect-ratio`
 * op het beeld zet, schaalt de uitsnede mee met de kolom: op
 * /wordpress-website-laten-maken/ is "Waarom kiezen voor SAM Design?" 640×715 op
 * een breed scherm, 400×446,9 op een tablet en 350×391 op een telefoon — drie
 * hoogtes uit één verhouding, en de laatste twee vallen bij ons in hetzelfde
 * breekpunt. Vandaar een eigen var en geen vierde hoogte.
 *
 * Zet een instantie een verhouding, dan laat je de hoogtes op 0 staan: met een
 * hoogte érbij ligt de hoogte vast en gaat de verhouding over de bréedte, en dat
 * is niet wat je bedoelt.
 *
 * **Alleen achter `.mediaTextHasRatio`, en nooit als `aspect-ratio: auto`.**
 * Dit stond hier eerst als `var(--mediaTextMediaRatio, auto)` op elke instantie,
 * en dat is een echte bug geweest: de `width`/`height`-attributen van een <img>
 * gelden als presentation hint, en élke declaratie uit onze CSS wint daarvan —
 * ook `auto`. Zonder verhouding bleef er dus geen verhouding over, en dan valt
 * het beeld terug op de placeholder die core meegeeft aan een `sizes=auto`-
 * afbeelding: `img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:
 * 3000px 1500px}`. Alle drie de beelden op de homepage werden daardoor 1500px
 * hoog in plaats van 770, 736 en 903. Zie docs/beslissingen.md.
 */
.mediaTextHasRatio .mediaTextMedia .mediaTextImage {
  aspect-ratio: var(--mediaTextMediaRatio);
}

/*
 * De afbeelding mag boven de sectie uitsteken zonder iets te verschuiven: een
 * negatieve bovenmarge op de figure, waar de kolom zijn hoogte niet aan
 * aanpast omdat hij toch al hoger is.
 */
.mediaTextMedia {
  margin-top: calc(var(--mediaTextMediaOffset, 0px) * -1);
}

.mediaTextTitle {
  max-width: var(--mediaTextTitleWidth, none);
  margin-bottom: var(--mediaTextTitleGap, 40px);
}

/* ------------------------------------------------------------------
   Het lijnlogo op de achtergrond
   ------------------------------------------------------------------ */

/*
 * Versiering die rechtsboven achter de tekst hangt, met de onderkant 309,1px
 * boven de bovenrand van de tekstkolom. Absoluut, zodat er niets voor opschuift.
 */
.mediaTextDecoration {
  position: absolute;
  top: -309.1px;
  right: 0;
  opacity: 0.3;
}

/*
 * Hangt hij aan de container in plaats van aan de tekstkolom, dan ligt `right: 0`
 * op de padding van die container en niet op de rooilijn. Die 20px eraf, zodat
 * de tekening op beide plekken tegen dezelfde lijn uitkomt.
 */
.mediaTextInner > .mediaTextDecoration {
  right: var(--containerPadding);
}

/*
 * De uitsnede en het uitsteken hebben een eigen maat op een tablet en op een
 * telefoon; ontbreekt die, dan blijft de maat erboven staan. De versiering is
 * vanaf 1024px naar beneden weg — daar is de kolom te smal voor.
 */
@media (max-width: 1024px) {
  .mediaText .mediaTextMedia .mediaTextImage {
    height: var(--mediaTextMediaHeightTablet, var(--mediaTextMediaHeight, auto));
  }

  /*
   * Het uitsteken erft niet naar beneden: bij "Wat kost een professionele
   * website in 2025?" steekt het beeld op een breed scherm 263px boven de
   * sectie uit en vanaf 1024px naar beneden helemaal niet meer.
   */
  .mediaTextMedia {
    margin-top: calc(var(--mediaTextMediaOffsetTablet, 0px) * -1);
  }

  .mediaTextDecoration {
    display: none;
  }
}

@media (max-width: 767px) {
  .mediaText .mediaTextMedia .mediaTextImage {
    height: var(
      --mediaTextMediaHeightMobile,
      var(--mediaTextMediaHeightTablet, var(--mediaTextMediaHeight, auto))
    );
  }

  /*
   * Deze twee vormen houden op mobiel de ruimte onder de kop die is ingesteld;
   * bij de andere twee zakt die naar 20px. Zo staat het op samdesign.nl.
   */
  .mediaTextStack .mediaTextTitle,
  .mediaTextWrap .mediaTextTitle {
    margin-bottom: var(--mediaTextTitleGap, 40px);
  }
}

/*
 * 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()).
 *
 * De twee niveaus gedragen zich daar 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.
 */
.mediaTextText h2 {
  margin: 0 0 20px;
  font-size: 59px;
  font-weight: 500;
  line-height: 59px;
  letter-spacing: -2.95px;
}

.mediaTextText h3 {
  margin: 0 0 20px;
  font-size: var(--mediaTextTextHeadingSize, 30px);
  font-weight: 500;
  line-height: var(--mediaTextTextHeadingLine, 66px);
  letter-spacing: var(--mediaTextTextHeadingSpace, -1.5px);
}

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

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

  .mediaTextText h3 {
    font-size: var(--mediaTextTextHeadingSizeMobile, var(--mediaTextTextHeadingSize, 30px));
    line-height: var(--mediaTextTextHeadingLineMobile, var(--mediaTextTextHeadingLine, 66px));
    letter-spacing: var(--mediaTextTextHeadingSpaceMobile, var(--mediaTextTextHeadingSpace, -1.5px));
  }
}

/* De lopende tekst mag smaller zijn dan de kop erboven. */
.mediaTextText {
  max-width: calc(100% - var(--mediaTextTextInset, 0px));
}

/*
 * De ruimte naar de knoppen is per instantie instelbaar, want hij hangt aan de
 * negatieve marge onder het tekstblok. Op /webdesign-amsterdam/ staat de knop
 * 25px onder de natuurlijke onderkant van de tekst; met de vaste 30px van
 * `textPull` ertussen is dat hier 55. Zonder eigen waarde blijft het 40.
 */
.mediaTextActions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: var(--mediaTextActionsGap, 40px);
}

/* ------------------------------------------------------------------
   De USP's tussen de tekst en de knop
   ------------------------------------------------------------------ */

/*
 * De ruimte erboven is de witregel onder de laatste alinea (1,5em, dus 30px bij
 * tekst van 20px en 22,5 bij de 15px van onder 768px) plus 15px. Op samdesign.nl
 * komt datzelfde getal uit drie marges achter elkaar — 50px tussen de widgets,
 * 20 eraf op de tekst en 15 eraf op de lijst — maar het is één maat, dus staat
 * het hier als één maat.
 */
.mediaTextUsps {
  margin-top: calc(var(--textSize) * 1.5 + 15px);
}

/*
 * Het streepje staat als achtergrond op de ::before en niet als los flex-item
 * met een icoon erin: er valt niets voor te lezen, en zo houdt de tekst zijn
 * eigen regelval. De doos is 18 bij 15 en begint 7px links van de lijst, zodat
 * de tekst 11px naar binnen staat.
 */
.mediaTextUsps li {
  display: flex;
  align-items: center;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

.mediaTextUsps li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 15px;
  margin-left: -7px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E") no-repeat center / cover;
}

/*
 * 20px tussen twee punten, door beide kanten de helft te geven: zo staat het in
 * de bron van samdesign.nl, en zo blijft de onderkant van de lijst gelijk aan
 * de onderkant van de laatste regel.
 */
.mediaTextUsps li:not(:last-child) {
  padding-bottom: 10px;
}

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

/* Onder een lijst met punten is de ruimte naar de knop 50px in plaats van 40. */
.mediaTextUsps ~ .mediaTextActions {
  margin-top: 50px;
}

/* ------------------------------------------------------------------
   Twee halve kolommen
   ------------------------------------------------------------------ */

/*
 * Deze variant staat van rand tot rand: de container houdt zijn maximum maar
 * laat zijn padding vallen, zodat de kolommen op 1024px en kleiner het hele
 * scherm vullen. Gemeten op samdesign.nl: 1280@80 (1440), 1024@0 (1024),
 * 767@0 (767) en 390@0 (390).
 */
.mediaTextHalf .mediaTextInner {
  max-width: var(--containerMax);
  column-gap: 0;
  row-gap: 0;
  padding-inline: 0;
}

.mediaTextHalf .mediaTextMedia,
.mediaTextHalf .mediaTextBody {
  flex: 0 0 50%;
  max-width: 50%;
  padding-inline: 10px;
}

.mediaTextHalf .mediaTextBody {
  padding-left: var(--mediaTextTextIndent, 10px);
}

/* ------------------------------------------------------------------
   Van boven uitgelijnd
   ------------------------------------------------------------------ */

/*
 * De twee kolommen staan tegen de linker- en de rechterrand van de container en
 * lijnen met hun bovenkant uit in plaats van in het midden. Onder 1025px gaan ze
 * onder elkaar in bronvolgorde — de afbeelding blijft dus bovenaan, anders dan
 * bij de kolommen op maat. Zo staan "Samen vooruit, samen winnen" en
 * "Toewijding en resultaat" op /over-ons/.
 */
.mediaTextStack .mediaTextInner {
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 70px;
}

/*
 * Deze vorm brengt geen eigen ruimte mee: op samdesign.nl komt de lucht
 * eromheen van de secties erboven en eronder, of van de grijze band hieronder.
 * Twee classes, zodat de 40px van .mediaText onder 768px hier niet alsnog
 * bovenop komt.
 */
.mediaText.mediaTextStack {
  margin-block: 0;
}

/* ------------------------------------------------------------------
   Vouwend naast elkaar
   ------------------------------------------------------------------ */

/*
 * De vorm die samdesign.nl op /visitekaartjes/ gebruikt, en die de andere drie
 * niet kunnen: de kolommen staan tegen de randen en blijven op een tablet naast
 * elkaar staan — ze vouwen pas om zodra ze samen niet meer passen. Er komt dus
 * geen `flex-direction: column` aan te pas: flexbox rekent de max-width van een
 * kolom mee bij het bepalen van de regelovergang.
 *
 * Vanaf 1024px naar beneden gaat de breedte daarom van de flex-basis naar
 * `width: 100%` met de max-width als plafond, precies zoals samdesign.nl het
 * doet. Alleen de max-width omzetten is niet genoeg: een kolom met
 * `flex: 0 1 594px` en `max-width: 700px` blijft op 594 staan, want met
 * `flex-grow: 0` groeit hij nooit voorbij zijn basis. Een tabletbreedte die
 * *kleiner* is dan de brede maat werkt wél zonder die omzetting — daar snijdt de
 * max-width — dus valt het pas op zodra een pagina de kolom op een tablet juist
 * bréder wil hebben.
 *
 * Gemeten op samdesign.nl: 608 + 594 in een container van 1280 (1440px), 480 +
 * 20 + 480 in 984 (1024px) en daaronder onder elkaar met 40px ertussen — het
 * beeld bovenaan als het links stond, onderaan als het rechts stond.
 */
.mediaTextWrap .mediaTextInner {
  justify-content: space-between;
  column-gap: 0;
  row-gap: 40px;
}

/*
 * Alleen de beeldkolom staat in het midden; de tekst begint bovenaan. Op
 * samdesign.nl staat `align-items: center` ook alleen op de kolom met het beeld
 * en niet op die met de tekst.
 *
 * Deze regel doet alleen iets waar het béeld het hoogste item van de rij is —
 * anders bepaalt de tekstkolom de hoogte en staat hij per definitie bovenaan.
 * Gemeten op 1440px:
 *
 *   /visitekaartjes/        tekst hoogste in alle drie de rijen (681/610,
 *                           647/610, 681/610), dus verandert hier niets.
 *   /huisstijl/             béeld hoogste in beide rijen (523,7/512 en
 *                           617,6/611), dus stond de tekst 5,9 en 3,3px te laag.
 *                           Daar stonden twee regels in pages/huisstijl.css voor
 *                           (`align-items: stretch` op de rij plus een flex met
 *                           `align-items: center` op de beeldkolom); die zijn nu
 *                           overbodig en weggehaald.
 *   /nieuwsbrief-design/    béeld hoogste bij "Samenwerking vanaf het begin."
 *                           (610/486), dus stond de tekst 62px te laag.
 */
.mediaTextWrap .mediaTextBody {
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .mediaTextWrap .mediaTextInner {
    justify-content: center;
    column-gap: var(--mediaTextGap, 20px);
  }

  /* Zie de toelichting hierboven: de basis wordt hier de container, en de
     max-width doet het werk. */
  .mediaTextWrap .mediaTextMedia,
  .mediaTextWrap .mediaTextMediaStack,
  .mediaTextWrap .mediaTextBody {
    flex-basis: auto;
    width: 100%;
  }

  .mediaTextWrap .mediaTextMedia {
    max-width: min(
      var(--mediaTextMediaWidthTablet, var(--mediaTextMediaWidth, 100%)),
      100%
    );
  }

  .mediaTextWrap .mediaTextBody {
    max-width: min(
      var(--mediaTextTextWidthTablet, var(--mediaTextTextWidth, 100%)),
      100%
    );
  }
}

/* ------------------------------------------------------------------
   De grijze band
   ------------------------------------------------------------------ */

/*
 * Een grijs vlak van rand tot rand met lucht boven en onder, waar de afbeelding
 * bovenuit kan steken (--mediaTextMediaOffset). De maten komen van
 * "Samen vooruit, samen winnen" op /over-ons/ (R9); de marges eromheen staan bij
 * de pagina, want die verschillen per plek.
 */
.mediaTextBand {
  padding-block: var(--mediaTextBandTop, 95.8px) var(--mediaTextBandBottom, 150px);
  background: #f3f3f5;
}

/* De band kan ook donkerblauw zijn; dan is de tekst erop wit. */
.mediaTextBandNavy {
  background: var(--colorNavy);
  color: var(--colorWhite);

  /* Onder de muis houdt een link hier zijn roze: #092041 is de achtergrond (main.css). */
  --linkHoverColor: var(--colorPink);
}

/*
 * Vanaf 1024px naar beneden staan er op samdesign.nl overal dezelfde maten, ook
 * bij de secties die op een breed scherm hun eigen ruimte hebben. Vandaar dat de
 * eigen waarden hier weer wegvallen.
 */
@media (max-width: 1024px) {
  .mediaText {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }

  .mediaTextBand {
    padding-block: 100px;
  }
}

/*
 * Onder 768px is de standaard 40 en niet 150 — dat is het mobiele ritme van de
 * homepage, waar geen van de instanties een eigen maat heeft. Die 40 stond
 * hieronder nog een tweede keer als vaste waarde in het blok bij de halve
 * kolommen; dáár won hij van deze regel, en dan doen de velden
 * spaceTopMobile/spaceBottomMobile niets. Vandaar dat hij nu alleen hier staat.
 */
@media (max-width: 767px) {
  .mediaText {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 40px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 40px)));
  }

  .mediaTextBand {
    padding-block: 75px;
  }
}

@media (max-width: 1024px) {
  .mediaTextStack .mediaTextInner {
    flex-direction: column;
    align-items: center;
  }

  /*
   * Elke kolom vult de container, tenzij er een tabletbreedte is ingevuld; de
   * afbeelding zelf wordt daarbinnen niet groter dan hij is (zie
   * .mediaTextImage) en staat dan in het midden.
   */
  .mediaTextStack .mediaTextMedia {
    flex-basis: auto;
    max-width: min(var(--mediaTextMediaWidthTablet, 100%), 100%);
  }

  .mediaTextStack .mediaTextBody {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   Onder 1025px: de kolommen op maat gaan onder elkaar
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  /*
   * Onder elkaar staat er op samdesign.nl niet overal evenveel tussen de twee
   * kolommen: op de homepage 50, op /website-laten-maken/ 70.
   */
  .mediaTextInner {
    row-gap: var(--mediaTextStackGap, 50px);
  }

  .mediaTextColumns .mediaTextInner {
    flex-direction: column;
    align-items: center;
  }

  /*
   * Elke kolom houdt zijn eigen breedte en staat in het midden; hij wordt
   * alleen smaller als hij niet meer past. Zo komt "Een conversiegericht
   * webdesign" op 1024, 767 en 390px op de pixel uit op samdesign.nl.
   */
  /*
   * `.mediaTextColumns` zet de rij hier op `flex-direction: column`, en dan gaat
   * flex-basis over de hóogte. Een basis van 100% op het leadblok maakte de
   * breedte daardoor `auto`, en dus zo breed als de tekst — op 390px 473,6 in een
   * container van 350. De basis moet hier dus los, net als bij de kolommen.
   */
  .mediaTextLead {
    flex-basis: auto;
  }

  .mediaTextColumns .mediaTextMedia {
    flex-basis: auto;
    max-width: min(
      var(--mediaTextMediaWidthTablet, var(--mediaTextMediaWidth, 100%)),
      100%
    );
  }


  .mediaTextColumns .mediaTextBody {
    flex-basis: auto;
    max-width: min(
      var(--mediaTextTextWidthTablet, var(--mediaTextTextWidth, 100%)),
      100%
    );
  }

  /* Onder elkaar staat het beeld hier onderaan, net als op samdesign.nl. */
  .mediaTextColumns .mediaTextMedia {
    order: 2;
  }

  /*
   * Tenzij de sectie in bronvolgorde stapelt: dan staat het beeld boven de
   * tekst als het er op een breed scherm links van stond. Zo doen "Wat levert
   * een website laten maken op?" en "Een zakelijke website die optimaal is voor
   * SEO!" het op samdesign.nl.
   */
  .mediaTextStackSource .mediaTextMedia {
    order: 0;
  }
}

/* ------------------------------------------------------------------
   Onder 768px: ook de halve kolommen gaan onder elkaar
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  /*
   * Zodra de twee halve kolommen onder elkaar staan, houdt de tekst de gewone
   * rooilijn van de pagina aan: 20px van de rand, net als elke andere sectie.
   *
   * Dit is een bewuste afwijking van samdesign.nl (R9), op verzoek van de
   * gebruiker. Daar valt de padding van deze variant ook op mobiel weg en houdt
   * de tekst alleen zijn eigen 10px over, plus het overstek van de sectie zelf.
   * Gemeten op 390px: "SAM Design: een bureau voor meer dan alleen webdesign?"
   * staat daar 40px van links en 10px van rechts, en "Een website laten maken
   * die leads oplevert?" 10px van links — de tekst plakt dus tegen de rand en
   * geen van beide secties lijnt uit met de rest van de pagina. Zie
   * docs/beslissingen.md.
   */
  .mediaTextHalf .mediaTextInner {
    padding-inline: var(--containerPadding);

    /*
     * En er komt lucht tussen de twee blokken. Deze vorm zet hierboven
     * `row-gap: 0` — terecht, want naast elkaar is er geen tweede rij — maar
     * onder elkaar plakt de tekst daardoor tegen de afbeelding: gemeten op
     * 390px stond de kop "SAM Design: een bureau voor meer dan alleen
     * webdesign?" op 0px van de onderrand van het beeld, en het beeld onder
     * "Een website laten maken die leads oplevert?" op 4px van de laatste
     * regel. Op samdesign.nl is dat daar 20 en 16,5. De 20 is dus geen
     * sierregel maar de maat van daar, en `--mediaTextStackGap` laat een
     * instantie er alsnog van afwijken.
     */
    row-gap: var(--mediaTextStackGap, 20px);
  }

  .mediaTextHalf .mediaTextMedia,
  .mediaTextHalf .mediaTextBody {
    flex-basis: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .mediaTextHalf .mediaTextBody {
    padding-left: 0;
  }

  .mediaTextTitle {
    margin-bottom: var(--mediaTextTitleGapMobile, 20px);
  }

  .mediaTextActions {
    margin-top: 25px;
  }
}

/* Onder 768px mag het beeld nog een eigen breedte hebben. */
@media (max-width: 767px) {
  .mediaTextColumns .mediaTextMedia {
    max-width: min(
      var(--mediaTextMediaWidthMobile, var(--mediaTextMediaWidthTablet, var(--mediaTextMediaWidth, 100%))),
      100%
    );
  }
}

/*
 * Twee dingen die per instantie verschillen en niets met breedtes te maken
 * hebben.
 *
 * Het streepje links van de lopende tekst is hetzelfde patroon als bij een
 * inleiding, alleen met 39px ernaast in plaats van 30 — zo staat het bij "Wat
 * kost een professionele website in 2025?" en bij "Een zakelijke website die
 * optimaal is voor SEO!".
 *
 * De witregel onder de laatste alinea haalt de reset weg (.richText > :last-child);
 * bij sommige secties op samdesign.nl staat hij er wél. Het is 1,5em en geen vast
 * getal, want bij tekst van 15px is die witregel daar 22,5 en niet 30.
 */
/*
 * Het streepje is een pseudo-element en geen border-left: op samdesign.nl telt
 * het niet mee in de breedte van de tekst — die begint daar precies 39px van de
 * rand en is dus 39 en niet 40 smaller dan zijn kolom. Op 390px scheelt die ene
 * pixel een hele regel.
 */
.mediaTextTextRule {
  position: relative;
  padding-left: 39px;
}

/*
 * Het lijntje is 122px hoog en loopt níet mee met het tekstblok. Dat stond hier
 * op `top: 0; bottom: 0` en dus op de volle hoogte — 396 en 555px op
 * /website-laten-maken/ waar samdesign.nl er 122 tekent, en hetzelfde op de vier
 * instanties van /webshop-laten-maken/. Gerepareerd bij het component, dus die
 * twee pagina's staan er nu ook goed op (§34).
 *
 * Het is niet overal 122: op /website-laten-maken/mobiele-website-laten-maken/
 * is het 114. Vandaar een var met 122 als standaard.
 */
.mediaTextTextRule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--mediaTextTextRuleHeight, 122px);
  background: currentColor;
}

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

/*
 * Elementor zet onder zo'n tekstblok een vaste negatieve marge van 30px, terwijl
 * de witregel eronder met de lettergrootte meebeweegt (30 bij 20px tekst,
 * 22,5 bij 15px). Netto is dat niets op een breed scherm en 7,5px minder onder
 * 768px — en dat verschil loopt door in alles wat eronder staat.
 */
.mediaTextTextPull {
  margin-bottom: calc(var(--mediaTextTextPull, 0px) * -1);
}