/*
 * /huisstijl/ — de uitzonderingen van deze pagina.
 *
 * De acht secties komen uit het atelier en hebben hun opmaak bij hun component.
 * Wat hier staat is wat deze pagina anders doet dan die componenten standaard
 * doen en wat daar geen veld voor heeft: de uitlijning van de twee
 * kolommenblokken, de lucht en de tekstmaten in het FAQ-vlak, de plek van de
 * link van "Tips & trends." en de kop van "Succesverhalen." op mobiel.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/huisstijl/ (R9) op 1440,
 * 1024, 767 en 390px.
 *
 * Laadt alleen op deze pagina; zie inc/assets.php.
 */

/* ==================================================================
   Het ritme tussen de secties
   ------------------------------------------------------------------
   De ruimte boven en onder de tekstsectie en de twee kolommenblokken staat als
   veld op de instantie (spaceTop/spaceBottom en hun mobiele varianten). Wat de
   componenten zelf niet als veld hebben staat hier.
   ================================================================== */

@media (max-width: 767px) {
  /* 50px in plaats van 150 boven en onder de klantverhalen. */
  .reviewSlider {
    margin-block: 50px;
  }

  /*
   * En "Succesverhalen." is hier 39px waar dezelfde kop op de homepage,
   * /over-ons/ en /onze-aanpak/ 38 is. Eén pixel, maar het is een eigen
   * instelling van deze pagina op samdesign.nl en geen afgeleide.
   */
  .reviewSliderTitle {
    font-size: 39px;
    letter-spacing: -1.95px;
  }
}

/* ==================================================================
   "Een eigen huisstijl voor een sterke merkpositionering."
   ------------------------------------------------------------------
   Kop én tekst staan hier gecentreerd, maar zonder de brede buitenmarges die
   `textAlign: center` in textSection meebrengt — die twee zitten daar nog aan
   elkaar vast. Dezelfde uitzondering als op /over-ons/; zie docs/openstaand.md.
   ================================================================== */

.textSection .textSectionBlock {
  text-align: center;
}

/* ==================================================================
   "Huisstijl logo ontwerpen." en "Printmedia en sociale media."
   ------------------------------------------------------------------
   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.

   De verticale uitlijning stond hier ook: het beeld is op deze pagina hóger dan
   de tekst (523,6 tegen 512 en 617,5 tegen 611), dus moet de tekst bovenaan
   beginnen en het beeld in het midden van zijn kolom staan. Dat regelt het
   component inmiddels zelf — `align-self: flex-start` op de tekstkolom en
   `align-items: center` op de rij — en nagemeten op 1440, 1200, 1024, 767 en
   390px voegden die regels hier niets meer toe.
   ================================================================== */

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

/* ==================================================================
   "FAQ." — minder lucht in het grijze vlak
   ------------------------------------------------------------------
   De marges eromheen zijn dezelfde als op /onze-aanpak/ (150 / 100 / 75), maar
   de padding ín het vlak zakt hier vanaf 1024px naar beneden naar 50px in
   plaats van 100 en 75.
   ================================================================== */

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

  /*
   * En er staat vanaf hier 20px onder de laatste vraag: samdesign.nl zet de
   * marge van het toggle-widget boven 1024px op nul en laat hem daaronder staan.
   */
  .faqItems {
    margin-bottom: 20px;
  }
}

/*
 * En de tekst zelf staat hier anders dan op /onze-aanpak/: de vraag op 20/33 in
 * plaats van 20/25, en het antwoord op 16/25 in plaats van 20/25. Daardoor
 * breken drie van de vier vragen op een tweede regel en zijn ze 106 in plaats
 * van 90px hoog. Gemeten op samdesign.nl.
 */
.faqQuestionLabel {
  line-height: 33px;
}

.faqAnswer {
  font-size: 16px;
}

/*
 * Onder de laatste alinea van een open antwoord staat een witregel van anderhalf
 * keer de lettergrootte. Die is hier 24px in plaats van 30, dus is het verschil
 * met de 20px tussen de vragen 4px en niet 10 (zie de toelichting bij dezelfde
 * regel in faqSection.css).
 */
@media (min-width: 768px) {
  .faqItems > li:has(.faqItem[open]):not(:last-child) {
    margin-bottom: 4px;
  }
}

@media (max-width: 767px) {
  .faqQuestionLabel {
    line-height: 25px;
  }

  /* Onder 768px is ook het antwoord 15px, net als de lopende tekst elders. */
  .faqAnswer {
    font-size: 15px;
  }
}

/* ==================================================================
   "Tips & trends." — de link onderaan zijn regel
   ------------------------------------------------------------------
   Op de homepage staat deze link op de bovenrand van de inleiding, hier op de
   onderrand — net als op /over-ons/, /onze-aanpak/ en onder een bericht. Nieuw
   is het breekpunt: onder 936px zakt hij hier naar een eigen regel links onder
   de inleiding, en niet naar het midden onder de kaarten.
   ================================================================== */

@media (min-width: 936px) {
  .blogSliderHeader > .textLink {
    align-self: flex-end;
  }
}

@media (max-width: 935px) {
  .blogSliderIntro {
    flex-basis: 100%;
  }

  /*
   * 21 en niet 20: op samdesign.nl staat de link als inline-blok in een regelbox
   * van 25px en zakt hij daar 1px in. Gemeten op 767 en 390px.
   */
  .blogSliderHeader > .textLink {
    margin-top: 21px;
  }
}

/*
 * Onder 768px maakt het component van de kop `display: contents` om de link
 * onder de kaarten te krijgen. Dat draaien we hier terug: hij blijft in de kop
 * staan, links onder de inleiding.
 */
@media (max-width: 767px) {
  .blogSlider > .container {
    display: block;
  }

  .blogSliderHeader {
    display: flex;
  }

  .blogSliderHeader > .textLink {
    order: 0;
    margin-top: 21px;
    margin-inline: 0;
  }
}