/* De kaart van Sainte-Maxime: lijst links, kaart rechts. Op de one-pager in een kaart van 640 px hoog,
   op /ontdek/ over het hele scherm. Op gsm: kaart boven, lijst eronder. */
.ontdek { display: grid; grid-template-columns: 360px 1fr; }
.ontdek.ingebed { height: 640px; padding: 0; overflow: hidden; }
@media (min-width: 1600px) { .ontdek.ingebed { height: min(820px, 78vh); } }
.ontdek.volscherm { height: calc(100vh - 70px); height: calc(100dvh - 70px); }
.zijbalk { display: flex; flex-direction: column; border-right: 1px solid var(--lijn); background: var(--wit); min-height: 0; }
.zijbalk-kop { padding: 16px; border-bottom: 1px solid var(--lijn); }
.zijbalk-kop h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.zijbalk-kop .zoekveld { margin: 6px 0 12px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter { border: 1px solid var(--lijn); background: var(--wit); color: var(--tekst); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; }
.filter .icoon { color: var(--kleur, var(--primair)); }
.filter:hover { border-color: var(--kleur, var(--primair)); }
.filter[aria-pressed="true"] { background: var(--primair); color: #fff; border-color: var(--primair); }
.filter[aria-pressed="true"] .icoon { color: #fff; }
.filter .aantal { opacity: .6; font-size: .75rem; }

.plekken { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.plek { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; cursor: pointer; }
.plek:hover, .plek.actief { background: var(--veld); }
.plek.actief { box-shadow: inset 3px 0 0 var(--primair); }
.plek .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.plek strong { display: block; line-height: 1.25; font-size: .92rem; font-weight: 600; }
.plek .wat { font-size: .78rem; color: var(--grijs); }
.plek .afst { font-size: .8rem; color: var(--grijs); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.plek .tip { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--oranje); text-transform: uppercase; margin-left: 6px; }
.leeg-lijst { padding: 20px; color: var(--grijs); }

.kaartvak { position: relative; min-height: 0; }
#kaart { position: absolute; inset: 0; background: var(--zand); }
/* De OpenStreetMap-tegels iets zachter en warmer, zodat ze bij de kalksteen-tinten passen */
#kaart .leaflet-tile-pane { filter: saturate(.65) sepia(.12) brightness(1.03); }
.naar-villa { position: absolute; top: 12px; right: 12px; z-index: 500; box-shadow: var(--schaduw); }
.lijst-knop { display: none; }

/* Spelden met een icoon */
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(27, 34, 25, .3); color: #fff; }
.pin .icoon { transform: rotate(45deg); }
.pin.villa { width: 40px; height: 40px; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: var(--schaduw-hoog); }
.leaflet-popup-content { font-family: var(--font); margin: 14px 16px; min-width: 230px; }
.popup h3 { margin: 2px 0 4px; font-size: 1.02rem; }
.popup-cat { font-size: .75rem; font-weight: 700; display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .03em; }
.popup-afst { font-size: .8rem; color: var(--grijs); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.popup p { margin: 0 0 8px; font-size: .88rem; }
.popup .knoppen { gap: 6px; }
.popup .knop { color: #fff; }
.popup .knop.licht { color: var(--tekst); }

@media (max-width: 820px) {
  .ontdek, .ontdek.ingebed, .ontdek.volscherm { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; }
  .kaartvak { order: -1; height: 55vh; }
  .zijbalk { border-right: 0; }
  .plekken { overflow: visible; max-height: none; }
  .ontdek.ingebed .plekken { max-height: 420px; overflow-y: auto; }
  .lijst-knop { display: inline-flex; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 500; box-shadow: var(--schaduw); }
}