/* Stránka Mapa míst – v5 Wherethru. Lišta filtrů a karty výsledků: assets/css/filters.css.
   Pod hlavičkou lišta filtrů přes celou šířku, pod ní mapa přes celou šířku.
   PC (>= 900 px): seznam jako plovoucí panel vlevo nad mapou (400 px, jde skrýt → plovoucí tlačítko Seznam),
   legenda vpravo dole (sbalitelná), Další filtry = okno pod tlačítkem v liště.
   Mobil (< 900 px): mapa mezi lištou a spodní navigací, výsledky ve vysouvacím panelu zespodu (náhled / polovina / celá výška),
   plovoucí přepínač Mapa / Seznam dole uprostřed. */

body.page-map { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.page-map .site-footer { display: none; }
.map-layout { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.map-bar { position: relative; top: auto; flex: none; z-index: 30; }
.map-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* ---------- Mapa ---------- */
.map-wrap { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.map-canvas { position: absolute; inset: 0; isolation: isolate; z-index: 0; }
/* Barevný podklad (vrstvy): bez zelenošedého filtru */
.map-wrap.tiles-color .leaflet-tile-pane .leaflet-tile { filter: none !important; }
.map-tools { position: absolute; right: 16px; bottom: 28px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.map-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--kf-shadow-md); cursor: pointer; }
.map-btn svg { width: 22px; height: 22px; }
.map-btn:hover, .map-btn[aria-expanded="true"] { background: var(--surface-2); }
.layers-pop { position: absolute; right: 76px; bottom: 28px; z-index: 7; width: min(280px, calc(100% - 92px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--kf-shadow-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.layers-pop[hidden] { display: none; }
.layers-pop .kicker { margin: 0; }
.layers-pop .seg { background: var(--surface-2); padding: 4px; border-radius: 999px; }
.layers-pop .check { font-weight: 500; align-items: center; min-height: 44px; padding: 0; }
.layers-pop .check input { margin: 0; }
.layers-pop { width: min(320px, calc(100% - 92px)); max-height: calc(100% - 44px); overflow-y: auto; overscroll-behavior: contain; }

/* Vrstvy s prvky přístupnosti z OpenStreetMap (assets/js/map-osm.js) */
.osm-layers { border: 0; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 0; }
.osm-layers > legend { padding: 0; margin: 0 0 2px; float: left; width: 100%; }
.osm-layers > legend + * { clear: both; }
.layers-pop .osm-check { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.osm-sws { display: inline-flex; align-items: center; gap: 2px; }
.osm-sw { display: inline-flex; align-items: center; justify-content: center; }
.osm-sw svg { display: block; }
.osm-sws .osm-sw svg { width: 16px; height: 16px; }
.osm-sws .osm-sw svg[width="30"] { width: 26px; height: 12px; }
.osm-l { min-width: 0; overflow-wrap: anywhere; }
.osm-n { font-size: .8125rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.osm-status { margin: 4px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.osm-status[hidden] { display: none; }
.osm-status[data-state="error"] { color: var(--no); }
.osm-src { margin: 6px 0 0; font-size: .75rem; line-height: 1.45; color: var(--ink-3); }
.osm-src a { color: inherit; }
.osm-retry { font: 600 .8125rem/1 var(--f-body); color: var(--brand-900); background: var(--brand-200); border: 0; border-radius: 999px; padding: 8px 12px; min-height: 32px; cursor: pointer; margin-left: 4px; }
.osm-retry:hover { background: var(--brand-300); }

/* Hláška na mapě: přiblížit, načítání, chyba */
.osm-note { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); top: 16px; margin: 0; display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, calc(100% - 32px)); width: max-content; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--kf-shadow-md); font: 500 .875rem/1.35 var(--f-body); }
.osm-note[hidden] { display: none; }
.osm-note svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.osm-note[data-state="error"] { border-color: var(--no); }
.osm-note[data-state="error"] svg { color: var(--no); }
.osm-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2.5px solid var(--brand-200); border-top-color: var(--brand-900); animation: osm-spin .8s linear infinite; }
@keyframes osm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .osm-spin { animation: none; border-top-color: var(--brand-500); } }

/* Legenda: značky vrstev z OpenStreetMap */
.legend-osm { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, auto); gap: 6px 14px; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); }
.legend-osm[hidden] { display: none; }
.osm-lg { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.osm-lg .osm-sw svg[width="30"] { width: 26px; }

/* Vlastní pane pro body z OSM: Leaflet ruší max-width jen ve svých panelech, tady to musíme udělat sami */
.leaflet-container .leaflet-kpOsm-pane img { max-width: none !important; max-height: none !important; }

/* Popup prvku z OpenStreetMap */
.osm-popup .leaflet-popup-content-wrapper, .osm-popup .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.osm-popup a.leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 30px; color: var(--ink-3); }
.osm-popup .leaflet-popup-content { margin-right: 34px !important; }
.osm-popup .leaflet-popup-content { margin: 12px 14px; font: 400 .875rem/1.45 var(--f-body); color: var(--ink); }
.osm-pop-t { margin: 0 0 6px; font: 600 1rem/1.3 var(--f-body); color: var(--heading); overflow-wrap: anywhere; }
.osm-pop dl { margin: 0 0 8px; display: grid; gap: 2px; }
.osm-pop dl div { display: flex; justify-content: space-between; gap: 12px; }
.osm-pop dt { color: var(--ink-3); }
.osm-pop dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.osm-pop-src { margin: 0; font-size: .75rem; color: var(--ink-3); }
.osm-pop-src a { color: inherit; }

/* Legenda vpravo dole, sbalitelná na tlačítko */
.legend { position: absolute; right: 76px; bottom: 28px; z-index: 5; width: max-content; max-width: calc(100% - 92px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--kf-shadow-md); padding: 4px 6px 10px; display: flex; flex-direction: column; }
.legend[hidden] { display: none; }
.legend-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--ink-2); font: 600 .8125rem/1 var(--f-body); cursor: pointer; border-radius: 10px; position: relative; }
.legend-btn::before { content: ""; position: absolute; inset: -2px 0; }
.legend-btn:hover { background: var(--surface-2); }
.legend-btn svg { width: 16px; height: 16px; transition: transform .15s; }
.legend-body { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 14px; padding: 2px 10px 0; align-items: center; }
.legend-t { grid-column: 1 / -1; font: 400 .8125rem/1.3 var(--f-body); color: var(--ink-3); }
.legend .status { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.legend .status i { width: 11px; height: 11px; }
.legend.collapsed { padding-bottom: 4px; }
.legend.collapsed .legend-body { display: none; }
.legend.collapsed .legend-btn svg { transform: rotate(180deg); }
.map-engine-note { z-index: 6; top: 16px; left: 64px; right: 16px; bottom: auto; width: max-content; max-width: calc(100% - 80px); }
.leaflet-container .leaflet-marker-icon { filter: drop-shadow(0 2px 3px rgba(20, 28, 18, .28)); }

/* Plovoucí tlačítka nad mapou (Seznam na PC, Mapa / Seznam na mobilu) */
.map-fab { position: absolute; z-index: 25; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .875rem/1 var(--f-body); box-shadow: var(--kf-shadow-md); cursor: pointer; white-space: nowrap; }
.map-fab[hidden] { display: none; }
.map-fab svg { width: 18px; height: 18px; }
.map-fab:hover { background: var(--surface-2); }
.map-fab .num { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }
.map-fab .num:empty { display: none; }
.list-show { left: 16px; top: 16px; }
.view-toggle { display: none; }

/* ---------- Panel výsledků ---------- */
.map-panel { background: var(--surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sheet-grip { display: none; }
.results-head { padding: 14px 12px 8px 20px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); flex: none; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.count { margin: 0; font: 600 1rem/1.35 var(--f-body); min-width: 0; color: var(--heading); }
.count .num { font: 700 1rem/1 var(--f-body); font-variant-numeric: tabular-nums; margin-right: 2px; color: var(--heading); }
.count .total { display: block; font-weight: 400; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
.list-hide { flex: none; color: var(--ink-2); }
.list-hide svg { width: 20px; height: 20px; }
.in-view { padding: 0; min-height: 44px; align-items: center; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.in-view input { margin: 0; }
.head-row.tools { flex-wrap: wrap; gap: 4px 12px; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 20px; }
.more-row { padding: 16px 0 8px; }

/* Adresář oblastí, když je ve výřezu moc míst */
.results > li.reg-note { list-style: none; padding: 6px 4px; color: var(--ink-2); }
.reg-note p { margin: 0 0 6px; font-size: .875rem; line-height: 1.5; }
.reg-note b { font: 600 1.0625rem/1.35 var(--f-display); color: var(--heading); }
.results > li.reg-head { list-style: none; padding: 10px 4px 0; }
.reg-head .kicker { margin: 0; }
.reg-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.reg-row:hover { border-color: var(--line-strong); box-shadow: var(--kf-shadow-sm); }
.reg-main { display: flex; flex-direction: column; min-width: 0; }
.reg-main b { font: 600 1rem/1.3 var(--f-display); color: var(--heading); }
.reg-main .meta { font-size: .8125rem; color: var(--ink-3); }
.reg-n { font: 600 1rem/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--heading); }
.results.rc-list { gap: 8px; }

/* ---------- Náhled vybraného místa (PC: nahoře v seznamu, mobil: karta dole na mapě) ---------- */
.preview { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.preview[hidden] { display: none !important; }
.pv-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.pv-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-200); color: var(--ink); }
.pv-ic svg { width: 20px; height: 20px; }
.pv-kicker { margin: 0 0 2px; font-size: .8125rem; color: var(--ink-3); overflow-wrap: anywhere; }
.preview h2 { font: 600 1.25rem/1.3 var(--f-display); letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.pv-head .icon-btn { margin: -6px -6px 0 0; }
.pv-photo { margin: 0; }
.pv-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; max-height: 200px; border-radius: 12px; background: var(--brand-100); }
.pv-photo figcaption { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
.pv-states { display: grid; gap: 6px; }
.pv-states .plain { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .875rem; color: var(--ink-2); }
.pv-states .plain svg { width: 18px; height: 18px; color: var(--ink-2); }
.pv-desc { font-size: .875rem; line-height: 1.5; color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pv-meta { font-size: .8125rem; color: var(--ink-3); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pv-meta:empty { display: none; }
.pv-fill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .8125rem; color: var(--ink-2); }
.pv-fill .tape-meter { height: 6px; }
.pv-match { font-size: .875rem; margin: 0; }
.pv-match-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.pv-actions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
.pv-actions .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 12px; border-radius: 999px; }
.pv-actions .pv-save { position: static; flex: none; background: var(--surface-2); }

/* ---------- PC: plovoucí seznam vlevo nad mapou ---------- */
@media (min-width: 900px) {
  .map-panel { position: absolute; left: 16px; top: 16px; bottom: 16px; width: 400px; z-index: 20; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--kf-shadow-md); overflow: hidden; }
  .list-off .map-panel { display: none; }
  /* ovládání Leafletu a poznámka k podkladu vedle panelu, ať je panel nezakryje */
  .map-layout:not(.list-off) .map-wrap .leaflet-top.leaflet-left { left: 416px; }
  .map-layout:not(.list-off) .map-engine-note { left: 480px; max-width: calc(100% - 496px); }
  .list-off .map-wrap .leaflet-top.leaflet-left { top: 64px; }
  .list-off .map-engine-note { top: 72px; }
  .map-wrap .leaflet-top.leaflet-left { margin-top: 6px; }
  .map-layout:not(.list-off) .osm-note { left: calc(50% + 208px); max-width: min(420px, calc(100% - 448px)); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .map-panel { width: 360px; }
  .map-layout:not(.list-off) .map-wrap .leaflet-top.leaflet-left { left: 376px; }
  .map-layout:not(.list-off) .map-engine-note { left: 440px; max-width: calc(100% - 456px); }
}

/* ---------- Mobil a úzký tablet ---------- */
@media (max-width: 899px) {
  .map-layout { --peek-h: 88px; }
  .kf-bar-end .kf-view { display: none; }
  .list-hide, .list-show { display: none !important; }

  /* Panel výsledků: zespodu, zaoblené rohy a úchyt */
  .map-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--peek-h); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 28px rgba(20, 28, 18, .14); overflow: hidden; transition: height .28s cubic-bezier(.2, .8, .2, 1), transform .2s; will-change: height; }
  .map-panel.dragging { transition: none; }
  .sheet-grip { display: flex; justify-content: center; align-items: center; flex: none; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; border-radius: 20px 20px 0 0; }
  .sheet-grip span { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }
  .sheet-grip:focus-visible { outline-offset: -3px; }
  .results-head { padding: 0 16px 8px; touch-action: none; border-bottom: 0; }
  .map-layout:not([data-sheet="peek"]) .results-head { border-bottom: 1px solid var(--line); }
  .head-row.tools { justify-content: space-between; }
  .head-row.tools .kf-sort { flex: 0 1 auto; }
  .map-layout[data-sheet="peek"] .head-row.tools, .map-layout[data-sheet="peek"] .panel-scroll { visibility: hidden; }
  .panel-scroll { padding: 10px 12px 88px; background: var(--bg); }
  .preview { display: none; }

  /* Přepínač Mapa / Seznam dole uprostřed */
  .view-toggle { display: inline-flex; left: 50%; transform: translateX(-50%); bottom: calc(var(--peek-h) + 12px); background: var(--kf-on-bg); color: var(--kf-on-ink); border-color: var(--kf-on-bg); transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
  .view-toggle:hover { background: var(--kf-on-bg); filter: brightness(1.1); }
  .map-layout:not([data-sheet="peek"]) .view-toggle { bottom: 16px; }

  /* Vybrané místo: karta dole nad mapou, seznam se schová */
  .map-wrap .preview { display: flex; position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; z-index: 40; box-shadow: var(--kf-shadow-md); max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain; }
  .map-wrap .preview[hidden] { display: none !important; }
  .map-wrap .pv-photo img { max-height: 130px; }
  .map-layout.has-preview .map-panel { transform: translateY(calc(100% + 24px)); }
  .map-layout.has-preview .legend, .map-layout.has-preview .map-tools, .map-layout.has-preview .layers-pop, .map-layout.has-preview .view-toggle { display: none; }

  .map-tools { right: 12px; bottom: calc(var(--peek-h) + 12px); }
  .map-btn { width: 44px; height: 44px; }
  .layers-pop { right: 66px; bottom: calc(var(--peek-h) + 12px); z-index: 26; max-height: calc(100% - var(--peek-h) - 24px); }
  .legend { right: auto; left: 12px; top: 12px; bottom: auto; max-width: calc(100% - 24px); }
  .osm-note { top: auto; bottom: calc(var(--peek-h) + 68px); left: 12px; right: 68px; transform: none; width: auto; max-width: none; border-radius: 16px; }
  .map-layout:not([data-sheet="peek"]) .osm-note, .map-layout.has-preview .osm-note { display: none; }
  .map-engine-note { top: 12px; left: 12px; max-width: calc(100% - 24px); }
  .leaflet-bottom.leaflet-right { margin-bottom: var(--peek-h); }
  .map-wrap .leaflet-control-zoom { display: none; }
}
@media (max-width: 380px) {
  .preview h2 { font-size: 1.125rem; }
  .legend .status { font-size: .75rem; }
}
