/* ==========================================================================
   pb-reviews.css
   Reviewpagina (/reviews/) — samenvatting + reviewkaarten.

   Hoort bij bricks/reviews.json en bricks/reviews-loop.php.
   Laad pb-common.css eerst; page-intro, .eyebrow, .cta en de FAQ-uitklapper
   komen daaruit.

   Koppel in functions.php in $page_map:
     'pb-reviews.css' => ['reviews'],

   De kaarten worden gerenderd door reviews-loop.php uit de CPT 'review'.
   De klassen hieronder gaan dus over markup die PHP maakt, niet over
   elementen die je in Bricks kunt aanklikken — pas ze samen aan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Hero — zelfde constructie als /doodles/het-ras/

   Full-bleed omdat de sectie een eigen achtergrondkleur heeft; de padding
   schaalt mee tot de inhoud op 1140px uitkomt, precies waar de secties
   eronder beginnen. Onder ±1204px is --pb-edge (32px) de grootste en
   verandert er niets.
   -------------------------------------------------------------------------- */

.pb-main .page-intro{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-left:max(var(--pb-edge), calc((100% - 1140px) / 2));
  padding-right:max(var(--pb-edge), calc((100% - 1140px) / 2));
  /* Compacter dan de andere pagina's: op /reviews/ is de kop maar een korte
     inleiding en staat het cijferblok er vlak onder. Met de hoogte van
     het-ras (76px boven, 44px onder) was de hero 376px hoog voordat er iets
     inhoudelijks in beeld kwam. */
  padding-top:clamp(30px, 3.2vw, 48px);
  padding-bottom:clamp(18px, 2.2vw, 28px);
  background:#fffaf5;
}

.pb-main .page-intro .eyebrow,
.pb-main .pb-rev-section .eyebrow{
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.pb-main .page-intro h1{
  font-family:Fraunces, Georgia, serif;
  /* Een slag kleiner dan elders. Op 64px viel deze kop over twee regels en
     dat vroeg meer aandacht dan een reviewpagina nodig heeft. */
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--brown);
  margin:0;
  max-width:720px;
}

/* Drie klassen, niet twee. pb-common.css heeft `.pb-main .page-intro p` met
   font-size:14px en margin:0 — dat is 0,2,1 en verslaat een selector van
   0,2,0, ook al laadt dit bestand later. Zonder deze extra klasse plakt de
   intro strak tegen de kop aan: de h1 heeft line-height:1, dus de staarten
   van de letters raken de eerste regel eronder. */
.pb-main .page-intro .pb-rev-lead{
  max-width:620px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

/* --------------------------------------------------------------------------
   2) Samenvatting — cijfer links, sterren en aantal rechts
   -------------------------------------------------------------------------- */

/* Drie klassen diep, niet twee: verderop staat `.pb-rev-section > *` met
   width:min(1140px,100%) om de inhoudsblokken te centreren, en die regel komt
   later in dit bestand. Bij gelijk gewicht zou die dus winnen en rekte de
   samenvatting uit tot de volle 1140px met het cijfer eenzaam links.

   Of dat gebeurt hangt ervan af of Bricks de uitvoer van het code-element in
   een eigen div wikkelt — dan is de samenvatting een kleinkind en raakt `> *`
   hem niet. Met deze specificiteit klopt het in allebei de gevallen. */
.pb-main .pb-rev-section .pb-rev-samenvatting{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:0;
  margin-bottom:26px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow2);
  width:fit-content;
  max-width:100%;
  /* `.pb-rev-section > *` zet margin-left/right op auto om de inhoudsblokken
     te centreren. Op een blok van fit-content betekent dat: in het midden.
     Hier moet hij juist links uitlijnen met de kaarten eronder.

     margin-left:0 is daarvoor net niet genoeg. De sectie houdt binnen zijn
     padding 1176px over, terwijl de inhoudsblokken op 1140px staan en dus 18px
     ingesprongen beginnen. Deze berekening neemt precies diezelfde 18px mee;
     is het scherm smaller dan 1140px, dan wordt de uitkomst negatief en houdt
     max() hem op 0. */
  margin-left:max(0px, calc((100% - 1140px) / 2));
  margin-right:auto;
}

.pb-main .pb-rev-cijfer{
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(38px, 4vw, 52px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--brown);
}

.pb-main .pb-rev-meta small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12.5px;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   3) Sterren

   De lege sterren staan wél in de HTML en worden hier gedimd, niet
   weggelaten: zo blijft de rij even breed bij elke score en springt de
   kaartinhoud niet.
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-sterren{
  display:inline-flex;
  gap:2px;
  font-size:16px;
  line-height:1;
  color:#e0d3c7;
}
.pb-main .pb-rev-sterren .is-vol{color:var(--accent)}

/* --------------------------------------------------------------------------
   4) Kaartenraster

   `columns` in plaats van grid: reviews verschillen sterk in lengte, en in
   een raster krijgt elke rij de hoogte van de langste kaart — dat geeft grote
   gaten. Met kolommen sluiten de kaarten op elkaar aan. De volgorde loopt dan
   per kolom van boven naar beneden in plaats van per rij; bij losse citaten
   maakt dat niet uit.
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-grid{
  columns:3;
  column-gap:18px;
}

.pb-main .pb-rev-kaart{
  /* break-inside voorkomt dat een kaart halverwege in de volgende kolom
     doorloopt. De margin moet ónder staan, niet boven: een bovenmarge valt
     bovenaan elke kolom weg en dan lijnen de kolommen niet uit. */
  break-inside:avoid;
  margin:0 0 18px;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow2);
}

.pb-main .pb-rev-kaart blockquote{
  margin:12px 0 0;
  padding:0;
  border:0;
  color:#67564b;
  font-size:15px;
  line-height:1.65;
}

.pb-main .pb-rev-kaart cite{
  display:block;
  margin-top:14px;
  font-family:Manrope, system-ui, sans-serif;
  font-style:normal;
  font-size:13px;
  font-weight:850;
  color:var(--brown);
}
/* Streepje vóór de naam, zoals bij een citaat gebruikelijk is. */
.pb-main .pb-rev-kaart cite::before{content:"— "}

/* Melding voor redacteuren zolang de CPT leeg is; bezoekers zien hem niet. */
.pb-main .pb-rev-leeg{
  margin:0;
  padding:18px 20px;
  background:#fff8f1;
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  color:var(--muted);
  font-size:14px;
}

/* --------------------------------------------------------------------------
   5) Secties
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-section{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  padding-top:clamp(46px, 6vw, 74px);
  padding-bottom:clamp(46px, 6vw, 74px);
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
}

.pb-main .pb-rev-section > *{
  width:min(1140px, 100%);
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
}

.pb-main .pb-rev-section.alt{background:#f6eee7}

/* De eerste sectie sluit direct aan op de hero. Met de volle 74px bovenmarge
   plus de 44px ondermarge van de hero zat er 118px lucht tussen de introtekst
   en het cijferblok — dat leest als een gat in plaats van als een overgang.
   De samenvatting hoort visueel nog bij de kop, dus hier veel krapper. */
.pb-main .page-intro + .pb-rev-section{padding-top:clamp(10px, 1.4vw, 18px)}
.pb-main .pb-rev-section > .section-head{margin-bottom:26px}

.pb-main .pb-rev-section .h2{
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(29px, 3.5vw, 42px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--brown);
  margin:0;
}

/* --------------------------------------------------------------------------
   6) Slotblok
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* --------------------------------------------------------------------------
   7) Schermbreedtes
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .pb-main .pb-rev-grid{columns:2}
}

@media (max-width:767px){
  .pb-main .pb-rev-section .h2{font-size:clamp(25px, 7.2vw, 33px)}
  .pb-main .pb-rev-section > .section-head{margin-bottom:18px}
  .pb-main .pb-rev-grid{columns:1}
  .pb-main .pb-rev-kaart{padding:18px;margin-bottom:12px}
  /* Zelfde drie klassen als hierboven, anders wint die regel en blijft het
     blok op fit-content staan. Op een telefoon leest de volle breedte beter. */
  .pb-main .pb-rev-section .pb-rev-samenvatting{width:100%;padding:16px 18px}
  /* Twee knoppen naast elkaar zijn op een telefoon allebei te smal. */
}

/* --------------------------------------------------------------------------
   8) Conceptreviews

   reviews-loop.php toont concepten alleen aan wie mag bewerken, met een tag
   erop. Zo beoordeel je de pagina met de voorbeeldreviews erin terwijl een
   bezoeker uitsluitend gepubliceerde reviews ziet. De streepjesrand maakt in
   één oogopslag duidelijk welke kaarten nog niet live staan.
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-kaart.is-concept{
  border-style:dashed;
  background:#fffaf5;
  box-shadow:none;
}

.pb-main .pb-rev-tag{
  display:inline-block;
  margin-bottom:10px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:var(--cream, #efe6de);
  color:var(--muted);
  font-family:Manrope, system-ui, sans-serif;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   9) Reviewformulier

   Hoort bij [pb_review_formulier] uit inc/pb-review-formulier.php.
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-formulier{
  /* Vult zijn kolom. Stond eerder op min(620px,100%) met margin:auto, waardoor
     het een smalle strook in het midden van een lege sectie werd. */
  width:100%;
  margin:0;
  padding:28px 26px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow2);
}

.pb-main .pb-rev-veld{margin-bottom:16px;border:0;padding:0}
.pb-main .pb-rev-veld > label,
.pb-main .pb-rev-veld legend{
  display:block;
  margin-bottom:6px;
  padding:0;
  font-family:Manrope, system-ui, sans-serif;
  font-size:13px;
  font-weight:850;
  color:var(--brown);
}
.pb-main .pb-rev-veld > label small{font-weight:700;color:var(--muted)}

.pb-main .pb-rev-formulier input[type=text],
.pb-main .pb-rev-formulier input[type=email],
.pb-main .pb-rev-formulier textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fffaf5;
  color:var(--brown);
  font-family:Manrope, system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
}
.pb-main .pb-rev-formulier textarea{resize:vertical;min-height:110px}
.pb-main .pb-rev-formulier input:focus,
.pb-main .pb-rev-formulier textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:transparent;
}

/* ---- Sterrenkiezer ------------------------------------------------------
   De radio's staan in de HTML van 5 naar 1. Met row-reverse lezen ze visueel
   weer van 1 naar 5, en dan kan `input:checked ~ label` alle sterren links
   van de gekozen inkleuren — een broer-selector kan immers alleen vooruit
   kijken in de DOM. Zelfde truc voor hover.

   De radio's blijven bedienbaar met het toetsenbord: ze worden niet op
   display:none gezet maar doorzichtig gemaakt, anders vallen ze uit de
   tabvolgorde en is de score niet meer te kiezen zonder muis. */

.pb-main .pb-rev-sterkeuze{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:4px;
}
.pb-main .pb-rev-sterkeuze input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.pb-main .pb-rev-sterkeuze label{
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:#e0d3c7;
  transform-origin:center bottom;
  transition:color .12s ease, transform .12s ease;
}
/* Stand van de keuze: de gekozen ster en alles links ervan. */
.pb-main .pb-rev-sterkeuze input:checked ~ label{color:var(--accent)}

/* Zodra de muis boven de rij hangt, telt de keuze even niet mee. Zonder deze
   reset gebeurt er bij hover niets zichtbaars: er staan standaard vijf sterren
   aan, dus die zijn al allemaal gekleurd en dan valt niet te zien wat je
   aanwijst.

   Let op het gewicht, daar ging het eerst mis. De reset telt vier klassen
   (.pb-main, .pb-rev-sterkeuze, :hover, :checked) en twee elementen: (0,4,2).
   De regel voor de ster waar je op staat telde maar één element: (0,4,1). Die
   verloor dus, en precies de aangewezen ster bleef grijs terwijl alles links
   ervan wél kleurde.

   Daarom hebben de hover-regels nu de fieldset (.pb-rev-score) erbij: dat
   maakt er (0,5,1) en (0,5,2) van, en dan wint de hover altijd. */
.pb-main .pb-rev-sterkeuze:hover input:checked ~ label{color:#e0d3c7}

.pb-main .pb-rev-score .pb-rev-sterkeuze:hover label:hover,
.pb-main .pb-rev-score .pb-rev-sterkeuze:hover label:hover ~ label{color:var(--accent)}

/* De ster waar je op staat wordt ook iets groter. Kleur alleen bleek te
   subtiel op een klein scherm en bij een lichte muisaanwijzer. */
.pb-main .pb-rev-sterkeuze label:hover{transform:scale(1.18)}
/* Zichtbare focus, anders weet iemand met het toetsenbord niet waar hij is. */
.pb-main .pb-rev-sterkeuze input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* Alleen voor schermlezers; dit thema heeft geen eigen klasse daarvoor. */
.pb-main .pb-rev-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Honeypot: weg voor mensen, wel invulbaar voor een bot. */
.pb-main .pb-rev-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.pb-main .pb-rev-formulier button.cta{margin-top:4px}
.pb-main .pb-rev-klein{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}

.pb-main .pb-rev-melding{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:var(--r-md);
  font-size:14px;
  line-height:1.55;
}
.pb-main .pb-rev-melding.is-goed{background:#eef2ea;color:#4a5943;border:1px solid #cfdac7}
.pb-main .pb-rev-melding.is-fout{background:#fbeee8;color:#8a4b32;border:1px solid #edcdbe}

@media (max-width:767px){
  .pb-main .pb-rev-formulier{padding:22px 18px}
  .pb-main .pb-rev-sterkeuze label{font-size:30px}
}

/* --------------------------------------------------------------------------
   10) Formuliersectie in twee kolommen

   Het formulier stond als losse kolom van 620px midden in een sectie van
   1140px, met leegte links en rechts. Nu staat het rechts, met links de
   toelichting die anders als kleine lettertjes ónder de knop had gestaan.
   Dat leest beter en het scheelt de bezoeker verrassingen achteraf.

   minmax(0,1fr) en niet 1fr: een grid-kolom weigert standaard kleiner te
   worden dan zijn inhoud, en een textarea heeft een eigen minimumbreedte.
   Zonder die minmax duwt het formulier de linkerkolom weg op smallere
   schermen.
   -------------------------------------------------------------------------- */

.pb-main .pb-rev-split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}

.pb-main .pb-rev-uitleg .h2{margin-bottom:12px}
.pb-main .pb-rev-uitleg > p{
  max-width:38em;
  margin:0 0 18px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.7;
}

/* Puntenlijst met hetzelfde vinkje als elders op de site. */
.pb-main .pb-rev-punten{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pb-main .pb-rev-punten li{
  position:relative;
  padding-left:30px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
}
.pb-main .pb-rev-punten li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:19px;
  height:19px;
  border-radius:var(--r-pill);
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
              linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
       linear-gradient(#000,#000);
  mask-composite:exclude;
}

/* Onder 900px onder elkaar, met de toelichting eerst: die vertelt waarom je
   het formulier zou invullen. */
@media (max-width:899px){
  .pb-main .pb-rev-split{grid-template-columns:1fr;gap:26px}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .pb-rev-sterkeuze label{transition:none}
  .pb-main .pb-rev-sterkeuze label:hover{transform:none}
}

/* ==========================================================================
   Foto's bij een review
   ==========================================================================
   De foto's die een klant bij zijn Google-review heeft gezet, meestal van de
   hond. Zie pb_reviews_fotos() in inc/pb-reviews.php; het ACF-veld is `fotos`.

   Vaste vierkante uitsnede met object-fit: die foto's komen van telefoons en
   zijn liggend, staand en alles daartussen. Zonder vaste verhouding wordt elke
   kaart een andere hoogte en staat de rij scheef.

   Eén foto krijgt de volle breedte in 4:3 — dan is het de foto bij het verhaal.
   Twee of drie worden vierkante duimpjes naast elkaar.
   ========================================================================== */
.pb-main .pb-rev-fotos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 0;
}
.pb-main .pb-rev-fotos img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  border-radius: var(--r-sm, 8px);
  background: var(--cream2, #e6d8cd);
}
.pb-main .pb-rev-fotos.is-een{ grid-template-columns: 1fr }
.pb-main .pb-rev-fotos.is-een img{ aspect-ratio: 4/3; border-radius: var(--r-md, 10px) }

/* Uploadveld in het reviewformulier. Een <input type="file"> is niet op te
   maken zoals een tekstveld — de knop erin wordt door de browser getekend en
   negeert de meeste eigenschappen. Daarom alleen het omhulsel opmaken, zodat
   het bij de andere velden past, en de knop zelf met ::file-selector-button. */
.pb-main .pb-rev-formulier input[type="file"]{
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: var(--paper, #fffaf5);
  border: 1px solid var(--line);
  border-radius: var(--r, 8px);
  padding: 9px 11px;
}
.pb-main .pb-rev-formulier input[type="file"]::file-selector-button{
  font: inherit;
  font-weight: 800;
  color: var(--brown);
  background: var(--cream, #efe6de);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  padding: 6px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.pb-main .pb-rev-formulier input[type="file"]::file-selector-button:hover{
  background: var(--cream2, #e6d8cd);
}