/* ===============================================================================================
   Moduł stajnie — arkusz własny działu.

   Ładowany wyłącznie dla stron modułu (gałąź {elseif $modulStajnie} w app/templates/_top.tpl),
   po komplecie arkuszy wspólnych, więc może je nadpisywać.

   Konwencje na przyszły design system portalu:
   - wszystkie wartości (kolory, odstępy, promienie, cienie) jako custom properties w bloku
     :root poniżej - podmiana na tokeny systemu sprowadzi się wtedy do jednego miejsca,
   - klasy z prefiksem .stajnie-, bez zależności od klas globalnych w rodzaju .biale_cien,
   - layout na grid/flex z gap, bez marginesów ujemnych i bez !important,
   - punkty łamania spójne z resztą serwisu: 600px i 760px.

   Style mapy są celowo w osobnym pliku (stajnie-mapa.css), bo dochodzą dopiero w kroku 1.5
   i obowiązuje je ta sama zasada co biblioteki: nie ruszamy tego, z czego korzysta transport.
   =============================================================================================== */

:root {
    /* Odstępy */
    --stajnie-odstep-xs: 4px;
    --stajnie-odstep-s: 8px;
    --stajnie-odstep-m: 16px;
    --stajnie-odstep-l: 24px;
    --stajnie-odstep-xl: 40px;

    /* Kolory - wartości tymczasowe, do zastąpienia tokenami design systemu */
    --stajnie-tekst: #1f2937;
    --stajnie-tekst-slaby: #6b7280;
    --stajnie-tlo-karty: #ffffff;
    --stajnie-obramowanie: #e5e7eb;
    --stajnie-akcent: #800000;

    /* Kształty */
    --stajnie-promien: 8px;
    --stajnie-promien-s: 4px;
    --stajnie-cien: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------------------------------------------------------------
   Katalog: lista pod mapą (stajnie/_lista.tpl), w trybie live podmieniana przez mapa.js.
   ----------------------------------------------------------------------------------------------- */

.stajnie-lista-info {
    margin: 0 5px var(--stajnie-odstep-s);
    color: var(--stajnie-tekst-slaby);
}

.stajnie-lista-info b {
    color: var(--stajnie-tekst);
}

.stajnie-lista-info a {
    color: var(--stajnie-akcent);
}

/* Pusty wynik przy włączonym obszarze mapy - wyraźna ramka z przyciskiem wyłączenia obszaru,
   żeby przypadkiem przesunięta mapa nie wyglądała jak "nie ma takich stajni". */
.stajnie-brak-w-obszarze {
    margin: 0 5px var(--stajnie-odstep-m);
    padding: var(--stajnie-odstep-m) var(--stajnie-odstep-l);
    border: 1px solid #f0c36d;
    border-left-width: 4px;
    border-radius: var(--stajnie-promien);
    background: #fff8e6;
    color: var(--stajnie-tekst);
}

.stajnie-brak-w-obszarze h2 {
    margin: 0 0 var(--stajnie-odstep-s);
    font-size: 125%;
}

.stajnie-brak-w-obszarze p {
    margin: 0 0 var(--stajnie-odstep-m);
}

.stajnie-brak-w-obszarze .stajnie-brak-w-obszarze-podpowiedz {
    margin: 0;
    color: var(--stajnie-tekst-slaby);
}

/* W trakcie pobierania nowej listy stara zostaje przygaszona - bez skoków wysokości strony. */
.stajnie-lista-ladowanie {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* -----------------------------------------------------------------------------------------------
   Strona główna działu (stajnie/glowna.tpl). Szkielet z kroku 2.1 - kolejne kroki dokładają
   sekcje. Kolejne sekcje trzymają się .stajnie-glowna-sekcja z jednym wspólnym odstępem.
   ----------------------------------------------------------------------------------------------- */

.stajnie-glowna {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--stajnie-odstep-l) var(--stajnie-odstep-m);
    color: var(--stajnie-tekst);
}

/* Okruszki na stronach miast: "Stajnie › Warszawa". */
.stajnie-okruszki {
    margin-bottom: var(--stajnie-odstep-m);
    font-size: 90%;
    color: var(--stajnie-tekst-slaby);
}

.stajnie-okruszki a {
    color: var(--stajnie-akcent);
}

.stajnie-glowna-naglowek h1 {
    margin: 0 0 var(--stajnie-odstep-m);
    font-size: 200%;
    font-weight: bold;
    line-height: 1.2;
}

.stajnie-glowna-zajawka {
    margin: 0 0 var(--stajnie-odstep-l);
    font-size: 110%;
    line-height: 1.5;
}

.stajnie-glowna-przycisk {
    display: inline-block;
    padding: var(--stajnie-odstep-s) var(--stajnie-odstep-l);
    border-radius: var(--stajnie-promien-s);
    background: var(--stajnie-akcent);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.stajnie-glowna-przycisk:hover {
    background: #a00000;
    color: #fff;
}

.stajnie-glowna-sekcja {
    margin-top: var(--stajnie-odstep-xl);
}

.stajnie-glowna-tytul-sekcji {
    margin: 0 0 var(--stajnie-odstep-m);
    font-size: 140%;
    font-weight: bold;
    line-height: 1.3;
}

.stajnie-glowna-opis-sekcji {
    margin: calc(-1 * var(--stajnie-odstep-s)) 0 var(--stajnie-odstep-m);
    color: var(--stajnie-tekst-slaby);
}

/* -----------------------------------------------------------------------------------------------
   Aktualne oferty (2.6): dwa duże kafle "wolne boksy" / "jazdy" w kolorach znaczników
   (.stajnie-znacznik-boksy / -jazdy niżej), żeby były rozpoznawalne w całym module.
   ----------------------------------------------------------------------------------------------- */

.stajnie-glowna-oferty {
    margin-top: var(--stajnie-odstep-l);
}

.stajnie-oferty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--stajnie-odstep-m);
}

.stajnie-oferta {
    display: flex;
    flex-direction: column;
    gap: var(--stajnie-odstep-xs);
    padding: var(--stajnie-odstep-m) var(--stajnie-odstep-l);
    border-radius: var(--stajnie-promien);
    color: #fffbe6;
    text-decoration: none;
    box-shadow: var(--stajnie-cien);
}

.stajnie-oferta:hover {
    color: #fff;
    filter: brightness(1.08);
}

.stajnie-oferta:nth-child(1) { background: #348f00; }
.stajnie-oferta:nth-child(2) { background: #e97204; }

.stajnie-oferta-etykieta {
    font-size: 120%;
    font-weight: bold;
}

.stajnie-oferta-liczba {
    font-size: 90%;
    opacity: 0.9;
}

/* -----------------------------------------------------------------------------------------------
   Zajawki-linki (miasta 2.5, udogodnienia 2.6): siatka linków "etykieta + liczba stajni".
   ----------------------------------------------------------------------------------------------- */

.stajnie-zajawki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--stajnie-odstep-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.stajnie-zajawka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stajnie-odstep-s);
    padding: var(--stajnie-odstep-s) var(--stajnie-odstep-m);
    border: 1px solid var(--stajnie-obramowanie);
    border-radius: var(--stajnie-promien-s);
    background: var(--stajnie-tlo-karty);
    color: var(--stajnie-tekst);
    text-decoration: none;
}

.stajnie-zajawka:hover {
    border-color: var(--stajnie-akcent);
    color: var(--stajnie-akcent);
}

.stajnie-zajawka-nazwa {
    font-weight: bold;
}

.stajnie-zajawka-liczba {
    font-size: 85%;
    color: var(--stajnie-tekst-slaby);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------------------------
   Treść informacyjna i FAQ (2.7).
   ----------------------------------------------------------------------------------------------- */

.stajnie-tresc {
    max-width: 720px;   /* szerokość akapitu do czytania, nie cała siatka */
    line-height: 1.6;
}

.stajnie-tresc p {
    margin: 0 0 var(--stajnie-odstep-m);
}

.stajnie-tresc .stajnie-glowna-tytul-sekcji {
    margin-top: var(--stajnie-odstep-l);
}

.stajnie-tresc .stajnie-glowna-tytul-sekcji:first-child {
    margin-top: 0;
}

.stajnie-tresc-lista {
    margin: 0 0 var(--stajnie-odstep-m);
    padding-left: 1.4em;
}

.stajnie-tresc-lista li {
    margin-bottom: var(--stajnie-odstep-s);
}

.stajnie-faq {
    margin: 0;
}

.stajnie-faq dt {
    margin-top: var(--stajnie-odstep-m);
    font-weight: bold;
}

.stajnie-faq dt:first-child {
    margin-top: 0;
}

.stajnie-faq dd {
    margin: var(--stajnie-odstep-xs) 0 0;
}

/* -----------------------------------------------------------------------------------------------
   Siatka kafelków i kafelek stajni (stajnie/_kafelek_stajni.tpl). Wspólne dla wyróżnionych
   (2.4) i list przy miastach (etap 3).
   ----------------------------------------------------------------------------------------------- */

.stajnie-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--stajnie-odstep-m);
}

.stajnie-kafelek {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--stajnie-obramowanie);
    border-radius: var(--stajnie-promien);
    background: var(--stajnie-tlo-karty);
    box-shadow: var(--stajnie-cien);
}

.stajnie-kafelek-foto {
    display: block;
    aspect-ratio: 4 / 3;    /* miniatury mid2 mają 320x240 */
    background: #f3f4f6;
    line-height: 0;
}

.stajnie-kafelek-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stajnie-kafelek-brak-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 200%;
    color: var(--stajnie-obramowanie);
}

.stajnie-kafelek-tresc {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--stajnie-odstep-xs);
    padding: var(--stajnie-odstep-m);
}

.stajnie-kafelek-nazwa {
    margin: 0;
    font-size: 110%;
    font-weight: bold;
    line-height: 1.3;
}

.stajnie-kafelek-nazwa a {
    color: var(--stajnie-akcent);
    text-decoration: none;
}

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

/* Miejscowość, znaczniki i cena przyklejone do dołu karty. Każdy wiersz ma stałą wysokość
   (miejscowość w jednej linii, puste wiersze trzymają miejsce - patrz _kafelek_stajni.tpl),
   więc w rzędzie siatki stoją na tej samej wysokości, czy nazwa ma jedną linię, czy dwie. */
.stajnie-kafelek-dol {
    display: flex;
    flex-direction: column;
    gap: var(--stajnie-odstep-xs);
    margin-top: auto;
    padding-top: var(--stajnie-odstep-xs);
}

.stajnie-kafelek-miejsce {
    overflow: hidden;
    font-size: 90%;
    color: var(--stajnie-tekst-slaby);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stajnie-kafelek-znaczniki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stajnie-odstep-xs);
}

/* Niewidoczny zastępnik w karcie bez znaczników - ma wysokość prawdziwego znacznika. */
.stajnie-znacznik-pusty {
    visibility: hidden;
}

/* Znaczniki "wolne boksy" / "jazdy konne" - kolory tożsame z .wolne / .jazdy na liście
   (ver3.78.css) i z popupem mapy (stajnie-mapa.css). */
.stajnie-znacznik {
    padding: 1px 8px;
    border-radius: var(--stajnie-promien-s);
    font-size: 80%;
    font-weight: bold;
    color: #fffbe6;
}

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

.stajnie-kafelek-cena {
    font-size: 90%;
}

/* Wyszukiwarka strony głównej (stajnie/_wyszukiwarka.tpl). Zaraz pod nagłówkiem, więc
   mniejszy odstęp niż zwykła sekcja. */
.stajnie-glowna-wyszukiwarka {
    margin-top: var(--stajnie-odstep-l);
}

/* Tło pastelowe (nie białe jak reszta kart) - to główne wejście do działu,
   ma się wyróżniać na tle strony i białych kart niżej. */
.stajnie-wyszukiwarka {
    padding: var(--stajnie-odstep-l);
    border: 1px solid #e5cfc2;
    border-radius: var(--stajnie-promien);
    background: #f0dcd1;
    box-shadow: var(--stajnie-cien);
}

.stajnie-wyszukiwarka-intencja {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stajnie-odstep-s);
    margin: 0 0 var(--stajnie-odstep-m);
    padding: 0;
    border: 0;
}

.stajnie-wyszukiwarka-intencja legend {
    width: 100%;
    margin-bottom: var(--stajnie-odstep-s);
    padding: 0;
    font-weight: bold;
}

/* Radio jako "pigułka": natywny input schowany wizualnie, ale dostępny z klawiatury -
   stan zaznaczenia i fokusu rysowany na etykiecie przez :checked / :focus-visible. */
.stajnie-wyszukiwarka-opcja {
    position: relative;
    cursor: pointer;
}

.stajnie-wyszukiwarka-opcja input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.stajnie-wyszukiwarka-opcja span {
    display: inline-block;
    padding: var(--stajnie-odstep-s) var(--stajnie-odstep-m);
    border: 1px solid var(--stajnie-obramowanie);
    border-radius: 999px;
    background: var(--stajnie-tlo-karty);
    color: var(--stajnie-tekst);
    line-height: 1.3;
}

.stajnie-wyszukiwarka-opcja:hover span {
    border-color: var(--stajnie-akcent);
}

.stajnie-wyszukiwarka-opcja input:checked + span {
    border-color: var(--stajnie-akcent);
    background: var(--stajnie-akcent);
    color: #fff;
}

.stajnie-wyszukiwarka-opcja input:focus-visible + span {
    outline: 2px solid var(--stajnie-akcent);
    outline-offset: 2px;
}

.stajnie-wyszukiwarka-pola {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--stajnie-odstep-m);
}

.stajnie-wyszukiwarka-miejscowosc {
    position: relative;   /* punkt odniesienia dla listy podpowiedzi (position: absolute) */
    flex: 1 1 240px;
}

.stajnie-wyszukiwarka-promien {
    flex: 0 0 auto;
}

.stajnie-wyszukiwarka-etykieta {
    display: block;
    margin-bottom: var(--stajnie-odstep-xs);
    font-size: 90%;
    color: var(--stajnie-tekst-slaby);
}

.stajnie-wyszukiwarka #miejsce_tekst,
.stajnie-wyszukiwarka #promien {
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--stajnie-odstep-m);
    border: 1px solid var(--stajnie-obramowanie);
    border-radius: var(--stajnie-promien-s);
    background: var(--stajnie-tlo-karty);
    font-size: 110%;
    color: var(--stajnie-tekst);
}

.stajnie-wyszukiwarka #miejsce_tekst {
    width: 100%;
}

.stajnie-wyszukiwarka #miejsce_tekst:focus,
.stajnie-wyszukiwarka #promien:focus {
    border-color: var(--stajnie-akcent);
    outline: none;
}

.stajnie-wyszukiwarka-podpowiedz {
    margin: var(--stajnie-odstep-xs) 0 0;
    font-size: 90%;
    color: var(--stajnie-akcent);
}

.stajnie-wyszukiwarka-akcja .stajnie-glowna-przycisk {
    height: 44px;
    border: 0;
    font-family: inherit;
    font-size: 110%;
    cursor: pointer;
}

/* Szybkie wyszukiwanie po nazwie nad mapą (glowna.tpl): bez ramki i tła, samo białe pole
   + przycisk w jednym wierszu. Mniejszy odstęp - stoi zaraz pod nagłówkiem. */
.stajnie-glowna-szukaj {
    margin-top: var(--stajnie-odstep-l);
}

.stajnie-szukaj-nazwa-pola {
    display: flex;
    gap: var(--stajnie-odstep-s);
}

.stajnie-szukaj-nazwa input[type="search"] {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--stajnie-odstep-m);
    border: 1px solid #d1d5db;   /* ciemniej niż --stajnie-obramowanie - bez tła wokół pole musi być widać */
    border-radius: var(--stajnie-promien-s);
    background: var(--stajnie-tlo-karty);
    font-size: 110%;
    color: var(--stajnie-tekst);
}

.stajnie-szukaj-nazwa input[type="search"]:focus {
    border-color: var(--stajnie-akcent);
    outline: none;
}

/* inline-flex: tekst na środku w pionie tak samo w <button> i w linku <a>. */
.stajnie-szukaj-nazwa .stajnie-glowna-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 44px;
    border: 0;
    font-family: inherit;
    font-size: 110%;
    white-space: nowrap;
    cursor: pointer;
}

/* Przycisk drugorzędny ("Przeglądaj wszystkie stajnie") - obrys w kolorze akcentu, bez wypełnienia,
   żeby nie konkurował z "Szukaj". */
.stajnie-szukaj-nazwa .stajnie-przycisk-drugi {
    border: 1px solid var(--stajnie-akcent);
    background: var(--stajnie-tlo-karty);
    color: var(--stajnie-akcent);
}

.stajnie-szukaj-nazwa .stajnie-przycisk-drugi:hover {
    background: var(--stajnie-akcent);
    color: #fff;
}

/* Na wąskim ekranie: pole i "Szukaj" w pierwszej linii (pole bierze resztę miejsca),
   "Przeglądaj wszystkie stajnie" pod nimi na całą szerokość. */
@media (max-width: 600px) {
    .stajnie-szukaj-nazwa-pola {
        flex-wrap: wrap;
    }

    .stajnie-szukaj-nazwa .stajnie-przycisk-drugi {
        flex: 1 1 100%;
    }
}

.stajnie-glowna-katalog-link {
    margin: var(--stajnie-odstep-m) 0 0;
    color: var(--stajnie-tekst-slaby);
}

.stajnie-glowna-katalog-link a {
    color: var(--stajnie-akcent);
}

@media (max-width: 600px) {
    .stajnie-wyszukiwarka {
        padding: var(--stajnie-odstep-m);
    }

    .stajnie-wyszukiwarka-promien,
    .stajnie-wyszukiwarka-akcja {
        flex: 1 1 100%;
    }

    .stajnie-wyszukiwarka #promien,
    .stajnie-wyszukiwarka-akcja .stajnie-glowna-przycisk {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .stajnie-glowna {
        padding: var(--stajnie-odstep-m);
    }

    .stajnie-glowna-naglowek h1 {
        font-size: 160%;
    }
}

/* Pole miejscowości w katalogu (lista.tpl, PLAN-ADRESY.md etap 3). Wymiary jak dawne #miasto/#miastokm
   z ver3.78.css (.lokalizacjaNowa), które przestały działać po zmianie id pól. */
.lokalizacjaNowa #miejsce_tekst {
    width: 100%;
    padding: 5px;
}

.lokalizacjaNowa #promien_wybor {
    margin-left: 5px;
}