/*
 * reviewSlider — de stapel klantverhalen.
 *
 * Zonder JavaScript staan de kaarten netjes onder elkaar; pas als de module
 * gedraaid heeft krijgt de lijst de class reviewCardsStacked en gaan ze op
 * elkaar liggen. Zo is er altijd iets te lezen (§6).
 */

.reviewSlider {
  margin-block: 150px;
}

.reviewSliderIntro {
  --introWidth: 472px;
}

/*
 * De 70px naar de stapel staat hier en niet als margin-bottom op de header: de
 * stempel hangt met zijn onderkant aan de onderrand van die header, en zou met
 * die marge ertussen 70px te laag komen. Zelfde reden als bij .blogCards.
 */
.reviewStack {
  position: relative;
  margin-top: 70px;
}

/*
 * Bewuste afwijking van R9, op verzoek van de gebruiker: deze stempel hangt
 * 40px hoger dan op samdesign.nl. Daar hangt hij met zijn onderkant aan de
 * onderrand van de sectiekop (bottom: 0, zoals bij "Tips & trends") en komt de
 * rechterbovenhoek van de waaier kaarten er vlak onder. Zie
 * docs/beslissingen.md.
 */
.reviewSliderStamp .stamp {
  bottom: 40px;
}

.reviewCards {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

/*
 * Geen column-gap: op samdesign.nl vullen het citaat (510px) en het logo samen
 * precies de kaart, en space-between doet de rest. Met 30px ertussen wordt het
 * citaat bij een breed logo smaller dan die 510 en breekt de tekst op een ander
 * woord — gemeten bij "Door SAM Online Marketing…" met het logo van 354px.
 */
.reviewCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 880px;
  padding: 50px 70px;
  border: 1px solid #e5e5ea;
  background: var(--colorWhite);
  box-shadow: 10px 10px 15px rgba(172, 172, 172, 0.1);
}

/* ------------------------------------------------------------------
   De stapel — alleen als de module gedraaid heeft
   ------------------------------------------------------------------ */

/*
 * De kaarten áchter de voorste zijn geschaald, gedraaid én naar rechts
 * geschoven: `LAGEN` in js/components/reviewSlider.js zet daar 435 / 290 / 170
 * / 75px, en omdat de schaal ervóór staat komt dat op 261 / 203 / 136 / 67,5px
 * uit. Op een venster tussen 1025 en 1085px valt de achterste kaart daardoor
 * 25px buiten de pagina en krijgt de hele site een horizontale schuifbalk.
 * Vanaf 1024px naar beneden is die verschuiving 0, dus doet dit daar niets.
 * Samdesign.nl heeft
 * dat niet: de stapel zit daar in een Swiper met `overflow-x: hidden` op een
 * doos van precies de containerbreedte.
 *
 * `clip` en niet `hidden`: dat laatste maakt van `overflow-y` stilzwijgend
 * `auto` (§7), en dan zou de stapel zelf verticaal scrollbaar worden. Met
 * `clip` blijft de y-as `visible`, dus houden de kaarten hun schaduw en blijft
 * de stempel erbuiten zichtbaar.
 */
.reviewCardsStacked {
  position: relative;
  display: block;
  height: 430px;
  padding-left: 165px;
  overflow-x: clip;
  overflow-y: visible;
}

.reviewCardsStacked .reviewCard {
  position: absolute;
  top: 0;
  left: 165px;
  width: min(880px, 100%);
  height: 430px;
}

/* ------------------------------------------------------------------
   Inhoud van een kaart
   ------------------------------------------------------------------ */

/*
 * Het citaat houdt zijn 510px en krimpt niet: past het logo er niet naast, dan
 * wordt dát smaller. Zo staat het op samdesign.nl — het logo van Class Drive
 * gaat daar van 236 naar 228px terug en de tekst blijft op 510.
 */
.reviewCardQuote {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  row-gap: 30px;
  max-width: 510px;
  margin: 0;
}

.reviewCardQuote blockquote {
  margin: 0;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

.reviewCardQuote p {
  margin: 0;
}

.reviewCardName {
  font-size: var(--textSize);
  font-weight: 700;
  line-height: var(--textLine);
  font-style: normal;
}

.reviewCardLogo {
  flex: 0 1 auto;
  max-width: 236px;
}

.reviewCardLogoImage {
  width: auto;
  max-height: 105px;
}

/* ------------------------------------------------------------------
   De bladerknoppen
   ------------------------------------------------------------------ */

.reviewNav {
  position: absolute;
  top: 40%;
  z-index: 100;
  display: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.reviewCardsStacked ~ .reviewNav,
.reviewStackReady .reviewNav {
  display: block;
}

.reviewNav:hover {
  transform: scale(1.08);
}

.reviewNavPrev {
  left: 0;
}

.reviewNavNext {
  right: 0;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1325px) {
  /*
   * Onder 1326px staat de kaart niet meer 165px naar rechts maar gecentreerd,
   * met 20px extra aan de linkerkant. Gemeten op samdesign.nl is het verschil
   * tussen de ruimte links en rechts van de kaart op élke breedte 20px:
   * 1325 → 210/190, 1024 → 147/127, 915 → 128/107, 845 → 143/122,
   * 767 → 94/73 en 700 → 60/40.
   *
   * Hier stond `display: flex; justify-content: center` met 20px padding op de
   * lijst. Dat centreerde niets: de kaarten zijn `position: absolute` en die
   * trekken zich van justify-content niets aan — ze bleven op hun statische plek
   * staan, dus precies die 20px van links. Op 767px stond de kaart daardoor op
   * 50 in plaats van 124, met 177px leegte aan de rechterkant.
   *
   * `left` en `right` met automatische marges centreert een absolute kaart wél.
   * De padding op de lijst kan weg: het omhullende blok van een absolute kaart is
   * de padding-box, dus die padding deed niets anders dan die statische plek
   * verschuiven.
   */
  .reviewCardsStacked {
    padding-left: 0;
  }

  .reviewCardsStacked .reviewCard {
    left: 20px;
    right: 0;
    margin-inline: auto;
  }

  .reviewNav {
    top: 90%;
  }

  .reviewNavPrev {
    left: 10%;
  }

  .reviewNavNext {
    right: 10%;
  }
}

@media (max-width: 1024px) {
  .reviewCard {
    max-width: 710px;
    flex-direction: column;
    justify-content: space-evenly;
  }

  /*
   * Hier staat de stempel 20px van de rand in plaats van op 15% van de
   * containerbreedte, anders dan bij "Tips & trends". Zo staat het op
   * samdesign.nl — vandaar dat deze regel hier staat en niet in stamp.css.
   *
   * En hij kruipt 78px omhoog: hij hangt vanaf hier niet meer aan de onderrand
   * van de kop maar half over de inleiding. Op samdesign.nl gaat de negatieve
   * marge op het widget daar van -157 naar -235. Gemeten op de homepage én op
   * /over-ons/. De 40px van hierboven komt daar bovenop: 78 + 40 = 118.
   */
  .reviewSliderStamp .stamp {
    right: 20px;
    bottom: 118px;
  }
}

@media (max-width: 915px) {
  .reviewCard {
    max-width: 640px;
  }
}

@media (max-width: 845px) {
  .reviewCardsStacked,
  .reviewCardsStacked .reviewCard {
    height: 490px;
  }

  .reviewCard {
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  /*
   * Deze sectie staat op samdesign.nl 30px van de rand en niet 20, zoals de
   * secties erboven. Gemeten: het blok is 707px breed op 767 en 330px op 390.
   *
   * De 150px lucht boven en onder blijft ook op mobiel staan, en er komt 60px
   * padding onderaan bij — ook dat is gemeten op 390 en 767px. Hier stond
   * `margin-block: 40px`, het gewone mobiele ritme, en dat gaf twee problemen
   * tegelijk: de sectie kwam 110px te hoog te staan, en de uitgeklapte stapel —
   * die op mobiel 100px onder de bovenste kaart uitkomt — viel dwars over de kop
   * van "Een webdesign bureau met bewezen resultaten?". De 60px padding is
   * precies de ruimte die die stapel nodig heeft.
   */
  .reviewSlider {
    padding-bottom: 60px;
    --containerPadding: 30px;
  }

  /*
   * En de kop is hier 38px waar de andere grote koppen 44px zijn — ook dat is
   * een eigen instelling op samdesign.nl, geen afgeleide van .sectionTitle.
   */
  .reviewSliderTitle {
    font-size: 38px;
    letter-spacing: -1.9px;
  }
}

@media (max-width: 605px) {
  .reviewCard {
    max-width: 100%;
    padding: 30px;
  }

  /*
   * Hier is de kaart net zo breed als de container en valt er niets te
   * centreren; de 20px van hierboven zou hem dan alleen naar rechts duwen.
   *
   * Op samdesign.nl gebeurt dat ook: daar staat de kaart onder 606px 10px naar
   * rechts en steekt hij er aan de rechterkant 10px buiten — op 390px van 40 tot
   * 370, terwijl de kop erboven van 30 tot 360 loopt. Dat nemen we bewust niet
   * over (R9, op verzoek van de gebruiker): de kaart staat bij ons op de rooilijn
   * van zijn eigen sectie, in één lijn met "Succesverhalen". Zie
   * docs/beslissingen.md.
   */
  .reviewCardsStacked .reviewCard {
    left: 0;
  }
}

/*
 * Pas onder 526px laat samdesign.nl de stempel weg — niet onder 768px zoals bij
 * "Tips & trends". Die 525 is een eigen grens van de bestaande site; gemeten op
 * de homepage én op /over-ons/.
 */
@media (max-width: 525px) {
  .reviewSliderStamp {
    display: none;
  }
}