/* ============================================================
   WERKGEBIEDKAART
   Toegevoegd 22-09-2026. Alles hangt aan body.lp-werkgebied of aan
   .wg-, zodat geen enkele bestaande pagina verandert.

   De kaart is een hulpmiddel, geen voorwaarde: elke plaats is ook
   via gewone HTML-links in de regiolijsten bereikbaar. Laadt de
   kaart niet, dan blijft de pagina volledig bruikbaar.
   ============================================================ */

.wg-kaart-blok{margin:var(--sp-7) 0 0;}

/* Het kaartvlak zelf. Vaste verhouding zodat er geen layout shift
   optreedt terwijl Leaflet nog laadt. */
.wg-kaart{position:relative;width:100%;height:clamp(320px,52vh,560px);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--lp-creme,#efeee7);}
.wg-kaart:focus-visible{outline:2px solid var(--eucalyptus-dark);
  outline-offset:3px;}

/* Terugvalmelding, zichtbaar zolang de kaart niet geladen is. */
.wg-kaart-terugval{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;font-size:14.5px;
  line-height:1.7;color:var(--text-2);}
.wg-kaart.is-geladen .wg-kaart-terugval{display:none;}

/* ---- markers ------------------------------------------------ */
/* Eigen markers in plaats van de standaard blauwe speld van Leaflet.
   Lichte rand en zachte schaduw, zodat ze ook op een satellietlaag
   leesbaar blijven. */
.wg-marker{display:block;border-radius:50%;
  background:var(--eucalyptus,#4A7161);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(23,26,29,.45);}
.wg-marker--plaats{width:14px;height:14px;}
.wg-marker--kantoor{width:22px;height:22px;background:var(--antraciet,#171A1D);
  border-width:3px;box-shadow:0 0 0 4px rgba(74,113,97,.45),
  0 2px 6px rgba(23,26,29,.5);}

/* Cluster: een cirkel met het aantal plaatsen erin. */
.wg-cluster{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--eucalyptus,#4A7161);color:#fff;border:2px solid #fff;
  font-family:var(--font-body);font-size:13px;font-weight:700;
  box-shadow:0 1px 5px rgba(23,26,29,.45);}
.wg-cluster--groot{width:44px;height:44px;font-size:14px;}

/* ---- popup -------------------------------------------------- */
.leaflet-popup-content-wrapper{border-radius:var(--radius-md,10px);
  box-shadow:0 6px 24px rgba(23,26,29,.22);}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font-body);}
.wg-popup-naam{display:block;font-family:var(--font-display);
  font-size:16px;font-weight:700;color:var(--text-1);margin:0 0 2px;}
.wg-popup-regio{display:block;font-size:12.5px;color:var(--text-3);
  margin:0 0 10px;}
.wg-popup-link{display:inline-block;font-size:14px;font-weight:600;
  color:var(--eucalyptus-dark,#3c5c4f);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;}
.wg-popup-link:hover{color:var(--antraciet,#171A1D);}



/* ==================================================================
   Vereenvoudigde werkgebiedpagina, 22-09-2026.

   Verplaatst vanuit het inline <style>-blok van de proefversie. De
   oudere .wg-regio-regels die hierboven stonden zijn op 23-09-2026
   verwijderd (pakket 24): ze kwamen in geen enkele pagina meer voor.
   ================================================================== */
/* Werkgebied: regio's als brede tegelrasters.

   Staat bewust nog in de pagina zelf omdat dit een proefversie is. Bij akkoord
   verhuist dit blok naar assets/css/werkgebied-kaart.css, waar de overige
   werkgebiedopmaak ook staat.

   .detail-body>* kapt kinderen af op 760px leesbreedte. Voor het regiooverzicht
   is dat te smal: dan ontstaan de smalle verticale lijsten die we juist weg
   willen hebben. Deze twee elementen mogen daarom de volle breedte van
   .detail-body gebruiken. */
.detail-body > .wg-gebieden-kop,
.detail-body > .wg-gebieden{max-width:none;width:100%;}

/* De kaart loopt op dezelfde contentbreedte als het regiooverzicht eronder.
   Anders staan er twee breedtes op een pagina en breekt het beeld. De hero
   blijft bewust op leesbreedte staan, zodat de intro compact blijft.
   Onder 1200px is .detail-body zelf al smaller dan 760px, dus daar verandert
   deze regel niets: op telefoon en tablet blijft alles zoals het was. */
.detail-body > .wg-kaart-blok{max-width:none;width:100%;}

/* Hero zonder paneel.

   .detail-hero geeft standaard een cremekleurig paneel met afgeronde hoeken.
   Op deze pagina zet dat een tweede kader boven de kaart, wat onrustig oogt.
   Deze variant haalt alleen de achtergrond en de hoeken weg; typografie,
   kleuren en maatvoering blijven die van het bestaande component. De tekst
   staat gecentreerd op leesbreedte, zodat de intro compact blijft. */
.detail-hero--kaal{background:none;border-radius:0;
  max-width:var(--container-max);margin:var(--sp-7) auto 0;
  padding:clamp(24px,3.5vh,44px) 18px clamp(4px,1vh,12px);
  text-align:center;}
.detail-hero--kaal .page-wrap{max-width:none;margin:0;padding:0;}
.detail-hero--kaal .detail-h1{margin:0 auto 12px;}
.detail-hero--kaal .detail-lede{margin:0 auto;max-width:64ch;}

.wg-gebieden-kop{text-align:center;margin:0 0 var(--sp-7);}
.wg-gebieden{margin:0;}

.wg-gebied + .wg-gebied{margin-top:clamp(40px,4.5vw,72px);}
.wg-gebied h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,1.6vw,23px);line-height:1.25;color:var(--ink);
  text-align:center;margin:0 0 8px;}
.wg-gebied-lead{font-size:14.5px;line-height:1.6;color:var(--text-2);
  text-align:center;max-width:64ch;margin:0 auto var(--sp-5);}

.wg-tegels{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.wg-tegels li{margin:0;}
.wg-tegels a{display:flex;align-items:center;gap:10px;height:100%;
  box-sizing:border-box;min-height:54px;padding:12px 14px;
  background:var(--lp-wit,#fff);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);color:var(--ink);font-size:14.5px;
  line-height:1.35;text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, color .16s ease;}
.wg-tegels svg{width:16px;height:16px;flex:none;color:var(--eucalyptus);}
/* Zonder min-width:0 mag een flexitem niet kleiner worden dan zijn inhoud.
   Lange namen als Sint Maartensvlotbrug of Heerhugowaard liepen daardoor op
   telefoonbreedte de rechtermarge in. Nu breken ze netjes af. */
.wg-tegels a{min-width:0;}
.wg-tegels span{min-width:0;overflow-wrap:break-word;}
.wg-tegels a:hover,.wg-tegels a:focus-visible{border-color:var(--eucalyptus);
  color:var(--eucalyptus-dark);box-shadow:var(--shadow-card);}
.wg-tegels a.is-kantoor{border-color:var(--eucalyptus);
  color:var(--eucalyptus-dark);font-weight:600;}

@media (max-width:520px){
  .wg-tegels{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .wg-tegels a{min-height:48px;padding:10px 12px;font-size:14px;}
  /* Het pin-icoon is decoratief (aria-hidden) en kost samen met de tussenruimte
     26 pixels. Op telefoonbreedte is dat net het verschil tussen "Grootschermer"
     op een regel of afgebroken middenin het woord. */
  .wg-tegels svg{display:none;}
  .wg-tegels a{gap:0;}
}