/* Ljubuški kroz vrijeme – povijesna karta
   Layout: karta ispunjava okvir; priča u panelu pri dnu (mobitel) ili lijevo (širi ekran) */
.lk-karta{
  --lk-sea:#14222a; --lk-panel:#1f2622; --lk-line:#3a443d; --lk-ink:#eee7d5; --lk-muted:#a3a894; --lk-accent:#d9a24a;
  --lk-display:'Spectral', Georgia, serif; --lk-body:'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position:relative; width:100%; min-height:520px; overflow:hidden; background:var(--lk-sea); color:var(--lk-ink);
  font-family:var(--lk-body); font-size:15px; line-height:1.45; border-radius:12px; color-scheme:dark;
}
.lk-karta *{box-sizing:border-box}
.lk-karta .lk-map{position:absolute; inset:0; background:var(--lk-sea); z-index:0}
.lk-karta .leaflet-container{background:var(--lk-sea); font-family:var(--lk-body)}
.lk-karta .leaflet-tile-pane{transition:filter 1s}
.lk-karta img.leaflet-tile{max-width:none!important; max-height:none!important}
.lk-karta .leaflet-control-attribution{background:rgba(20,34,42,.75); color:var(--lk-muted); font-size:10px}
.lk-karta .leaflet-control-attribution a{color:var(--lk-muted)}
.lk-karta .leaflet-bar{border:1px solid var(--lk-line); box-shadow:none}
.lk-karta .leaflet-bar a{background:var(--lk-panel); color:var(--lk-ink); border-color:var(--lk-line)}
.lk-karta .leaflet-bar a:hover{background:#2a332e}

/* oznake na karti */
.lk-karta .leaflet-tooltip.lk-lbl{background:none; border:0; box-shadow:none; padding:0; color:var(--lk-ink); font-size:12px; font-weight:500;
  text-shadow:0 1px 3px #000, 0 0 6px #000; white-space:nowrap}
.lk-karta .leaflet-tooltip.lk-lbl::before{display:none}
.lk-karta .lk-region{font-family:var(--lk-display); font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:#b7b9a5}
.lk-karta .lk-water{color:#8cc0d1; font-style:italic}
.lk-karta .lk-stop{font-size:13px; font-weight:700}
.lk-karta .lk-stop.lk-on{color:var(--lk-accent)}

/* zaglavlje */
.lk-karta .lk-head{position:absolute; z-index:500; top:0; left:0; right:0; padding:12px 64px 28px 16px; pointer-events:none;
  background:linear-gradient(rgba(20,34,42,.92), rgba(20,34,42,0))}
.lk-karta .lk-eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lk-accent); font-weight:700}
.lk-karta .lk-title{font-family:var(--lk-display); font-size:21px; font-weight:700; line-height:1.2; margin-top:2px; text-wrap:balance}

/* panel */
.lk-karta .lk-panel{position:absolute; z-index:600; left:0; right:0; bottom:0; max-height:58%; overflow:auto;
  background:var(--lk-panel); border-top:1px solid var(--lk-line); padding:14px 16px 16px; display:grid; gap:10px; align-content:start}
.lk-karta .lk-steps{display:flex; gap:3px}
.lk-karta .lk-steps button{flex:1; min-width:4px; height:6px; padding:0; margin:0; border:0; border-radius:3px; background:var(--lk-line); cursor:pointer}
.lk-karta .lk-steps button.lk-on{transform:scaleY(1.6)}
.lk-karta .lk-when{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.lk-karta .lk-year{font-family:var(--lk-display); font-size:26px; font-weight:700; color:var(--lk-accent); font-variant-numeric:tabular-nums; line-height:1.05}
.lk-karta .lk-place{font-size:13px; color:var(--lk-muted); font-weight:500}
.lk-karta .lk-era{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.lk-karta .lk-era-name{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px; color:var(--lk-sea)}
.lk-karta .lk-era-new{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--lk-line); padding:2px 8px; border-radius:999px}
.lk-karta [hidden]{display:none!important}
.lk-karta .lk-img{display:block; width:100%; max-width:100%; max-height:180px; object-fit:cover; border-radius:8px; margin:0}
.lk-karta .lk-step-title{font-family:var(--lk-display); font-size:20px; font-weight:700; line-height:1.2; margin:0; color:var(--lk-ink); text-wrap:balance}
.lk-karta .lk-text{font-size:14.5px; max-width:65ch}
.lk-karta .lk-text p{margin:0 0 .6em}
.lk-karta .lk-text p:last-child{margin-bottom:0}
.lk-karta .lk-finds{list-style:disc; margin:0; padding-left:18px; font-size:14px; display:grid; gap:2px}
.lk-karta .lk-more{font-size:14px; font-weight:700; color:var(--lk-accent); text-decoration:none; justify-self:start}
.lk-karta .lk-more:hover{text-decoration:underline}
.lk-karta .lk-controls{display:flex; gap:8px; position:sticky; bottom:-16px; background:var(--lk-panel); padding:6px 0 0}
.lk-karta .lk-controls button{flex:1; font:inherit; font-weight:700; font-size:14px; padding:10px 0; border-radius:8px; border:1px solid var(--lk-line);
  background:transparent; color:var(--lk-ink); cursor:pointer; line-height:1.2}
.lk-karta .lk-controls button.lk-primary{background:var(--lk-ink); color:var(--lk-sea); border-color:var(--lk-ink)}
.lk-karta .lk-controls button:disabled{opacity:.35; cursor:default}
.lk-karta button:focus-visible, .lk-karta a:focus-visible{outline:2px solid var(--lk-accent); outline-offset:2px}

/* široki okvir (klasu postavlja skripta prema širini karte, ne prozora) */
.lk-karta.lk-wide .lk-panel{left:16px; right:auto; top:96px; bottom:16px; width:380px; max-height:none; border:1px solid var(--lk-line); border-radius:12px}
@media (prefers-reduced-motion:reduce){ .lk-karta .leaflet-tile-pane{transition:none} }