/* Club Finder — alleen het Leaflet-deel. Titel, zoekbalk en popup-card erven de
   styling van de FE-opzet (resources/scss/blocks/_map.scss, .section-map). */

/* Titel responsive — zelfde schaal als de site-headers (pageheader 72/56/38). */
@media (max-width:768px){
  .section-map .content-holder .title h1,.section-map .content-holder .title h2{ font-size:56px !important; line-height:1.05 !important; letter-spacing:-1px !important; }
  .section-map .container > .content-holder{ flex-direction:column; align-items:stretch; gap:20px; }
  .section-map .container > .content-holder .club-search{ max-width:none; }
}
@media (max-width:480px){ .section-map .content-holder .title h1,.section-map .content-holder .title h2{ font-size:34px !important; } }

/* geen witte ruimte tussen kaart en footer */
.section.section-map{ padding-bottom:0 !important; }

/* Kaart: past in het venster (volledig in beeld op 1440), popup-card past binnen de kaart. */
.section-map .map-holder .club-finder__map{ width:100%; height:clamp(460px, calc(100vh - 330px), 800px); z-index:1; }
.section-map .map-holder .leaflet-container{ background:#eaf0e2; font:inherit; }

/* schone OSM/Carto-tiles (géén groene gloed) */

/* FE-regel ".map-holder a:not(.button)" zet Leaflets eigen anchors absoluut — terugzetten */
.section-map .map-holder .leaflet-container a{ position:static !important; }
.section-map .map-holder .leaflet-control-zoom a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; font-size:22px; line-height:1; border-radius:8px !important; color:#333; }
/* zoomknoppen staan rechts (zie club-finder.js) — ruimte houden t.o.v. de rand */
.section-map .map-holder .leaflet-top.leaflet-right{ top:8px; right:8px; }
.section-map .map-holder .leaflet-control-attribution{ font-size:11px; }
.section-map .map-holder .leaflet-control-attribution a{ display:inline !important; color:#5b6b3f !important; }
.section-map .map-holder .leaflet-control-attribution a i{ font-size:inherit !important; color:inherit !important; }
.section-map .map-holder .leaflet-bar{ border:0; box-shadow:0 2px 10px rgba(45,60,30,.18); }

/* popup-card: blijft volledig binnen de kaarthoogte (compactere foto + strakkere spacing) */
.section-map .map-holder .popup-location{ min-height:0 !important; max-height:calc(100% - 24px) !important; overflow-y:auto; }
.section-map .map-holder .popup-location .popup-holder{ padding:12px 12px 16px !important; }
.section-map .map-holder .popup-location .popup-holder .image-holder{ height:clamp(140px,18vh,200px) !important; }
.section-map .map-holder .popup-location .popup-holder .image-holder:after{ display:none !important; }
.section-map .map-holder .popup-location .popup-holder .content-holder{ margin-top:14px !important; }
.section-map .map-holder .popup-location .popup-holder .content-holder .address{ margin-top:14px !important; }
.section-map .map-holder .popup-location .popup-holder .content-holder .usps{ margin-top:14px !important; }
/* USP's staan boven het adres; een lijntje scheidt ze van de clubgegevens. */
.section-map .map-holder .popup-location .popup-holder .content-holder .usps + .address{ margin-top:14px !important; padding-top:14px; border-top:1px solid rgba(0,0,0,.08); }
.section-map .map-holder .popup-location .popup-holder .content-holder .usps .usp p{ font-weight:400 !important; }
/* vinkje houdt zijn maat als de tekst over twee regels loopt */
.section-map .map-holder .popup-location .popup-holder .content-holder .usps .usp .icon{ flex-shrink:0; }
.section-map .map-holder .popup-location .popup-holder .content-holder .usps .usp p strong{ font-weight:600; color:#1a1a1a; }
/* openingstijden vandaag: status-regel + volledige tijden eronder (bijv.
   "07:30 – 13:00 & 16:00 – 20:00"). Tijdblokken breken nooit middenin (nbsp-glue
   in PHP), hoogstens bij de "&". Icoon lijnt uit met de eerste regel. */
.section-map .map-holder .popup-location .popup-holder .content-holder .address .item--hours{ align-items:flex-start; }
.section-map .map-holder .popup-location .popup-holder .content-holder .address .item--hours i{ margin-top:3px; flex:0 0 auto; }
.section-map .map-holder .popup-location .popup-holder .content-holder .address .item--hours p{ line-height:1.35; }
.section-map .map-holder .popup-location .popup-holder .content-holder .address .item--hours .cf-status{ display:block; font-weight:600; color:#1a1a1a; }
.section-map .map-holder .popup-location .popup-holder .content-holder .address .item--hours .cf-hours{ display:block; margin-top:1px; font-size:14px; font-weight:500; color:#7C7C7B; }
.section-map .map-holder .popup-location .popup-holder .content-holder .usps .usp:not(:last-child){ margin-bottom:10px !important; }

/* Clubkaart stond verticaal gecentreerd in de kaart en liep daardoor achter de
   sticky CTA-balk: de knoppen onderin waren niet klikbaar. Hij staat nu, net als
   in het ontwerp en net als de clublijst, linksboven in de kaart. */
@media (min-width:769px){
  .section-map .map-holder .popup-location{
    top:24px !important; transform:none !important;
    max-height:calc(100% - 48px) !important;
  }
  body:has(.sticky-bar:not(.is-hidden)) .section-map .map-holder .popup-location{
    max-height:calc(100% - 48px - var(--sticky-bar-h, 0px)) !important;
  }
}

/* Past de inhoud niet in de kaarthoogte (kleine schermen, korte vensters), dan
   scrollt de card; "Bekijk club" en de belknop blijven daarbij onderin staan
   i.p.v. buiten beeld te vallen. */
.section-map .map-holder .popup-location .popup-holder .content-holder .button-holder{
  position:sticky; bottom:0; background:#fff; padding-top:12px;
}

/* Clublijst naast de kaart: alle clubs scanbaar, alfabetisch of op afstand.
   De clubkaart opent over de lijst heen en valt met het kruisje weer dicht. */
.section-map .map-holder .cf-list{
  position:absolute; top:24px; left:64px; z-index:2;
  width:100%; max-width:430px; max-height:calc(100% - 48px);
  display:flex; flex-direction:column;
  background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(40,60,20,.15); overflow:hidden;
}
.section-map .map-holder .popup-location{ z-index:3; }
/* Clubkaart open: de lijst eronder verbergen, anders staan er twee panelen door elkaar. */
.section-map .map-holder.cf-has-popup .cf-list{ display:none; }
/* De kaart loopt door tot onder de sticky CTA-balk; die hoogte vrijhouden zodat
   de onderste clubs in de lijst zichtbaar en klikbaar blijven. */
body:has(.sticky-bar:not(.is-hidden)) .section-map .map-holder .cf-list{
  max-height:calc(100% - 48px - var(--sticky-bar-h, 0px));
}
.section-map .map-holder .cf-list__head{ padding:16px 20px; border-bottom:1px solid rgba(51,51,51,.12); }
.section-map .map-holder .cf-list__count{ margin:0; font-size:15px; font-weight:600; letter-spacing:.15px; color:#333; }
/* Melding bij een plaats zonder eigen club ("dichtstbijzijnde club is ..."). */
.section-map .map-holder .cf-list__note{ margin:4px 0 0; font-size:13px; line-height:1.4; color:#5D645D; }
.section-map .map-holder .cf-list__items{ overflow-y:auto; padding:8px; }

.section-map .map-holder .cf-item{
  display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%;
  padding:10px; border:0; border-radius:10px; background:transparent;
  text-align:left; cursor:pointer; transition:background-color .15s ease;
}
.section-map .map-holder .cf-item:hover,
.section-map .map-holder .cf-item.is-active{ background:#F4FAE4; }
.section-map .map-holder .cf-item__img{ flex:0 0 84px; width:84px; height:64px; border-radius:8px; overflow:hidden; }
.section-map .map-holder .cf-item__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.section-map .map-holder .cf-item__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.section-map .map-holder .cf-item__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.section-map .map-holder .cf-item__title{ font-size:16px; font-weight:600; letter-spacing:.16px; color:#1a1a1a; }
.section-map .map-holder .cf-item__address{ font-size:13px; color:#7C7C7B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section-map .map-holder .cf-item__foot{ display:flex; align-items:center; gap:12px; font-size:13px; font-weight:500; color:#333; }
.section-map .map-holder .cf-item__rating i{ color:#F5B301; font-size:12px; margin:0 5px; }
.section-map .map-holder .cf-item__dist{ color:#7C7C7B; }
.section-map .map-holder .cf-item .cf-status-badge{
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.section-map .map-holder .cf-item .cf-status-badge.is-open{ color:#3F6212; background:#ECF7CC; }
.section-map .map-holder .cf-item .cf-status-badge.is-closed{ color:#7C7C7B; background:#EFEFEF; }

/* marker: groene pin + HB-leaf */
.cf-pin-wrap{ background:transparent; border:0; }
.cf-pin{ position:relative; width:40px; height:52px; transform-origin:50% 100%; transition:transform .15s; filter:drop-shadow(0 4px 6px rgba(40,60,20,.35)); }
.cf-pin--active{ transform:scale(1.18); z-index:1000; }
/* top:10px => 18px leaf staat gecentreerd op het midden (y=19) van de witte cirkel */
.cf-pin__leaf{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:18px; height:18px; object-fit:contain; }
.cf-userpin span{ display:block; width:18px; height:18px; border-radius:50%; background:#2b78ff; border:3px solid #fff; box-shadow:0 0 0 3px rgba(43,120,255,.35); }

/* mobiel: card als compacte overlay óp de map, knoppen gestapeld (Figma 403-1681) */
@media (max-width:768px){
  .section-map .map-holder .club-finder__map{ height:clamp(580px,82vh,720px); }

  /* Lijst past niet naast de kaart: onder de kaart als gewoon blok. */
  .section-map .map-holder .cf-list{
    /* width:100% uit de basisregel blijft anders staan; samen met de marges
       is de lijst dan 24px te breed en hangt hij rechts uit beeld. */
    position:static; width:auto; max-width:none; max-height:none; margin:16px 12px 32px;
    box-shadow:0 4px 16px rgba(40,60,20,.12);
  }
  .section-map .map-holder .cf-list__items{ max-height:60vh; }

  /* "Bekijk club" + belknop naast elkaar (overschrijft de globale sm-kolom) */
  .section-map .map-holder .popup-location .popup-holder .content-holder .button-holder{ flex-direction:row; flex-wrap:nowrap; gap:10px; }
  .section-map .map-holder .popup-location .popup-holder .content-holder .button-holder .button{ flex:1 1 0; width:auto !important; justify-content:center; padding-left:10px; padding-right:10px; }

  /* De clubkaart hing absoluut in .map-holder, en die is hoger dan het venster
     (kaart ~692px, begint pas ~378px onder de bovenkant). De onderkant van de
     kaart — met juist de knoppen — viel daardoor buiten beeld en achter de
     sticky CTA-balk. Op mobiel daarom vastzetten aan het venster, net boven de
     balk: altijd volledig zichtbaar, ongeacht de scrollpositie. */
  .section-map .map-holder .popup-location{
    position:fixed !important;
    top:auto !important;
    left:12px !important;
    right:12px !important;
    bottom:12px;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    z-index:4 !important;
    max-height:calc(100vh - 76px - 24px) !important;
  }

  /* Balk in beeld? Dan die hoogte vrijhouden. --sticky-bar-h komt uit app.js. */
  body:has(.sticky-bar:not(.is-hidden)) .section-map .map-holder .popup-location{
    bottom:calc(var(--sticky-bar-h, 96px) + 12px);
    max-height:calc(100vh - var(--sticky-bar-h, 96px) - 76px - 24px) !important;
  }
}