/* Jednostki strażackie – wygląd na stronie (korzysta ze zmiennych motywu, ma własne wartości awaryjne). */

.jd {
    --jd-granat: var(--kolor-granat, #14213d);
    --jd-czerwien: var(--kolor-glowny, #a4161a);
    --jd-zloto: var(--kolor-akcent, #b58a2e);
    --jd-tekst: var(--kolor-tekst, #1c2331);
    --jd-slaby: var(--kolor-tekst-slaby, #515a6b);
    --jd-linia: var(--kolor-obramowanie, #e3ded3);
    --jd-jasne: var(--kolor-tlo-jasne, #f5f3ee);
    --jd-promien: var(--promien, 6px);
}
.jd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.jd-ikona { flex: 0 0 auto; }

/* Wstęp listy */
.jd-wstep { display: flex; gap: 34px; align-items: center; margin-bottom: 34px; padding: 26px 30px; background: var(--jd-jasne); border-radius: var(--jd-promien); border: 1px solid var(--jd-linia); }
.jd-wstep__herb { width: 120px; height: auto; flex: 0 0 120px; filter: drop-shadow(0 6px 14px rgba(20, 33, 61, .15)); }
.jd-wstep__opis { font-size: 1.1rem; margin: 0 0 16px; max-width: 760px; }
.jd-liczby { display: flex; flex-wrap: wrap; gap: 10px 34px; list-style: none; margin: 0; padding: 0; }
.jd-liczby strong { font-family: var(--font-naglowki, inherit); font-size: 2rem; color: var(--jd-czerwien); line-height: 1; margin-right: 6px; }
.jd-liczby span { color: var(--jd-slaby); font-weight: 600; }

/* Filtr */
.jd-filtr { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-bottom: 10px; }
.jd-filtr__pole { display: grid; gap: 6px; }
.jd-filtr__pole--szukaj { flex: 1 1 280px; }
.jd-filtr label { font-weight: 600; font-size: .95rem; }
.jd-filtr input[type="search"], .jd-filtr select {
    font: inherit; padding: 11px 14px; border: 1px solid #b9b3a6; border-radius: var(--jd-promien); background: #fff; color: var(--jd-tekst); width: 100%;
}
.jd-filtr select { min-width: 220px; }
.jd-filtr__check { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; cursor: pointer; }
.jd-filtr__check input { width: 20px; height: 20px; accent-color: var(--jd-czerwien); }
.jd-wynik { min-height: 1.6em; margin: 0 0 20px; color: var(--jd-slaby); font-weight: 600; }

/* Grupy i siatka */
.jd-grupa + .jd-grupa { margin-top: 44px; }
.jd-grupa__tytul { font-size: 1.45rem; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--jd-linia); position: relative; }
.jd-grupa__tytul::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 60px; height: 2px; background: var(--jd-czerwien); }
.jd-grupa__liczba { color: var(--jd-slaby); font-size: .9rem; font-weight: 400; font-family: var(--font, inherit); }
.jd-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.jd-siatka--male { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Karta jednostki */
.jd-karta {
    position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--jd-linia);
    border-radius: var(--jd-promien); overflow: hidden; transition: box-shadow .22s, transform .22s, border-color .22s;
}
.jd-karta:hover { box-shadow: 0 16px 36px rgba(20, 33, 61, .14); transform: translateY(-3px); border-color: #d6cfbf; }
.jd-karta[hidden] { display: none; }
.jd-karta__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--jd-granat); }
.jd-karta__media picture, .jd-karta__zdjecie { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.jd-karta:hover .jd-karta__zdjecie { transform: scale(1.05); }
.jd-karta__tlo {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, #fff 0%, var(--jd-jasne) 70%);
}
.jd--psp .jd-karta__tlo, .jd-karta__tlo { border-bottom: 1px solid var(--jd-linia); }
.jd-karta__tlo img { height: 72%; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(20, 33, 61, .18)); transition: transform .5s ease; }
.jd-karta:hover .jd-karta__tlo img { transform: scale(1.06); }
.jd-karta__herb { position: absolute; right: 10px; bottom: 10px; width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.jd-karta__tresc { padding: 16px 18px 18px; display: grid; gap: 6px; }
.jd-karta__tytul { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.jd-karta__tytul a { color: var(--jd-granat); text-decoration: none; }
.jd-karta__tytul a::after { content: ''; position: absolute; inset: 0; }
.jd-karta__tytul a:hover { text-decoration: underline; text-decoration-color: var(--jd-czerwien); text-underline-offset: 4px; }
.jd-karta__miejsce { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--jd-slaby); font-size: .93rem; }
.jd-karta__znaczniki { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.jd-karta__znaczniki span { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--jd-jasne); color: var(--jd-granat); border: 1px solid var(--jd-linia); }
.jd-karta__znaczniki .jd-ksrg { background: var(--jd-czerwien); color: #fff; border-color: var(--jd-czerwien); letter-spacing: .06em; }
.jd-karta__znaczniki:empty { display: none; }

.jd-pusto { padding: 26px; border: 1px dashed var(--jd-linia); border-radius: var(--jd-promien); text-align: center; color: var(--jd-slaby); background: #fff; }

/* Strona jednostki */
.jd-jednostka__uklad { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 46px; align-items: start; }
.jd-jednostka__glowna > section { margin-bottom: 34px; }
.jd-jednostka__glowna h2 { font-size: 1.5rem; margin: 0 0 14px; }
.jd-jednostka__zdjecie { margin: 0 0 30px; border-radius: var(--jd-promien); overflow: hidden; }
.jd-jednostka__obraz { width: 100%; }
.jd-osoby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.jd-osoby li { padding: 14px 16px; background: var(--jd-jasne); border-radius: var(--jd-promien); border-left: 3px solid var(--jd-zloto); }
.jd-osoby__funkcja { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--jd-slaby); }
.jd-osoby strong { color: var(--jd-granat); }
.jd-sprzet { columns: 2; column-gap: 34px; padding-left: 1.2em; }
.jd-sprzet li { break-inside: avoid; margin-bottom: 6px; }

.jd-jednostka__bok { position: sticky; top: 110px; }
.jd-dane { background: #fff; border: 1px solid var(--jd-linia); border-top: 4px solid var(--jd-czerwien); border-radius: var(--jd-promien); padding: 24px; box-shadow: 0 10px 30px rgba(20, 33, 61, .07); }
.jd-dane__herb { display: block; width: 96px; height: auto; margin: 0 auto 10px; }
.jd-dane dl { margin: 0; }
.jd-dane dt { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--jd-slaby); margin-top: 14px; }
.jd-dane dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.jd-112 { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; background: #fff4f4; border: 1px solid #f1c9c9; border-radius: var(--jd-promien); font-size: .93rem; color: #5b0f12; }
.jd-112 a { color: var(--jd-czerwien); }
.jd-kapelan--tekst { padding: 20px; background: var(--jd-jasne); border-radius: var(--jd-promien); }
.jd-inne { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--jd-linia); }
.jd-inne h2 { font-size: 1.35rem; }
.jd-powrot { margin-top: 30px; }

/* Blok „wejście PSP / OSP” */
.jd-wejscia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
.jd-wejscie {
    position: relative; display: flex; gap: 26px; align-items: center; padding: 30px; background: #fff; color: var(--kolor-tekst, #1c2331);
    border: 1px solid var(--kolor-obramowanie, #e3ded3); border-radius: var(--promien, 6px); text-decoration: none; overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.jd-wejscie::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kolor-glowny, #a4161a);
    transform: scaleY(.3); transform-origin: top; transition: transform .35s ease;
}
.jd-wejscie:hover { box-shadow: 0 18px 40px rgba(20, 33, 61, .14); transform: translateY(-3px); text-decoration: none; color: inherit; }
.jd-wejscie:hover::before { transform: scaleY(1); }
.jd-wejscie__herb { width: 110px; height: 120px; object-fit: contain; flex: 0 0 110px; transition: transform .4s ease; }
.jd-wejscie:hover .jd-wejscie__herb { transform: scale(1.05) rotate(-2deg); }
.jd-wejscie__tresc { display: grid; gap: 6px; }
.jd-wejscie__nad { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kolor-glowny, #a4161a); }
.jd-wejscie__tytul { margin: 0; font-size: 1.6rem; color: var(--kolor-granat, #14213d); }
.jd-wejscie__opis { color: var(--kolor-tekst-slaby, #515a6b); }
.jd-wejscie__liczba { font-size: .95rem; }
.jd-wejscie__liczba strong { color: var(--kolor-glowny, #a4161a); font-size: 1.2rem; }
.jd-wejscie__link { font-weight: 700; color: var(--kolor-granat, #14213d); margin-top: 4px; }
.tkw-tlo--ciemne .jd-wejscie { border-color: transparent; }

@media (max-width: 1000px) {
    .jd-jednostka__uklad { grid-template-columns: 1fr; gap: 30px; }
    .jd-jednostka__bok { position: static; order: -1; }
}
@media (max-width: 760px) {
    .jd-wstep { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
    .jd-wstep__herb { width: 90px; flex-basis: auto; }
    .jd-wejscia { grid-template-columns: 1fr; }
    .jd-wejscie { padding: 22px; gap: 18px; }
    .jd-wejscie__herb { width: 72px; height: 84px; flex-basis: 72px; }
    .jd-sprzet { columns: 1; }
    .jd-filtr select { min-width: 0; }
    .jd-filtr__pole { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .jd-karta, .jd-wejscie, .jd-karta__zdjecie, .jd-wejscie__herb, .jd-karta__tlo img { transition: none; }
    .jd-karta:hover, .jd-wejscie:hover { transform: none; }
}