/* ============================================================
   Warstwa odświeżająca — zdejmowanie chwytów z poprzedniej dekady

   Trzy nawyki ciągnęły układ w stronę 2015 roku: linia pod każdym
   nagłówkiem, obudowa wokół każdego bloku treści i jednakowe odstępy
   niezależnie od tego, czy sekcja jest rozwinięta.
   ============================================================ */

/* --- 1. Linia pod nagłówkiem sekcji --------------------------------- */
/*
 * Czarna kreska pod każdym nagłówkiem była motywem kierunku „Kataster”:
 * dokument urzędowy jest liniowany. Powtórzona czternaście razy na jednej
 * stronie przestała cokolwiek znaczyć i zaczęła wyglądać jak separator
 * z szablonu. Hierarchię niesie skala i światło.
 */
.clause__head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}

/* Linia zostaje tam, gdzie faktycznie oddziela nagłówek od danych:
   nad tabelą lub listą wyliczeniową, nie pod każdym tytułem. */
.clause__head + .facts-table,
.clause__head + .steps { border-top: 1px solid var(--ink); }

/* --- 2. Sekcje zwinięte --------------------------------------------- */
/*
 * Odstępy sekcji są liczone dla treści rozwiniętej. Po zwinięciu zostawał
 * nagłówek, przełącznik i kilkaset pikseli pustki. Zwinięta sekcja dostaje
 * własny, ciaśniejszy rytm.
 */
.section:has(.fold:not([open])) {
  padding-block: clamp(var(--s-6), 3vw, var(--s-7));
}
.section:has(.fold:not([open])) .clause__head {
  margin-bottom: var(--s-4);
}

/* --- 3. Kafelki rejonów --------------------------------------------- */
/* Ta sama poprawka co przy kartach ofert: ramka i tło robiły z każdego
   bloku panel. Zostaje siatka rozdzielona włoskową linią i światłem. */
.region {
  border: 0;
  border-radius: 0;
  background: none;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--border);
  gap: var(--s-3);
}
.region:hover {
  background: none;
  border-top-color: var(--ink);
}
.region__name { font-size: 1.25rem; letter-spacing: -0.01em; }

/* --- 4. Rytm sekcji -------------------------------------------------- */
/* Jednakowy odstęp wszędzie to monotonia. Sekcje dowodowe dostają więcej
   ciszy niż listingi — to już było w tokenach, ale nagłówki zjadały efekt
   własnym marginesem. */
.section--evidence { padding-block: var(--pad-evidence); }

/* --- Stopka ---------------------------------------------------------- */
/*
 * Reset list w gka.css celuje w `ul[class]`, czyli świadomie omija listy
 * bez klasy, żeby nie odbierać wypunktowania listom w tekście ciągłym.
 * Listy nawigacyjne w stopce klasy nie mają, więc zostawały im domyślne
 * kropki i wcięcie przeglądarki. To samo z podkreśleniem: reguła `a`
 * ustawia kolor, ale nie znosi dekoracji, a w stopce nie ma komponentu,
 * który by ją zdjął.
 */
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul a {
  text-decoration: none;
  text-underline-offset: 0.18em;
}
.footer ul a:hover,
.footer ul a:focus-visible { text-decoration: underline; }

/* Przy dotyku każdy odnośnik ma 44 px wysokości (wymóg dostępności),
   więc dodatkowy odstęp między wierszami tylko rozciąga stopkę. */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
}

/*
 * Stopka na telefonie ma pięć bloków jeden pod drugim, a każdy odnośnik
 * musi mieć 44 px wysokości. Wysokość bierze się więc z treści i z celu
 * dotykowego, nie z rozjazdu układu — dlatego skracamy to, co da się
 * skrócić bez straty: odstęp między blokami i marginesy własne stopki.
 * Zwiększanie odstępu (próbowałem 48 px) tylko pogarszało sprawę.
 */
@media (max-width: 639px) {
  .footer__grid { gap: var(--s-6); }
  .footer { padding-block: var(--s-7) var(--s-5); margin-top: var(--s-6); }
  /* Krótkie listy rejonów mieszczą się w dwóch kolumnach; dłuższe pozycje
     zostają w jednej, bo łamanie nazwy na dwa wiersze psuje skanowanie. */
  .footer__col--short ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Zwijane kolumny stopki ------------------------------------------ */
.fcol__head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
}
.fcol__head::-webkit-details-marker { display: none; }
.fcol__head h3 { margin-bottom: 0; }

/* Znak rozwinięcia rysujemy sami, bo domyślny trójkąt przeglądarki nie
   daje się ustawić po prawej ani zestroić z resztą typografii. */
.fcol__head::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms var(--ease-out-quart, ease);
  opacity: .7;
}
.fcol[open] .fcol__head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.fcol__head:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Powyżej progu zwijanie nie ma sensu: kolumny stoją obok siebie i pionu
   nie brakuje. Nagłówek wraca do roli zwykłego tytułu kolumny. */
@media (min-width: 640px) {
  .fcol__head { cursor: default; min-height: 0; pointer-events: none; }
  .fcol__head::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fcol__head::after { transition: none; }
}

/* --- Wiersze wyliczeń ------------------------------------------------ */
/*
 * `soften.css` opakowywał każdy wiersz w białą płytę z ramką, promieniem
 * i cieniem — ten sam chwyt, który zdjąłem z kart ofert i kafelków rejonów.
 * Komponent `.rows` występuje na sześciu stronach, więc powielał wrażenie
 * panelu Bootstrapa w całym serwisie.
 *
 * Wiersz wraca do formy listy: rozdziela go włoskowa linia i światło.
 * Numer porządkowy niesie tu znaczenie (kolejność kroków, numeracja
 * mechanizmów), więc zostaje.
 */
.row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
  transition: border-color 160ms var(--ease-out-quart, ease);
}
.row:hover {
  background: none;
  box-shadow: none;
  border-bottom-color: var(--ink);
}
.rows > .row:last-child { border-bottom: 0; }

/* Wiersz oznaczony ostrzeżeniem zachowuje wyróżnienie, ale linią u góry,
   nie płytą: ma zwracać uwagę, nie udawać osobnej karty. */
/* Wyróżnienie zdjęte 2026-09-03. Kreska w kolorze ostrzegawczym nad jednym
   punktem listy czytała się jak przypadkowa różnica składu, a nie jak sygnał:
   osoba sprawdzająca zapytała, czy to celowe. Sygnał, który wymaga
   tłumaczenia, nie jest sygnałem. Treść punktu mówi to samo słowami. */

/* --- Kafelki dzielnic (brief §18) ------------------------------------ */
/*
 * Zastępują kafelki rejonów i schematyczną mapę Kenii. Liczba ofert idzie
 * z taksonomii, więc nie ma tu nic do rozsynchronizowania z katalogiem.
 */
.districts {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: var(--s-6);
}
.district {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 160ms var(--ease-out-quart, ease);
}
.district:hover { border-top-color: var(--ink); }
.district__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.district__count { color: var(--muted); font-size: var(--fs-sm); }
.district__go {
  font-size: var(--fs-sm);
  color: var(--accent-dark);
  font-weight: 600;
  margin-top: var(--s-2);
}
.district:hover .district__go { color: var(--ink); }