/* Stadspagina's, sectie 4: "Recent in <gemeente>" (.lok) en de carrousel
   "Realisaties in <provincie>" (.prv). Gezet door scripts/apply-werven.mjs en
   scripts/apply-provincie-realisaties.mjs; de cache-versie in de <link> is een
   hash van dit bestand, dus elke wijziging wordt vanzelf opgehaald. */

/* Kaartprimitieven, letterlijk uit assets/realisaties.css -- dat bestand laadt
   alleen op /realisaties/, en de carrouselkaarten moeten er net zo uitzien. */
.rl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rl-card img{display:block;width:100%;height:190px;object-fit:cover;background:var(--bg-soft)}
.rl-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.rl-chips{display:flex;flex-wrap:wrap;gap:7px}
.rl-chip{display:inline-flex;align-items:center;background:var(--red-soft);color:var(--red);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:9999px}
.rl-card h3{font-size:16.5px;line-height:1.3;margin:0}
.rl-card h3 a{color:inherit}
.rl-card h3 a:hover{color:var(--red)}

/* Recent in <gemeente>: foto van het eigen dossier met de cijferbalk eronder,
   zoals de kop van een /project/-pagina. Zonder dossier staat de balk alleen. */
.lok{margin:32px 0 64px;border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;background:#fff}
.lok-photo{position:relative;display:block;height:270px;color:#fff;text-decoration:none;isolation:isolate;overflow:hidden}
.lok-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;z-index:-2;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.lok-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,6,8,.78),rgba(10,6,8,.15) 60%,transparent)}
.lok-photo:hover img{transform:scale(1.03)}
.lok-cap{position:absolute;left:36px;bottom:30px;max-width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lok-cap b{font-size:28px;font-weight:800;line-height:1.15;text-wrap:balance}
.lok-cap .rl-chip{background:#fff}
.lok-go{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.lok-go svg{width:15px;height:15px;transition:transform .2s}
.lok-photo:hover .lok-go svg{transform:translateX(3px)}
.lok-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.lok-facts[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.lok-facts[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.lok-facts div{padding:18px 28px;border-right:1px solid var(--line)}
.lok-facts div:last-child{border-right:0}
.lok-facts dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.lok-facts dd{margin:7px 0 0;font-size:24px;font-weight:800;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.lok-facts dd small{display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-top:4px}

/* Realisaties in <provincie>: een venster op een rij kaarten. assets/stadsblok.js
   schuift de rij; zonder JS blijft het een rij die je horizontaal kunt scrollen. */
.prv{margin-bottom:0}
.prv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.prv-head .shead{margin-bottom:0}
.prv-nav{display:flex;gap:8px;flex:none;margin-bottom:6px}
.prv-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.prv-btn svg{width:18px;height:18px}
.prv-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.prv-view{overflow-x:auto;scrollbar-width:none;margin:28px -12px 0;padding:6px 12px 22px}
.prv-view::-webkit-scrollbar{display:none}
.prv[data-ready] .prv-view{overflow:hidden}
.prv-track{display:flex;gap:22px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.prv-track .rl-card{flex:0 0 calc((100% - 44px)/3)}
.prv-img{display:block;overflow:hidden}
.prv-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.prv .rl-card:hover .prv-img img{transform:scale(1.04)}
.prv-dots{display:flex;justify-content:center;gap:6px;margin-top:-6px}
.prv-dots span{width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
.prv-dots span.on{width:20px;background:var(--red)}
.prv-links{margin-top:22px;font-size:14px;line-height:1.7;color:var(--text-dim)}
.prv-links p{margin:0;font-size:inherit;color:inherit}
.prv-links a{color:var(--text-mid)}
.prv-links a:hover{color:var(--red)}

/* Reviewband (.rvb) onder de provinciecarrousel: Google-score en alle reviews
   van vier sterren of meer. Gezet door scripts/apply-stad-reviews.mjs. Zonder
   JS is het een scrollrij; stadsblok.js kloont de kaarten en zet data-loop,
   dan schuift de rij traag door. Sterren in Google-geel: het is Googles score. */
.rvb{margin-top:40px;padding:20px 0 22px;border-radius:var(--radius-lg);background:var(--bg-soft);overflow:hidden}
.rvb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px 16px}
.rvb-bar .eyebrow{margin:0}
.rvb-score{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);text-decoration:none}
.rvb-score b{font-size:20px;color:var(--ink);letter-spacing:-.02em}
.rvb-g{width:16px;height:16px;flex:none}
.rvb-go{display:inline-flex;align-items:center;gap:5px;margin-left:6px;color:var(--red);font-weight:700}
.rvb-go svg{width:12px;height:12px;transition:transform .2s}
.rvb-score:hover .rvb-go svg{transform:translateX(3px)}
.rvb-stars{display:inline-flex;gap:1.5px;color:#FBBC04}
.rvb-stars svg{width:13px;height:13px;fill:currentColor;flex:none}
.rvb-stars svg.off{color:rgba(0,0,0,.12)}
.rvb-fill{position:relative}
.rvb-bg{display:inline-flex;gap:1.5px;color:rgba(0,0,0,.12)}
.rvb-fg{position:absolute;inset:0 auto 0 0;display:inline-flex;gap:1.5px;overflow:hidden}
.rvb-view{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rvb-view::-webkit-scrollbar{display:none}
.rvb-track{display:flex;gap:14px;width:max-content;padding:0 24px}
.rvb[data-loop] .rvb-view{overflow:hidden}
.rvb[data-loop] .rvb-card{margin-right:14px}
.rvb[data-loop] .rvb-track{gap:0;padding:0;animation:rvb-loop var(--rvb-duur,60s) linear infinite}
.rvb[data-loop] .rvb-view:hover .rvb-track,.rvb[data-loop] .rvb-view:focus-within .rvb-track{animation-play-state:paused}
@keyframes rvb-loop{to{transform:translateX(-50%)}}
.rvb-card{margin:0;width:330px;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rvb-card blockquote{margin:0;flex:1;font-size:14px;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rvb-card figcaption{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim)}
.rvb-card figcaption b{color:var(--ink)}

/* Sectie 2 (lokale context, direct onder de hero). vocht.css is geschreven
   voor de themapagina's: 104px sectiepadding plus 52px marge boven het grid,
   en een muurfiguur van 540px die de tekst verticaal centreerde. Op een
   stadspagina gaf dat 250px leegte boven de titel. Hier strakker, en de foto
   lijnt bovenaan uit met de tekst. Ook de andere secties krijgen minder
   padding: 104px boven én onder gaf ~260px wit tussen twee blokken tekst. */
.section{padding:80px 0}
.hero + .section{padding-top:64px}
.hero + .section .cap-grid{margin-top:0;align-items:start}
.hero + .section .wallfig{padding:18px}
.hero + .section .wallfig .wall{height:420px}

@media (prefers-reduced-motion:reduce){.prv-track,.lok-photo img,.prv-img img,.rvb-go svg{transition:none}.rvb[data-loop] .rvb-track{animation:none}}
@media (max-width:1000px){
  .lok-facts,.lok-facts[data-n="3"]{grid-template-columns:1fr 1fr}
  .lok-facts div:nth-child(2n){border-right:0}
  .lok-facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .lok-facts[data-n="3"] div:last-child{grid-column:span 2}
  .lok-facts[data-n="2"] div{border-bottom:0}
  .prv-track .rl-card{flex-basis:calc((100% - 22px)/2)}
}
@media (max-width:600px){
  .section{padding:56px 0}
  .hero + .section{padding-top:44px}
  .hero + .section .wallfig{padding:12px}
  .hero + .section .wallfig .wall{height:260px}

  .lok{margin:24px 0 44px}
  .lok-photo{height:200px}
  .lok-cap{left:18px;right:18px;bottom:18px;gap:8px}
  .lok-cap b{font-size:19px}
  .lok-go{font-size:14px}
  .lok-facts div{padding:14px 16px}
  .lok-facts dt{font-size:10px}
  .lok-facts dd{font-size:19px;margin-top:4px}
  .lok-facts dd small{font-size:12px}

  .prv-nav{display:none}
  .prv-view{margin-top:20px}
  .prv-track{gap:12px}
  .prv-track .rl-card{flex-basis:100%}
  .prv-track .rl-card img{height:180px}
  .prv-links{font-size:13.5px}

  .rvb{margin-top:28px;padding:16px 0 18px}
  .rvb-bar{flex-direction:column;align-items:flex-start;gap:8px;padding:0 16px 12px}
  .rvb-n{display:none}
  .rvb-go{margin-left:4px}
  .rvb-track{padding:0 16px}
  .rvb-card{width:280px}
  .rvb-card blockquote{-webkit-line-clamp:4}
}