/*
  Opmaak voor de reviews (reviews.js).
  Elk ontwerp zet de --rv-* kleuren; de standaardwaarden wegen bewust minder (:where).
  Gsm: de kaartjes schuiven opzij (met snap). Vanaf 860 pixels: drie naast elkaar.
*/
:where(:root) {
  --rv-vlak: #fbf7ef;
  --rv-tekst: #1b1a17;
  --rv-zacht: rgba(27, 26, 23, .68);
  --rv-ster: #e0a63a;
  --rv-ster-uit: rgba(27, 26, 23, .18);
  --rv-rand: transparent;
  --rv-rond: 18px;
  --rv-schaduw: 0 18px 36px -24px rgba(0, 0, 0, .6);
  --rv-citaat: #c4652f;
  --rv-link: inherit;
}

.rv-kop { max-width: 40em; }

/* Gemiddelde sinds de nieuwe uitbaters: naast de titel (breed scherm), eronder (gsm) */
.rv-boven { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.rv-boven .rv-kop { flex: 1 1 22rem; }
.rv-score { flex: 0 1 20rem; }
.rv-score-rij { margin: 0; display: flex; align-items: center; gap: .9rem; }
.rv-score-getal {
  font-family: var(--rv-score-font, var(--display, Georgia, serif));
  font-size: clamp(2.8rem, 6vw, 3.6rem); line-height: 1; color: var(--rv-score-kleur, var(--rv-ster));
  font-variant-numeric: tabular-nums;
}
.rv-score-sterren { display: inline-flex; gap: .12em; font-size: 1.6rem; line-height: 1; }
.rv-ster { position: relative; display: inline-block; color: var(--rv-score-uit, var(--rv-ster-uit)); }
.rv-ster-goud { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--rv-ster); }
.rv-score-uitleg { margin: .55rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--rv-score-tekst, inherit); opacity: .85; }
.rv-score-voorbeeld {
  display: inline-block; margin: .6rem 0 0; padding: .15rem .55rem; border-radius: 999px;
  border: 1px dashed currentColor; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rv-score-tekst, inherit); opacity: .8;
}
.rv-lijst {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 1rem; scrollbar-width: thin;
}
.rv-kaart {
  scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.5rem 1.4rem 1.3rem; border-radius: var(--rv-rond);
  background: var(--rv-vlak); color: var(--rv-tekst);
  border: 1px solid var(--rv-rand); box-shadow: var(--rv-schaduw);
}
.rv-logo { position: absolute; top: 1.2rem; right: 1.2rem; width: 24px; height: 24px; line-height: 0; }
.rv-logo svg { width: 100%; height: 100%; display: block; }
.rv-sterren { padding-right: 2.25rem; }
.rv-sterren { margin: 0; font-size: 1.15rem; letter-spacing: .12em; line-height: 1; }
.rv-sterren .aan { color: var(--rv-ster); }
.rv-sterren .uit { color: var(--rv-ster-uit); }
.rv-tekst { margin: 0; flex: 1; }
.rv-tekst p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.rv-tekst strong { font-weight: 700; }
.rv-wie { margin: 0; display: grid; gap: .1rem; }
.rv-wie-onder { padding-top: .8rem; border-top: 1px solid var(--rv-ster-uit); }

/* Variant "boven": naam linksboven met een rondje, zoals een Google-kaartje */
.rv-persoon { display: flex; align-items: center; gap: .75rem; padding-right: 2.25rem; }
.rv-avatar {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--rv-avatar, var(--rv-citaat)); color: var(--rv-avatar-tekst, #fff);
  font-weight: 700; font-size: 1.15rem; line-height: 1;
}
.rv-naam-boven .rv-naam { font-size: 1.05rem; }
.rv-sterrij { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rv-naam-boven .rv-sterren { padding-right: 0; }
.rv-wanneer { font-size: 1rem; color: var(--rv-zacht); }
.rv-naam { font-weight: 700; }
.rv-bron { font-size: 1rem; color: var(--rv-zacht); }
.rv-voet { margin-top: 1.25rem; }
.rv-link { color: var(--rv-link); font-weight: 600; text-underline-offset: .2em; }
.rv-link::after { content: " \2197"; }

@media (min-width: 860px) {
  .rv-lijst { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; padding-bottom: 0; }
}