/* Travel Map – style.css */
:root {
  --bg:      #0d0f14;
  --surf:    #161820;
  --surf2:   #1e2130;
  --brd:     rgba(255,255,255,.08);
  --txt:     #e8e6e1;
  --muted:   #7a8090;
  --accent:  #c9a96e;
  --over:    rgba(5,6,10,.88);
  --th:      56px;
  --fd:      'Cormorant Garamond', Georgia, serif;
  --fb:      'DM Sans', system-ui, sans-serif;
}
.theme-light {
  --bg:    #f5f0e8;
  --surf:  #fffbf4;
  --surf2: #ede8dc;
  --brd:   rgba(0,0,0,.08);
  --txt:   #1a1612;
  --muted: #8a7e6e;
  --over:  rgba(210,200,185,.92);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; font-family:var(--fb); background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; }

/* Topbar */
#topbar {
  position:fixed; top:0; left:0; right:0; height:var(--th); z-index:900;
  background:rgba(13,15,20,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--brd);
}
.theme-light #topbar { background:rgba(245,240,232,.92); }

.topbar-inner { display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 1.1rem; }

.brand { display:flex; align-items:baseline; gap:.45rem; }
.brand-icon { color:var(--accent); font-size:.95rem; display:inline-block; animation:spin 8s linear infinite; }
.brand-title { font-family:var(--fd); font-size:1.2rem; font-weight:600; letter-spacing:.04em; }
.brand-sub { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media(max-width:480px){ .brand-sub { display:none; } }

@keyframes spin { to { transform:rotate(360deg); } }

.topbar-controls { display:flex; align-items:center; gap:.35rem; }

#yearFilter { display:flex; gap:.2rem; flex-wrap:wrap; }
.yr-btn {
  font-size:.68rem; font-weight:500; letter-spacing:.05em; padding:.26rem .6rem;
  border-radius:20px; border:1px solid var(--brd); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.yr-btn:hover,.yr-btn.active { background:var(--accent); color:#111; border-color:var(--accent); }
@media(max-width:540px){ #yearFilter { display:none; } }

.icon-btn {
  width:33px; height:33px; border-radius:50%; border:1px solid var(--brd);
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.icon-btn svg { width:14px; height:14px; }
.icon-btn:hover { background:var(--surf2); color:var(--txt); border-color:var(--accent); }

/* Mapa */
#map { position:fixed; top:var(--th); left:0; right:0; bottom:0; z-index:1; }

/* Stats */
#statsBar {
  position:fixed; bottom:.9rem; left:50%; transform:translateX(-50%);
  z-index:800; background:var(--surf); border:1px solid var(--brd); border-radius:50px;
  padding:.32rem .95rem; font-size:.68rem; letter-spacing:.07em; color:var(--muted);
  backdrop-filter:blur(10px); pointer-events:none; white-space:nowrap;
}

/* Marker */
.tm-marker { width:34px; height:34px; }
.tm-pin {
  width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--accent); border:2.5px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.tm-pin::after { content:'*'; transform:rotate(45deg); font-size:.7rem; color:rgba(0,0,0,.55); }
.tm-pin img { width:100%; height:100%; object-fit:cover; transform:rotate(45deg); }
.leaflet-marker-icon:hover .tm-pin { transform:rotate(-45deg) scale(1.35); box-shadow:0 6px 20px rgba(201,169,110,.6); }

.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large { background:rgba(201,169,110,.2) !important; }
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div { background:var(--accent) !important; color:#111 !important; font-family:var(--fd); font-weight:700; font-size:1rem; }

/* Overlay popup */
#overlay {
  position:fixed; inset:0; z-index:1000;
  background:var(--over); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  transition:opacity .3s;
}
#overlay.hidden { opacity:0; pointer-events:none; }

#card {
  position:relative; background:var(--surf); border:1px solid var(--brd); border-radius:18px;
  width:100%; max-width:640px; max-height:calc(100vh - 2rem); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 70px rgba(0,0,0,.75);
  transform:scale(1) translateY(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
#overlay.hidden #card { transform:scale(.94) translateY(24px); }

#btnClose {
  position:absolute; top:.65rem; right:.65rem; z-index:10;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.45); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; backdrop-filter:blur(6px);
}
#btnClose svg { width:13px; height:13px; }
#btnClose:hover { background:rgba(255,255,255,.15); transform:rotate(90deg); }

/* Carousel */
#carousel {
  position:relative; aspect-ratio:16/10; background:#070809;
  overflow:hidden; flex-shrink:0;
}
#track { display:flex; height:100%; transition:transform .38s cubic-bezier(.4,0,.2,1); will-change:transform; }
#track img { flex-shrink:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s; }
#track img.loaded { opacity:1; }

.arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.42); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; backdrop-filter:blur(4px); z-index:5;
}
.arrow svg { width:15px; height:15px; }
.arrow:hover { background:rgba(201,169,110,.85); border-color:transparent; }
.arrow:disabled { opacity:.2; pointer-events:none; }
#btnPrev { left:.55rem; }
#btnNext { right:.55rem; }

#dots { position:absolute; bottom:.55rem; left:50%; transform:translateX(-50%); display:flex; gap:.3rem; z-index:5; }
.dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.32); cursor:pointer; transition:all .22s; }
.dot.active { background:var(--accent); width:15px; border-radius:3px; }

#noPhoto { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.82rem; }

/* Info */
#info { padding:1rem 1.3rem 1.3rem; overflow-y:auto; flex:1; }
#meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:.45rem; }
#pDate { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:500; }
#pGps { font-size:.6rem; color:var(--muted); font-family:monospace; }
#pTitle { font-family:var(--fd); font-size:1.8rem; font-weight:300; line-height:1.2; margin-bottom:.5rem; }
#pText { font-size:.87rem; line-height:1.7; color:var(--muted); }

/* Loader */
#loader {
  position:fixed; inset:0; z-index:2000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s, visibility .4s;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
#loaderInner { text-align:center; }
#loaderIcon { font-size:2.4rem; color:var(--accent); display:inline-block; animation:spin 3s linear infinite; margin-bottom:.6rem; }
#loaderMsg { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Leaflet */
.leaflet-control-attribution { background:rgba(13,15,20,.75) !important; color:#555 !important; font-size:10px !important; }
.leaflet-control-attribution a { color:var(--accent) !important; }
.leaflet-control-zoom { border:none !important; box-shadow:0 2px 12px rgba(0,0,0,.4) !important; }
.leaflet-control-zoom a { background:var(--surf) !important; color:var(--txt) !important; border:1px solid var(--brd) !important; }
.leaflet-control-zoom a:hover { background:var(--surf2) !important; color:var(--accent) !important; }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--brd); border-radius:2px; }

.hidden { display:none !important; }

@media(max-width:560px) {
  #overlay { align-items:flex-end; padding:0; }
  #card { border-radius:16px 16px 0 0; max-height:92dvh; }
  #carousel { aspect-ratio:4/3; }
  #pTitle { font-size:1.45rem; }
}

/* ── Zpet na web ── */
.back-link {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: .28rem .65rem;
  border-radius: 20px;
  border: 1px solid var(--brd);
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}