/* Box-sizing reset — padding a border se počítají DO deklarované šířky
   prvku, ne navíc k ní. Nutné pro prvky používající calc()/procentní
   šířky (#den-popup, #foto-velka img, responzivní #panel níže), jinak by
   mohly nepředvídatelně přetékat mimo svůj kontejner. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset okrajů, aby mapa vyplnila celé okno prohlížeče */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
}

/* Kontejner, do kterého MapLibre vykreslí mapu — musí mít definovanou výšku */
#mapa {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

/* Vodorovná lišta vlevo nahoře — drží hlavní panel (legenda) a jazykový
   přepínač vedle sebe jako dvě samostatné "kartičky", ne jedno vnořené do
   druhého. Flexbox zařídí, že jazykový přepínač sedí hned vpravo od
   panelu, ať je panel jakkoliv široký. */
#horni-lista {
  position: absolute;
  top: 10px;
  left: 10px;
  /* Vysoké číslo (ne jen "1") — MapLibre má pro svoje vlastní ovládací
     prvky (zoom +/-, kompas) uvnitř #mapa vlastní stackovací logiku a
     nízké hodnoty z-indexu nemusí spolehlivě vyhrát, i když by podle
     prostého srovnání čísel měly. Ověřeno přes elementFromPoint(). */
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Sloupec s panelem legendy a (pod ním) zvětšenou fotkou — svislé řazení
   jen uvnitř téhle dvojice, #jazyky-box zůstává mimo, vedle celého
   sloupce (viz #horni-lista, který je pořád vodorovný flex). */
#panel-sloupec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Ovládací panel — výběr produktu, hlavička produktu a seznam dnů.
   Produkty mají až 10 dnů + úvodní text, proto má panel maximální výšku
   (výška okna minus okraje) a uvnitř se scrolluje, místo aby přetekl
   pod dolní okraj obrazovky. */
#panel {
  background: rgba(255, 255, 255, 0.94);
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  line-height: 1.4;
  width: 340px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}

/* Rozbalovací výběr produktu 01–08 (sekce katalogu jako <optgroup>) */
#produkt-vyber {
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 5px 6px;
  border: 1px solid #b9bfb5;
  border-radius: 5px;
  background: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}

/* Hlavička produktu — velké číslo produktu vlevo, název a údaje vpravo */
.produkt-hlava {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.produkt-cislo {
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #2f3a2c;
}

.produkt-sekce {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7466;
}

#produkt-hlavicka h1 {
  font-size: 16px;
  margin: 1px 0 0 0;
  line-height: 1.25;
}

.produkt-podtitul {
  font-weight: 600;
  color: #444;
}

/* Délka pobytu + přílet/odlet — drobné šedé údaje pod názvem */
.produkt-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #333;
}

.produkt-meta div + div {
  margin-top: 2px;
}

/* Štítek "lze absolvovat v obou směrech" — výrazně zvýrazněný, jak klient
   požadoval u produktů Prague ↔ Milano a Milano ↔ Vienna */
.obousmerne {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #F4A300;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Grafická "linka" trasy (PRAGUE → MUNICH → …) — stejná jako v katalogu */
.produkt-linka {
  margin: 8px 0 0 0;
  padding: 6px 8px;
  border-left: 3px solid #2f3a2c;
  background: rgba(47, 58, 44, 0.06);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #2f3a2c;
}

.produkt-uvod {
  margin: 8px 0 10px 0;
  color: #444;
  font-size: 12px;
}

/* Poznámka pod seznamem dnů */
#produkt-poznamka {
  margin: 8px 0 0 0;
  font-size: 11.5px;
  color: #666;
  font-style: italic;
}

#produkt-poznamka:empty {
  display: none;
}

/* Jeden řádek legendy = jeden den itineráře. Obyčejný <div> (ne <label>) —
   checkbox a text jsou dva nezávislé klikatelné prvky: checkbox
   zapíná/vypíná viditelnost dne na mapě, text otevírá popup s fotkami a
   popisky zastávek (viz script.js). */
.den-radek {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 2px;
  border-radius: 4px;
  user-select: none;
}

.den-radek:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Text dne je klikatelný sám o sobě — otevírá popup zastávek. Kurzor +
   jemné podtržení nadpisu při najetí naznačují klikatelnost. */
.den-text {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}

.den-text:hover b {
  text-decoration: underline;
}

/* Zvýraznění právě vybraného dne (jehož popup je otevřený) — ať je na
   první pohled vidět, ke kterému dni se otevřená fotogalerie vztahuje. */
.den-text.vybrano {
  background: #EAF1F7;
  box-shadow: inset 3px 0 0 #457B9D;
}

/* Skutečný checkbox pro zapnutí/vypnutí dne — mírně zvětšený, ať se na něj
   dobře trefí i na dotykovém displeji. */
.den-checkbox {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  cursor: pointer;
}

/* Barevný čtvereček reprezentující barvu trasy daného dne */
.den-barva {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-top: 2px;
}

.den-text b {
  display: block;
}

.den-text span {
  color: #555;
  font-size: 12px;
}

/* Vypnutý (skrytý) den — vizuálně "vyšedlý" řádek v legendě */
.den-radek.vypnuto {
  opacity: 0.4;
}

/* Popup okno MapLibre (klik na trasu/bod) — mírně zvětšený text pro
   čitelnost. */
.maplibregl-popup-content {
  font-size: 13px;
  line-height: 1.4;
}

/* Tmavý pruh nahoře v panelu — nese přeložený nadpis (viz UI.bar
   v script.js). Záporné okraje "vytáhnou" pruh přes vnitřní odsazení
   panelu až k jeho okrajům. Klikatelný — otevírá/zavírá seznam dnů (viz
   níže a script.js), kurzor to naznačuje na všech velikostech obrazovky,
   i když sbalování má praktický význam jen na úzké obrazovce. */
.panel-bar {
  background: #2f3a2c;
  margin: -12px -14px 10px -14px;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
  text-align: center;
  color: #f1f1e8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
  /* Při scrollování dlouhého panelu zůstane pruh "přilepený" nahoře
     (top = záporné vnitřní odsazení panelu, ať sedí až u horního okraje) */
  position: sticky;
  top: -12px;
  z-index: 1;
}

/* Šipka sbalování seznamu dnů — na širokých obrazovkách schovaná (tam
   zůstává seznam vždy rozbalený), zobrazí se v media query pro úzké
   obrazovky níže. Otáčí se podle stavu (rozbaleno/sbaleno) přes JS
   přepínanou třídu .sbaleno na #panel. */
#panel-bar-sipka {
  display: none;
  font-size: 10px;
  transition: transform 0.2s;
}

#panel.sbaleno #panel-bar-sipka {
  transform: rotate(-90deg);
}

/* Pravá strana tmavého pruhu (šipka + na mobilu i jazykové vlaječky) —
   drží obě věci vedle sebe s malou mezerou. Na desktopu je vidět jen
   prázdné místo (obě děti mají display:none), takže .panel-bar zůstává
   vycentrovaný. */
#panel-bar-prava-strana {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Druhá sada jazykových tlačítek přímo v tmavém pruhu — na desktopu
   schovaná (tam jazykový přepínač zůstává jako samostatná kartička
   #jazyky-box vedle panelu), zobrazí se až v media query pro úzké
   obrazovky. Menší ikonky než v #jazyky-box, ať se vejdou do výšky pruhu. */
#jazyky-bar {
  display: none;
  align-items: center;
  gap: 3px;
}

#jazyky-bar .jazyk-btn {
  padding: 2px;
}

#jazyky-bar .jazyk-btn img {
  width: 18px;
}

/* Sbalený panel na mobilu/tabletu — seznam dnů skrytý, vidět zůstává jen
   tmavý pruh nahoře (ťuknutím na něj se zase rozbalí). Mapa je pak vidět
   skoro celá, ne zakrytá z půlky rozbaleným seznamem dnů. */
#panel.sbaleno #panel-obsah {
  display: none;
}

/* Sbalený panel už nepotřebuje odsazení pod pruhem */
#panel.sbaleno .panel-bar {
  margin-bottom: -12px;
  border-radius: 8px;
}

/* Logo v pravém dolním rohu — samostatná bílá "kartička", stejný vizuální
   styl jako hlavní panel (bílé pozadí, stín). Sloupec (popisek "Powered
   by:" nad logem). */
#machovsky-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000; /* stejný důvod jako u #horni-lista výše */
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#machovsky-badge .powered-by {
  font-size: 10px;
  color: #666;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

#machovsky-badge img {
  height: 32px;
  display: block;
}

/* Logo jako prolink — ať vypadá a chová se jako běžné logo (bez
   podtržení, kurzor ukazatel), ne jako obyčejný odkaz. */
#machovsky-badge a {
  display: inline-block;
  line-height: 0;
}

/* Jazykový přepínač — samostatná kartička vedle hlavního panelu (viz
   #horni-lista výše), ne součást panelu samotného. Stejný vizuální styl
   jako panel (bílé pozadí, stín, zaoblení), aby to vypadalo jako dvojice
   sesterských prvků, ne jedno vnořené do druhého. */
#jazyky-box {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 8px;
}

/* Jazykové vlaječky — skutečné obrázky, ne emoji (emoji vlajky se na
   některých systémech nespolehlivě vykreslují jako vlajky, často jen jako
   dvoupísmenný kód). Jedna vodorovná řada. */
.jazyky-panel {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.jazyk-btn {
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 3px;
  opacity: 0.6;
}

.jazyk-btn img {
  width: 24px;
  height: auto;
  display: block;
  border-radius: 2px;
}

.jazyk-btn:hover {
  opacity: 0.85;
}

/* Aktivní (právě zvolený) jazyk — zvýrazněno plnou neprůhledností a rámečkem */
.jazyk-btn.aktivni {
  opacity: 1;
  border-color: #457B9D;
}

/* Popup s fotkami/popisky zastávek dne — samostatné plovoucí okno, polohu
   (top/left) nastavuje JS podle kliknutého řádku (čtyřstranný "clamp", ať
   nikdy nepřesahuje mimo viditelnou plochu okna prohlížeče). Skryté
   defaultně, display:block nastaví JS. Stejný vizuální styl jako hlavní
   panel legendy (#panel), ať oboje působí jako jedna vizuální rodina
   prvků. */
#den-popup {
  display: none;
  position: fixed;
  z-index: 1001; /* nad vším ostatním, viz #horni-lista výše */
  width: 600px;
  max-width: calc(100vw - 20px); /* pojistka na úzké okno */
  max-height: calc(100vh - 20px); /* pojistka svisle — uvnitř se scrolluje */
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}

#den-popup-zavrit {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 4px;
}

#den-popup-zavrit:hover {
  color: #000;
}

#den-popup-nadpis {
  font-size: 15px;
  margin: 0 26px 6px 0; /* místo napravo pro zavírací křížek */
}

/* Program dne — text nad kartami míst */
#den-popup-text {
  margin: 0 0 12px 0;
  color: #333;
}

/* Karty zastávek ve dvou sloupcích vedle sebe (ne pod sebou) */
#den-popup-obsah {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

/* Na liché poslední kartě (lichý počet zastávek) se karta roztáhne přes
   oba sloupce, ať nezůstává jedna osamocená karta zmenšená na půl šířky */
#den-popup-obsah > .zastavka-karta:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.zastavka-karta img {
  width: 100%;
  height: 120px;
  /* Rámeček karty zůstává stejný, ale fotka se do něj vejde celá,
     poměrově zmenšená (žádný ořez) — "contain" místo "cover", ať je vidět
     celý záběr. Prázdné pruhy (u fotek jiného poměru stran) se vybarví
     stejnou barvou jako pozadí karty/popupu, ať nepůsobí jako "díra". */
  object-fit: contain;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
  cursor: pointer; /* fotka je prokliknutelná — zoom mapy na dané místo */
  transition: opacity 0.15s;
}

.zastavka-karta img:hover {
  opacity: 0.82;
}

.zastavka-karta h3 {
  font-size: 13.5px;
  margin: 0 0 4px 0;
}

.zastavka-karta p {
  margin: 0;
  color: #333;
}

/* Box se zvětšenou jednou fotkou — objeví se pod hlavním panelem (#panel)
   po kliknutí na fotku v popupu s galerií dne (viz script.js,
   zobrazVelkouFotku). Galerie (#den-popup) se přitom zavře — je to
   náhrada za ni, ne doplněk vedle ní. Stejná vizuální rodina jako
   #panel/#jazyky-box (bílá kartička, stín, zaoblení). */
#foto-velka {
  display: none;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  padding: 8px;
  position: relative;
}

/* "Trochu zvětšená" fotka — o něco širší než karta v galerii, ale pořád
   jen náhled, ne fotka na celou obrazovku. Šířka omezená na šířku panelu
   nad ní, ať sloupec vlevo nahoře nepůsobí nesourodě široký. */
#foto-velka img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 6px;
}

#foto-velka-zavrit {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0;
}

#foto-velka-zavrit:hover {
  color: #000;
}

/* =====================================================================
   RESPONZIVITA — mobily a tablety, hlavně na výšku
   =====================================================================
   Na širokém desktopu je #panel pevně max. 300px široký a seznam dnů
   zůstává vždy rozbalený — na úzkém displeji by 300px zabíralo většinu
   šířky obrazovky a rozbalený seznam by na výšku zabral většinu displeje
   a zakryl mapu. Řešení: panel se přizpůsobí šířce (vyplní prostor vedle
   jazykového přepínače, ne pevných 300px) a defaultně se na úzké
   obrazovce načte sbalený (jen tmavý pruh nahoře, viz script.js) — mapa
   je tak hned po otevření vidět skoro celá, seznam dnů se rozbalí
   ťuknutím na pruh. */
@media (max-width: 700px) {
  #horni-lista {
    left: 8px;
    /* Mezera vpravo, ať panel nezasahuje pod MapLibre zoom tlačítka
       (+/−, kompas), která zůstávají viditelná a klikatelná. */
    right: 60px;
    top: 8px;
  }

  /* Panel vyplní zbylou šířku vedle #jazyky-box (ne pevných 300px) —
     #jazyky-box si drží svou přirozenou (malou) šířku danou obsahem. */
  #panel-sloupec {
    flex: 1 1 auto;
    min-width: 0;
  }

  #panel {
    max-width: none;
    width: 100%;
  }

  /* Šipka sbalování je na širokém desktopu schovaná (viz výše) — tady se
     zobrazí, protože sbalování má na úzké obrazovce smysl. */
  #panel-bar-sipka {
    display: inline-block;
  }

  /* Jazykový přepínač na mobilu je přímo v tmavém pruhu (vedle textu), ne
     jako samostatná kartička vedle panelu jako na desktopu — samostatná
     kartička #jazyky-box se schová, místo ní se zobrazí #jazyky-bar
     (druhá sada stejných tlačítek přímo v .panel-bar, viz script.js). Bar
     přepnut na space-between, ať text zůstane vlevo a vlaječky+šipka
     vpravo (na desktopu zůstává center, viz základní pravidlo výše). */
  #jazyky-box {
    display: none;
  }

  .panel-bar {
    justify-content: space-between;
  }

  #jazyky-bar {
    display: flex;
  }

  /* Popup s galerií dne — na mobilu se nemá rozbalovat přes celé okno,
     max. do poloviny šířky, ať zůstane vidět i mapa/panel vedle něj.
     Přepisuje obecné pravidlo max-width výše (stejný selektor, pozdější v
     pořadí = vyhrává). Při užším popupu už nedávají smysl 2 sloupce karet
     vedle sebe ani tak velké fotky. */
  #den-popup {
    max-width: 50vw;
    font-size: 12px;
  }

  #den-popup-nadpis {
    font-size: 13px;
  }

  #den-popup-obsah {
    grid-template-columns: 1fr;
  }

  #den-popup-obsah > .zastavka-karta:last-child:nth-child(odd) {
    grid-column: auto; /* pravidlo pro "osamocenou" kartu přes 2 sloupce už nedává smysl */
  }

  .zastavka-karta img {
    height: 90px; /* zmenšeno souběžně s užším popupem */
  }

  /* Logo v pravém dolním rohu na mobilu — zmenšeno a zbaveno bílé
     kartičky (pozadí/stín/odsazení), ať na malé obrazovce nezabírá
     zbytečně moc místa. Samotné logo je kulatý odznak s vlastním bílým
     pozadím zapečeným v PNG (ne průhledné), takže je čitelné samo o sobě
     i bez vnější kartičky. Text "Powered by:" nad ním ale žádné vlastní
     pozadí nemá — jemný bílý text-shadow mu dá dost kontrastu i nad
     tmavšími místy podkladové mapy. */
  #machovsky-badge {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  #machovsky-badge .powered-by {
    text-shadow: 0 0 4px #fff, 0 0 4px #fff;
  }

  #machovsky-badge img {
    height: 27px;
  }

  /* Zvětšená fotka jedné zastávky (#foto-velka) — na mobilu je
     #panel-sloupec (a tedy i #foto-velka v něm) roztažený na skoro celou
     šířku obrazovky (viz #panel výše), fotka je proto zmenšena na 70 %
     kontejneru místo 100 % a vycentrovaná (margin: 0 auto). */
  #foto-velka {
    width: 70%;
    margin: 0 auto;
  }
}

/* Ještě užší obrazovky (telefony na výšku) — jemné doladění velikostí,
   ať se toho na malý displej vejde rozumné množství najednou. */
@media (max-width: 480px) {
  #panel {
    font-size: 12.5px;
  }
}

/* Dotykové displeje (telefon/tablet) — zvětšené klikací/dotykové plochy
   checkboxu a řádku dne, ať se na ně jde spolehlivě prstem trefit (myš na
   desktopu je precizní, prst ne). Podmínka podle schopností vstupního
   zařízení, ne podle šířky obrazovky — týká se i větších tabletů, kde by
   šířková media query výše nemusela udeřit. */
@media (hover: none) and (pointer: coarse) {
  .den-checkbox {
    width: 20px;
    height: 20px;
  }

  .den-radek {
    padding: 7px 2px;
  }

  .jazyk-btn {
    padding: 5px;
  }
}

/* Náhradní prázdné místo místo checkboxu (den bez bodů na mapě) — musí být
   blokové, jinak by <span> ignoroval šířku a řádek by se posunul. */
span.den-checkbox {
  display: inline-block;
}

/* Text v tmavém pruhu: na desktopu značka katalogu, na mobilu (≤700px)
   číslo a název otevřeného produktu — ve sbaleném panelu je to jediná
   informace o tom, co je právě na mapě. */
.bar-produkt {
  display: none;
}

@media (max-width: 700px) {
  .bar-znacka {
    display: none;
  }

  .bar-produkt {
    display: inline;
    text-align: left;
  }
}

/* Autor a licence fotky z Wikimedia Commons (licence CC BY-SA vyžaduje
   uvedení autora) — drobný šedý text hned pod fotkou */
.foto-kredit {
  font-size: 9.5px;
  color: #888;
  margin: -4px 0 4px 0;
}