/* ==========================================================================
   Projectenkaart (/projecten/) en casepagina-extra's (galerij, video)
   Neon alleen op aubergine — de kaart ligt op #35122A, het land op beige 6%.
   ========================================================================== */

.projecten-kop{max-width:none}
.projecten-label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label);margin:0 0 .8em}
.projecten-kop h1{max-width:22ch}
.projecten-kop h1 strong{font-weight:600}
.projecten-totaal{font-family:var(--sans);font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--beige);margin:0 0 1.2em;font-variant-numeric:tabular-nums}
.projecten-kop .intro{max-width:60ch}

/* --- filters -------------------------------------------------------------- */
.pk{margin:0 0 64px}
.pk-filters{display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.pk-filterrij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pk-filterlabel{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label);width:auto;flex:0 0 auto;margin-right:8px}
.pk-knop{font:inherit;font-size:.85rem;font-weight:600;color:var(--beige);background:none;
  border:1px solid var(--rand);border-radius:999px;padding:7px 15px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.pk-knop:hover{border-color:var(--neon)}
.pk-knop[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--aubergine)}
.pk-teller{font-size:.85rem;color:var(--gedempt);margin:4px 0 0}

/* --- kaart ---------------------------------------------------------------- */
.pk-kaart{position:relative;max-width:720px;margin:0 auto;background:var(--aubergine);
  border-radius:var(--rand-radius)}
.pk-land{display:block;width:100%;height:auto;user-select:none;pointer-events:none;
  /* België loopt de kaart uit: zacht laten verdwijnen in plaats van een harde rechte rand */}
.pk-pins{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.pk-pins li{position:absolute;width:0;height:0;transition:opacity .2s}
.pk-pins li.pk-uit{opacity:.1;pointer-events:none}
.pk-pin{position:absolute;left:0;top:0;width:24px;height:24px;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;text-decoration:none}
.pk-pin span{width:10px;height:10px;border-radius:50%;background:var(--neon);
  box-shadow:0 0 0 3px rgba(84,255,0,.16),0 0 14px 3px rgba(84,255,0,.5);
  transition:transform .15s,box-shadow .15s}
.pk-pin:hover span,.pk-pin:focus-visible span,.pk-pin.actief span{transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(84,255,0,.22),0 0 20px 6px rgba(84,255,0,.6)}
.pk-pin:focus-visible{outline:2px solid var(--beige);outline-offset:0}
.pk-pins li:has(.pk-pin.actief){z-index:3}

.pk-popup{position:absolute;z-index:10;width:260px;background:var(--aubergine-body);
  border:1px solid var(--rand);border-radius:var(--rand-radius);overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pk-popup img{display:block;width:100%;height:130px;object-fit:cover}
.pk-popup-tekst{padding:14px 40px 16px 16px}
.pk-popup-titel{font-family:var(--serif);font-size:1.15rem;line-height:1.2;margin:0 0 4px}
.pk-popup-plaats{font-size:.85rem;color:var(--label);margin:0 0 6px}
.pk-popup-specs{font-size:.9rem;font-weight:600;margin:0 0 10px;font-variant-numeric:tabular-nums}
.pk-popup a{font-size:.9rem;font-weight:600;color:var(--neon);text-decoration:none}
.pk-popup a:hover{text-decoration:underline}
.pk-popup-sluit{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(44,21,37,.85);color:var(--beige);font-size:18px;line-height:1;cursor:pointer}

/* --- grid ----------------------------------------------------------------- */
.pk-grid-kop{margin:0 0 8px}.pk-grid-kop strong{font-weight:600}.pk-grid-intro{margin:0 0 28px;opacity:.8;font-size:1.05rem}
.pk-grid{list-style:none;margin:0 0 56px;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pk-item[hidden]{display:none}
.pk-item-link{display:flex;flex-direction:column;height:100%;text-decoration:none;
  background:var(--aubergine-body);border:1px solid var(--rand);border-radius:var(--rand-radius);
  overflow:hidden;transition:border-color .15s,transform .2s}
.pk-item-link:hover,.pk-item-link:focus-visible{border-color:var(--neon);transform:translateY(-3px);color:var(--beige)}
.pk-item-link img,.pk-item-leeg{display:block;width:100%;height:160px;object-fit:cover}
.pk-item-leeg{background:linear-gradient(135deg,rgba(236,224,199,.08),rgba(236,224,199,.02))}
.pk-item-tekst{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.pk-item-tekst .pil{align-self:flex-start;background:rgba(236,224,199,.12);font-size:11px;
  padding:3px 10px;margin-bottom:6px}
.pk-item-titel{font-family:var(--serif);font-size:1.2rem;line-height:1.2}
.pk-item-plaats{font-size:.85rem;color:var(--label)}
.pk-item-specs{font-size:.88rem;font-weight:600;color:var(--gedempt);font-variant-numeric:tabular-nums}
.pk-leeg{color:var(--gedempt);margin:-32px 0 56px}

@media (max-width:640px){
  .pk-filterlabel{width:100%}
  .pk-knop{font-size:.8rem;padding:6px 12px}
  .pk-pin span{width:8px;height:8px}
  .pk-popup{position:absolute;left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;
    display:flex}
  .pk-popup img{width:110px;height:auto;min-height:100%;flex:0 0 110px}
  .pk-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pk-item-link img,.pk-item-leeg{height:110px}
  .pk-item-tekst{padding:12px 12px 14px}
  .pk-item-titel{font-size:1.02rem}
}
@media (max-width:380px){.pk-grid{grid-template-columns:1fr}}

/* --- casepagina: galerij en video ---------------------------------------- */
.case-galerij{margin:56px 0 0}
.case-galerij h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--label);margin:0 0 1em}
.case-galerij ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.case-galerij img{display:block;width:100%;height:220px;object-fit:cover;border-radius:var(--rand-radius)}
.case-video{position:relative;aspect-ratio:16/9;margin:2em 0;border-radius:var(--rand-radius);overflow:hidden;
  background:var(--aubergine-body)}
.case-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.case-pagina .zusjes li a{padding:6px 14px;font-size:.82rem}
/* lange plaatsnamen in de kerncijfers niet buiten de tegel laten lopen */
.case-pagina .kerncijfers li{min-width:0}
.case-pagina .kern-waarde{font-size:clamp(24px,2.8vw,38px);overflow-wrap:anywhere}

/* project zonder foto: kerncijfers als beeld in plaats van een leeg vlak */
.pk-item-geenfoto{display:flex;align-items:flex-end;aspect-ratio:400/260;width:100%;padding:18px 20px;
  background:linear-gradient(160deg,rgba(236,224,199,.10),rgba(236,224,199,.03));
  font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--beige)}
.pk-item-geenfoto b{font-weight:600}

/* anonieme stippen: overige opgeleverde installaties (plaatsniveau) */
.pk-stippen{position:absolute;inset:0;pointer-events:none}
.pk-stippen i{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--beige);opacity:.7}
.pk-leg{display:inline-block;vertical-align:middle;border-radius:50%;margin:0 2px}
.pk-leg-pin{width:10px;height:10px;background:var(--neon)}
.pk-leg-stip{width:6px;height:6px;background:var(--beige);opacity:.6}
@media (max-width:640px){.pk-stippen i{width:4px;height:4px;margin:-2px 0 0 -2px}}


/* droneloop bovenaan een casepagina: poster eerst, video er pas overheen als
   hij speelt (sollo.js). Zelfde maat als de gewone casefoto: geen verschuiving. */
.case-loop{position:relative;background:var(--aubergine-body)}
.case-loop video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  opacity:0;transition:opacity .6s ease}
.case-loop.speelt video{opacity:1}
.case-loop-knop{position:absolute;right:14px;bottom:14px;z-index:2;font:inherit;font-size:.8rem;font-weight:600;
  color:var(--beige);background:rgba(44,21,37,.78);border:1px solid var(--rand);border-radius:999px;
  padding:7px 14px;cursor:pointer;min-height:32px}
.case-loop-knop:hover,.case-loop-knop:focus-visible{border-color:var(--neon)}
.case-loop-knop[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.case-loop video{display:none}}

/* popup van een pin zonder foto: zelfde opbouw, kerncijfer als beeld */
.pk-popup-geenfoto{height:130px;display:flex;align-items:flex-end;padding:14px 16px;
  background:linear-gradient(160deg,rgba(236,224,199,.12),rgba(236,224,199,.03));
  font-family:var(--serif);font-size:1.25rem;line-height:1.1;color:var(--beige)}
.pk-popup-geenfoto b{font-weight:600}
@media (max-width:640px){
  .pk-popup-geenfoto{flex:0 0 110px;height:auto;min-height:100%;font-size:1rem;padding:12px}
}

/* clusters: pins die dichter dan ~26 px bij elkaar liggen worden één knop met
   het aantal; een klik waaiert ze uit (kaart.js). */
.pk-pins li.pk-in-cluster{visibility:hidden}
.pk-pins li.pk-waaier{z-index:4}
.pk-clusters{position:absolute;inset:0;pointer-events:none}
.pk-cluster{pointer-events:auto;position:absolute;z-index:3;transform:translate(-50%,-50%);
  min-width:30px;height:30px;padding:0 8px;border-radius:15px;border:0;cursor:pointer;
  background:var(--neon);color:var(--aubergine);font:inherit;font-size:13px;font-weight:700;line-height:30px;
  box-shadow:0 0 0 4px rgba(84,255,0,.18),0 0 16px 4px rgba(84,255,0,.45);font-variant-numeric:tabular-nums}
.pk-cluster:hover,.pk-cluster:focus-visible{box-shadow:0 0 0 5px rgba(84,255,0,.28),0 0 22px 6px rgba(84,255,0,.6)}
.pk-cluster:focus-visible{outline:2px solid var(--beige);outline-offset:2px}
.pk-cluster.open{z-index:5;background:var(--aubergine-body);color:var(--beige);
  box-shadow:0 0 0 1px var(--rand);font-size:18px;min-width:28px;height:28px;line-height:28px;padding:0}
.pk-waaier-vlak{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(44,21,37,.86);border:1px solid var(--rand);pointer-events:none}
.pk-waaier-vlak[hidden]{display:none}
@media (max-width:640px){.pk-pins li.pk-waaier .pk-pin span{width:10px;height:10px}}
/* met een uitgewaaierd cluster: de rest van de kaart treedt terug */
.pk-waaier-open .pk-cluster:not(.open),
.pk-waaier-open .pk-pins li:not(.pk-waaier):not(.pk-in-cluster){opacity:.15;pointer-events:none}