/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
@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;
}
.layer--reviews .reviews-grid--grid-horizontal{grid-template-columns:minmax(0,1fr);gap:var(--reviews-gap,var(--space-5,clamp(16px,2vw,28px)))}

/* 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);
}

/* De gecombineerde view-keuze kan liggende kaarten naast elkaar tonen, zoals bij
   sites die reviews als media + tekst presenteren. Op smalle schermen stapelen ze
   terug onder elkaar zodat de tekst leesbaar blijft. */
.layer--reviews .review-card__media{overflow:hidden;border-radius:var(--reviews-card-media-radius,6px)}
.layer--reviews .reviews-grid--grid-horizontal .review-card{display:grid;grid-template-columns:minmax(100px,34%) minmax(0,1fr);align-items:start}
.layer--reviews .reviews-grid--grid-horizontal .review-card__media{grid-row:1 / -1;height:100%}
.layer--reviews .reviews-grid--grid-horizontal .review-card > :not(.review-card__media){grid-column:2;min-width:0}
.layer--reviews .reviews-grid--grid-horizontal .review-card__stars{display:none}
.layer--reviews.reviews-view--grid-horizontal .reviews-head{text-align:center}
.layer--reviews.reviews-view--grid-horizontal .reviews-head .heading{font-family:var(--theme-font-3,"Cormorant Garamond",Georgia,serif);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400}
.layer--reviews.reviews-view--grid-horizontal .reviews-grid--grid-horizontal .reviews__item{display:grid;grid-template-columns:255px minmax(0,1fr);overflow:hidden;margin:0;background:var(--color-bg,#fff);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-media{grid-column:1;grid-row:1;overflow:hidden;height:100%}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-content{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:0;font-family:var(--font-body,Arial,sans-serif)}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-title{display:none}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-text{margin:0;order:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:1rem;line-height:1.35}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-foot{margin:0;order:3;display:flex;flex-direction:column;gap:.15rem}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-author{color:var(--theme-color-4,#e8a0c0);font-weight:600}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-company{color:inherit}
@media (max-width:699px){
  .layer--reviews.reviews-view--grid-horizontal .reviews-grid--grid-horizontal .reviews__item{display:flex;flex-direction:column}
  .layer--reviews.reviews-view--grid-horizontal .reviews__item-media{height:auto;aspect-ratio:4 / 3}
  .layer--reviews.reviews-view--grid-horizontal .reviews__item-content{padding:20px}
}
@media (max-width:699px){
  .layer--reviews .reviews-grid--grid-horizontal .review-card{display:flex;flex-direction:column}
  .layer--reviews .reviews-grid--grid-horizontal .review-card__media{flex-basis:auto;height:auto}
}

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

/* Doorklikbare kaart zonder JavaScript (punt 1027): de `intro`-teaser blijft zichtbaar,
   het `<details>`-element onthult de volledige tekst pas na een klik op de summary. */
.layer--reviews .review-card__more{margin:0}
.layer--reviews .review-card__more-toggle{
  cursor:pointer;
  display:inline-block;
  margin-top:.25rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--reviews-more-color,var(--color-accent,inherit));
  text-decoration:underline;
  text-underline-offset:.15em;
}
.layer--reviews .review-card__more-toggle::-webkit-details-marker{display:none}
.layer--reviews .review-card__more-content{margin-top:.5rem;font-style:normal}
.layer--reviews .review-card__more-content > :first-child{margin-top:0}
.layer--reviews .review-card__more-content > :last-child{margin-bottom:0}
/* Punt 1029: een echte link naar de detailpagina i.p.v. de <details>-uitklap krijgt
   dezelfde look als de uitklap-toggle, alleen dan als <a>. */
.layer--reviews .review-card__more-link{text-decoration:underline;text-underline-offset:.15em}

/* Bron als klikbare link (punt 1029) i.p.v. alleen een data-attribuut. */
.layer--reviews .review-card__source-link{color:inherit;text-decoration:underline;text-underline-offset:.15em}

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

/* review-detail — de routebare detailpagina van één review (punt 1029): volledige tekst,
   alle foto's uit de galerij (via de gedeelde `gallery`-module, zie Framework\Html\Gallery),
   bron-link. Zelfde variabelen als de kaart hierboven, zodat een site die de kaart al
   bijkleurt de detailpagina niet apart hoeft te doen.
   Layout (punt 1029-vervolg, Ronny: "de foto's links, tekst rechts. 1 hoofdfoto en de rest
   er klein onder. met lightbox."): twee kolommen vanaf tablet-breedte, media een vaste
   kolombreedte, content de rest. Op mobiel stapelt het, media eerst. */
/* `layer` (volle balk, achtergrond) vs. `layer_ic` (binnencontainer, `.review-detail`) is de
   standaard laag-tweedeling (Ronny, punt 1029-vervolg: "een laag + globale slots + locale
   slots"), zie `design_reviews` in de seed + SiteDesign::MAP. De max-width hieronder is de
   FALLBACK zolang een site geen eigen `layer_ic`-breedte instelt -- geen CMS-waarde, geen
   verandering. */
.layer--review-detail{padding-block:clamp(24px,4vw,56px)}
.review-detail{max-width:min(1000px,92%);margin-inline:auto}
.layer--review-detail .review-detail__body{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
@media (min-width:720px){
  .layer--review-detail .review-detail__body{grid-template-columns:minmax(260px,380px) 1fr;align-items:start}
  /* Geen foto's (ook geen teaser-`media`) -- dan is er maar één kind, en zonder deze regel
     bleef dat kind vastzitten in de smalle media-kolombreedte met een lege ruimte ernaast
     (Ronny, 20-09-2026: "oogt het wel wat smal"). Vol 1fr (~1000px) leest juist weer te breed
     als regellengte; een comfortabele leesbreedte, gecentreerd, past bij hoe `.review-detail__text`
     elders ook loopt. */
  .layer--review-detail .review-detail__body--no-media{grid-template-columns:min(70ch,100%);justify-content:center}
  /* Zonder sticky bleef de (relatief kleine) foto bovenaan staan naast een veel langere
     tekstkolom -- een grote lege plek eronder die aanvoelde als een layoutfout, niet als
     opzet. Zelfde patroon/offset als .rentable-detail__aside (DetailRentable.php).
     LET OP bij een site met een `position:fixed` header: 1.5rem alleen is dan te weinig --
     de sticky foto duikt onder de header (gemeten op Vlindertuin, header 66-96px hoog). Zo'n
     site overschrijft deze regel met zijn eigen headerhoogte-token, bv.
     `top:calc(var(--header-h, 96px) + 1rem)`. */
  .layer--review-detail .review-detail__media{position:sticky;top:1.5rem}
}
.layer--review-detail .review-detail__media .gallery{--gallery-accent:var(--reviews-card-fg,currentColor)}
.layer--review-detail .review-detail__header{margin-bottom:1.5rem}
.layer--review-detail .review-detail__stars{margin-bottom:.5rem}
.layer--review-detail .review-detail__title{margin:0 0 .25rem}
.layer--review-detail .review-detail__subtitle{margin:0;color:var(--reviews-card-fg,inherit);opacity:.75}
.layer--review-detail .review-detail__text{line-height:1.7}
.layer--review-detail .review-detail__text > :first-child{margin-top:0}
.layer--review-detail .review-detail__text > :last-child{margin-bottom:0}
.layer--review-detail .review-detail__footer{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--reviews-card-border,rgba(0,0,0,.08));
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
}
.layer--review-detail .review-detail__author{font-weight:600}
.layer--review-detail .review-detail__source-link{color:inherit;text-decoration:underline;text-underline-offset:.15em}
}