/* ─────────────────────────────────────────────────────────────────────────────
   Style publicznej strony schroniska.

   Odwzorowanie wyglądu wzorca schronisko-nowodwor.com.pl (Joomla + Gridbox);
   paleta, typografia i proporcje sekcji pochodzą ze skanu:
   www/wzorzec-nowodwor/SKAN-Wzorzec.md. Arkusz jest napisany od zera — nie jest
   kopią 700-kilobajtowego CSS-a kreatora stron.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --tekst: #818fa1;
    --tekst-ciemny: #5a6a83;
    --granat: #244f68;
    --akcent: #14a6fa;
    --akcent-ciemny: #1996dd;
    --szary-naglowek: #95a2b5;
    --tlo: #ffffff;
    --tlo-jasne: #f7f7f7;
    --tlo-chlodne: #f5f8fa;
    --tlo-ciemne: #4d4d4d;
    --obramowanie: #e6ebf0;
    --naglowek-font: "Poiret One", "Comfortaa", sans-serif;
    --tekst-font: "Open Sans", "Segoe UI", sans-serif;
    --kontener: 1200px;
}

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

body {
    margin: 0;
    font-family: var(--tekst-font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--tekst);
    background: var(--tlo);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--akcent); text-decoration: none; }
a:hover { color: var(--akcent-ciemny); }

h1, h2, h3, h4 {
    font-family: var(--naglowek-font);
    font-weight: 400;
    color: var(--tekst-ciemny);
    margin: 0 0 .6em;
    line-height: 1.2;
}

h1 { font-size: 48px; }
h2 { font-size: 48px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }

.kontener {
    width: 100%;
    max-width: var(--kontener);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Nagłówek ─────────────────────────────────────────────────────────────── */

.naglowek { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); position: sticky; top: 0; z-index: 50; }

.naglowek__gora { background: var(--granat); color: #d8e4ec; font-size: 13px; }
.naglowek__gora-tresc { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 38px; flex-wrap: wrap; }
.naglowek__nazwa { font-family: var(--naglowek-font); font-size: 15px; letter-spacing: .3px; }
.naglowek__kontakt { display: flex; gap: 18px; flex-wrap: wrap; }
.naglowek__gora a { color: #d8e4ec; }
.naglowek__gora a:hover { color: #fff; }

.naglowek__pasek { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.naglowek__logo img { max-height: 58px; width: auto; }

.menu { display: flex; gap: 22px; flex-wrap: wrap; }
.menu a {
    font-family: var(--tekst-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tekst-ciemny);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a.aktywna { color: var(--akcent); border-bottom-color: var(--akcent); }

.menu-przelacznik { display: none; }
.menu-hamburger { display: none; cursor: pointer; padding: 8px; }
.menu-hamburger span { display: block; width: 26px; height: 2px; background: var(--tekst-ciemny); margin: 5px 0; }

/* ── Sekcje ───────────────────────────────────────────────────────────────── */

.sekcja { padding: 100px 0; }
.sekcja--waska { padding: 60px 0; }
.sekcja--jasna { background: var(--tlo-jasne); }
.sekcja--chlodna { background: var(--tlo-chlodne); }
.sekcja--ciemna { background: var(--tlo-ciemne); color: #d5d5d5; }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: #fff; }

.sekcja__naglowek { text-align: center; margin-bottom: 60px; }
.sekcja__naglowek h2 { color: var(--tekst-ciemny); }
.sekcja--tlo .sekcja__naglowek h2 { color: #fff; }
.sekcja__podtytul { color: var(--szary-naglowek); font-size: 16px; }

/* Sekcja ze zdjęciem w tle i przyciemnieniem — jak sekcje hero wzorca. */
.sekcja--tlo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: #fff;
}
.sekcja--tlo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}
.sekcja--tlo > .kontener { position: relative; z-index: 1; }
.sekcja--tlo h1, .sekcja--tlo h2, .sekcja--tlo h3 { color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding: 170px 0 200px; text-align: center; }
.hero h1 { font-size: 52px; margin-bottom: .3em; }
.hero__podtytul { font-size: 20px; color: #e8eef3; }
.hero__social { margin-top: 30px; display: flex; gap: 16px; justify-content: center; }
.hero__social a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 40px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 3px;
    color: #fff; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
}
.hero__social a:hover { background: #fff; color: var(--granat); }

/* ── Przyciski ────────────────────────────────────────────────────────────── */

.przycisk {
    display: inline-block;
    padding: 12px 34px;
    border: 2px solid var(--akcent);
    border-radius: 3px;
    color: var(--akcent);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.przycisk:hover { background: var(--akcent); color: #fff; }
.przycisk--pelny { background: var(--akcent); color: #fff; }
.przycisk--pelny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); color: #fff; }
.przycisk--jasny { border-color: #fff; color: #fff; }
.przycisk--jasny:hover { background: #fff; color: var(--granat); }

/* ── Siatki ───────────────────────────────────────────────────────────────── */

.siatka { display: grid; gap: 30px; }
.siatka--2 { grid-template-columns: repeat(2, 1fr); }
.siatka--3 { grid-template-columns: repeat(3, 1fr); }
.siatka--5 { grid-template-columns: repeat(5, 1fr); }

/* Kafle „Nasze psy" (Do adopcji / Pilne przypadki / Adoptowane). */
.kafel { text-align: center; padding: 20px; }
.kafel__ikona { height: 120px; margin: 0 auto 24px; width: auto; }
.kafel h3 { text-transform: uppercase; letter-spacing: 1px; color: var(--akcent); font-size: 24px; }
.kafel p { margin: 0 0 24px; min-height: 3.5em; }
.kafel__licznik { display: block; font-size: 13px; color: var(--szary-naglowek); margin-bottom: 14px; }

/* Formy pomocy — pięć podpisów w rzędzie. */
.pomoc { text-align: center; }
.pomoc h4 { font-family: var(--tekst-font); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-ciemny); }

/* ── Katalog psów ─────────────────────────────────────────────────────────── */

.katalog__gora { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.katalog__sortowanie { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.katalog__sortowanie a { padding: 6px 16px; border: 1px solid var(--obramowanie); border-radius: 3px; color: var(--tekst); }
.katalog__sortowanie a.wybrane { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.katalog__licznik { color: var(--szary-naglowek); font-size: 14px; }

.psy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.pies-kafel { background: #fff; border: 1px solid var(--obramowanie); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.pies-kafel:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transform: translateY(-3px); }
.pies-kafel__zdjecie { position: relative; aspect-ratio: 4 / 3; background: var(--tlo-chlodne); overflow: hidden; }
.pies-kafel__zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.pies-kafel__brak { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--szary-naglowek); font-size: 13px; }
.pies-kafel__opis { padding: 20px; flex: 1; }
.pies-kafel__opis h3 { font-size: 26px; margin-bottom: .2em; }
.pies-kafel__opis h3 a { color: var(--tekst-ciemny); }
.pies-kafel__opis h3 a:hover { color: var(--akcent); }
.pies-kafel__tytul { font-size: 14px; color: var(--tekst); }

.znacznik {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: #fff; background: var(--akcent);
}
.znacznik--pilne { background: #e2574c; }
.znacznik--adoptowany { background: #5cb85c; }
.znacznik--dt { background: #f0ad4e; }
.znacznik--rezerwacja { background: var(--szary-naglowek); }

.stronicowanie { display: flex; gap: 8px; justify-content: center; margin-top: 50px; flex-wrap: wrap; }
.stronicowanie a, .stronicowanie span {
    min-width: 40px; padding: 8px 12px; text-align: center;
    border: 1px solid var(--obramowanie); border-radius: 3px; color: var(--tekst);
}
.stronicowanie .biezaca { background: var(--akcent); border-color: var(--akcent); color: #fff; }

.pusto { text-align: center; padding: 60px 20px; color: var(--szary-naglowek); }

/* ── Karta psa ────────────────────────────────────────────────────────────── */

.karta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.karta__galeria-glowna { border-radius: 4px; overflow: hidden; background: var(--tlo-chlodne); }
.karta__galeria-glowna img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karta__miniatury { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.karta__miniatury a { display: block; border-radius: 3px; overflow: hidden; border: 2px solid transparent; }
.karta__miniatury img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.karta__miniatury a:hover { border-color: var(--akcent); }
.karta__fot { font-size: 12px; color: var(--szary-naglowek); margin-top: 6px; }

.karta h1 { font-size: 44px; margin-bottom: .1em; }
.karta__tytul-ogloszenia { font-size: 18px; font-weight: 700; color: var(--granat); margin: 0 0 20px; font-family: var(--tekst-font); }

.cechy { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--obramowanie); }
.cechy li { display: flex; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--obramowanie); }
.cechy__etykieta { flex: 0 0 190px; color: var(--szary-naglowek); font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.cechy__wartosc { color: var(--tekst-ciemny); font-weight: 600; }

.karta__opis p { margin: 0 0 1em; }

.karta__kontakt { background: var(--tlo-chlodne); border-radius: 4px; padding: 24px; margin-top: 30px; }
.karta__kontakt h3 { font-size: 22px; }

.zasady { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--obramowanie); }
.zasady ol { padding-left: 20px; }
.zasady li { margin-bottom: 12px; }

/* ── Aktualności ──────────────────────────────────────────────────────────── */

.aktualnosc { background: rgba(255, 255, 255, .95); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.aktualnosc img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aktualnosc__tresc { padding: 24px; }
.aktualnosc__data { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--szary-naglowek); }
.aktualnosc h3 { font-size: 24px; margin: 6px 0 12px; }
.aktualnosc p { white-space: pre-line; }

/* ── Strony treści ────────────────────────────────────────────────────────── */

.tresc { max-width: 900px; margin: 0 auto; }
.tresc h3 { font-size: 28px; margin-top: 1.6em; color: var(--granat); }
.tresc ul, .tresc ol { padding-left: 22px; }
.tresc li { margin-bottom: 8px; }

/* ── Wyszukiwarka ─────────────────────────────────────────────────────────── */

.szukajka { background: var(--tlo-chlodne); border-radius: 4px; padding: 30px; margin-bottom: 44px; }
.szukajka__fraza { display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.szukajka__fraza input {
    flex: 1 1 320px; padding: 12px 16px; font-family: var(--tekst-font); font-size: 15px;
    border: 1px solid var(--obramowanie); border-radius: 3px; background: #fff; color: var(--tekst-ciemny);
}
.szukajka__grupy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.szukajka__grupa h4 { font-family: var(--tekst-font); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--szary-naglowek); margin-bottom: 10px; }
.szukajka__grupa label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; margin-bottom: 4px; }

/* ── Stopka ───────────────────────────────────────────────────────────────── */

.stopka { background: var(--tlo-ciemne); color: #c9c9c9; padding-top: 60px; font-size: 14px; }
.stopka__kolumny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 40px; }
.stopka h4 { color: #fff; font-size: 20px; }
.stopka a { color: #e0e0e0; }
.stopka a:hover { color: var(--akcent); }
.stopka__social { display: flex; gap: 14px; flex-wrap: wrap; }
.stopka__prawa { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; font-size: 13px; color: #a5a5a5; }

/* ── Cytat ────────────────────────────────────────────────────────────────── */

.cytat { text-align: center; }
.cytat p { font-family: var(--naglowek-font); font-size: 32px; line-height: 1.4; color: #fff; margin: 0 0 10px; }
.cytat span { color: #dcdcdc; font-size: 15px; }

/* ── Urządzenia mobilne ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    h1, h2 { font-size: 38px; }
    .sekcja { padding: 70px 0; }
    .psy, .siatka--3 { grid-template-columns: repeat(2, 1fr); }
    .siatka--5, .szukajka__grupy { grid-template-columns: repeat(3, 1fr); }
    .karta { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    h1, h2 { font-size: 32px; }
    .hero { padding: 110px 0 120px; }
    .sekcja { padding: 50px 0; }
    .naglowek__gora-tresc { justify-content: center; text-align: center; }
    .menu-hamburger { display: block; }
    .menu {
        display: none; width: 100%; flex-direction: column; gap: 0;
        border-top: 1px solid var(--obramowanie); margin-top: 12px;
    }
    .menu a { padding: 12px 0; border-bottom: 1px solid var(--obramowanie); }
    .menu-przelacznik:checked ~ .menu { display: flex; }
    .naglowek__pasek { flex-wrap: wrap; }
    .psy, .siatka--2, .siatka--3, .siatka--5, .szukajka__grupy, .stopka__kolumny { grid-template-columns: 1fr; }
    .cechy__etykieta { flex-basis: 130px; }
    .karta__miniatury { grid-template-columns: repeat(4, 1fr); }
    .cytat p { font-size: 24px; }
}