/* ==========================================================================
   Wizytówka jednostki — /obszar/<klucz>

   Ten sam język graficzny co strona dnia i mapa problemów: mały nagłówek
   sekcji wersalikami w kolorze akcentu, treść w kartach na tle akcentu.
   Człowiek wchodzi tu po JEDEN konkret — kto to prowadzi, jakie ma ulice —
   i musi go znaleźć wzrokiem, nie czytając.

   Kolory wyłącznie ze zmiennych motywu: serwis ma tryb ciemny i tryb
   wysokiego kontrastu.
   ========================================================================== */

#obszar h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s2);
  line-height: 1.15;
}

.obszar__rodzaj {
  padding: 2px var(--s3);
  border: 1px solid var(--obwodka-mocna);
  border-radius: var(--r-pill);
  color: var(--tekst-przygaszony);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.obszar__wstep {
  max-width: 62ch;
  margin: 0 0 var(--s5);
  color: var(--tekst-przygaszony);
}

/* --- Liczby --- */

.obszar__liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s5);
}

.obszar__liczba {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--s3) var(--s4);
  border-left: 5px solid var(--obwodka-mocna);
  border-radius: var(--r-m);
  background: var(--akcent-tlo);
}

/* Osoba jest ważniejsza od liczb — do niej się idzie ze sprawą. */
.obszar__liczba--osoba {
  border-left-color: var(--akcent);
}

.obszar__liczba dt {
  color: var(--tekst-przygaszony);
  font-size: 12px;
  font-weight: var(--weight-semi-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.obszar__liczba dd {
  margin: var(--s1) 0 0;
  font-size: 20px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.obszar__liczba dd span {
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--tekst-przygaszony);
}

/* --- Mapka --- */

.obszar__figura {
  margin: 0 0 var(--s5);
}

.obszar__plotno {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tlo-delikatne);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
}

.obszar__figura figcaption {
  margin-top: var(--s2);
  color: var(--tekst-przygaszony);
  font-size: 13px;
}

.obszar__ksztalt {
  fill: var(--tlo-karta);
  stroke: var(--tlo);
  stroke-width: 1.2;
}

/* Ta jednostka na tle pozostałych. Kolor nie jest jedynym nośnikiem:
   nazwa stoi w nagłówku strony, a każdy kształt ma podpowiedź. */
.obszar__ksztalt--ten {
  fill: var(--akcent);
  fill-opacity: 0.55;
  stroke: var(--akcent);
  stroke-width: 2;
}

.obszar__granica {
  fill: none;
  stroke: var(--tekst-przygaszony);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
  opacity: 0.5;
}

.obszar__droga {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.obszar__droga--krajowa    { stroke: var(--blad); stroke-width: 2; }
.obszar__droga--wojewodzka { stroke: var(--ostrzezenie); stroke-width: 1.4; }
.obszar__droga--autostrada,
.obszar__droga--ekspresowa { stroke: var(--tekst-przygaszony); stroke-width: 1.6; }

.obszar__pin {
  fill: var(--blad);
  stroke: var(--tlo-karta);
  stroke-width: 1.5;
}

/* --- Zbliżenie na jednostkę: nazwy ulic --- */

.obszar__kropka {
  fill: var(--tekst-przygaszony);
  opacity: 0.6;
}

/* Obrys tłem mapy zamiast prostokąta pod napisem: nazwa czyta się nad każdym
   wypełnieniem i nie zasłania kształtu pod spodem. */
.obszar__ulica-podpis {
  font-size: 11px;
  font-weight: var(--weight-semi-bold);
  fill: var(--tekst);
  paint-order: stroke;
  stroke: var(--tlo-delikatne);
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
}

/* --- Sekcje --- */

.obszar__sekcja {
  margin-bottom: var(--s5);
}

.obszar__sekcja h2 {
  margin: 0 0 var(--s3);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--akcent);
}

.obszar__uwaga {
  max-width: 68ch;
  margin: 0 0 var(--s3);
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

.obszar__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0;
}

.obszar__chip {
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--tlo-delikatne);
  color: var(--tekst);
  font-size: 13px;
}

/* --- Zdarzenia --- */

.obszar__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.obszar__zdarzenie {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-left: var(--s3);
  border-left: 3px solid var(--obwodka);
  font-size: 15px;
}

.obszar__zdarzenie--prad { border-left-color: var(--ostrzezenie); }
.obszar__zdarzenie--woda { border-left-color: var(--akcent); }
.obszar__zdarzenie--ruch { border-left-color: var(--blad); }
/* Ten sam fiolet co na mapie problemow - komunikat urzedu ma wygladac tak samo
   na obu stronach, inaczej ten sam pasek znaczy raz to, raz co innego. */
.obszar__zdarzenie--info { border-left-color: #7c5cd0; }

.obszar__rodzaj-zdarzenia {
  color: var(--akcent);
  font-size: 12px;
  font-weight: var(--weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.obszar__data {
  font-variant-numeric: tabular-nums;
  color: var(--tekst-przygaszony);
  font-size: 13px;
}

.obszar__tytul {
  flex: 1 1 16ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Źródła --- */

.obszar__zrodla ul {
  max-width: 68ch;
  margin: 0 0 var(--s3);
  padding-left: var(--s4);
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

.obszar__zrodla li {
  margin-bottom: var(--s2);
}

.obszar__zrodla strong {
  color: var(--tekst);
}

.obszar__cisza {
  max-width: 62ch;
  padding: var(--s4);
  border: 1px dashed var(--obwodka);
  border-radius: var(--r-m);
  color: var(--tekst-przygaszony);
}

.obszar__stopka {
  padding-top: var(--s3);
  border-top: 1px solid var(--obwodka);
  color: var(--tekst-przygaszony);
  font-size: 14px;
}

@media (max-width: 640px) {
  .obszar__liczby {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .obszar__liczba {
    padding: var(--s3);
  }
}

@media print {
  .obszar__stopka {
    display: none;
  }

  .obszar__liczba {
    background: none;
    border-left-color: #999;
  }
}

/* --- Tytuł i źródło WEWNĄTRZ obrazka ---
   Mapa krąży po grupach jako zrzut ekranu, bez treści strony. Podpis dopisany
   w HTML-u zostaje na stronie; ten jedzie razem z obrazkiem. */

.obszar__tytul-svg {
  font-size: 15px;
  font-weight: var(--weight-bold);
  fill: var(--tekst);
  text-anchor: middle;
}

/* 7 px, nie 9. Plotno ma 1000 px szerokosci, a wyswietla sie na 1800 -
   kazdy stopien pisma rosnie tu prawie dwukrotnie. Przy 9 px podpis
   o zrodle byl grubszy od nazw jednostek na mapie, czyli od tresci. */
.obszar__zrodlo-svg {
  font-size: 7px;
  fill: var(--tekst-przygaszony);
}