/**
 * Kroje pisma z własnego serwera.
 *
 * Wcześniej ładowały się z fonts.gstatic.com i przy każdym wejściu na stronę
 * adres IP odwiedzającego wychodził poza Europejski Obszar Gospodarczy, bez
 * zgody i bez podstawy prawnej. Licencja SIL OFL na to pozwala: wolno trzymać
 * pliki u siebie, także w produkcie sprzedawanym klientom. Teksty licencji
 * leżą obok plików, w public/assets/fonty.
 *
 * Oba kroje są **zmienne**: jeden plik niesie wszystkie grubości, więc zamiast
 * czterech plików Intera ładuje się jeden. Stąd zakres w `font-weight`, a nie
 * pojedyncza liczba. Sprawdzone: pliki pobrane osobno dla wag 400, 500, 600
 * i 700 miały identyczną sumę kontrolną, bo za każdym razem był to ten sam
 * font zmienny.
 *
 * Podział na dwa podzbiory znaków też ma powód. Podstawowy nie ma polskich
 * znaków poza „ó”: „ą”, „ę”, „ł”, „ś”, „ż”, „ź”, „ć” i „ń” siedzą w podzbiorze
 * rozszerzonym. Przeglądarka pobiera go sama, gdy natrafi na taki znak, więc
 * podział niczego nie psuje, a odwiedzający strony bez polskich znaków pobiera
 * o osiemdziesiąt kilobajtów mniej.
 *
 * `font-display: swap` pokazuje tekst od razu krojem systemowym i podmienia go
 * po wczytaniu pliku. Strona urzędu ma być czytelna natychmiast, a nie ładna
 * po sekundzie: przy `block` przez chwilę nie ma na niej ani jednego słowa.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonty/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonty/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonty/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonty/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #008ecf;
  --blue-dark: #006ba0;
  --navy: #0a2540;
  --navy-light: #153a5b;
  --red: #e30613;
  --red-dark: #b00410;
  --yellow: #ffcc00;
  --yellow-dark: #e6b800;
  --gray-50: #f7f9fb;
  --gray-100: #eef2f6;
  --gray-200: #d8dee5;
  --gray-300: #b4bcc6;
  --gray-600: #5c6674;
  --gray-800: #2a3340;
  --gray-900: #141a24;
  --white: #ffffff;
  --focus: 3px solid #ffcc00;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { font-size: 100%; }
/* Miejsce na pasek przewijania zarezerwowane na stałe.
   Bez tego strona przeskakuje w bok o szerokość paska w dwóch sytuacjach:
   przy otwarciu powiększonego zdjęcia, bo wtedy blokujemy przewijanie strony
   pod spodem, oraz przy przejściu z podstrony dłuższej od ekranu na krótszą,
   gdzie paska w ogóle nie ma. Przeskok jest drobny, kilkanaście punktów,
   ale widać go na całej szerokości nagłówka i wygląda jak drganie strony. */
html { scrollbar-gutter: stable; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.6;
  font-size: 1rem;
}

a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
a:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 2px; }
button:focus-visible { outline: var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute; top: -60px; left: 0;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; z-index: 999;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* === TOP BAR === */
.topbar { background: var(--navy); color: var(--white); padding: 8px 0; font-size: 0.8125rem; }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.topbar-left { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.topbar-left a {
  color: var(--white); text-decoration: none;
  padding: 4px 0; display: inline-flex; align-items: center; gap: 6px;
}
.topbar-left a:hover { color: var(--yellow); }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.fb-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1877F2; color: var(--white) !important;
  padding: 4px 12px; border-radius: 4px;
  text-decoration: none; font-weight: 500; font-size: 0.8125rem;
}
.fb-link:hover { background: #0f62c9; color: var(--white) !important; }
.a11y-btn {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 12px; border-radius: 4px;
  font-size: 0.8125rem; cursor: pointer; font-family: inherit;
}
.a11y-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--yellow); }
.bip-btn {
  background: var(--yellow); color: var(--navy);
  padding: 4px 14px; font-weight: 700;
  text-decoration: none; border-radius: 4px;
  font-size: 0.8125rem; letter-spacing: 0.5px;
}
.bip-btn:hover { background: var(--yellow-dark); color: var(--navy); }

/* === HEADER === */
.header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 20px 0; }
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.logos { display: flex; align-items: center; gap: 20px; }
.logo-mzd { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-mzd .pictogram { width: 58px; height: auto; flex-shrink: 0; }

/* Drugi stan po najechaniu na logo z nazwą: strzałki „napełniają się" granatem
   (szare przechodzą w ciemniejszy odcień i w granat marki), a nazwa też ciemnieje
   do granatu logo. Płynne przejście, żeby nie migało. Kolor granatu z logo MZD,
   nie z palety serwisu, bo to znak ma tu dyktować barwę. */
.logo-mzd .pictogram .fil1,
.logo-mzd .pictogram .fil2,
.logo-mzd .brand-text .line1,
.logo-mzd .brand-text .line2 { transition: fill 0.18s ease, color 0.18s ease; }
.logo-mzd:hover .pictogram .fil2,
.logo-mzd:focus-visible .pictogram .fil2 { fill: #5C6674; }
.logo-mzd:hover .pictogram .fil1,
.logo-mzd:focus-visible .pictogram .fil1 { fill: #223A6E; }
.logo-mzd:hover .brand-text .line1,
.logo-mzd:focus-visible .brand-text .line1 { color: #223A6E; }
.logo-mzd:hover .brand-text .line2,
.logo-mzd:focus-visible .brand-text .line2 { color: #223A6E; }

/* Cicha pionowa kreska między godłem jednostki a logo miasta. */
.logos-kreska { width: 1px; align-self: stretch; min-height: 34px; background: var(--gray-200); flex-shrink: 0; }
/* Logo miasta umiarkowanej wielkości: niższe niż godło jednostki, żeby to ono
   pozostało główne, a miasto stało obok jako powiązanie, nie drugi tytuł. */
.logo-miasto { display: flex; align-items: center; flex-shrink: 0; }
.logo-miasto img { height: 32px; width: auto; display: block; }
.logo-mzd .brand-text {
  display: flex; flex-direction: column; line-height: 1.1;
  /* Nazwa krojem treści (Inter), nie nagłówkowym szeryfem: nowocześniejszy,
     bliższy współczesnym znakom jednostek. Test — do porównania z serifem. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.logo-mzd .brand-text .line1 {
  font-size: 1.1875rem; font-weight: 800;
  color: var(--navy); letter-spacing: -0.2px;
}
.logo-mzd .brand-text .line2 {
  font-size: 1rem; font-weight: 600;
  color: var(--blue-dark); letter-spacing: 0.1px; margin-top: 2px;
}
.logo-divider { width: 1px; height: 44px; background: var(--gray-200); }
.logo-zabrze { height: 32px; width: auto; }
.logo-zabrze-caption {
  font-size: 0.6875rem; color: var(--gray-600);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px;
}
.um-block { display: flex; align-items: center; gap: 10px; }

.header-search {
  display: flex; align-items: center;
  background: var(--gray-100);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  min-width: 260px;
}
.header-search input {
  border: none; background: transparent;
  padding: 8px 8px; flex: 1;
  font-family: inherit; font-size: 0.875rem; color: var(--gray-900);
}
.header-search input:focus { outline: none; }
.header-search:focus-within { outline: 3px solid var(--yellow); }
.header-search button {
  background: var(--navy); color: var(--white);
  border: none; width: 36px; height: 36px;
  border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.header-search button:hover { background: var(--blue-dark); }

/* Grupa po prawej: logo BIP + wyszukiwarka, stoją równo obok siebie. */
.header-akcje { display: flex; align-items: center; gap: 18px; }
/* Logo BIP prowadzi do Biuletynu Informacji Publicznej w nowej karcie.
   Wysokość dobrana do paska wyszukiwarki, żeby dolne krawędzie się zgadzały. */
.bip-logo { display: flex; align-items: center; flex-shrink: 0; border-radius: 4px; }
.bip-logo img { height: 28px; width: auto; display: block; transition: opacity 0.18s ease; }
.bip-logo:hover img, .bip-logo:focus-visible img { opacity: 0.82; }
.bip-logo:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* === NAV === */
.nav { background: var(--navy); }
/* `relative`, bo to do tego paska przypina się szerokie rozwinięcie menu.
   Bez tego szukałoby oparcia wyżej i rozpinało się na całą stronę. */
/* `relative`, bo to do tego paska przypina się szerokie rozwinięcie menu.
   Bez tego szukałoby oparcia wyżej i rozpinało się na całą stronę.

   `wrap`, bo liczba pozycji należy do klienta. Przy dziesięciu działach rząd
   nie mieści się już przy 1024 punktach, a przycisk „Menu” włącza się dopiero
   przy 860: między jednym a drugim pozycje wychodziły poza ekran i rozpychały
   stronę w bok. Zawijanie do drugiego wiersza działa niezależnie od tego, ile
   pozycji klient doda, a podniesienie progu trzeba by poprawiać przy każdym
   nowym dziale. */
.nav-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-item > a, .nav-item > button, .nav-item > .nav-naglowek-pusty {
  display: flex; align-items: center; gap: 8px;
  color: var(--white); text-decoration: none;
  padding: 16px 22px;
  font-weight: 500; font-size: 1rem;
  background: transparent; border: none;
  /* Wysokość wiersza wpisana wprost: przycisk ma własną domyślną, a odnośnik
     dziedziczy tę ze strony, przez co pozycje z rozwijanym menu siedziały
     dwa piksele wyżej od pozostałych. */
  line-height: 1.6;
  font-family: inherit; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: background 0.15s;
}
.nav-item > a:hover, .nav-item > button:hover,
.nav-item:hover > a, .nav-item:hover > button {
  background: var(--navy-light); border-bottom-color: var(--yellow);
}
.nav-item > a.active, .nav-item > button.active {
  border-bottom-color: var(--yellow); background: var(--navy-light);
}
/* Sekcja bez pozycji: etykieta przygaszona i nieklikalna, żeby było widać,
   że to zapowiedź menu, a nie gotowy odnośnik. */
.nav-item > .nav-naglowek-pusty { color: rgba(255, 255, 255, 0.6); cursor: default; border-bottom-color: transparent; }
.nav-item .chev { width: 12px; height: 12px; transition: transform 0.2s; }
.nav-item:hover .chev { transform: rotate(180deg); }

/* Rozwinięcie jest schowane przez `visibility`, a nie przez `display`, żeby
   dało się je płynnie pokazać. Zostaje przez to w układzie strony, więc gdy
   wystaje poza prawą krawędź, rozpycha cały dokument i strona zaczyna
   przesuwać się w bok, mimo że nikt tego menu nawet nie otworzył.

   Stąd dwie reguły niżej: rozwinięcie nigdy nie jest szersze od okna, a dwie
   ostatnie pozycje menu otwierają je w lewo. Menu układa klient, więc nie da
   się z góry powiedzieć, która pozycja stanie blisko krawędzi; dwie ostatnie
   to najprostsza reguła, która to załatwia bez skryptu. */
/* Otwieranie w lewo dotyczy tylko wąskich rozwinięć. Szerokie (mega-menu) i tak
   rozciągają się na całą szerokość nawigacji, więc `right: 0` psułoby im
   pozycję, wypychając je skrajnie w prawo. */
.nav-item:last-child .nav-dropdown:not(.wide),
.nav-item:nth-last-child(2) .nav-dropdown:not(.wide) { left: auto; right: 0; }

.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  background: var(--white);
  min-width: 280px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--yellow);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s;
  z-index: 100; padding: 8px 0;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block; padding: 10px 20px;
  color: var(--gray-900); text-decoration: none;
  font-size: 0.9375rem;
  border-left: 3px solid transparent;
}
.nav-dropdown a:hover {
  background: var(--gray-50); border-left-color: var(--blue); color: var(--navy);
}
.nav-dropdown-group { padding: 12px 0; border-top: 1px solid var(--gray-100); }
.nav-dropdown-group:first-child { border-top: none; padding-top: 8px; }
.nav-dropdown-title {
  display: block; padding: 4px 20px 8px;
  font-size: 0.75rem; font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* Szerokie rozwinięcie rozpina się na cały pasek menu, a nie wisi pod swoją
   pozycją. Pięćset dwadzieścia punktów pod pozycją stojącą w prawej połowie
   paska wychodziło poza okno i rozpychało dokument, a że menu układa klient,
   nie da się z góry powiedzieć, która pozycja tam stanie. Rozpięte na pasku
   nie ma jak wyjść poza stronę, niezależnie od tego, gdzie stoi i ile pozycji
   ma menu. Wygląda przy tym na zamierzone, bo tak właśnie robi się rozwinięcia
   z wieloma kolumnami. */
.nav-item:has(.nav-dropdown.wide) { position: static; }
.nav-dropdown.wide {
  left: 0; right: 0;
  width: auto;
  min-width: 0; max-width: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 8px; padding: 16px 24px;
}
.nav-dropdown.wide .nav-dropdown-group { border-top: none; padding: 8px 0; }

/* === ALERT BAR === */
.alert-bar {
  background: var(--yellow); color: var(--navy);
  padding: 10px 0; border-bottom: 2px solid var(--yellow-dark);
}
.alert-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  font-size: 0.9375rem; font-weight: 500;
}
/* Znak ostrzegawczy zamiast etykiety „Uwaga”: sam obrazek, bez tła i ramki,
   żeby pasek pozostał paskiem, a nie zlepkiem kafelków. */
.alert-znak { display: flex; align-items: center; flex-shrink: 0; line-height: 0; }
.alert-text { flex: 1; }
.alert-text strong { font-weight: 700; }
.alert-bar a { color: var(--navy); font-weight: 700; }

/* === HERO === */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  padding: 56px 0 48px;
  position: relative; overflow: hidden;
}
/* Tło hero: bardzo delikatny motyw chevronów ze znaku MZD (>>>), zamiast
   przypadkowych kół. Wiąże tło z marką. Duży, przycięty prawą krawędzią,
   ledwo widoczny (opacity 0.05). Rysunek jako data-URI SVG (CSP dopuszcza
   data: w img-src). */
.hero::before {
  content: ''; position: absolute; pointer-events: none;
  top: 50%; right: -70px; transform: translateY(-50%);
  width: 560px; height: 460px;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1874 1519' fill='%23fff'%3E%3Cpolygon points='1075.5,52.7 1425.47,52.7 1777.19,743.08 1425.47,1443.9 1075.5,1443.9 1437.66,742.2'/%3E%3Cpolygon points='594.94,52.7 944.91,52.7 1296.63,743.08 944.91,1443.9 594.94,1443.9 957.1,742.2'/%3E%3Cpolygon points='114.38,52.7 464.35,52.7 816.06,743.08 464.35,1443.9 114.38,1443.9 476.54,742.2'/%3E%3C/svg%3E") no-repeat right center / contain;
}
.hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  position: relative; z-index: 1;
}
.hero h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.75rem; font-weight: 700;
  line-height: 1.15; max-width: 720px;
  margin-bottom: 16px; letter-spacing: -0.5px;
}
/* Zdanie pod nagłówkiem. Selektor obejmuje też akapity w środku bloku:
   treść powitania pisze redaktor w edytorze, więc przychodzi jako akapity
   opakowane w blok, a nie jako jeden akapit z klasą. */
.hero .lead,
.hero .lead p {
  font-size: 1.0625rem; max-width: 680px;
  /* Bledsze od nagłówka: to wyjaśnienie pod tytułem, nie sam tytuł. Nawet przy
     72% bieli kontrast na granacie to ~9:1, więc z zapasem ponad WCAG AA. */
  color: rgba(255,255,255,0.72);
}
.hero .lead { margin-bottom: 36px; }
.hero .lead p + p { margin-top: 12px; }
.hero .lead a { color: var(--yellow); }
.hero-link a { color: var(--yellow); font-weight: 600; }

/* Hero zawiera powitanie i kafelki na wspólnym granatowym tle. Naturalna
   wysokość, nie pełny ekran: to strona urzędu, nie landing, a rozciąganie do
   dołu okna zostawiało zbyt dużo pustki. Odstępy symetryczne: tyle nad
   nagłówkiem, co pod kartami, i wyraźna, równa przerwa między zdaniem a kartami
   (marginesy zdania i kart zlewają się w jeden odstęp 44 px). */
.pierwszy-ekran { padding: 56px 0; }
/* Nagłówek hero: serifowy krój ma nad wersalikami „światło" (leading + nadwyżka
   ascentu nad wysokością wersalika, razem ~0.3em). Bez korekty odstęp nad
   tytułem wychodził większy niż pod kartami, mimo równych paddingów. Ujemny
   margines w em ściąga wersaliki do krawędzi paddingu i skaluje się z rozmiarem
   czcionki (A-/A/A+), więc góra i dół zostają optycznie równe. */
/* pre-line: redaktor może wymusić łamanie wiersza tytułu nową linią w treści
   (np. „Zarządzamy drogami” / „i ruchem drogowym w Zabrzu”). Bez tego tytuł
   łamie się tam, gdzie wypadnie z szerokości. */
.pierwszy-ekran .hero-inner > h1 { margin-top: -0.3em; white-space: pre-line; }
.pierwszy-ekran .boks-kafelki { margin-top: 44px; }
.boks-kafelki { margin: 0; }
/* Nagłówek kafelków (gdy redaktor go włączy) na granacie musi być jasny. */
.hero .boks-kafelki .boks-tytul { color: var(--white); }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 12px;
}
.quick-tile {
  background: var(--white);
  color: var(--navy);
  padding: 24px 20px;
  border-radius: 12px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 12px;
  transition: all 0.2s;
  border: 2px solid transparent;
  position: relative;
}
.quick-tile:hover {
  border-color: var(--yellow);
  background: var(--gray-100);
  color: var(--navy);
}
.quick-tile .icon-wrap {
  width: 48px; height: 48px;
  background: var(--blue);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
}
.quick-tile.urgent .icon-wrap { background: var(--red); }
.quick-tile.winter .icon-wrap { background: var(--navy); }
.quick-tile.info .icon-wrap { background: var(--yellow); color: var(--navy); }
.quick-tile.warm .icon-wrap { background: #ef8a00; }
/* Tytuł i opis karty to zwykłe spany, nie nagłówki: karta jest odnośnikiem,
   a jej tytuł to etykieta tego odnośnika, nie sekcja w strukturze strony.
   Dzięki temu kafelki nie wchodzą do konspektu nagłówków pod H1 hero. */
.quick-tile .qt-tekst { display: flex; flex-direction: column; gap: 4px; }
.quick-tile .qt-tytul { font-size: 1.125rem; font-weight: 700; }
/* Opis mniejszy i bledszy od tytułu: to wyjaśnienie, nie sama etykieta karty.
   #6b7280 jest jaśniejszy od --gray-600, ale wciąż spełnia WCAG AA (~4,8:1)
   na białym tle karty. */
.quick-tile .qt-opis { font-size: 0.8125rem; color: #6b7280; line-height: 1.45; }
.quick-tile .arrow {
  position: absolute; top: 20px; right: 20px;
  color: var(--gray-300);
  transition: transform 0.2s, color 0.2s;
}
.quick-tile:hover .arrow { color: var(--blue); transform: translateX(4px); }
/* Kafelek bez odnośnika nie reaguje na najechanie: to karta-zapowiedź,
   redaktor doda adres później. */
.quick-tile:not(a) { cursor: default; }
.quick-tile:not(a):hover { border-color: transparent; background: var(--white); }

/* Po najechaniu na klikalny kafel: karta unosi się, a tło ikony pogłębia
   barwę i lekko rośnie. Tylko dla kafli z odnośnikiem, więc kafel-zapowiedź
   bez adresu nie udaje interaktywnego. Bez cienia (unosimy przesunięciem). */
.quick-tile .icon-wrap { transition: background 0.18s, transform 0.18s; }
a.quick-tile:hover { transform: translateY(-3px); }
a.quick-tile:hover .icon-wrap { transform: scale(1.06); background: var(--blue-dark); }
a.quick-tile.urgent:hover .icon-wrap { background: #b30510; }
a.quick-tile.winter:hover .icon-wrap { background: var(--navy-light); }
a.quick-tile.info:hover   .icon-wrap { background: #eab600; }
a.quick-tile.warm:hover   .icon-wrap { background: #d97a00; }

/* === SECTIONS === */
main { background: var(--gray-50); }
.section { max-width: 1280px; margin: 0 auto; padding: 64px 24px; }
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--gray-200);
}
.section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem; font-weight: 700;
  color: var(--navy); letter-spacing: -0.5px;
}
.section-title .accent {
  display: inline-block; width: 6px; height: 28px;
  background: var(--yellow);
  margin-right: 12px; vertical-align: middle;
  border-radius: 2px;
}
.see-all {
  color: var(--blue-dark); font-weight: 500;
  text-decoration: none; font-size: 0.9375rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.see-all:hover { color: var(--navy); text-decoration: underline; }

/* === NEWS === */
.news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
/* Wykaz bez wyróżnionego wpisu: trzy równe kafle w rzędzie. Klasa jest
   dokładniejsza od samego `.news-grid`, więc węższe ekrany muszą ją nadpisać
   po nazwie; ustawienie kolumn w samym zapytaniu o szerokość nic by nie dało. */
.news-grid.rowne { grid-template-columns: repeat(3, 1fr); }
.news-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: all 0.2s;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.news-card:hover {
  border-color: var(--blue);
  background: var(--gray-100);
}
.news-card.featured { grid-row: span 2; }
.news-card .thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  position: relative; overflow: hidden;
}
.news-card.featured .thumb { aspect-ratio: 16/10; }
.news-card.featured.img1 .thumb { background: linear-gradient(135deg, #2e5b8e, #0a2540); }
.news-card.img2 .thumb { background: linear-gradient(135deg, #8e5a2e, #5b3a1d); }
.news-card.img3 .thumb { background: linear-gradient(135deg, #3e6b4f, #1d3a28); }
.news-card.img4 .thumb { background: linear-gradient(135deg, #5a3a7e, #2d1d3f); }
.news-card.img5 .thumb { background: linear-gradient(135deg, #7e5a3a, #3f2d1d); }

.news-card .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 60%);
}
/* Kafelek z prawdziwym zdjęciem wpisu. Barwne tło i przyciemnienie od dołu
   robiły w szablonie za brakujące zdjęcie i za czytelność etykiety działu
   leżącej na obrazie; przy zdjęciu redaktora jedno jest niepotrzebne,
   a drugie zmieniałoby jego barwy. */
.news-card .thumb.ze-zdjeciem { background: var(--gray-100); }
.news-card .thumb.ze-zdjeciem::after { content: none; }
.news-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-category {
  position: absolute; top: 12px; left: 12px;
  background: var(--white); color: var(--navy);
  padding: 4px 10px; border-radius: 4px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; z-index: 1;
}
.news-category.urgent { background: var(--red); color: var(--white); }
.news-category.info { background: var(--yellow); color: var(--navy); }

.news-content {
  padding: 18px 20px 22px;
  flex: 1; display: flex; flex-direction: column;
}
.news-card.featured .news-content { padding: 24px 28px 28px; }
.news-date {
  font-size: 0.8125rem; color: var(--gray-600);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.news-date::before {
  content: ''; width: 6px; height: 6px;
  background: var(--blue); border-radius: 50%; display: inline-block;
}
.news-title {
  font-size: 1.0625rem; font-weight: 600;
  line-height: 1.35; color: var(--navy); margin-bottom: 8px;
}
.news-card.featured .news-title {
  font-size: 1.5rem; line-height: 1.3;
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 700;
}
.news-excerpt { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; }

/* === SERVICES STRIP === */
.services-strip { background: var(--navy); color: var(--white); padding: 48px 0; }
.services-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.services-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.services-head h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.75rem; color: var(--white);
}
.services-head h2 .accent {
  display: inline-block; width: 6px; height: 24px;
  background: var(--yellow);
  margin-right: 12px; vertical-align: middle; border-radius: 2px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
}
.service-tile {
  background: var(--navy);
  padding: 24px;
  text-decoration: none; color: var(--white);
  display: flex; flex-direction: column; gap: 10px;
  transition: background 0.15s;
}
.service-tile:hover { background: var(--navy-light); color: var(--white); }
.service-tile-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2rem; font-weight: 700;
  color: var(--yellow); line-height: 1;
}
.service-tile h4 { font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.service-tile p { font-size: 0.8125rem; color: rgba(255,255,255,0.7); line-height: 1.4; }

/* === INFO GRID === */
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.info-card {
  background: var(--white);
  padding: 28px;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}
.info-card h3 {
  font-size: 1.125rem; font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--yellow);
  display: inline-block;
}
.contact-row {
  display: flex; gap: 12px;
  padding: 10px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--gray-100);
}
.contact-row:last-child { border-bottom: none; }
.contact-label { color: var(--gray-600); min-width: 90px; font-weight: 500; }
.contact-value { color: var(--gray-900); flex: 1; }
.contact-value strong { color: var(--navy); }

.link-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.link-list li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; font-size: 0.875rem;
  color: var(--gray-900); text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
}
.link-list li:last-child a { border-bottom: none; }
.link-list li a:hover { color: var(--blue-dark); }
.link-list li a::before { content: '→'; color: var(--yellow-dark); font-weight: 700; }

/* Karta „Serwisy” to boks treściowy: zdejmujemy tło, ramkę i margines boksu
   (karta sama je daje), chowamy jego ewentualny nagłówek (nagłówkiem karty jest
   H3), a listę odnośników stylizujemy jak link-list obok: strzałka, kreska pod
   wierszem. */
.info-card-boks .boks { background: none; border: none; padding: 0; margin: 0; }
.info-card-boks .boks-tytul { display: none; }
.info-card-boks ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.info-card-boks li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; font-size: 0.875rem;
  color: var(--gray-900); text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
}
.info-card-boks li:last-child a { border-bottom: none; }
.info-card-boks li a:hover { color: var(--blue-dark); }
.info-card-boks li a::before { content: '→'; color: var(--yellow-dark); font-weight: 700; }

/* === FOOTER === */
.footer {
  background: var(--gray-900);
  color: rgba(255, 255, 255, 0.72);
  padding: 40px 0 0; font-size: 0.875rem;
}
/* Lekka stopka: dane jednostki i pozioma nawigacja w jednym bloku, reszta pod
   linią. Bez kolumn Kontakt i Serwisy (kontakt i serwisy stoją na głównej). */
.footer-glowna {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 26px;
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px 32px;
}
/* Dane tożsamościowe w jednej linii. Nazwa jaśniejsza i pogrubiona, NIP i REGON
   przygaszone (biel 50% na tle #141a24 daje ~5,2:1, więc powyżej progu WCAG AA). */
/* Znak jednostki w stopce: mały i przygaszony, obok bloku z nazwą. */
.footer-jednostka { display: flex; align-items: center; gap: 14px; }
.footer-znak { width: 34px; height: auto; flex-shrink: 0; }
.footer-znak polygon { fill: rgba(255, 255, 255, 0.38); }
.footer-nazwa { color: var(--white); font-weight: 700; margin-bottom: 4px; }
.footer-dane { color: rgba(255, 255, 255, 0.68); line-height: 1.6; }
.footer-id { color: rgba(255, 255, 255, 0.5); }
/* Nawigacja poziomo, po prawej obok bloku z nazwą jednostki. Pozycje rozdzielone
   cienką kreską. */
.footer-nawigacja { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.footer-nawigacja a {
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  padding: 4px 16px; line-height: 1.2;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-nawigacja a:first-child { padding-left: 0; border-left: none; }
.footer-nawigacja a:hover { color: var(--yellow); text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0; font-size: 0.8125rem;
}
.footer-bottom-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px 24px;
}
.footer-prawa { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; }
/* Po prawej: odnośniki i podpis wykonawcy w jednym rzędzie. */
.footer-dodatki { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
/* Odnośniki dodatkowe w rzędzie, odstęp z gap (nie margin-left), żeby pierwszy
   nie miał zbędnego wcięcia, a podkreślenie na hover nie wychodziło poza tekst. */
.footer-linki { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
/* Odnośniki prawne mają nie rzucać się w oczy: kolor jak NIP (biel 50%, ~5,2:1,
   wciąż WCAG AA), a wyróżnienie dopiero po najechaniu. */
.footer-bottom a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.footer-bottom a:hover { color: var(--yellow); text-decoration: underline; }
/* Podpis wykonawcy: najcichszy element stopki, oddzielony od odnośników kreską
   (to „|” z projektu). Sama nazwa jest tu tylko dopiskiem. */
.footer-wykonanie {
  color: rgba(255, 255, 255, 0.5); font-size: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 18px;
}
.footer-wykonanie a { color: rgba(255, 255, 255, 0.5); }

/* =================================================================
   PAGE: KONTAKT
   ================================================================= */

/* Breadcrumbs */
/* Okruszki bez własnego tła i kreski. Na białym pasku między żółtym alertem
   a nagłówkiem robiły osobny, zbędny pas; teraz są przezroczyste i leżą na tym
   samym jasnym tle co nagłówek i treść, więc łączą się w jeden spokojny obszar
   pod menu. Działa też bez alertów: ciemne menu, a pod nim od razu jasne tło. */
.breadcrumbs {
  background: transparent;
  padding: 22px 0 0;
  font-size: 0.8125rem;
}
.breadcrumbs-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; color: var(--gray-600);
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after {
  content: '›'; color: var(--gray-300); font-size: 1rem;
}
.breadcrumbs a { color: var(--blue-dark); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li[aria-current] { color: var(--gray-900); font-weight: 500; }

/* Page header */
/* Nagłówek podstrony bez granatowego bloku: sam tytuł na jasnym tle, tuż pod
   ścieżką. Lżej, spójnie z treścią, bez osobnego pasa i bez ozdobnego koła. */
.page-header {
  background: transparent;
  color: var(--navy);
  padding: 16px 0 36px;
  position: relative;
}
.page-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.page-header h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.375rem; font-weight: 700;
  line-height: 1.15; color: var(--navy);
  letter-spacing: -0.5px; margin-bottom: 0;
}
.page-header p.lead {
  font-size: 1.0625rem; color: var(--gray-600);
  max-width: 640px; margin-top: 10px;
}

/* Contact urgent box */
/* Zgłoszenia awaryjne: zawarta ramka w szerokości treści (nie na całą szerokość
   okna), zaokrąglona, z lekkim pogłębieniem czerwieni gradientem, żeby czytała
   się mocno, ale nie krzykliwie. */
.urgent-contact-bar { max-width: 1280px; margin: 28px auto 0; padding: 0 24px; }
.urgent-contact-inner {
  background: linear-gradient(135deg, #d81020 0%, #b40c1a 100%);
  color: var(--white);
  border-radius: 14px; padding: 22px 30px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.urgent-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.16);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.urgent-content { flex: 1; }
.urgent-label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  opacity: 0.85;
}
.urgent-content h2 {
  font-size: 1.25rem; font-weight: 700;
  margin: 4px 0 2px;
  font-family: 'Source Serif 4', Georgia, serif;
}
.urgent-content p { font-size: 0.875rem; opacity: 0.9; }
.urgent-phone {
  background: var(--white);
  color: var(--red);
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.5rem; font-weight: 700;
  font-family: 'Source Serif 4', Georgia, serif;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.15s;
}
.urgent-phone:hover {
  background: var(--navy); color: var(--white);
  transform: translateY(-2px);
}

/* Main grid */
.contact-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}

/* Primary info block */
.primary-info {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  padding: 36px;
}
.primary-info h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem; color: var(--navy);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--yellow);
}
.primary-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.primary-info-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0;
}
.primary-info-item .icon {
  width: 40px; height: 40px;
  background: var(--gray-100);
  color: var(--blue-dark);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.primary-info-item .content { flex: 1; }
.primary-info-item .label {
  font-size: 0.75rem; font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.primary-info-item .value {
  font-size: 0.9375rem; color: var(--navy); font-weight: 500;
  line-height: 1.4;
}
/* Adres i telefon wyróżnione pogrubieniem: najważniejsze dane kontaktowe. */
.primary-info-item .value-mocne,
.primary-info-item .value-mocne a { font-weight: 700; }
.primary-info-item .value a {
  color: var(--blue-dark); text-decoration: none;
}
.primary-info-item .value a:hover { text-decoration: underline; }

/* Telefony do działów: treść z boksu, bez tła boksu i bez jego nagłówka
   (nagłówkiem sekcji jest H2). Bez ikon, bez wyszukiwarki. Wykaz jest
   pogrupowany (Dyrektor, Zastępca, Główny księgowy, Dział drogowy), więc
   płynie w dwóch kolumnach całymi grupami: `break-after: avoid` trzyma
   nagłówek grupy przy jej liście, `break-inside: avoid` nie pozwala rozerwać
   samej listy. Dzięki temu żadna grupa nie pęka na styku kolumn. */
.kontakt-dzialy .boks { margin: 0; border: none; background: none; padding: 0; }
.kontakt-dzialy .boks-tytul { display: none; }
.kontakt-dzialy .boks-tresc { columns: 2; column-gap: 56px; }
/* Nagłówki grup są H2 (treść boksu siedzi pod tytułem sekcji, też H2, więc
   bez przeskoku i bez uwagi lintera). Selektor zawężony do wnętrza boksu,
   żeby nie ruszać serifowego tytułu sekcji „Telefony do działów”. */
.kontakt-dzialy .boks-tresc h2 {
  break-after: avoid; page-break-after: avoid;
  font-family: inherit; letter-spacing: 0;
  margin: 0 0 8px; padding: 0 0 6px;
  font-size: 0.9375rem; font-weight: 700; color: var(--navy);
  border: none; border-bottom: 2px solid var(--yellow);
}
.kontakt-dzialy .boks-tresc h2:not(:first-child) { margin-top: 24px; }
.kontakt-dzialy ul {
  break-inside: avoid; page-break-inside: avoid;
  list-style: none; margin: 0; padding: 0;
}
.kontakt-dzialy li {
  padding: 5px 0; font-size: 0.875rem; color: var(--navy); line-height: 1.45;
}
.kontakt-dzialy li ul { margin: 4px 0 4px 16px; }
.kontakt-dzialy li ul li { padding: 3px 0; }
/* Numery to odnośniki tel: — kolor jak numer, bez ciągłego podkreślenia
   (podkreślenie dopiero na hover/focus), numer nie łamie się w połowie. */
.kontakt-dzialy a[href^="tel:"] {
  font-weight: 600; color: var(--blue-dark);
  text-decoration: none; white-space: nowrap;
}
.kontakt-dzialy a[href^="tel:"]:hover,
.kontakt-dzialy a[href^="tel:"]:focus-visible { text-decoration: underline; }

/* Treść strony kontaktu (ochrona danych): dopisek prawny, więc cicho, ale
   w ramce na pełną szerokość treści, żeby nie wisiał jako goły tekst. Nagłówek
   bez dużego serifowego akcentu, tekst mniejszy i przygaszony. */
.kontakt-tresc { padding-top: 8px; padding-bottom: 40px; }
.kontakt-tresc .tresc {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 24px 28px;
}
.kontakt-tresc .tresc h2 {
  font-family: inherit; font-size: 1rem; color: var(--navy);
  border-left: none; padding-left: 0; margin: 0 0 8px;
}
.kontakt-tresc .tresc p { font-size: 0.875rem; color: var(--gray-600); }
.kontakt-tresc .tresc p:last-child { margin-bottom: 0; }

/* Sidebar */
.sidebar-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  padding: 24px;
  margin-bottom: 20px;
}
.sidebar-card h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--yellow);
  display: inline-block;
}
.sidebar-card .chan {
  display: flex; gap: 12px;
  padding: 10px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--gray-100);
}
.sidebar-card .chan:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-card .chan-label {
  color: var(--gray-600); min-width: 100px; font-weight: 500;
}
.sidebar-card .chan-val {
  color: var(--gray-900); flex: 1; font-family: 'Inter', monospace;
  font-size: 0.8125rem; word-break: break-all;
}
.sidebar-card .chan-val strong { color: var(--navy); }

/* Map card */
.map-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Mapa wypełnia całą kartę: karta dobija do wysokości bloku danych obok, a bez
   tego iframe miał sztywne 260px i pod nim zostawało puste miejsce. */
.map-embed {
  position: relative;
  flex: 1; min-height: 320px;
  background: var(--gray-100);
}
.map-embed iframe {
  width: 100%; height: 100%; border: 0;
}
.map-card-body { padding: 18px 20px; }
.map-card-body h3 {
  font-size: 0.9375rem; font-weight: 600;
  color: var(--navy); margin-bottom: 4px;
}
.map-card-body p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.4; }
.map-card-body .route-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  background: var(--blue);
  color: var(--white); text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8125rem; font-weight: 600;
}
.map-card-body .route-btn:hover { background: var(--blue-dark); color: var(--white); }

/* === DEPARTMENTS === */
.departments-section {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 64px 0;
}
.departments-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.departments-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--gray-200);
  flex-wrap: wrap; gap: 16px;
}
.departments-head h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.75rem; font-weight: 700; color: var(--navy);
}
.departments-head h2 .accent {
  display: inline-block; width: 6px; height: 24px;
  background: var(--yellow);
  margin-right: 12px; vertical-align: middle; border-radius: 2px;
}
.dept-filter {
  display: flex; align-items: center; gap: 10px;
}
.dept-search {
  display: flex; align-items: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 2px 4px 2px 14px;
  min-width: 260px;
}
.dept-search input {
  border: none; background: transparent;
  padding: 8px; flex: 1;
  font-family: inherit; font-size: 0.875rem;
}
.dept-search input:focus { outline: none; }
.dept-search:focus-within { outline: 3px solid var(--yellow); }

.dept-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dept-group {
  background: var(--gray-50);
  border-radius: 12px;
  padding: 24px 28px;
}
.dept-group-title {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.dept-group-title .group-icon {
  width: 36px; height: 36px;
  background: var(--navy);
  color: var(--yellow);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.dept-group-title h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.125rem; font-weight: 700; color: var(--navy);
}
.dept-list {
  display: flex; flex-direction: column; gap: 2px;
}
.dept-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dept-item:hover { background: var(--white); }
.dept-item .name {
  font-size: 0.875rem; color: var(--gray-900); line-height: 1.3;
}
.dept-item.important .name { font-weight: 600; color: var(--navy); }
.dept-item .phone {
  font-family: 'Inter', monospace;
  font-size: 0.875rem;
  color: var(--blue-dark);
  text-decoration: none; font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--gray-200);
}
.dept-item .phone:hover {
  background: var(--yellow); color: var(--navy);
  border-color: var(--yellow-dark);
}
.dept-item .phones-multi {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}

/* IOD */
.iod-section {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 24px;
}
.iod-card {
  background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.iod-icon {
  width: 56px; height: 56px;
  background: var(--blue); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iod-body { flex: 1; min-width: 260px; }
.iod-body h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.125rem; font-weight: 700; color: var(--navy);
  margin-bottom: 6px;
}
.iod-body p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; }
.iod-body strong { color: var(--navy); }
.iod-contact a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600; font-size: 0.875rem;
}
.iod-contact a:hover { background: var(--blue-dark); color: var(--white); }

/* Contact form */
.form-section {
  background: var(--gray-50);
  padding: 64px 0;
  border-top: 1px solid var(--gray-200);
}
.form-inner {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
}
.form-card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  padding: 40px;
}
.form-card h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.625rem; color: var(--navy);
  margin-bottom: 8px;
}
.form-card .intro {
  font-size: 0.9375rem; color: var(--gray-600);
  margin-bottom: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--navy);
  display: flex; align-items: center; gap: 4px;
}
.form-field label .req { color: var(--red); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit; font-size: 0.9375rem;
  color: var(--gray-900);
  transition: border-color 0.15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
.form-field textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.form-rodo {
  font-size: 0.8125rem; color: var(--gray-600);
  line-height: 1.5; margin: 20px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.form-rodo input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.form-rodo a { color: var(--blue-dark); }
.form-submit {
  background: var(--navy);
  color: var(--white);
  padding: 14px 32px;
  border: none; border-radius: 8px;
  font-family: inherit;
  font-size: 1rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.form-submit:hover {
  background: var(--blue);
  transform: translateY(-1px);
}

/* === RESPONSIVE === */
/* === TREŚĆ PODSTRON === */
/* Dopisane przy wdrożeniu: zatwierdzony szablon statyczny miał stronę główną
   i kontakt, ale nie miał artykułu, wykazu ani mapy strony. Style trzymają się
   tych samych zmiennych i tej samej siatki co reszta projektu. */

.wpis { padding: 40px 0 56px; }
.wpis-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Strona do czytania: pojemnik zostaje pełnej szerokości, żeby lewa krawędź
 * treści pokrywała się ze ścieżką i tytułem (one też stoją przy lewej krawędzi).
 * Wąska jest sama kolumna czytania — nagłówek, lead i akapity dostają tę samą
 * stałą miarę i układają się do lewej, jedno pod drugim. Wcześniej węższy,
 * wyśrodkowany pojemnik odsuwał treść w prawo od tytułu; teraz wszystko rusza
 * z tego samego miejsca. Film, tabela i galeria mogą wyjść szerzej, bo ich się
 * nie czyta wierszami. */
.wpis-naglowek { margin-bottom: 28px; max-width: 50rem; }
.wpis-naglowek h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.125rem; line-height: 1.25; color: var(--navy);
}
.wpis-data { margin-top: 10px; color: var(--gray-600); font-size: 0.875rem; }
.wpis-wstep {
  font-size: 1.0625rem; line-height: 1.7; color: var(--gray-800);
  border-left: 4px solid var(--yellow);
  padding-left: 18px; margin-bottom: 28px; max-width: 50rem;
}
.wpis-wstep p + p { margin-top: 12px; }

/* Treść z edytora. Szerokość kolumny, czyli ile znaków wchodzi w wiersz.

   Przy długim wierszu oko gubi początek następnego: wraca z prawej krawędzi
   w lewo i trafia linijkę za wysoko albo za nisko. Przy zbyt krótkim czyta się
   szarpanie, bo wzrok przeskakuje częściej, niż zdąży złapać sens. Typografia
   od stu lat podaje jako wygodny zakres mniej więcej 45 do 75 znaków, a WCAG
   w kryterium 1.4.8 stawia górną granicę na 80.

   Stało tu wcześniej `74ch` i wyglądało na wartość z tego zakresu, ale nią nie
   było: jednostka `ch` mierzy szerokość znaku „0”, a cyfry w tym kroju są
   o jakąś czwartą część szersze od przeciętnej litery. Zmierzone na stronie:
   kolumna 794 punktów i około dziewięćdziesięciu znaków w wierszu, czyli
   kilkanaście ponad granicę z WCAG.

   Stąd wartość w `em`, a nie w punktach ani w `ch`. Serwis ma przyciski
   powiększania tekstu, a `em` rośnie razem z pismem, więc po powiększeniu
   w wierszu zostaje tyle samo znaków i kolumna nie robi się nagle za szeroka. */
.tresc { font-size: 1rem; line-height: 1.7; color: var(--gray-800); }
.tresc > * + * { margin-top: 18px; }

/* Wąski jest tekst, a nie cała treść.
 *
 * Ograniczenie postawione na całym pojemniku zwężało razem z akapitami także
 * film i tabelę, a wtedy pół ekranu z prawej strony zostawało puste i wpis
 * wyglądał, jakby się nie zmieścił. Wąski wiersz jest potrzebny do czytania;
 * film nie jest czytany wierszami i im większy, tym lepiej widać, co na nim
 * jest. Ograniczenie idzie więc na akapity, nagłówki i listy, a rzeczy szersze
 * z natury wychodzą na całą kolumnę wpisu. */
/* Stała miara zamiast procentu. Procent liczył się od pojemnika, więc ten sam
   akapit miał inną szerokość we wpisie (75% z 940) i we wstępie wykazu (75%
   z 1280) — dwie różne szerokości tekstu na sąsiednich podstronach. Stała
   wartość w em daje spójną kolumnę wszędzie i rośnie razem z powiększaniem
   pisma, więc liczba znaków w wierszu nie zmienia się po powiększeniu. */
.tresc > * { max-width: 50rem; }
.tresc > .boks,
.tresc > .boks-waski,
.tresc > .tabela-przewijana { max-width: none; }

/* Poniżej siedmiuset punktów udział przestaje mieć sens: trzy czwarte z małego
   ekranu to wąski pasek tekstu i szeroki margines obok niego. */
@media (max-width: 700px) {
  .tresc > * { max-width: none; }
}
.tresc h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5625rem; line-height: 1.3; color: var(--navy);
  margin-top: 38px;
  /* Kolorowy akcent sekcji, spójny z nagłówkami na stronie głównej. Redaktor
     wstawia zwykły „Nagłówek 2", a wyróżnienie przychodzi z arkusza. */
  border-left: 4px solid var(--yellow); padding-left: 14px;
}
.tresc h3 { font-size: 1.1875rem; line-height: 1.35; color: var(--navy); margin-top: 30px; }
.tresc ul, .tresc ol { padding-left: 24px; }
.tresc li + li { margin-top: 6px; }
.tresc li > p { margin: 0; }
.tresc blockquote {
  border-left: 4px solid var(--gray-200);
  padding: 4px 0 4px 18px; color: var(--gray-600);
}
/* Zdjęcie w treści zawsze z odstępem od tekstu. Bez tego akapit kleił się
   do krawędzi obrazka i wyglądało to na pomyłkę składu, a nie na zamiar. */
.tresc img { max-width: 100%; height: auto; margin: 6px 0 22px; }

/* Ułożenie zdjęcia wybrane w edytorze.
   Reguły stoją podwójnie, na zdjęciu i na opakowującym je odnośniku, bo
   opakowanie dokłada dopiero skrypt: bez niego pływać musi samo zdjęcie.
   Odstęp od strony tekstu jest większy niż od strony marginesu, bo to tam
   powstaje szczelina, którą widać. */
.tresc img[data-uklad="lewo"],
.tresc a[data-uklad="lewo"] { float: left; margin: 6px 26px 18px 0; }
.tresc img[data-uklad="prawo"],
.tresc a[data-uklad="prawo"] { float: right; margin: 6px 0 18px 26px; }
.tresc img[data-uklad="srodek"],
.tresc a[data-uklad="srodek"] { display: block; margin-left: auto; margin-right: auto; width: fit-content; }

/* Tekst nie może wejść na zdjęcie od dołu ani od góry następnej sekcji.
   Nagłówek zaczyna nową myśl, więc zaczyna ją pod zdjęciem, a nie obok. */
.tresc::after { content: ""; display: block; clear: both; }
.tresc h2, .tresc h3 { clear: both; }

/* Na wąskim ekranie oblewanie nie ma sensu: przy trzystu punktach szerokości
   zdjęcie na pół kolumny zostawia na tekst pięć znaków w wierszu. Zdjęcie
   wraca wtedy na całą szerokość, jedno pod drugim z tekstem. */
@media (max-width: 560px) {
  .tresc img[data-uklad],
  .tresc a[data-uklad] { float: none; width: auto; margin: 6px 0 22px; }
}
/* Zdjęcie w treści opakowane w odnośnik do podglądu. Blok, bo odnośnik liniowy
   dokłada pod obrazkiem miejsce na ogonki liter i wygląda to jak przypadkowy
   odstęp. Obramowanie dopiero przy najechaniu i przy ostrości: przy każdym
   zdjęciu z osobna robiłoby z tekstu galerię ramek. */
.tresc a[data-podglad] { display: inline-block; line-height: 0; outline-offset: 3px; }
.tresc a[data-podglad]:hover img { outline: 2px solid var(--blue); outline-offset: -2px; }
.tresc figure figcaption { font-size: 0.875rem; color: var(--gray-600); margin-top: 8px; }
.tresc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tresc th, .tresc td { border: 1px solid var(--gray-200); padding: 9px 12px; text-align: left; vertical-align: top; }
.tresc th { background: var(--gray-100); font-weight: 600; color: var(--navy); }

/* === PLIKI DO POBRANIA === */
/* Na całą szerokość kolumny, bez ograniczenia długości wiersza. Ograniczenie
   do 74 znaków jest dobre dla tekstu ciągłego, bo przy dłuższych wierszach oko
   gubi początek następnego. Tu nie ma wierszy do czytania: jest wykaz plików,
   w którym nazwa stoi z lewej, a format i waga z prawej, więc węższy pojemnik
   tylko odcinał wykaz od reszty wpisu i wyglądał na pomyłkę składu. */
.pliki-do-pobrania { margin-top: 44px; max-width: 50rem; }
.pliki-do-pobrania h2 {
  font-size: 1.25rem; color: var(--navy); margin-bottom: 14px;
  font-family: 'Source Serif 4', Georgia, serif;
}
.pliki-do-pobrania ul { list-style: none; border-top: 1px solid var(--gray-200); }
.pliki-do-pobrania li { border-bottom: 1px solid var(--gray-200); }
.pliki-do-pobrania a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px; text-decoration: none; color: var(--gray-900);
}
.pliki-do-pobrania a:hover { background: var(--gray-100); }
.pliki-do-pobrania a:hover .plik-nazwa { color: var(--blue-dark); text-decoration: underline; }
.plik-format {
  flex-shrink: 0; min-width: 52px; text-align: center;
  background: var(--navy); color: var(--white);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 5px 8px; border-radius: 3px;
}
.plik-nazwa { flex: 1; font-weight: 500; }
.plik-opis { color: var(--gray-600); font-size: 0.8125rem; white-space: nowrap; }

/* === GALERIA === */
.galeria {
  max-width: 50rem;
  margin-top: 40px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.galeria-kafel { margin: 0; border: 1px solid var(--gray-200); background: var(--white); }
.galeria-kafel > a { display: block; }
.galeria-kafel img { display: block; width: 100%; height: 150px; object-fit: cover; }
.galeria-kafel:hover { border-color: var(--blue); }
.galeria-kafel figcaption {
  padding: 8px 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--gray-600);
  border-top: 1px solid var(--gray-200);
}

/* Zdjęcia jedno pod drugim, każde w ramce szerokiej na kolumnę treści.
   Wysokość zostaje proporcjonalna: kadrowanie do stałej wysokości ma sens
   przy kaflu, który ma się zrównać z sąsiadem, a tutaj sąsiada nie ma
   i obcinałoby zdjęcie bez powodu. */
.galeria-kolumna { display: block; }
.galeria-kolumna .galeria-kafel { margin-bottom: 24px; background: var(--gray-100); }
.galeria-kolumna .galeria-kafel:last-child { margin-bottom: 0; }

/* Zdjęcie wyśrodkowane w ramce, we własnym rozmiarze.
   Węższe od kolumny zostaje węższe: rozciągnięte na siłę robi się miękkie
   i widać to gołym okiem, a redaktor wgrywa co popadnie, od skanu pisma
   po zdjęcie z telefonu. Zamiast rozciągać, dokładamy wokół spokojne tło,
   na którym mniejsze zdjęcie siedzi jak w passe-partout, a nie wygląda
   na pomyłkę. Szersze zatrzymuje się na szerokości kolumny i nigdy z niej
   nie wychodzi, bo max-width liczy się od pola wewnątrz ramki. */
.galeria-kolumna .galeria-kafel > a {
  display: flex; justify-content: center; align-items: center;
  padding: 12px;
}
.galeria-kolumna .galeria-kafel img {
  width: auto; max-width: 100%;
  height: auto; object-fit: initial;
}

/* Podpis pod zdjęciem, na białym pasku odciętym od ramki: ma się czytać
   jak podpis, a nie jak dalszy ciąg treści wpisu. */
.galeria-kolumna .galeria-kafel figcaption {
  background: var(--white);
  padding: 11px 14px;
  font-size: 0.875rem; line-height: 1.5;
}

/* === BOKSY OSADZONE W TREŚCI === */
.boks { margin: 28px 0; border: 1px solid var(--gray-200); background: var(--gray-100); padding: 20px 22px; }
.boks-tytul { font-size: 1.125rem; color: var(--navy); margin: 0 0 12px; }
.boks-link { margin: 12px 0 0; }
.boks-liczby ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.boks-liczby li { display: flex; flex-direction: column; gap: 2px; }
.boks-liczby b { font-size: 1.75rem; line-height: 1.1; color: var(--blue-dark); }
.boks-liczby span { font-weight: 600; color: var(--navy); }
.boks-liczby small { color: var(--gray-600); font-size: 0.8125rem; line-height: 1.45; }

/* Pasek liczbowy: granatowa karta statystyk w szerokości treści (nie na całą
   szerokość okna), wyrównana z resztą sekcji. Sekcja daje tło i zaokrąglenie,
   więc bazowe tło i ramkę boksu zdejmujemy. Żółte liczby, białe podpisy,
   przygaszone wyjaśnienia, tytuł z akcentem i kreską, pionowe separatory. */
.pasek-liczby { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.pasek-liczby-inner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 14px;
  padding: 44px 40px;
}
.pasek-liczby .boks { margin: 0; border: none; background: none; padding: 0; }
.pasek-liczby .boks-tytul {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.75rem; color: var(--white);
  border-left: 4px solid var(--yellow); padding: 0 0 0 14px; margin: 0 0 26px;
}
.pasek-liczby .boks-liczby ul {
  gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 30px;
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.pasek-liczby .boks-liczby li { flex: 1 1 0; flex-direction: row; justify-content: center; align-items: baseline; gap: 12px; padding: 0 44px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pasek-liczby .boks-liczby li:first-child { border-left: none; }
.pasek-liczby .boks-liczby b { font-size: 2.25rem; color: var(--yellow); }
.pasek-liczby .boks-liczby span { color: var(--white); }
.pasek-liczby .boks-liczby small { color: rgba(255, 255, 255, 0.62); }
@media (max-width: 640px) {
  .pasek-liczby-inner { padding: 30px 22px; }
  .pasek-liczby .boks-liczby ul { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .pasek-liczby .boks-liczby li { border-left: none; padding: 0 16px 0 0; }
}

/* Film osadzony w treści. Proporcje pilnuje `aspect-ratio`, a nie stała
   wysokość: 315 punktów wpisanych na sztywno zostawia na telefonie czarne pasy,
   a na szerokim ekranie znaczek odtwarzania wielkości połowy kadru. */
/* Film w treści: kadr mniejszy, ale na pasku szerokim na całą kolumnę.
 *
 * Film rozciągnięty na pełną szerokość dominował nad wpisem i wyglądał jak
 * główna rzecz na stronie, choć zwykle jest dodatkiem do tekstu. Zwężony sam
 * z siebie zostawiał z kolei pustkę obok. Delikatne tło pod spodem trzyma
 * szerokość kolumny, więc blok czyta się jako pełnoprawna część wpisu,
 * a samo okno filmu może być spokojnie mniejsze. */
.boks-film {
  padding: 22px;
  border: 0;
  background: var(--gray-100);
}
.boks-film .film { max-width: 620px; margin-left: auto; margin-right: auto; }
.film { position: relative; aspect-ratio: 16/9; background: #000; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Pasek podglądu wpisu roboczego. Barwa spoza palety serwisu i z rozmysłem:
   ma nie dać się pomylić z paskiem komunikatów dla mieszkańców, bo to jedyna
   rzecz na stronie, która mówi „tego jeszcze nikt nie widzi”. */
.pasek-podgladu {
  background: #6d28d9; color: #fff;
  padding: 10px 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 0.9375rem;
}
.pasek-podgladu strong { letter-spacing: 0.08em; }

/* === POWIĘKSZONE ZDJĘCIE === */
.podglad {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 20, 35, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px;
}
/* Własne `display` na warstwie bije `[hidden]` przeglądarki, więc chowamy
   jawnie. To samo dotyczy strzałek znikających przy jednym zdjęciu. */
.podglad[hidden], .podglad [hidden] { display: none; }
body.podglad-otwarty { overflow: hidden; }

.podglad-ramka {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.podglad-ramka img {
  display: block; max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain; background: #000;
}
.podglad-ramka figcaption {
  color: #fff; text-align: center; font-size: 0.9375rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px;
}
.podglad-licznik { color: #b9c6d6; font-size: 0.8125rem; }

.podglad button {
  position: absolute; z-index: 1;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer; font: inherit; line-height: 1;
  display: grid; place-items: center;
}
.podglad button:hover { background: rgba(255, 255, 255, 0.24); }
.podglad button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.podglad-zamknij { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 1.125rem; }
.podglad-krok { top: 50%; transform: translateY(-50%); width: 48px; height: 68px; font-size: 2rem; }
.podglad-wstecz { left: 10px; }
.podglad-dalej { right: 10px; }

@media (max-width: 640px) {
  .podglad { padding: 56px 10px 76px; }
  .podglad-krok { top: auto; bottom: 12px; transform: none; width: 56px; height: 46px; }
  .podglad-wstecz { left: 18px; }
  .podglad-dalej { right: 18px; }
  .podglad-ramka img { max-height: calc(100vh - 210px); }
}

/* === WYKAZY === */
.wykaz-pusty { color: var(--gray-600); padding: 20px 0; }

.wykaz-lista { display: flex; flex-direction: column; gap: 0; }
.wykaz-pozycja { position: relative; padding: 22px 0; border-bottom: 1px solid var(--gray-200); }
.wykaz-pozycja:first-child { border-top: 1px solid var(--gray-200); }
.wykaz-pozycja h2 { font-size: 1.25rem; line-height: 1.35; margin: 6px 0 8px; }
.wykaz-pozycja h2 a { color: var(--navy); text-decoration: none; }
.wykaz-pozycja h2 a:hover { color: var(--blue-dark); text-decoration: underline; }

.wykaz-pozycja.ze-zdjeciem {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start;
}
.wykaz-miniatura {
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--gray-100); border: 1px solid var(--gray-200);
}
.wykaz-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Odnośnik tytułu rozciągnięty na cały wiersz: zdjęcie ma być klikalne,
   ale drugi odnośnik prowadzący w to samo miejsce kazałby każdemu, kto
   przechodzi stronę klawiszem tabulacji, przejść przez wykaz dwa razy. */
.wykaz-pozycja h2 a::after { content: ''; position: absolute; inset: 0; }
.wykaz-pozycja:hover .wykaz-miniatura { border-color: var(--blue); }

.wykaz-zwarty { list-style: none; margin: 0; padding: 0; max-width: 50rem; border-top: 1px solid var(--gray-200); }
.wykaz-zwarty li {
  display: flex; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--gray-200);
}
.wykaz-zwarty li:hover { background: var(--gray-50); }
.wykaz-zwarty time {
  flex-shrink: 0; width: 96px; padding-left: 6px;
  color: var(--gray-600); font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.wykaz-zwarty a {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 10px 13px 6px;
  color: var(--navy); text-decoration: none; font-weight: 600;
}
.wykaz-zwarty a::after {
  content: '\203A'; color: var(--gray-300); font-size: 1.35rem; line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
.wykaz-zwarty a:hover { color: var(--blue-dark); }
.wykaz-zwarty a:hover::after { color: var(--blue-dark); transform: translateX(4px); }

/* === STRONICOWANIE === */
.stronicowanie {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 32px;
}
.stronicowanie a, .stronicowanie .biezaca {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--gray-200); background: var(--white);
  text-decoration: none; color: var(--gray-800); font-weight: 500;
}
.stronicowanie a:hover { border-color: var(--blue); color: var(--blue-dark); }
.stronicowanie .biezaca { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* === MAPA STRONY === */
.mapa-strony ul { list-style: none; }
.mapa-strony > ul { columns: 2; column-gap: 48px; }
.mapa-strony > ul > li { break-inside: avoid; margin-bottom: 22px; }
.mapa-strony ul ul { margin: 6px 0 0 16px; }
.mapa-strony li { margin-bottom: 5px; }
.mapa-naglowek, .mapa-strony > ul > li > a {
  display: block; font-weight: 600; color: var(--navy);
  padding-bottom: 6px; border-bottom: 2px solid var(--yellow);
  margin-bottom: 8px;
}

/* === BŁĄD 404 === */
.blad-szukanie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.blad-szukanie label { width: 100%; font-weight: 600; color: var(--navy); }
.blad-szukanie input {
  flex: 1; min-width: 220px; height: 44px; padding: 0 14px;
  border: 1px solid var(--gray-200); background: var(--white); font: inherit;
}
.blad-szukanie button {
  height: 44px; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--navy); color: var(--white); font: inherit; font-weight: 600;
}
.blad-szukanie button:hover { background: var(--blue-dark); }

/* === MENU NA TELEFONIE === */
/* Do 860 px pozycje nie mieszczą się w jednym rzędzie. Szablon zostawiał je
   w pasku przewijanym w bok, ale o takim pasku trzeba wiedzieć: połowa działów
   była poza ekranem i nic tego nie zapowiadało. Zamiast tego przycisk „Menu”
   i pełne drzewo rozwinięte pod nim. */
.nav-przycisk { display: none; }
.nav-grupa { display: none; }

@media (max-width: 860px) {
  /* Rozwinięcie menu selektorem rodzeństwa, nie `:has()`: pole wyboru, etykieta
     i lista są rodzeństwem wewnątrz `.nav`, więc `~` łapie je wszędzie, także
     w starszym Firefoksie sprzed obsługi `:has()`. Menu to jedyna droga po
     serwisie publicznym i musi działać w każdej przeglądarce. */
  .nav-inner { display: none; flex-direction: column; padding: 0; overflow: visible; }
  .nav-przelacznik:checked ~ .nav-inner { display: flex; }

  .nav-przycisk {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; color: var(--white);
    font-weight: 600; font-size: 1rem; cursor: pointer;
    border-bottom: 3px solid transparent;
  }
  .nav-przelacznik:checked ~ .nav-przycisk { border-bottom-color: var(--yellow); }
  /* Obramowanie przy wejściu klawiaturą: samo pole wyboru jest schowane,
     więc bez tego nie byłoby widać, gdzie stoi kursor. */
  .nav-przelacznik:focus-visible + .nav-przycisk { outline: 3px solid var(--yellow); outline-offset: -3px; }

  .nav-item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .nav-item > a { padding: 13px 16px; border-bottom: none; }
  /* Przycisk rozwijający znika: rozwinięcie i tak stoi otwarte. */
  .nav-item > button { display: none; }

  .nav-dropdown, .nav-dropdown.wide {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: block; width: auto; min-width: 0; background: transparent;
    border: 0; padding: 0;
  }
  .nav-dropdown a {
    color: rgba(255, 255, 255, 0.88);
    padding: 11px 16px 11px 30px; border: 0; font-size: 0.9375rem;
  }
  .nav-dropdown a:hover { background: var(--navy-light); color: var(--white); }
  .nav-grupa {
    display: block; padding: 13px 16px 4px;
    color: var(--white); font-weight: 600;
  }
  .nav-dropdown-group { border: 0; padding: 0; }
  .nav-dropdown-title {
    display: block; padding: 10px 16px 2px 30px;
    color: var(--yellow); font-size: 0.8125rem;
  }
  .nav-dropdown-group a { padding-left: 44px; }
}

/* === WPIS WYRÓŻNIONY ===
   Redaktor zaznacza wyróżnienie przy wpisie, a lista i tak stawia takie wpisy
   na górze. Wyróżnienie ma więc powiedzieć „to jest ważne", a nie „to jest
   pierwsze": stąd żółta krawędź marki, ta sama, którą serwis oznacza rzeczy
   pilne w pasku komunikatów, i mocniejszy tytuł. Bez cienia i bez powiększania,
   żeby lista nie zaczęła skakać. */
.wykaz-zwarty li.wyrozniony {
  border-left: 4px solid var(--yellow);
  padding-left: 12px;
  background: #fffdf5;
}
.wykaz-zwarty li.wyrozniony a { font-weight: 700; }

.wykaz-pozycja.wyrozniony {
  border-left: 4px solid var(--yellow);
  padding-left: 16px;
  background: #fffdf5;
}

.news-card.wyrozniony {
  border-color: var(--yellow);
  border-left-width: 4px;
}
.news-card.wyrozniony .news-title { color: var(--navy); font-weight: 700; }

/* Wstęp nad wykazem wpisów: ta sama szerokość i ten sam rytm co treść
   artykułu, tylko bez odstępu na dole, bo zaraz pod nim zaczyna się lista. */
.wykaz-wstep { padding: 36px 0 0; }
.wykaz-wstep .wpis-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* === WYSZUKIWANIE === */
.szukanie-formularz { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.szukanie-formularz label { width: 100%; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.szukanie-formularz input {
  flex: 1; min-width: 240px; height: 46px; padding: 0 14px;
  border: 1px solid var(--gray-200); background: var(--white); font: inherit;
}
.szukanie-formularz button {
  height: 46px; padding: 0 24px; border: 0; cursor: pointer;
  background: var(--navy); color: var(--white); font: inherit; font-weight: 600;
}
.szukanie-formularz button:hover { background: var(--blue-dark); }

.szukanie-podsumowanie, .szukanie-podpowiedz {
  margin: 24px 0 4px; color: var(--gray-600); max-width: 74ch;
}
.szukanie-podsumowanie b { color: var(--navy); }
.szukanie-rady { margin: 14px 0 0 20px; color: var(--gray-800); max-width: 74ch; }
.szukanie-rady li { margin-bottom: 6px; }

.szukanie-wyniki { list-style: none; margin-top: 18px; max-width: 74ch; }
.szukanie-pozycja { padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.szukanie-pozycja:first-child { border-top: 1px solid var(--gray-200); }
.szukanie-pozycja h2 { font-size: 1.1875rem; line-height: 1.35; }
.szukanie-pozycja h2 a { color: var(--navy); text-decoration: none; }
.szukanie-pozycja h2 a:hover { color: var(--blue-dark); text-decoration: underline; }
.szukanie-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 6px 0 8px; font-size: 0.8125rem; color: var(--gray-600);
}
/* Rodzaj trafienia plakietką, bo wyniki z trzech źródeł stoją wymieszane
   i inaczej nie widać, czy to wpis z datą, czy stała strona. */
.szukanie-rodzaj {
  background: var(--gray-100); color: var(--navy);
  padding: 2px 8px; border-radius: 3px; font-weight: 600;
}
.szukanie-fragment { color: var(--gray-800); line-height: 1.65; }

/* Podświetlenie trafienia. Żółte tło samo w sobie nie wystarcza osobie,
   która go nie widzi, więc dokładamy pogrubienie. */
mark { background: var(--yellow); color: var(--navy); font-weight: 600; padding: 0 2px; }

/* === ŻAŁOBA === */
/* Wyszarzenie całej strony filtrem, a nie podmianą kolorów: jedna reguła
   zamiast przeglądania każdego elementu, i działa też na zdjęcia. Kontrast
   zostaje ten sam, bo filtr zachowuje jasność. */
html.zaloba { filter: grayscale(1); }
html.zaloba body { background: var(--gray-100); }

/* Narzędzia dostępności pojawiają się dopiero, gdy działa skrypt. */
.a11y-narzedzia { display: flex; gap: 8px; align-items: center; }
.topbar-godziny { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 640px) {
  .wpis-naglowek h1 { font-size: 1.625rem; }
  .mapa-strony > ul { columns: 1; }
  .wykaz-zwarty li { flex-direction: column; gap: 2px; }
  .wykaz-zwarty time { width: auto; }
  .plik-opis { display: none; }
}
/* Menu rozwinięte dotknięciem albo klawiszem: te same właściwości co przy
   najechaniu, bo na telefonie najechania nie ma. */
.nav-item.otwarty .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Wysoki kontrast: czarne tło, biały tekst, żółte odnośniki i nagłówki.
   Wersja dla osób słabowidzących, nie „ciemny motyw”, więc kolory są skrajne
   celowo.

   Przejęcie jest **uniwersalne** (`*`), a nie po liście klas. Wcześniej lista
   wymieniała `.topbar`, `.header`, `.news-card` i garść innych, przez co każda
   nowa albo pominięta sekcja (hero, `.section`, boksy, galeria) zostawała
   w swoich jasnych barwach: `body` robił się czarny, ale sekcje malowały na nim
   własne tła i tryb wyglądał, jakby nie działał. Uniwersalna reguła obejmuje
   wszystko, także to, co dojdzie później, i nie trzeba jej pilnować przy każdej
   nowej części strony. `!important`, bo ma wygrać z każdym kolorem z osobna. */
html.wysoki-kontrast,
html.wysoki-kontrast * {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
/* Odnośniki i nagłówki na żółto: to one prowadzą przez stronę. */
html.wysoki-kontrast a,
html.wysoki-kontrast a *,
html.wysoki-kontrast h1, html.wysoki-kontrast h2, html.wysoki-kontrast h3,
html.wysoki-kontrast h4, html.wysoki-kontrast h5, html.wysoki-kontrast h6 { color: #ffcc00 !important; }
html.wysoki-kontrast a { text-decoration: underline; }

/* Znak MZD w kontraście: strzałki jednolicie białe. Domyślnie mają gradient
   granat -> szary + jasną ramkę; na czarnym tle ciemne wypełnienia znikają,
   świeci tylko ramka .fil3 (stąd „dziwna ramka"). Jeden jasny kolor daje
   czysty, płynny kształt >>>. Bije też stan hover, bo ma !important. */
html.wysoki-kontrast .pictogram .fil0,
html.wysoki-kontrast .pictogram .fil1,
html.wysoki-kontrast .pictogram .fil2,
html.wysoki-kontrast .pictogram .fil3 { fill: #fff !important; }

/* Przyciski i pola: żółte na czarnym z białą ramką, żeby dało się je odróżnić
   od zwykłego tekstu, gdy wszystko inne jest czarno-białe. */
html.wysoki-kontrast button,
html.wysoki-kontrast .btn,
html.wysoki-kontrast [type="submit"],
html.wysoki-kontrast .search-btn { background-color: #ffcc00 !important; color: #000 !important; border: 2px solid #fff !important; }
html.wysoki-kontrast button *,
html.wysoki-kontrast .btn *,
html.wysoki-kontrast .search-btn * { color: #000 !important; }
html.wysoki-kontrast input,
html.wysoki-kontrast select,
html.wysoki-kontrast textarea { border: 1px solid #fff !important; }

/* Wyszukiwarka w nagłówku: obwódkę niesie cała zaokrąglona pigułka, a pole
   w środku jest bez ramki. Inaczej biała ramka pola robiła prostokąt wewnątrz
   pigułki bez obwódki, a obok stał okrągły żółty przycisk — prostokąt gryzł
   się z kołem. Teraz kształt pigułki zgadza się z okrągłym przyciskiem. */
html.wysoki-kontrast .header-search { border: 2px solid #fff !important; }
html.wysoki-kontrast .header-search input { border: 0 !important; }

/* Pasek utrudnień zostaje żółty z czarnym napisem: to ostrzeżenie i ma bić
   po oczach także w tym trybie. */
html.wysoki-kontrast .alert-bar,
html.wysoki-kontrast .alert-bar * { background-color: #ffcc00 !important; color: #000 !important; }

/* Widoczna obwódka wejścia klawiaturą, w żółci, żeby nie zlała się z ramkami. */
html.wysoki-kontrast :focus-visible { outline: 3px solid #ffcc00 !important; outline-offset: 2px; }

/* Zdjęcia zostają sobą: to treść, nie ozdoba, i nie wolno ich zaczerniać. */
html.wysoki-kontrast img { filter: none !important; }

/* Herb Zabrza w kontraście: podmieniamy na osobny biały wariant (logo mono
   ma fill:white). Filtr brightness/invert na kolorowym SVG dawał na żywo biały
   prostokąt zamiast sylwetki, więc zamiast przerabiać kolory podmieniamy sam
   obrazek przez content: url() (to <img>, więc to działa jak swap). */
html.wysoki-kontrast .logo-miasto img { content: url(logo-zabrze-mono.svg); }

/* Logo BIP w kontraście: znak jest jednokolorowy i przezroczysty (bez tła
   jak stary herb), więc brightness(0)+invert daje czysty biały „bip", spójnie
   z herbem miasta. Bije ogólną regułę `img { filter: none }` wyższą
   specyficznością i !important, żeby nie zostać czerwonym na czarnym. */
html.wysoki-kontrast .bip-logo img { background-color: transparent !important; filter: brightness(0) invert(1) !important; }

/* Ikony rysowane kreską (strzałki menu, lupa, ikony w pasku) bez czarnego tła
   z reguły uniwersalnej: inaczej robią się z nich czarne kwadraty. Rysunek
   niesie kolor tekstu (biały), a w odnośniku żółty. */
html.wysoki-kontrast svg { background-color: transparent !important; }

/* Żałoba ustępuje kontrastowi: wyszarzenie zjadłoby cały sens tego trybu. */
html.zaloba.wysoki-kontrast { filter: none; }
/* === KONIEC PODSTRON === */
@media (max-width: 1024px) {
  .news-grid, .news-grid.rowne { grid-template-columns: 1fr 1fr; }
  .news-card.featured { grid-row: auto; grid-column: span 2; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  /* Na węższych ekranach mniejsze odstępy i ciaśniejsza przerwa nad kartami. */
  .pierwszy-ekran { padding: 40px 0; }
  .pierwszy-ekran .boks-kafelki { margin-top: 32px; }
  .contact-layout { grid-template-columns: 1fr; }
  .dept-groups { grid-template-columns: 1fr; }
  .primary-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar-left { gap: 12px; font-size: 0.8125rem; }
  .hero h1 { font-size: 2rem; }
  .hero .lead, .hero .lead p { font-size: 1rem; }
  .quick-actions { grid-template-columns: 1fr; }
  .news-grid, .news-grid.rowne { grid-template-columns: 1fr; }
  .news-card.featured { grid-column: auto; }
  .wykaz-pozycja.ze-zdjeciem { grid-template-columns: 110px 1fr; gap: 14px; }
  .services-grid { grid-template-columns: 1fr; }
  .section { padding: 40px 16px; }
  .section-title { font-size: 1.625rem; }
  .header-inner { flex-direction: column; gap: 20px; align-items: flex-start; }
  .header-search { width: 100%; }
  /* Logo miasta znika na telefonie: obok godła jednostki nie mieści się już
     w nagłówku, a jest dodatkiem, nie głównym znakiem. */
  .logos-kreska, .logo-miasto { display: none; }
  .logo-mzd .brand-text .line1 { font-size: 1rem; }
  .logo-mzd .brand-text .line2 { font-size: 0.875rem; }
  .alert-bar-inner { flex-wrap: wrap; }
  /* Nagłówek sekcji i odnośnik „wszystkie” jeden pod drugim: obok siebie
     zabierały sobie miejsce i tytuł łamał się w połowie wyrazu. */
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .um-block { display: none; }
  .page-header h1 { font-size: 1.75rem; }
  .urgent-contact-inner { flex-direction: column; text-align: center; }
  .urgent-phone { font-size: 1.25rem; padding: 12px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
  .primary-info { padding: 24px; }
  .departments-head { flex-direction: column; align-items: flex-start; }
  .dept-search { width: 100%; min-width: 0; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

/* === WYRÓWNANIE I WYRÓŻNIENIA W TREŚCI === */

/* Środek i prawa strona akapitu. Bez justowania, świadomie: rozciąga odstępy
   między wyrazami i tworzy w tekście pionowe „rzeki” białego miejsca, które
   przy dysleksji potrafią rozbić czytanie. Wytyczne WCAG wprost tego odradzają,
   więc przycisku do justowania nie ma w edytorze i nie ma tu dla niego reguły. */
.tresc [data-wyrownanie="srodek"] { text-align: center; }
.tresc [data-wyrownanie="prawo"] { text-align: right; }

/* Wyróżnienia tekstu barwą serwisu. Redaktor wybiera „styl 1”, a nie kolor,
   więc odcień siedzi tutaj: zmiana kolorystyki serwisu nie wymaga tknięcia
   ani jednej treści w bazie.

   Barwy ciemniejsze od podstawowych z palety, bo te muszą przejść próg
   kontrastu 4.5:1 na białym tle jako zwykły tekst. Dla porównania: --blue
   ma na bieli około 3.3:1 i jako tekst by nie przeszedł.

   Do tego grubszy krój, a nie sam kolor. Wyróżnienie oparte wyłącznie na
   barwie znika dla osoby, która tej barwy nie widzi, a przy monochromatycznym
   wydruku znika dla wszystkich. */
.tresc [data-styl="1"] { color: var(--blue-dark); font-weight: 600; }
.tresc [data-styl="2"] { color: var(--red-dark); font-weight: 600; }

/* === TABELA W TREŚCI NA WĄSKIM EKRANIE ===
   Tabela z pięcioma kolumnami nie zmieści się na telefonie i nic tego nie
   zmieni. Bez tego pojemnika rozpychała całą stronę: pasek przewijania
   pojawiał się przy oknie, więc w bok jechał także nagłówek i menu, i wyglądało
   to na zepsutą stronę, a nie na szeroką tabelę. Teraz przewija się sama tabela.

   Kreska po prawej stronie pojemnika pokazuje, że treść jest ucięta i że jest
   co przewijać; bez niej tabela wygląda po prostu na zbyt wąską. */
.tabela-przewijana {
  overflow-x: auto;
  margin: 22px 0;
  border-right: 1px solid var(--gray-200);
}
.tabela-przewijana:focus-visible { outline: var(--focus); outline-offset: 2px; }
.tabela-przewijana table { margin: 0; }

/* Kolumny nie schodzą poniżej szerokości, przy której treść komórki zamienia
   się w pionowy słupek liter. Wtedy dopiero włącza się przewijanie. */
.tresc .tabela-przewijana th,
.tresc .tabela-przewijana td { min-width: 8ch; }

/* Zwężony boks osadzony w treści. Szerokość niesie opakowanie, a nie sam boks:
   boks ma własny wygląd, a film własne proporcje kadru, i mieszanie tego
   z ustawieniem „ile miejsca zajmuje w kolumnie” kończy się tym, że jedno
   psuje drugie. Wyśrodkowany zawsze, bo zwężony i dosunięty do krawędzi
   wygląda na przesunięty przez pomyłkę.

   Na wąskim ekranie zwężanie się wyłącza: przy trzystu punktach szerokości
   film na połowie kolumny to znaczek, w którym nic nie widać. */
.boks-waski { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .boks-waski { max-width: none !important; }
}

/* Mapa osadzona w treści. Proporcje z zapasem na wysokość, bo mapa bez
   wysokości zapada się do zera: ramka nie ma własnych proporcji tak jak film,
   a treścią steruje Google po swojej stronie. */
.boks-mapa { padding: 0; border: 0; background: none; }
.mapa-figura { margin: 0; }
.mapa { position: relative; aspect-ratio: 16/10; background: var(--gray-100); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Podpis pod mapą: co na niej widać. Ten sam tekst niesie atrybut `title`
   ramki dla czytnika ekranu, więc opis jest i widoczny, i dostępny. */
.mapa-opis { margin-top: 8px; font-size: 0.875rem; color: var(--gray-600); }
@media (max-width: 640px) {
  .mapa { aspect-ratio: 4/3; }
}

/* Odstep tytul -> tresc/karty daje sam naglowek podstrony (jego padding-bottom).
   Bez tego sumowal sie z gornym paddingiem nastepnej sekcji (.wpis 40, .section 64)
   i miedzy tytulem a trescia robila sie pusta polowa ekranu. */
.page-header + .wpis,
.page-header + .section,
.page-header + .wykaz-wstep { padding-top: 0; }

/* Odnosniki do plikow w tresci (href .../plik/ID). Dwa konteksty:
   - w srodku zdania (domyslnie): zwiezly odnosnik z mala ikona, plynie z tekstem
     i nie rozbija akapitu;
   - samodzielnie (sam w akapicie albo pozycji listy): pelna "karta pobierania"
     z ramka i tlem. Rozpoznajemy po wzorcu /plik/ w adresie. */
.tresc a[href*="/plik/"] {
  color: var(--blue-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.tresc a[href*="/plik/"]::before {
  content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0;
  margin-right: 4px; vertical-align: -0.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3Cline x1='9' y1='11' x2='12' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3Cline x1='9' y1='11' x2='12' y2='11'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Samodzielny link do pliku (sam w akapicie/pozycji listy) -> karta pobierania. */
.tresc p > a[href*="/plik/"]:only-child,
.tresc li > a[href*="/plik/"]:only-child {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 13px; margin: 6px 0;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tresc p > a[href*="/plik/"]:only-child::before,
.tresc li > a[href*="/plik/"]:only-child::before {
  width: 20px; height: 20px; margin-right: 0; vertical-align: middle;
}
.tresc p > a[href*="/plik/"]:only-child:hover,
.tresc li > a[href*="/plik/"]:only-child:hover {
  border-color: var(--blue); background: #eef6fb; text-decoration: none;
}

/* Odnosniki menu prowadzace poza serwis (target="_blank" = nowe okno) dostaja
   delikatna strzalke "na zewnatrz". Robimy to po atrybucie, wiec kazdy link
   zewnetrzny - teraz i w przyszlosci - oznacza sie sam, bez zmian w szablonie.
   Ikona jako maska (nie tekst), wiec czytnik ekranu nie czyta jej jako znaku;
   kolor bierze z linku i jest przygaszona, zeby nie krzyczala. */
.nav a[target="_blank"]::after {
  content: ''; display: inline-block;
  width: 0.68em; height: 0.68em; margin-left: 5px;
  vertical-align: baseline; flex-shrink: 0;
  background: currentColor; opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bieżąca strona w rozwijanym menu: wyróżniona kolorem i belką z lewej, tak jak
   po najechaniu, ale na stałe, żeby było widać, w którym dziale się jest. */
.nav-dropdown a.active {
  color: var(--blue-dark); font-weight: 700;
  border-left-color: var(--blue); background: var(--gray-50);
}

/* Kilka tabel jedna pod drugą (np. budżet) ma mieć te same szerokości kolumn,
   żeby się do siebie równały niezależnie od liczby wierszy. Układ stały +
   ustalone kolumny skrajne (numer, kwota), środkowa opisowa bierze resztę.
   Idzie przez CSS, a nie atrybuty w treści, więc przeżywa edycję w panelu. */
.tresc .tabela-przewijana table { table-layout: fixed; }
.tresc .tabela-przewijana th:first-child,
.tresc .tabela-przewijana td:first-child { width: 165px; }
.tresc .tabela-przewijana th:last-child,
.tresc .tabela-przewijana td:last-child { width: 160px; }

/* ===================================================================
   ZGODA NA PLIKI COOKIE + BRAMKOWANIE OSADZEŃ ZEWNĘTRZNYCH
   =================================================================== */
.cookie-baner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white); border-top: 3px solid var(--yellow); padding: 18px 24px;
}
.cookie-baner-inner {
  max-width: 1280px; margin: 0 auto; display: flex; gap: 28px;
  align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.cookie-baner-tresc { flex: 1 1 520px; min-width: 0; }
.cookie-tytul { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cookie-opis { font-size: 0.875rem; line-height: 1.55; color: var(--gray-800); max-width: 80ch; }
.cookie-opis a { color: var(--blue-dark); }
.cookie-kategorie { margin-top: 16px; gap: 12px; }
.cookie-kategorie:not([hidden]) { display: grid; }
.cookie-kat { border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 14px; background: var(--gray-50); }
.cookie-kat-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-kat-nazwa { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); font-size: 0.9375rem; cursor: pointer; }
.cookie-kat-nazwa input { width: 16px; height: 16px; }
.cookie-kat-zawsze { font-size: 0.6875rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em; }
.cookie-kat-opis { font-size: 0.8125rem; color: var(--gray-600); margin-top: 6px; line-height: 1.5; }
.cookie-akcje { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.cookie-btn {
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cookie-btn-glowny, .osadzenie-pokaz { background: var(--navy); color: var(--white); border-color: var(--navy); }
.cookie-btn-glowny:hover, .osadzenie-pokaz:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.cookie-btn-drugi { background: transparent; color: var(--navy); border-color: var(--gray-300); }
.cookie-btn-drugi:hover { border-color: var(--navy); }
.cookie-baner :focus-visible, .osadzenie :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Placeholder osadzenia zewnetrznego (mapa/film) do czasu zgody. Wypelnia
   pojemnik .mapa/.film/.map-embed, zeby uklad nie skakal po zaladowaniu. */
.osadzenie {
  height: 100%; width: 100%; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: 10px;
}
.osadzenie-zgoda { text-align: center; padding: 24px; max-width: 480px; }
.osadzenie-info { font-size: 0.875rem; color: var(--gray-800); line-height: 1.5; margin-bottom: 14px; }
.osadzenie-akcje { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.osadzenie-ustawienia { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.8125rem; color: var(--blue-dark); text-decoration: underline; }
.osadzenie-noskrypt { margin-top: 12px; font-size: 0.8125rem; }
.osadzenie-noskrypt a { color: var(--blue-dark); }

/* Przycisk „Ustawienia cookie" w stopce wyglada jak pozostale odnosniki. */
.footer-cookie {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: rgba(255, 255, 255, 0.5); text-decoration: none;
}
.footer-cookie:hover { color: var(--yellow); text-decoration: underline; }

/* Uklad wykazu „Kafelki z nazwa": rownej wysokosci plytki z sama nazwa wpisu,
   wysrodkowana. Dla dzialow bedacych spisem wejsc do podstron. */
.wykaz-plytki { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wykaz-plytka {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 120px; padding: 22px 20px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
  text-decoration: none; color: var(--navy); font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wykaz-plytka:hover, .wykaz-plytka:focus-visible { border-color: var(--blue); background: var(--gray-50); color: var(--blue-dark); }
.wykaz-plytka.wyrozniony { border-left: 4px solid var(--yellow); }

/* Banner cookie na telefonie: ogranicz wysokosc (przy rozwinietych kategoriach
   nie zaslania calego ekranu) i rozloz przyciski na pelna szerokosc wierszy. */
@media (max-width: 640px) {
  .cookie-baner { max-height: 82vh; overflow-y: auto; padding: 16px; }
  .cookie-baner-inner { gap: 16px; }
  .cookie-akcje { width: 100%; }
  .cookie-akcje .cookie-btn { flex: 1 1 140px; }
}

/* ===================================================================
   POPRAWKI MOBILNE (2026-08, przegląd na telefonie)
   Zebrane niżej, żeby czytać je jako jeden zestaw i łatwo wgrać na FTP.
   =================================================================== */
@media (max-width: 860px) {
  /* #5 Aktywna pozycja w menu mobilnym: na granatowym tle jasne tło z desktopu
     dawało biały prostokąt. Tu akcent marki: żółty tekst + wcięta belka. */
  .nav-dropdown a.active,
  .nav-item > a.active {
    color: var(--yellow); font-weight: 700;
    background: var(--navy-light);
    box-shadow: inset 3px 0 0 var(--yellow);
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  /* #1 Górny pasek: na telefonie zostaje sam telefon (klik = połączenie).
     E-mail i godziny są w stopce i na Kontakcie, więc tu tylko rozpychały pasek. */
  .topbar { padding: 6px 0; }
  .topbar-left a[href^="mailto:"],
  .topbar-godziny { display: none; }

  /* #2 Przesuwanie lewo-prawo. Dwa źródła:
     a) wyszukiwarka ma min-width:260px i z logiem BIP nie mieściła się w szerokości;
     b) niełamliwy e-mail w karcie „Kontakt” rozpychał kartę. */
  .header-akcje { width: 100%; }
  .header-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .header-search input { min-width: 0; }
  .contact-value,
  .info-card-boks li a,
  .link-list li a,
  .footer-dane { overflow-wrap: anywhere; }

  /* #3 Stopka: dane jednostki i nawigacja jedno pod drugim, a same pozycje
     w równej siatce 2 kolumn (6 pozycji = 3 równe rzędy), bez kresek z lewej. */
  .footer-glowna { flex-direction: column; align-items: stretch; }
  .footer-nawigacja { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .footer-nawigacja a { border-left: none; padding: 10px 0; }

  /* #4 / #6 Wykaz zwarty: przy zmianie na kolumnę zostawało align-items:center
     z reguły bazowej, więc krótkie pozycje (np. „Budżet 2026") lądowały na środku.
     Rozciągamy pozycję na pełną szerokość: tytuł z lewej, „›" z prawej. */
  .wykaz-zwarty li { align-items: stretch; }

  /* #7 Tabela w treści (budżet): układ stały + sztywne 165/160 px na telefonie
     ściskał środkową kolumnę do zera i tekst nachodził na sąsiedni. Na wąskim
     ekranie znosimy sztywne szerokości i dajemy tabeli min-width, żeby zamiast
     nachodzić po prostu się przewijała (kreska z prawej to sygnalizuje). */
  .tresc .tabela-przewijana table { min-width: 30rem; }
  .tresc .tabela-przewijana th:first-child,
  .tresc .tabela-przewijana td:first-child,
  .tresc .tabela-przewijana th:last-child,
  .tresc .tabela-przewijana td:last-child { width: auto; }

  /* #8 Telefony do działów: dwie kolumny na telefonie robiły z każdej połowy
     wąski słupek. Jedna kolumna czyta się bez łamania numerów. */
  .kontakt-dzialy .boks-tresc { columns: 1; }
}

/* ===================================================================
   POPRAWKI MOBILNE cz.2 (2026-08, drugi przegląd na telefonie)
   =================================================================== */
@media (max-width: 640px) {
  /* #2 Górny granatowy pasek: zostają tylko Facebook + narzędzia dostępności.
     Telefon (oraz e-mail i godziny) znika stąd — dane są w nagłówku niżej,
     w stopce i na stronie Kontakt. */
  .topbar-left { display: none; }

  /* Logo miasta wraca do nagłówka na telefonie: godło + nazwa jednostki,
     cienka pionowa kreska, małe kolorowe logo Zabrza obok. Zmniejszamy godło
     i odstępy, żeby cały rząd zmieścił się bez łamania. */
  .logos { gap: 10px; }
  .logo-mzd { gap: 10px; }
  .logo-mzd .pictogram { width: 42px; }
  .logos-kreska { display: block; min-height: 30px; }
  .logo-miasto { display: flex; }
  .logo-miasto img { height: 22px; }

  /* #1 Przyciski w banerze cookie jeden pod drugim: równa wysokość i szerokość,
     a najdłuższy napis mieści się w jednej linii. */
  .cookie-akcje { flex-direction: column; align-items: stretch; }
  .cookie-akcje .cookie-btn { flex: none; width: 100%; }

  /* #3 Podpis wykonawcy sam w wierszu: sieroca pionowa kreska z lewej („|")
     ma sens tylko w rzędzie z odnośnikami. Na telefonie znika. */
  .footer-wykonanie { border-left: none; padding-left: 0; }
}

/* ===================================================================
   POPRAWKI MOBILNE cz.3 (2026-08) — wyśrodkowanie nagłówka na telefonie
   =================================================================== */
@media (max-width: 640px) {
  /* Wszystko nad „Menu" wyśrodkowane w poziomie: pasek (Facebook + dostępność)
     oraz rząd godło + nazwa jednostki │ kreska │ logo Zabrza. */
  .topbar-inner { justify-content: center; }
  .header-inner { align-items: center; }
  .logos { justify-content: center; }
}