/*
 * DEPO locals map engine — structure shared by the map demos (each keeps its own copy; demo31 adds sat-light / sat-night):
 * the collapsible banner, the map under it, markers, clusters, filter chips, list and card.
 * Each demo dresses it in css/<slug>.css. Variables: --map-top (space above the map: the site
 * header), --lm-ink, --lm-bg, --lm-line, --lm-accent.
 */

/* ---------- banner: collapses to nothing when switched off ---------- */
.lp-banner { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.lp-banner__clip { min-height: 0; overflow: hidden; }
html.banner-off .lp-banner { grid-template-rows: 0fr; opacity: 0; }
html.banner-instant .lp-banner, html.banner-instant .lp-banner * { transition: none !important; }
[data-banner-slide] { transition: opacity .9s ease; }
[data-banner-slide]:not(.is-active) { opacity: 0; pointer-events: none; }
[data-banner-dots] button { cursor: pointer; }
.lp-banner-show { display: none; }
html.banner-off .lp-banner-show { display: inline-flex; }

/* ---------- the map starts right under the banner and fills the screen ---------- */
.lp-stage { position: relative; overflow: hidden; height: calc(100vh - var(--map-top, 70px)); height: calc(100dvh - var(--map-top, 70px)); min-height: 520px; }
.lp-map { position: absolute; inset: 0; z-index: 0; }
.lp-map.leaflet-container { font: inherit; background: var(--lm-bg, #e9ece8); }
.leaflet-container a.leaflet-popup-close-button { display: none; }

/* keyless light / night versions of the same tiles (TILES[…].filter in js/locals-map.js); a demo may retune them */
[data-tile-filter="light"] .leaflet-tile-pane { filter: var(--tile-light, grayscale(1) brightness(1.06) contrast(.9)); }
[data-tile-filter="night"] .leaflet-tile-pane { filter: var(--tile-night, invert(1) hue-rotate(180deg) brightness(.82) contrast(1.15) saturate(.3)); }
[data-tile-filter="night"] .lp-map.leaflet-container { background: #1b1c1f; }
[data-tile-filter="sat-light"] .leaflet-tile-pane { filter: var(--tile-sat-light, saturate(.55) brightness(1.18) contrast(.88)); }
[data-tile-filter="sat-night"] .leaflet-tile-pane { filter: var(--tile-sat-night, saturate(.4) brightness(.5) contrast(1.15)); }

/* ---------- markers ---------- */
.lm-marker { background: none; border: 0; }
.lm-pin { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--c); background: #fff; box-shadow: 0 4px 14px -4px rgba(0,0,0,.45); transition: transform .2s; }
.lm-pin img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lm-pin b { position: absolute; right: -6px; bottom: -4px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--c); color: #fff; font: 700 9px/16px system-ui, sans-serif; text-align: center; letter-spacing: .02em; }
.lm-marker:hover .lm-pin, .lm-marker.is-hot .lm-pin, .lm-marker:focus-visible .lm-pin { transform: scale(1.18); }
.lm-marker.is-selected .lm-pin { transform: scale(1.3); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c), 0 10px 22px -6px rgba(0,0,0,.5); }
.lm-marker:focus-visible { outline: none; }

/* cluster: a ring split by speciality around the count */
.lm-cluster-wrap { background: none; border: 0; }
.lm-cluster { display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; background: var(--pie); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); transition: transform .2s; }
.lm-cluster b { display: grid; place-items: center; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; background: var(--lm-cluster-bg, #fff); color: var(--lm-cluster-ink, #18171a); font: 700 13px/1 system-ui, sans-serif; }
.lm-cluster-wrap:hover .lm-cluster { transform: scale(1.08); }

/* ---------- filter chips, list, card (looks come from the demo) ---------- */
.lm-spec, .lm-person, .lm-provider, .lm-card__close { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.lm-spec { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.lm-spec__code { font-style: normal; }
.lm-person { display: flex; align-items: center; gap: .75rem; width: 100%; min-width: 0; }
.lm-person__img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lm-person__body { display: flex; flex-direction: column; min-width: 0; }
.lm-person__name, .lm-person__spec, .lm-person__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-card { position: relative; }
.lm-card__img { display: block; object-fit: cover; }
.lm-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.lm-card__facts dt, .lm-card__facts dd { margin: 0; }
.lm-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lm-card__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.lm-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; }
.lm-popup .leaflet-popup-content { margin: 0; width: auto !important; }
[data-map-card][hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-banner, [data-banner-slide], .lm-pin, .lm-cluster { transition: none !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }