/* ==========================================================================
   AktiveMap — vzhled
   Vzhled navazuje na style/style.css (Roboto Condensed, #1D1A38 / #104D90 / #F2BC1B).
   Soubor se načítá AŽ PO style/style.css — pouze doplňuje position/z-index
   na existující .maps a přidává vlastní prvky, rozměry a pozadí .maps
   definované v style/style.css nemění.
   Všechny nové třídy jsou izolované pod prefixem "aktivemap-".
   ========================================================================== */

:root {
    --aktivemap-dark: #1D1A38;
    --aktivemap-blue: #104D90;
    --aktivemap-gold: #F2BC1B;
    --aktivemap-bg: #FFF;
    --aktivemap-soft: #f8f8f8;
    --aktivemap-line: rgba(29, 26, 56, .15);
    --aktivemap-muted: #555;
}

/* --------------------------------------------------------------------------
   Nadpis nad mapou — stejný vizuální styl jako .contact-content h1 span
   ve style/style.css (tmavý text na zlatém podkladu), jen jako samostatný
   prvek PŘED #maps. #maps má ve style.css pevnou výšku přesně podle .maps,
   takže nadpis nejde vložit dovnitř #maps beze změny style.css — jako
   samostatný prvek před ním je vizuálně "nad mapou" bez zásahu do
   style/style.css.
   -------------------------------------------------------------------------- */

.aktivemap-map-heading {
    width: 100%;
    margin: 0 0 20px 0;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
}

.aktivemap-map-heading span {
    display: inline-block;
    color: var(--aktivemap-dark);
    background: var(--aktivemap-gold);
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: 500;
}

@media screen and (max-width: 1099px) {
    .aktivemap-map-heading span { font-size: 1.1em; padding: 9px 18px; }
}

@media screen and (max-width: 767px) {
    .aktivemap-map-heading { margin: 0 0 14px 0; }
    .aktivemap-map-heading span { font-size: 1em; padding: 8px 15px; }
}

@media screen and (max-width: 480px) {
    .aktivemap-map-heading span { font-size: .85em; padding: 6px 12px; }
}

/* Plocha .maps musí být kotvou pro absolutně umístěné body a kartu. */
.maps.aktivemap-stage {
    position: relative;
    overflow: hidden;
}

.aktivemap-stage *,
.aktivemap-stage *::before,
.aktivemap-stage *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Vrstva bodů — překrývá celou plochu, klikat lze jen na jednotlivé body.
   Je POD kartou s informacemi (viz .aktivemap-panel níže), takže otevřená
   karta ostatní body spolehlivě překryje a nevykukují přes ni.
   -------------------------------------------------------------------------- */

.aktivemap-markers {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.aktivemap-marker {
    position: absolute;

    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;

    /* Výchozí (skrytý) stav pro postupné naskočení bodů při vykreslení
       mapy — viz .aktivemap-markers.is-ready níže a transition-delay,
       který každému bodu nastavuje aktivemap.js. */
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35);
    transition: opacity .4s ease-out, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.aktivemap-markers.is-ready .aktivemap-marker {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.aktivemap-marker-dot {
    position: relative;
    z-index: 1;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--aktivemap-blue);
    border: 2px solid #FFF;
    box-shadow: 0 2px 8px rgba(29, 26, 56, .45);
    transition: transform .25s ease-in-out, background .25s ease-in-out;
}

.aktivemap-marker-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid var(--aktivemap-blue);
    opacity: 0;
    pointer-events: none;
}

.aktivemap-marker:hover .aktivemap-marker-dot {
    transform: scale(1.25);
    background: var(--aktivemap-gold);
}

.aktivemap-marker:focus-visible {
    outline: none;
}

.aktivemap-marker:focus-visible .aktivemap-marker-dot {
    transform: scale(1.25);
    outline: 3px solid var(--aktivemap-gold);
    outline-offset: 2px;
}

.aktivemap-marker.is-active .aktivemap-marker-dot {
    transform: scale(1.3);
    background: var(--aktivemap-gold);
    border-color: var(--aktivemap-blue);
}

.aktivemap-marker.is-active .aktivemap-marker-ring {
    border-color: var(--aktivemap-gold);
    animation: aktivemap-pulse 1.8s ease-out infinite;
}

@keyframes aktivemap-pulse {
    0% { opacity: .8; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
    .aktivemap-marker-dot { transition: none; }
    .aktivemap-marker.is-active .aktivemap-marker-ring { animation: none; opacity: .8; }

    .aktivemap-marker {
        opacity: 1;
        transform: translate(-50%, -50%);
        transition: none;
        transition-delay: 0s !important;
    }
}

/* --------------------------------------------------------------------------
   Karta s informacemi o bodu — vystředěná uvnitř .maps (na mobilu, kde je
   .maps jen ~300px vysoká, je ukotvená k obrazovce — viz breakpoint níže).
   Bez ztlumujícího podkladu, mapa zůstává za kartou viditelná; karta je
   ale NAD vrstvou bodů (viz .aktivemap-markers výše), takže žádný bod
   přes ni nevykukuje. Body mimo plochu karty zůstávají plně viditelné
   a klikatelné.
   -------------------------------------------------------------------------- */

.aktivemap-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -48%);

    width: min(90%, 460px);
    max-height: 88%;
    overflow-y: auto;

    padding: 20px;
    border-radius: 10px;
    background: var(--aktivemap-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);

    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
}

.aktivemap-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear 0s;
}

.aktivemap-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--aktivemap-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--aktivemap-dark);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .25s ease-in-out, background .25s ease-in-out;
}

.aktivemap-panel-close:hover {
    color: #FFF;
    background: var(--aktivemap-dark);
}

.aktivemap-panel-close:focus-visible {
    outline: 3px solid var(--aktivemap-blue);
    outline-offset: 2px;
}

/* style/style.css definuje globální "span { color: #1D1A38; font-weight: 900; }",
   které by jinak přebilo barvu ikony a ta by se při najetí myší (tmavé pozadí)
   neprobarvila spolu s tlačítkem — ikona musí barvu dědit od rodiče. */
.aktivemap-panel-close-icon {
    color: inherit;
    font-weight: 400;
    transition: color .25s ease-in-out;
}

.aktivemap-panel-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 14px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--aktivemap-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aktivemap-panel-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zástupný text — vidět, dokud se fotografie nenačte, nebo když selže. */
.aktivemap-panel-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;
    font-size: .9em;
    font-weight: 500;
    color: var(--aktivemap-muted);
    background:
        repeating-linear-gradient(
            135deg,
            var(--aktivemap-soft),
            var(--aktivemap-soft) 12px,
            #F1ECDD 12px,
            #F1ECDD 24px
        );
}

.aktivemap-panel-image-wrapper.is-image-missing .aktivemap-panel-image {
    display: none;
}

.aktivemap-panel-content {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.aktivemap-panel-category {
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: .8em;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--aktivemap-dark);
    background: var(--aktivemap-gold);
}

.aktivemap-panel-title {
    width: 100%;
    margin: 0 0 16px 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.9em;
    font-weight: 500;
    line-height: 1.2;
    color: var(--aktivemap-dark);
}

.aktivemap-panel-link {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid var(--aktivemap-gold);
    border-radius: 8px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 500;
    text-decoration: none;
    color: var(--aktivemap-dark);
    background: var(--aktivemap-gold);
    transition: color .3s ease-in-out, background .3s ease-in-out, border-color .3s ease-in-out;
}

.aktivemap-panel-link:hover {
    color: var(--aktivemap-gold);
    background: var(--aktivemap-blue);
    border-color: var(--aktivemap-blue);
}

/* --------------------------------------------------------------------------
   lg — 1100–1280px (.maps 1100 × 577)
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) and (max-width: 1280px) {
    .aktivemap-panel { width: min(90%, 420px); padding: 18px; }
}

/* --------------------------------------------------------------------------
   md — 768–1099px (.maps 760 × 470)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1099px) {
    .aktivemap-panel { width: min(92%, 360px); padding: 16px; }
    .aktivemap-panel-title { font-size: 1.6em; }
}

/* --------------------------------------------------------------------------
   Mobil — sm (.maps 480 × 330) a xs (.maps 320 × 300).

   Plocha .maps je tu jen 300–330px vysoká — celá karta (foto + nadpis +
   tlačítko) se do ní v rozumné čitelné podobě nevejde. Karta proto na
   mobilu není vystředěná uvnitř .maps, ale ukotvená k obrazovce jako
   plovoucí okno (position: fixed) s výškou odvozenou od výšky displeje,
   ne od malé mapy. Zůstává pod cookie lištou (z-index 9000), ale nad
   zbytkem stránky — stejná konvence jako jinde v projektu.

   Karta je vystředěná uprostřed volného prostoru NAD cookie lištou (ne
   přilepená ke spodnímu okraji obrazovky) — jinak by na dlouhé stránce
   vždy skončila dole u paty, daleko od bodu, na který uživatel klikl.
   --aktivemap-safe-center-y / --aktivemap-safe-max-height nastavuje
   aktivemap.js podle skutečné výšky cookie lišty (.ck-bar); hodnoty v
   tomto pravidle jsou jen záložní odhad pro případ, že by se z nějakého
   důvodu nestihly dopočítat.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .aktivemap-panel {
        position: fixed;
        top: var(--aktivemap-safe-center-y, 50%);
        left: 50%;
        bottom: auto;
        z-index: 8000;
        transform: translate(-50%, -46%);

        width: min(78vw, 340px);
        max-width: none;
        max-height: var(--aktivemap-safe-max-height, min(55vh, 420px));

        transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s linear .3s;
    }

    .aktivemap-panel.is-open {
        transform: translate(-50%, -50%);
        transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s linear 0s;
    }
}

/* --------------------------------------------------------------------------
   sm — 481–767px
   -------------------------------------------------------------------------- */

@media screen and (min-width: 481px) and (max-width: 767px) {
    .aktivemap-marker { width: 30px; height: 30px; }
    .aktivemap-marker-dot { width: 13px; height: 13px; }
    .aktivemap-marker-ring { width: 13px; height: 13px; margin: -7.5px 0 0 -7.5px; }

    .aktivemap-panel { padding: 14px; }
    .aktivemap-panel-image-wrapper { margin: 0 0 10px 0; }
    .aktivemap-panel-title { font-size: 1.4em; margin: 0 0 12px 0; }
    .aktivemap-panel-link { padding: 8px 15px; font-size: .9em; }
}

/* --------------------------------------------------------------------------
   xs — do 480px
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
    .aktivemap-marker { width: 26px; height: 26px; }
    .aktivemap-marker-dot { width: 11px; height: 11px; }
    .aktivemap-marker-ring { width: 11px; height: 11px; margin: -6.5px 0 0 -6.5px; }

    .aktivemap-panel {
        width: min(82vw, 300px);
        max-height: var(--aktivemap-safe-max-height, min(50vh, 380px));
        padding: 12px;
        border-radius: 10px;
    }
    .aktivemap-panel-close { width: 28px; height: 28px; font-size: 17px; top: 6px; right: 6px; }
    .aktivemap-panel-image-wrapper { margin: 0 0 10px 0; border-radius: 6px; }
    .aktivemap-panel-category { font-size: .75em; padding: 2px 8px; margin: 0 0 6px 0; }
    .aktivemap-panel-title { font-size: 1.3em; margin: 0 0 10px 0; }
    .aktivemap-panel-link { padding: 7px 13px; font-size: .85em; }
}

/* --------------------------------------------------------------------------
   Omezení animací podle nastavení systému
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aktivemap-panel {
        transition-duration: .01ms !important;
    }
}