/*
 * /logo-laten-maken/ — wat er per instantie afwijkt.
 *
 * De negen secties komen alle negen uit bestaande componenten (docs/paginas.md).
 * Wat hier staat is wat samdesign.nl op déze pagina anders doet dan de instelling
 * van het component toelaat; de maten komen uit een meting met headless Chromium
 * op 1440, 1024, 767 en 390px.
 */

/* ==================================================================
   "Een professioneel logo door SAM." — gecentreerde tekst
   ------------------------------------------------------------------
   Kop én tekst staan hier in het midden, maar zonder de brede buitenmarges van
   "Een webdesign bureau met bewezen resultaten?" op de homepage. Die twee zitten
   in textSection nog aan elkaar vast (textAlign: center zet ook 160px marge),
   dus doet deze instantie het van hieruit — net als op /over-ons/ en
   /visitekaartjes/. Zie docs/openstaand.md.

   De selector is de sectie ná de hero: dat is de enige gecentreerde van de twee
   tekstsecties op deze pagina, en zo hangt er geen knoop-id in de CSS.
   ================================================================== */

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

.heroSection + .textSection .textSectionTitle {
  margin-inline: auto;
}

/* ==================================================================
   "Een logo laten maken met je doelgroep in gedachte." — de grijze band
   ------------------------------------------------------------------
   De band houdt op een tablet zijn 150px en zakt onder 768px naar 50, waar
   mediaText.css 100 en 75 aanhoudt. Die twee maten staan daar vast omdat de
   velden bandTop/bandBottom alleen boven 1024px meedoen; vandaar hier.
   ================================================================== */

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

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

/* ==================================================================
   "Succesverhalen." — de lucht erboven op mobiel
   ------------------------------------------------------------------
   reviewSlider houdt onder 768px zijn 150px lucht, want zo staat die sectie op
   de homepage. Op deze pagina doet hij het mobiele ritme van 50px wél mee — de
   150px eronder blijft, met de 60px padding die de uitgeklapte stapel nodig
   heeft.
   ================================================================== */

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

/* ==================================================================
   De knop onder de USP's
   ------------------------------------------------------------------
   Hij staat 30px naar binnen, net als de inleiding met het streepje in de hero.
   De kop, de tekst en de punten erboven staan wél tegen de rand. Gemeten op alle
   vier de breedtes; alleen deze ene sectie heeft een knop naast een beeld.
   ================================================================== */

.mediaTextBand .mediaTextActions {
  padding-left: 30px;
}

/* ==================================================================
   "Succesverhalen." — de kopmaat onder 768px
   ------------------------------------------------------------------
   Op de homepage is die kop daar 38px, hier 39. Het is op samdesign.nl allebei
   een eigen instelling en geen afgeleide van .sectionTitle, dus staat de
   uitzondering hier en niet in reviewSlider.css. De letterafstand blijft een
   twintigste van de lettergrootte.
   ================================================================== */

@media (max-width: 767px) {
  .reviewSliderTitle {
    font-size: 39px;
    letter-spacing: -1.95px;
  }
}