/* ============================================================
   reviews.css, reviewpagina (na lux.css)
   Quote-hero met rotator · uitgelichte reviews · scorecard.
   Additief: zonder JS staat het eerste citaat er statisch.
   ============================================================ */

/* ---------- 1. Quote-hero: het sterkste bewijs opent de pagina ---------- */
.heroquote {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  padding-top: clamp(2.6rem, 2rem + 2vw, 3.6rem);
}
/* het grote aanhalingsteken als podium: op de stage, want ::before van
   .heroquote zelf is al bezet door de specular rim van .glass */
.heroquote__stage::before {
  content: "\201C";
  position: absolute;
  top: clamp(-2.5rem, -2rem - 1vw, -1.9rem);
  left: -0.4rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3.2rem + 2.4vw, 5.6rem);
  line-height: 1;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
  opacity: 0.9;
}
.heroquote__stage {
  position: relative;
  /* ruimte voor het langste citaat, zodat de kaart niet "ademt" bij wissel.
     Ruim genoeg dat ook een lang citaat mét een naar twee regels brekende
     functie binnen de stage past; anders zakt de byline eronder uit en raakt
     de onderste regel de rotator-stipjes. */
  min-height: clamp(15.5rem, 12rem + 9vw, 18.5rem);
}
.heroquote__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}
.heroquote__item.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.heroquote__q {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.heroquote__by {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.2rem;
}
/* NB: .subhero__media img zet width:100% + aspect-ratio op alle img's in de
   hero-kolom; deze zwaardere selector houdt de avatar gewoon 44px rond */
.subhero__media .heroquote__av,
.heroquote__av {
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--glass-border);
  flex: 0 0 auto;
}
.heroquote__who { min-width: 0; }
.heroquote__who b { white-space: nowrap; }
/* naam + rol strak op elkaar. De naam had een losse geërfde line-height (~1.85);
   een lange functie (bv. "Algemeen directeur, NKI Leidingsystemen") wrapt naar
   twee/drie regels en het geheel werd zo hoog dat de onderste regel tegen de
   rotator-stipjes eronder botste. Strakke line-heights houden het blok compact. */
.heroquote__who b { display: block; font-weight: 640; line-height: 1.2; }
.heroquote__who span { font-size: var(--fs-small); line-height: 1.25; color: var(--ink-soft); }
.heroquote__stars {
  margin-left: auto;
  color: var(--accent-deep);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  white-space: nowrap;
}
/* voortgangs-stipjes van de rotator */
.heroquote__dots {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.3rem;
}
.heroquote__dot {
  position: relative;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--line-strong);
  transition: background var(--dur-1) var(--ease-out);
}
/* onzichtbaar tap-vlak van ~44px hoog rondom het 4px-balkje, zodat de stippen
   op touch goed raakbaar zijn zonder het visuele ontwerp te veranderen */
.heroquote__dot::before {
  content: "";
  position: absolute;
  inset: -20px -3px;
}
.heroquote__dot.is-on { background: var(--grad-accent); box-shadow: 0 0 10px var(--accent-glow); }

/* ---------- 2. Uitgelichte reviews boven de muur ---------- */
.voices--duo {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.2rem;
}
@media (min-width: 880px) {
  .voices--duo { grid-template-columns: 1fr 1fr; }
}
/* iets groter gezet dan de homepage-variant: dit zijn de kroonjuwelen */
.voices--duo .voice blockquote {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.5;
}

/* muur: kolommen komen gestaggerd binnen */
.bubbles .bubble:nth-child(3n + 2) { --reveal-delay: 0.08s; }
.bubbles .bubble:nth-child(3n) { --reveal-delay: 0.16s; }

/* nette "meer reviews"-regel (verving de inline-styled link).
   max-width:none heft de globale p-leesbreedte (var(--measure)) op, anders
   blijft deze <p> een smalle 466px-box links op de pagina en centreert
   text-align de link alleen bínnen die box i.p.v. midden op de pagina. */
.reviews-more {
  max-width: none;
  text-align: center;
  margin-top: 1.8rem;
}

/* ---------- 3. Scorecard: 5,0 + de drie resultaatcijfers ---------- */
.scorecard {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.4rem);
}
@media (min-width: 880px) {
  .scorecard { grid-template-columns: 0.9fr 1.1fr; }
}
.scorecard__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.7rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  background: radial-gradient(120% 100% at 50% 0%, rgba(102, 198, 255, 0.12), transparent 65%);
}
.scorecard__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 6.4rem);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.scorecard__stars { display: inline-flex; gap: 0.35rem; }
.scorecard__stars svg {
  width: clamp(22px, 2vw, 28px);
  height: auto;
  fill: url(#starGrad);
  filter: drop-shadow(0 4px 12px var(--accent-glow));
}
/* sterren poppen één voor één in zodra de kaart in beeld is */
.lux-on[data-motion="on"] .scorecard:not(.is-in) .scorecard__stars svg {
  opacity: 0;
  transform: scale(0.4);
}
.scorecard__stars svg {
  transition: opacity 0.45s var(--ease-spring) var(--sd, 0s),
    transform 0.5s var(--ease-spring) var(--sd, 0s);
}
.scorecard__lbl {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 24ch;
}
.scorecard__stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 880px) {
  .scorecard__stats { border-top: 0; border-left: 1px solid var(--line); }
}
.scorecard__row b {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.scorecard__row b small {
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  color: var(--accent-deep);
  margin-left: 0.25em;
}
.scorecard__row p {
  margin-top: 0.15rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.scorecard__bar {
  margin-top: 0.55rem;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.scorecard__bar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--grad-accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 1.2s var(--ease-out) var(--sd, 0.3s);
}
/* zonder motion/JS: balken gevuld */
[data-motion="off"] .scorecard__bar i,
html:not(.reveal-js) .scorecard__bar i { width: var(--wf, 100%); }
.lux-on[data-motion="on"] .scorecard.is-in .scorecard__bar i { width: var(--wf, 100%); }