/*
 * /briefpapier/ — 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 /nieuwsbrief-design/, /huisstijl/ en
 * /visitekaartjes/: dezelfde zes soorten secties in dezelfde vorm. Vandaar dat
 * dit bestand grotendeels nieuwsbriefDesign.css is; waar het afwijkt staat het
 * erbij.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/briefpapier/ (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.

   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.

   De grijze band doet mee: net als op /nieuwsbrief-design/ staat de knop daar
   direct onder de tekst en niet onder een lijst met punten.
   ================================================================== */

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

/* ==================================================================
   De stempel in de hero
   ------------------------------------------------------------------
   Hij hangt hier met zijn onderkant precies op de onderrand van de tekstkolom;
   op /huisstijl/, /visitekaartjes/ en /nieuwsbrief-design/ blijft hij 67px
   daarboven. Gemeten op alle vier de pagina's van samdesign.nl: 0 hier, 67
   daar — een eigen negatieve marge per instantie, geen afgeleide van de hoogte
   van de kolom.
   ================================================================== */

.heroSectionMedia .heroStamp {
  bottom: 0;
}

/* ==================================================================
   "Met de hand gemaakt uniek design." — gecentreerd, maar anders
   ------------------------------------------------------------------
   Deze sectie wil kop én 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.

   Het blok is 850px breed met een kop van 600px in het midden; zodra 850 niet
   meer past is het gewoon de containerbreedte.
   ================================================================== */

.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;
  }
}

/* ==================================================================
   "Nauwe samenwerking…" en "Van logo tot huisstijl."
   ------------------------------------------------------------------
   Twee keer `mediaText` in de vorm "vouwend naast elkaar". Eén ding doet die
   vorm niet zelf: samdesign.nl heeft hier een eigen breekpunt op 1275px, waar
   allebei de kolommen naar 480px gaan. Zonder die regel blijven ze 608 en 594
   tot ze rond 1242px niet meer passen. Zelfde regel als op /huisstijl/.
   ================================================================== */

@media (min-width: 1025px) and (max-width: 1275px) {
  .mediaTextWrap .mediaTextMedia,
  .mediaTextWrap .mediaTextBody {
    flex-basis: 480px;
    max-width: 480px;
  }
}

/*
 * De uitsnede van het eerste beeld ligt tegen de rechterkant en niet in het
 * midden: het is een staand beeld van 708×902 in een liggend vlak van 608×610,
 * en samdesign.nl houdt daar de rechterhelft vast. Het tweede beeld staat wel
 * in het midden, dus is dit geen instelling van de sectie maar van dít beeld.
 */
#bpsamenwerking .mediaTextImage {
  object-position: center right;
}

/* ==================================================================
   De grijze band — "Van logo tot huisstijl."
   ------------------------------------------------------------------
   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
   /nieuwsbrief-design/: 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;
  }
}