@charset "UTF-8";
/* reviews.css — opmaak voor de `reviews_layer` (LayerReviews).
 *
 * Waarom dit bestaat: de renderer zet sterren als inline <svg> zonder afmeting. Zonder
 * stylesheet vallen die terug op de SVG-default (300x150px) en staat er een bak van een
 * ster per review. Een laag die zonder CSS kapot rendert hoort z'n CSS zelf mee te
 * brengen, net als de carrousel dat doet.
 *
 * Alles hangt aan variabelen met een neutrale fallback, zodat een site 'm kan bijkleuren
 * zonder de regels over te schrijven:
 *
 *   --reviews-star        kleur van een gevulde ster        (default goud)
 *   --reviews-star-off    kleur van een lege ster           (default lichtgrijs)
 *   --reviews-card-bg     achtergrond van een kaart
 *   --reviews-card-fg     tekstkleur binnen een kaart
 *   --reviews-card-radius hoekafronding
 *   --reviews-gap         ruimte tussen de kaarten
 */

.layer--reviews .reviews-head{margin:0 0 clamp(20px,3vw,40px)}

.layer--reviews .reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--reviews-gap,clamp(16px,2vw,28px));
  align-items:start;
}

/* In de carrousel levert de slide de breedte; de kaart vult 'm en de kaarten in één
   rij worden even hoog, zodat de auteursregel niet gaat zweven. */
.layer--reviews .carousel__slide{display:flex}
.layer--reviews .carousel__slide > *{flex:1}

/* De viewport heeft `overflow:hidden`, en dat knipt de kaartschaduw eraf: de onderrand
   van een kaart houdt op midden in z'n eigen schaduw. Een paar pixel ruimte binnen de
   viewport geeft de schaduw plek zonder de carrousel-mechaniek te raken. */
.layer--reviews .carousel__viewport{padding:6px 0 10px}

/* De pijlen liggen standaard óver de inhoud. Bij een afbeelding valt dat weg, bij een
   lap tekst niet: de linkerpijl gaat pal over de eerste woorden staan. Vanaf tablet
   krijgt de carrousel daarom zijruimte waar de knoppen in passen, zodat ze naast de
   kaarten staan in plaats van erop. Op een telefoon is die ruimte er niet en blijft het
   overlay-gedrag staan. */
@media (min-width:700px){
  .layer--reviews .carousel{padding-inline:3.25rem}
  .layer--reviews .carousel__controls{padding:0}
}

.layer--reviews .review-card{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin:0;
  padding:clamp(20px,2.2vw,32px);
  height:100%;
  background:var(--reviews-card-bg,var(--color-bg,#fff));
  color:var(--reviews-card-fg,inherit);
  border-radius:var(--reviews-card-radius,10px);
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}

.layer--reviews .review-card__stars{display:flex;gap:2px;line-height:0}
.layer--reviews .star{
  width:18px;height:18px;flex:none;
  fill:var(--reviews-star-off,#d9dce1);
}
.layer--reviews .star--on{fill:var(--reviews-star,#f5b301)}

.layer--reviews .review-card__title{margin:0;font-size:1.05rem}

/* De reviewtekst is een blockquote: geen browser-inspringing, geen aanhalingstekens
   die de redacteur niet zelf getypt heeft. */
.layer--reviews .review-card__text{margin:0;font-style:normal}
.layer--reviews .review-card__text > :first-child{margin-top:0}
.layer--reviews .review-card__text > :last-child{margin-bottom:0}

/* De auteursregel onderaan, ook als de teksten verschillend lang zijn. */
.layer--reviews .review-card__by{
  margin:auto 0 0;
  padding-top:.5rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
}
.layer--reviews .review-card__author{font-weight:600}

.layer--reviews .layer__cta{margin-top:clamp(20px,3vw,40px)}