/* Vynulování okrajů */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: sans-serif;
}

/* Mapa se roztáhne přes celé okno prohlížeče */
#map {
    width: 100%;
    height: 100vh;
    z-index: 1; /* Mapa bude vespod */
}

/* Tlačítko zpět, které plave nad mapou */
.btn-back {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10; /* Musí být nad mapou */
    background: white;
    padding: 10px 15px;
    text-decoration: none;
    color: #2a4365;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* ─── STYL PRO VYSKAKOVACÍ OKNO (MODAL) ─── */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Poloprůhledné černé pozadí kolem okna */
    z-index: 100; /* Okno musí být úplně nejvýše */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Skrytí okna (tuto třídu budeme odebírat pomocí JS) */
.modal.hidden {
    display: none;
}

/* Samotný bílý box uprostřed – cca 60% šířky obrazovky */
.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    width: 60%;
    max-width: 800px; /* Aby to na obřích monitorech nebylo moc široké */
    min-width: 300px; /* Aby se to na mobilu nesmrštilo moc */
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Zavírací křížek (x) v rohu okna */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
}
.close-btn:hover {
    color: black;
}

/* Tlačítko uvnitř okna vedoucí na prezentaci/video */
.btn-output {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #2a4365;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}
/* Zapneme flexbox pro dva sloupce vedle sebe */
.modal-body {
    display: flex;
    gap: 25px; /* Mezera mezi levým a pravým sloupcem */
    margin-top: 15px;
}

/* Levý sloupec zabere 40 % šířky okna */
.modal-left {
    flex: 4;
    max-height: 300px; /* Maximální výška obrázku */
}

/* Styl pro samotný obrázek uvnitř levého sloupce */
#modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Zobrazí VŽDY celou fotku, raději kolem ní nechá volné místo */
    border-radius: 8px;
}

/* Pravý sloupec zabere 60 % šířky okna */
.modal-right {
    flex: 6;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Zatlačí text nahoru a tlačítko úplně dolů */
}

/* Zrušíme margin na vrchu nadpisu, ať lícuje s obrázkem */
#modal-title {
    margin-top: 0;
    color: #2a4365;
}

/* Úprava tlačítka, aby se neroztahovalo na celou šířku sloupce */
.btn-output {
    align-self: flex-start; 
    margin-top: 15px;
}
/* Pozicování boxíku do pravého horního rohu */
.lang-switcher {
    position: absolute;
    top: 25px;
    right: 25px;
    font-family: sans-serif;
    color: rgba(255, 255, 255, 0.6); /* Barva svislé čáry mezi jazyky */
}

/* Styl pro samotné texty CZ a EN */
.lang-switcher a {
    color: rgba(255, 255, 255, 0.6); /* Nepřepnuté jazyky budou mírně zašedlé */
    text-decoration: none;
    font-weight: bold;
    margin: 0 5px;
    transition: color 0.3s ease;
}

/* Jak vypadá vybraný jazyk nebo ten, na který najedeš myší */
.lang-switcher a:hover, 
.lang-switcher a.active {
    color: #ffffff; /* Svítí čistě bíle */
}
/* Obal pro loga, který je přilepený ke spodku okna */
.logo-container {
    position: fixed;
    bottom: 20px; /* 20px od spodního okraje */
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between; /* Rozmístí loga do rohů */
    z-index: 999; /* Zajistí, že budou vždy "navrchu" */
    pointer-events: none; /* Důležité: Kliknutí projde skrz loga na mapu pod nimi! */
}

/* Styl pro samotné obrázky */
.logo {
    height: 60px; /* Nastav si velikost podle potřeby */
    width: auto;
}
/* Výchozí stav pro všechny ikony na mapě */
.leaflet-marker-icon {
    transition: width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
}

/* Stav, kdy na ikonu najedeš myší (třída přidaná JavaScriptem) */
.marker-hover {
    width: 120px !important;       /* Původní šířka 45px + 20% navíc */
    height: 100px !important;      /* Původní výška 45px + 20% navíc */
    margin-left: -27px !important; /* Polovina nové šířky (aby se zvětšovala od středu) */
    margin-top: -54px !important;  /* Celá nová výška (aby hrot zůstal na místě) */
    cursor: pointer;
}
/* ==========================================================================
   MOBILNÍ VERZE PRO STRÁNKU S MAPOU (Pro displeje pod 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. OPRAVA LOGA (Pevná výška vyřeší rozmáčknutí i velikost) */
    .logo-container img {
        height: 35px !important;       /* Obě loga budou stejně vysoká a decentní */
        width: auto !important;        /* Klíčový řádek: Šířka se dopočítá sama = ŽÁDNÉ ROZMÁČKNUTÍ */
        max-width: 45% !important;     /* Pojistka, aby žádné logo nezabralo víc než půlku šířky displeje */
        object-fit: contain !important;/* Dodatečná pojistka pro správné vykreslení */
    }

    /* Pokud by se ti zdálo, že jsou loga moc nalepená na úplném spodku displeje */
    .logo-container {
        bottom: 15px !important;       /* Mírně je posuneme od spodního okraje mobilu */
        padding: 0 10px !important;    /* Jemný odstup od levého a pravého kraje */
    }

    /* 2. OPRAVA MODÁLNÍHO OKNA (Konec špagetovému textu) */
    .modal-content {
        flex-direction: column !important; /* Obrázek a text půjdou pod sebe, ne vedle sebe */
        width: 90% !important;             /* Okno využije 90 % šířky displeje */
        max-width: 380px !important;       /* Maximální šířka, aby to na mobilu vypadalo kompaktně */
        padding: 15px !important;          /* Trochu menší vnitřní okraj, ať zbyde víc místa na obsah */
        max-height: 80vh !important;       /* Okno nepřesáhne výšku displeje */
        overflow-y: auto !important;       /* Kdyby byl text delší, v okně se objeví posuvník */
    }

    /* 3. OPRAVA OBRÁZKU V OKNĚ (Bude velký a nahoře) */
    .modal-content img {
        width: 100% !important;            /* Obrázek se roztáhne na celou šířku okna */
        height: 180px !important;          /* Pevná optimální výška pro mobily */
        object-fit: cover !important;      /* Obrázek vyplní obdélník a neořízne se ošklivě */
        margin-bottom: 15px !important;    /* Mezera mezi obrázkem a textem pod ním */
        border-radius: 6px !important;     /* Jemné zaoblení rohů obrázku */
    }

    /* 4. OPRAVA TEXTU V OKNĚ */
    .modal-content h2, #modal-title {
        font-size: 22px !important;        /* Na mobilu nadpis v okně mírně zmenšíme */
        margin-bottom: 10px !important;
    }

    .modal-content p, #modal-description {
        width: 100% !important;            /* Text už není nudle, ale využije plnou šířku */
        font-size: 14px !important;        /* Ideální velikost pro čtení na telefonu */
        line-height: 1.5 !important;
    }
}