/* ═══════════════════════════════════════════════════════════════════
   REVIEWS-BLUEPRINT — /reviews-uitvoerders/
   Gescoped onder #pmRev. Er staat hier bewust weinig eigens in: de hero
   en de eind-CTA komen uit informatie.css, de scorekaart en de review-
   kaartjes uit homepage.css. Deze pagina is het eindpunt van elke
   reviewsectie op de site, dus hij hoort er hetzelfde uit te zien.

   Maatvoering = het huisritme: hero 48/40 (desktop 62/52), secties 34/40,
   kaartjes 15px 17px met 12px ertussen. Niets nieuws verzinnen.
   ═══════════════════════════════════════════════════════════════════ */
#pmRev {
  --groen: #95C11F; --groen-donker: #7ba018;
  --blauw: #00AFEF; --blauw-donker: #0093c9;
  --teal: #1ec98d; --tealBlauw: #0aa0e9;
  --inkt: #0f172a; --inkt-zacht: #1e293b;
  --grijs: #64748b; --grijs-licht: #94a3b8;
  --lijn: #e2e8f0; --fond: #f8fafc;
  --goud: #f5b400;
  --radius: 22px;
  --schaduw: 0 12px 30px rgba(15,23,42,.07);
  font-family: 'Albert Sans', -apple-system, sans-serif;
  background: #fff; color: var(--inkt-zacht); line-height: 1.5;
}
#pmRev, #pmRev *, #pmRev *::before, #pmRev *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Blocksy zet eigen kleuren op koppen en alinea's; zo'n elementregel wint van overerving
   en maakte de kop in de donkere eind-CTA onleesbaar (zie informatie.css, 24 aug 2026). */
#pmRev h1, #pmRev h2, #pmRev h3, #pmRev p, #pmRev li, #pmRev button, #pmRev time { color: inherit; }
/* Een klasseregel met display wint van de browserregel voor [hidden]; de halve lijst zou
   dan alsnog zichtbaar zijn. Vandaar hard. */
#pmRev [hidden] { display: none !important; }
#pmRev a { color: var(--blauw-donker); }
#pmRev .wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
#pmRev :focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 6px; }

/* ── hero ── */
#pmRev .heroLicht { text-align: center; padding: 48px 0 40px;
  background: radial-gradient(120% 150% at 50% -20%, #ecfbf4 0%, #e6f7fd 45%, #fff 100%); }
#pmRev .heroEyebrow { font: 800 11.5px 'Inter', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--blauw); }
#pmRev .heroLicht h1 { font-family: 'Inter', sans-serif; font-size: 29px; font-weight: 900; letter-spacing: -.9px;
  line-height: 1.16; margin: 10px auto 0; max-width: 640px; color: var(--inkt); text-wrap: balance; }
#pmRev .heroToel { font-size: 14.5px; color: var(--grijs); line-height: 1.65; margin: 13px auto 0; max-width: 560px; }

/* ── de score ── de kaart uit homepage.css, ongewijzigd ── */
#pmRev .scoreSectie { padding: 30px 0 0; }
#pmRev .scoreKaart { width: 100%; max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--schaduw); text-align: center; }
#pmRev .scoreGroot { font: 900 56px 'Inter', sans-serif; line-height: 1; color: var(--inkt); letter-spacing: -2px;
  font-variant-numeric: tabular-nums; }
#pmRev .scoreSterren { color: var(--goud); font-size: 22px; letter-spacing: 3px; margin-top: 8px; }
#pmRev .scoreSub { font-size: 14px; color: var(--grijs); margin-top: 10px; }
#pmRev .scoreSub b { font-family: 'Inter', sans-serif; color: var(--inkt); font-weight: 800; }
#pmRev .scoreVerdeling { margin-top: 22px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
#pmRev .scoreRij { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#pmRev .scoreNr { width: 34px; flex: 0 0 auto; font-weight: 700; color: var(--inkt-zacht); white-space: nowrap; }
#pmRev .scoreNrSter { color: var(--goud); }
#pmRev .scoreBalk { flex: 1; height: 9px; background: #edf0f3; border-radius: 5px; overflow: hidden; }
#pmRev .scoreVul { display: block; height: 100%; background: linear-gradient(90deg, #f5b400, #f59e0b); border-radius: 5px; }
#pmRev .scoreAantal { width: 44px; flex: 0 0 auto; text-align: right; color: var(--grijs); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* De herkomst als één rustige alinea, niet als een rij kaartjes: het is uitleg. */
#pmRev .herkomst { max-width: 620px; margin: 18px auto 0; font-size: 13.5px; color: var(--grijs);
  line-height: 1.7; text-align: center; }

/* ── de lijst ── */
#pmRev .lijstSectie { margin-top: 34px; padding: 34px 0 40px; background: var(--fond); border-top: 1px solid var(--lijn); }
#pmRev .lijstKop { font: 900 21px 'Inter', sans-serif; letter-spacing: -.5px; color: var(--inkt);
  text-align: center; margin-bottom: 20px; }
/* Kolommen, geen raster. In een raster bepaalt de langste kaart de rijhoogte en laat de
   korte ernaast een gat vallen (Robbie, 5 sept 2026: "tussenafstanden niet mooi"); met
   kolommen sluiten ze strak op elkaar aan en is de witruimte overal 12px. */
#pmRev .lijst { column-gap: 12px; }

/* de reviewkaart uit homepage.css (.scoreReview), met één regel extra voor de ophaaldienst */
#pmRev .rev { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 15px 17px;
  box-shadow: var(--schaduw); margin-bottom: 12px;
  -webkit-column-break-inside: avoid; break-inside: avoid; }
#pmRev .revSterren { color: var(--goud); font-size: 13px; letter-spacing: 1px; }
#pmRev .revSterren .leeg { color: #dfe5ec; }
#pmRev .revTekst { font-size: 13px; color: #334155; line-height: 1.55; margin-top: 6px; font-style: italic; }
#pmRev .revTekst.geen { color: var(--grijs-licht); }
#pmRev .revVoet { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 9px; flex-wrap: wrap; }
#pmRev .revNaam { font: 700 12.5px 'Inter', sans-serif; color: var(--inkt); }
#pmRev .revOphaler { color: var(--grijs-licht); font-weight: 500; }
#pmRev .revDatum { font-size: 11.5px; color: var(--grijs-licht); margin-left: auto; }

#pmRev .meerRij { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 26px; }
#pmRev .meerKnop { font: 800 13.5px 'Inter', sans-serif; color: var(--inkt); background: #fff;
  border: 1.5px solid var(--lijn); border-radius: 999px; padding: 12px 26px; cursor: pointer; }
#pmRev .meerKnop:hover { border-color: var(--blauw); color: var(--blauw-donker); }
#pmRev .meerStand { font-size: 12.5px; color: var(--grijs-licht); font-variant-numeric: tabular-nums; }

/* ── vragen ── */
#pmRev .vragen { padding: 40px 0 44px; }
#pmRev .vragen h2 { font: 900 21px 'Inter', sans-serif; letter-spacing: -.5px; color: var(--inkt); text-align: center; }
#pmRev .vragenLijst { max-width: 700px; margin: 20px auto 0; display: grid; gap: 9px; }
#pmRev details.vraag { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; }
#pmRev details.vraag > summary { cursor: pointer; list-style: none; padding: 15px 17px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
#pmRev details.vraag > summary::-webkit-details-marker { display: none; }
#pmRev .vraagKop { font: 800 14.5px 'Inter', sans-serif; color: var(--inkt); letter-spacing: -.2px; }
#pmRev details.vraag .plus { color: var(--grijs-licht); font-size: 19px; line-height: 1; flex: 0 0 auto;
  transition: transform .2s ease; }
#pmRev details.vraag[open] .plus { transform: rotate(45deg); }
#pmRev details.vraag .antw { padding: 0 17px 16px; font-size: 13.5px; color: var(--grijs); line-height: 1.7; }

/* ── eind-cta ── het blok uit informatie.css ── */
#pmRev .eindCta { background: var(--inkt); color: #fff; padding: 46px 0 52px; text-align: center; }
#pmRev .eindCta h2 { font-family: 'Inter', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -.6px; color: #fff; }
#pmRev .eindCta .toel { font-size: 14px; color: #b6c6d8; line-height: 1.65; margin: 12px auto 20px; max-width: 520px; }
#pmRev .eindKnop { display: inline-flex; flex-direction: column; gap: 3px; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px rgba(30,201,141,.35); }
#pmRev .eindKnop .hoofd { font: 800 15px 'Inter', sans-serif; }
#pmRev .eindKnop .sub { font-size: 11.5px; opacity: .92; font-weight: 600; }
#pmRev .eindKnop:hover { filter: brightness(1.05); }

/* ══ vanaf tablet ══ */
@media (min-width: 700px) {
  #pmRev .heroLicht { padding: 62px 0 52px; }
  #pmRev .heroLicht h1 { font-size: 38px; }
  #pmRev .heroToel { font-size: 15.5px; }
  #pmRev .lijst { column-count: 2; }
  #pmRev .lijstKop, #pmRev .vragen h2 { font-size: 25px; }
  #pmRev .eindCta h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) { #pmRev * { transition: none !important; } }