/* ===============================================================================================
   Mapa stajni — style własne modułu.

   Osobny plik od pub/css2/leaflet.css: tamten jest współdzielony (ładuje go też gałąź domyślna
   w _top.tpl) i nie wolno go ruszać, żeby nie odbiło się to na module transport.

   Tokeny z pub/css2/stajnie.css (--stajnie-*) są tu dostępne, bo oba arkusze ładują się
   dla tego samego modułu.
   =============================================================================================== */

.stajnie-mapa-blok {
    margin-bottom: var(--stajnie-odstep-l, 24px);
}

.stajnie-mapa-naglowek {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--stajnie-odstep-m, 16px);
    padding-bottom: var(--stajnie-odstep-xs, 4px);
}

/* Opcjonalny tytuł (parametr tytul w _mapa.tpl) - margin-right:auto dosuwa go do lewej,
   przełącznik zostaje przy prawej krawędzi jak bez tytułu. */
.stajnie-mapa-tytul {
    margin: 0 auto 0 0;
    font-size: 140%;
    font-weight: bold;
    line-height: 1.3;
}

.stajnie-mapa-przelacznik {
    padding: 4px 10px;
    border: 1px solid var(--stajnie-obramowanie, #e5e7eb);
    border-radius: var(--stajnie-promien-s, 4px);
    background: var(--stajnie-tlo-karty, #ffffff);
    color: var(--stajnie-tekst, #1f2937);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.stajnie-mapa-przelacznik:hover {
    border-color: var(--stajnie-akcent, #800000);
    color: var(--stajnie-akcent, #800000);
}

/* Stan zwinięty: klasę nadaje skrypt inline w _mapa.tpl (przed pierwszym malowaniem)
   i przełącznik w mapa.js. Kontener mapy zostaje w DOM, tylko znika - Leaflet po
   rozwinięciu dostaje invalidateSize(), bo w display:none policzył sobie rozmiar 0. */
.stajnie-mapa-zwinieta .stajnie-mapa,
.stajnie-mapa-zwinieta .stajnie-mapa-stopka {
    display: none;
}

/* Etykieta przełącznika zależna od stanu - bez JS-owego podmieniania tekstu. */
.stajnie-mapa-gdy-zwinieta,
.stajnie-mapa-zwinieta .stajnie-mapa-gdy-rozwinieta {
    display: none;
}

.stajnie-mapa-zwinieta .stajnie-mapa-gdy-zwinieta {
    display: inline;
}

.stajnie-mapa-zwinieta {
    margin-bottom: var(--stajnie-odstep-m, 16px);
}

.stajnie-mapa {
    width: 100%;
    height: 420px;
    border: 1px solid var(--stajnie-obramowanie, #e5e7eb);
    border-radius: var(--stajnie-promien, 8px);
    /* Leaflet liczy rozmiar kontenera przy inicjalizacji, więc wysokość musi być znana
       z CSS-a, zanim wystartuje skrypt - inaczej mapa renderuje się jako pasek 0px. */

    /* Własny kontekst stosu. Panele Leafleta mają z-index 400, kontrolki 1000 - bez tego
       przykrywały listę podpowiedzi miejscowości (w .lokalizacjaNowa, z-index 250 w ver3.78.css),
       która wisi nad mapą pod polem "Podaj swoją miejscowość". Z z-index:0 na kontenerze
       cała mapa liczy się jako jeden element na poziomie 0, a jej wnętrze nie konkuruje
       z resztą strony. */
    position: relative;
    z-index: 0;
}

.stajnie-mapa-stopka {
    display: flex;
    justify-content: flex-end;
    gap: var(--stajnie-odstep-m, 16px);
    flex-wrap: wrap;
    padding-top: var(--stajnie-odstep-xs, 4px);
}

.stajnie-mapa-status {
    font-size: 85%;
    color: var(--stajnie-tekst-slaby, #6b7280);
}

/* Przycisk "Szukaj w tym obszarze" - kontrolka Leafleta w prawym górnym rogu mapy, tylko
   w trybie podglądu (strona główna, miasta). W katalogu lista przelicza się sama (tryb live). */
.stajnie-mapa-szukaj {
    padding: 6px 12px;
    border: 0;
    border-radius: var(--stajnie-promien-s, 4px);
    background: var(--stajnie-akcent, #800000);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.stajnie-mapa-szukaj:hover {
    background: #a00000;
}

/* Klaster: własna ikona zamiast domyślnej niebieskiej z markercluster, żeby mapa nie odstawała
   kolorystycznie od reszty serwisu. Rozmiary muszą zgadzać się z iconSize w mapa.js. */
.stajnie-klaster {
    background: rgba(128, 0, 0, 0.75);
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.stajnie-klaster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.stajnie-klaster-maly  { font-size: 12px; }
.stajnie-klaster-sredni { font-size: 13px; }
.stajnie-klaster-duzy  { font-size: 14px; }

/* Popup markera (treść budowana w mapa.js, budujPopup). Klasa .stajnie-popup trafia na
   .leaflet-popup, więc selektory poniżej nie dotykają popupów z innych modułów. */
.stajnie-popup .leaflet-popup-content-wrapper {
    border-radius: var(--stajnie-promien, 8px);
    box-shadow: var(--stajnie-cien, 0 1px 3px rgba(0, 0, 0, 0.12)), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stajnie-popup .leaflet-popup-content {
    margin: var(--stajnie-odstep-s, 8px) var(--stajnie-odstep-m, 16px) var(--stajnie-odstep-m, 16px);
    font-size: 13px;
    line-height: 1.4;
    color: var(--stajnie-tekst, #1f2937);
}

.stajnie-popup-foto {
    display: block;
    margin: 0 calc(-1 * var(--stajnie-odstep-m, 16px)) var(--stajnie-odstep-s, 8px);
    /* Zdjęcie wychodzi na całą szerokość dymka: ujemny margines znosi wewnętrzny odstęp,
       a zaokrąglenie górnych rogów powtarza promień dymka. */
    border-radius: var(--stajnie-promien, 8px) var(--stajnie-promien, 8px) 0 0;
    overflow: hidden;
    line-height: 0;
}

.stajnie-popup-foto img {
    width: 100%;
    height: auto;
    display: block;
}

.stajnie-popup-nazwa {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: var(--stajnie-akcent, #800000);
    text-decoration: none;
}

.stajnie-popup-nazwa:hover {
    text-decoration: underline;
}

.stajnie-popup-miejscowosc {
    color: var(--stajnie-tekst-slaby, #6b7280);
}

.stajnie-popup-znaczniki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stajnie-odstep-xs, 4px);
    margin-top: var(--stajnie-odstep-s, 8px);
}

/* Kolory tożsame z .jazdy / .wolne na liście (ver3.78.css), żeby popup i kafelek
   mówiły to samo tym samym językiem. */
.stajnie-popup-znacznik {
    padding: 1px 8px;
    border-radius: var(--stajnie-promien-s, 4px);
    font-size: 12px;
    font-weight: bold;
    color: #fffbe6;
}

.stajnie-popup-boksy { background: #348f00; }
.stajnie-popup-jazdy { background: #e97204; }

.stajnie-popup-link {
    display: inline-block;
    margin-top: var(--stajnie-odstep-s, 8px);
    color: var(--stajnie-akcent, #800000);
    font-weight: bold;
    text-decoration: none;
}

.stajnie-popup-link:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .stajnie-mapa {
        height: 300px;
    }
}