/**
 * Lepidlo mezi kitovými třídami mapy (`hpm-*`) a obaly, do kterých je
 * zasadí Leaflet. Patří do aplikace, ne do kitu: mapové chování je podle
 * rozhodnutí z 7. 10. (spec milníku 7, §0 bod 3) jediná výjimka z pravidla
 * „všechno JS je v kitu", a tohle CSS je jeho součást. Kit zůstává maketa
 * bez Leafletu.
 *
 * Staví se gulp úlohou `copy_map_assets` do `public/dist/mapa.css`.
 */

/* --- Pin -----------------------------------------------------------------
 *
 * Kitový `.hpm-pin` se umisťuje sám: `position: absolute` a
 * `transform: translate(-50%, -100%)`, tedy špičkou na svůj bod. Leaflet
 * ale umisťuje svůj vlastní obal značky a zapisuje si do `transform`
 * inline, takže by si ty dva posuny přepsaly.
 *
 * Řešení: obal značky (`.hpm-marker`) je bezrozměrný bod, který umisťuje
 * Leaflet, a kitový `.hpm-pin` uvnitř něj se vůči němu posune sám — každý
 * dělá právě to, na co je napsaný.
 */
.leaflet-marker-icon.hpm-marker {
    width: 0;
    height: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.hpm-marker .hpm-pin {
    top: 0;
    left: 0;
}

/* --- Bublina -------------------------------------------------------------
 *
 * Kitový `.hpm-popup` je rovněž `position: absolute` s vlastním
 * `transform`, protože ve stylebooku visí nad obrázkovou maketou mapy.
 * Uvnitř `bindPopup()` tím vypadne z toku: Leafletův `.leaflet-popup-content`
 * spadne na 51 × 1 px a karta se vykreslí o 221 px výš, utržená od pinu
 * (změřeno 8. 10. 2026).
 *
 * Vracíme ji proto do toku a Leafletu bereme jeho vlastní rámeček — bílé
 * pozadí, stín i zaoblení nese karta kitu, dvakrát je nechceme.
 */
.leaflet-popup-content .hpm-popup {
    position: static;
    transform: none;
}

.hpm-popup-wrap .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
}

.hpm-popup-wrap .leaflet-popup-content {
    width: auto !important;
    margin: 0;
}

/* Na pin ukazuje jeho vlastní ocásek, Leafletův špunt je navíc. */
.hpm-popup-wrap .leaflet-popup-tip-container {
    display: none;
}

.hpm-popup-wrap .leaflet-popup-close-button {
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    color: #fff;
    text-shadow: 0 0 0.25rem rgb(0 0 0 / 60%);
}

/* --- Výška stránky ------------------------------------------------------
 *
 * Kitový `.hpm` si na desktopu bere `height: 100vh` a počítá s tím, že
 * hlavička webu je uvnitř něj (`.hpm > .hp-header { flex-shrink: 0 }`).
 * U nás hlavičku vkládá layout nad obsah, takže si mapa vzala celé okno
 * pod ní a stránka přetékala přesně o její výšku (74 px, změřeno 8. 10.).
 *
 * Místo dopočítávání výšky hlavičky natvrdo z ní uděláme sloupec přes okno
 * a mapu v něm necháme dorůst — žádné magické číslo, které by se rozešlo
 * s responzivní hlavičkou.
 */
@media (min-width: 992px) {
    .hp--mapa {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .hp--mapa > .hpm {
        flex: 1;
        height: auto;
        min-height: 0;
    }
}