/* ==========================================================================
   Portal BSP Politechniki Poznańskiej — arkusz stylów
   Kolory podstawowe wg SIW PP: #006288 (podstawowy), #BF5327 (uzupełniający)
   Zasada UI-006 / A11Y-004: status nigdy nie jest przekazywany wyłącznie kolorem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TYPOGRAFIA — jedno miejsce do zmiany kroju pisma

   Portal składany jest krojem Open Sans, serwowanym z własnego serwera
   (pliki w zasoby/czcionki/). Powód wyboru: pełny, zaprojektowany zestaw
   polskich znaków diakrytycznych — ą, ę, ł, ń, ó, ś, ź, ż są rysowane razem
   z resztą alfabetu, a nie doklejane z zastępczego kroju. Arial i Rockwell,
   używane wcześniej, miały właśnie ten problem.

   Zanim krój się wczyta, tekst wyświetla się rodzimym krojem systemu
   (Segoe UI, SF Pro, Roboto) — dzięki font-display: swap strona nigdy nie
   pokazuje pustego miejsca zamiast tekstu.

   Aby zmienić krój, podmień wartość --font-tekst i --font-naglowki oraz wgraj
   odpowiednie pliki woff2 do zasoby/czcionki/. Alternatywy sprawdzone pod kątem
   polskich znaków:
     Inter          — najpopularniejszy współczesny krój interfejsowy
     Source Sans 3  — krój Adobe, bardzo dobra czytelność w małych stopniach
     Lato           — zaprojektowany przez polskiego twórcę, wzorcowe diakrytyki
   Nie korzystamy z zewnętrznych CDN ze względu na RODO (adres IP użytkownika
   trafiałby do podmiotu trzeciego) i na politykę bezpieczeństwa treści (CSP).
   -------------------------------------------------------------------------- */

/* Open Sans — licencja Apache 2.0, pliki serwowane z wlasnego serwera.
   Nie korzystamy z CDN Google Fonts: kazde takie zadanie przekazuje adres IP
   uzytkownika do zewnetrznego podmiotu, co jest problemem na gruncie RODO.
   Wagi 400 i 700 wystarcza — dla font-weight 600 przegladarka dobierze 700. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('czcionki/open-sans-400-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:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('czcionki/open-sans-400-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:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('czcionki/open-sans-700-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:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('czcionki/open-sans-700-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 {
  --font-tekst: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Arial, sans-serif;
  --font-naglowki: var(--font-tekst);

  --blekit: #006288;
  --blekit-ciemny: #004866;
  --granat: #00384f;
  --blekit-jasny: #eaf4f8;
  --blekit-mglisty: #f4f9fb;
  --cegla: #bf5327;
  --cegla-ciemna: #98401d;
  --cegla-jasna: #fbeee8;

  --tekst: #1d2a31;
  --tekst-przygaszony: #5c6b74;
  --linia: #dde4e8;
  --linia-mocna: #c3cfd6;
  --tlo: #f6f8f9;
  --powierzchnia: #ffffff;

  --sukces: #1f6b46;
  --ostrzezenie: #8a5200;
  --blad: #a4271d;

  --szer-maks: 1240px;
  --promien: 10px;
  --promien-maly: 6px;

  --cien-1: 0 1px 2px rgba(0, 56, 79, .06), 0 2px 8px rgba(0, 56, 79, .05);
  --cien-2: 0 2px 4px rgba(0, 56, 79, .06), 0 10px 24px rgba(0, 56, 79, .09);
  --cien-3: 0 4px 8px rgba(0, 56, 79, .07), 0 18px 40px rgba(0, 56, 79, .13);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Kotwice nie chowają się pod przyklejoną nawigacją. */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.62;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  /* Łamiemy tylko to, co naprawdę nie mieści się w kolumnie — `anywhere`
     rozrywałoby zwykłe wyrazy w środku i psuło skład na wąskich ekranach. */
  overflow-wrap: break-word;
}

a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--cegla);
  outline-offset: 2px;
  border-radius: 3px;
}

.pomijalny {
  position: absolute; left: -9999px; top: 0;
  background: var(--granat); color: #fff; padding: 12px 18px; z-index: 200;
  border-radius: 0 0 var(--promien-maly) 0;
}
.pomijalny:focus { left: 0; }

.kontener { width: min(var(--szer-maks), calc(100% - 44px)); margin-inline: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-naglowki);
  color: var(--granat);
  line-height: 1.18;
  letter-spacing: -.018em;
  font-weight: 700;
}

h2 { font-weight: 700; }

.nadtytul {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blekit); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em;
}
.nadtytul::before { content: ""; width: 26px; height: 3px; background: var(--cegla); border-radius: 2px; }

.lead { font-size: 1.1rem; color: #39474f; line-height: 1.58; }
.przygaszony { color: var(--tekst-przygaszony); }
.male { font-size: .86rem; }

/* ---------- Nagłówek serwisu ---------- */

.gorny-pasek { background: var(--granat); color: #fff; font-size: .8rem; }
.gorny-pasek .kontener {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.gorny-pasek a {
  color: #cfe3ec; text-decoration: none; padding: 4px 11px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.gorny-pasek a:hover { color: #fff; text-decoration: underline; }
.gorny-pasek__linki { display: flex; }

.marka { background: #fff; border-bottom: 1px solid var(--linia); }
.marka .kontener {
  display: flex; align-items: center; gap: 22px;
  min-height: 96px; padding: 14px 0; flex-wrap: wrap;
}
.marka__znak { width: min(210px, 40vw); flex: 0 0 auto; }
.marka__kreska { width: 1px; align-self: stretch; background: var(--linia); }
.marka__tytul { text-decoration: none; min-width: 0; }
.marka__tytul h1 { margin: 0; font-size: clamp(1.1rem, 2.1vw, 1.5rem); }
.marka__tytul p { margin: 3px 0 0; color: var(--tekst-przygaszony); font-size: .88rem; }

/* ---------- Nawigacja ---------- */

.nawigacja {
  position: sticky; top: 0; z-index: 60;
  background: var(--blekit);
  box-shadow: 0 2px 10px rgba(0, 56, 79, .16);
}
.nawigacja .kontener {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 12px; min-height: 52px;
}
.nawigacja__linki { display: flex; align-items: stretch; flex-wrap: wrap; }
.nawigacja__linki a {
  display: flex; align-items: center; padding: 0 14px;
  color: #eaf4f8; text-decoration: none; font-size: .88rem; font-weight: 600;
  position: relative; white-space: nowrap;
}
.nawigacja__linki a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nawigacja__linki a[aria-current="page"] { color: #fff; background: rgba(0, 0, 0, .16); }
.nawigacja__linki a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; background: var(--cegla); border-radius: 2px 2px 0 0;
}
.nawigacja__akcje { display: flex; align-items: center; }
.nawigacja__przelacznik {
  display: none; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--promien-maly);
  font: inherit; font-weight: 600; padding: 9px 14px; margin: 7px 0; cursor: pointer;
}

/* ---------- Podnawigacja ---------- */

.podnawigacja { background: #fff; border-bottom: 1px solid var(--linia); }
.podnawigacja .kontener { display: flex; align-items: center; gap: 18px; min-height: 48px; }
.podnawigacja__etykieta {
  font-weight: 700; color: var(--granat); font-size: .8rem;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .06em;
}
.podnawigacja__linki { display: flex; align-self: stretch; overflow-x: auto; min-width: 0; }
.podnawigacja__linki a {
  display: flex; align-items: center; padding: 0 13px; white-space: nowrap;
  font-size: .86rem; font-weight: 600; color: var(--tekst-przygaszony);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.podnawigacja__linki a:hover { color: var(--blekit); }
.podnawigacja__linki a[aria-current="page"] { color: var(--blekit); border-bottom-color: var(--cegla); }

/* ---------- Przyciski ---------- */

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 1px solid transparent;
  border-radius: var(--promien-maly);
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.przycisk--glowny { background: var(--cegla); color: #fff; box-shadow: var(--cien-1); }
.przycisk--glowny:hover { background: var(--cegla-ciemna); box-shadow: var(--cien-2); }
.przycisk--blekit { background: var(--blekit); color: #fff; }
.przycisk--blekit:hover { background: var(--blekit-ciemny); }
.przycisk--jasny { background: #fff; color: var(--granat); border-color: var(--linia-mocna); }
.przycisk--jasny:hover { background: var(--blekit-jasny); border-color: var(--blekit); }
.przycisk--maly { min-height: 38px; padding: 0 14px; font-size: .86rem; }
.nawigacja .przycisk { margin: 7px 0; }

.link-tekstowy {
  color: var(--blekit-ciemny); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--cegla);
}
.link-tekstowy:hover { color: var(--cegla-ciemna); }

/* ---------- Sekcje ---------- */

.sekcja { padding: 56px 0; }
.sekcja--biala { background: #fff; }
.sekcja--mglista { background: var(--blekit-mglisty); }
.sekcja--granat { background: var(--granat); color: #dbeaf1; }
.sekcja--granat h2, .sekcja--granat h3 { color: #fff; }
.sekcja--waska { padding: 32px 0; }

.sekcja__glowa {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; margin-bottom: 26px; flex-wrap: wrap;
}
.sekcja__glowa h2 { margin: 8px 0 0; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.sekcja__glowa p { margin: 10px 0 0; max-width: 760px; color: var(--tekst-przygaszony); }

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(1100px 380px at 88% -8%, rgba(0, 98, 136, .13), transparent 60%),
    radial-gradient(760px 300px at 0% 110%, rgba(191, 83, 39, .09), transparent 60%),
    #fff;
  border-bottom: 1px solid var(--linia);
  padding: 64px 0 60px;
}
.hero .kontener {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 48px; align-items: center;
}
.hero h2 {
  margin: 16px 0 18px;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: -.032em; line-height: 1.06;
}
.hero p { max-width: 640px; font-size: 1.08rem; color: #3b4952; margin: 0; }
.hero__akcje { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero__obraz img { border-radius: var(--promien); box-shadow: var(--cien-3); }

.naglowek-strony {
  background: linear-gradient(180deg, #fff 0%, var(--blekit-mglisty) 100%);
  border-bottom: 1px solid var(--linia);
  padding: 32px 0 30px;
}
.naglowek-strony .okruchy { font-size: .84rem; color: var(--tekst-przygaszony); margin: 0 0 10px; }
.naglowek-strony .okruchy a { color: var(--blekit); text-decoration: none; }
.naglowek-strony .okruchy a:hover { text-decoration: underline; }
.naglowek-strony h2 { margin: 0; font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
.naglowek-strony p { max-width: 820px; margin: 12px 0 0; color: var(--tekst-przygaszony); font-size: 1.04rem; }

/* ---------- Siatki i karty ---------- */

.siatka-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.siatka-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.siatka-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stos { display: grid; gap: 16px; }

.karta {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1);
  overflow: hidden;
}
.karta__tresc { padding: 22px; }
.karta h3 { margin: 0 0 8px; font-size: 1.12rem; }
.karta p { margin: 0 0 12px; color: var(--tekst-przygaszony); font-size: .95rem; }

a.karta {
  text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
a.karta:hover { box-shadow: var(--cien-3); transform: translateY(-3px); border-color: var(--linia-mocna); }

.karta--skrot {
  padding: 24px; min-height: 172px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-top: 4px solid var(--blekit);
}
.karta--skrot:hover { border-top-color: var(--cegla); }
.strzalka { margin-top: 16px; color: var(--cegla-ciemna); font-weight: 700; font-size: .89rem; }

.karta__obraz img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

/* ---------- Etykiety ---------- */

.etykieta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}
.etykieta--blekit { background: var(--blekit-jasny); color: var(--blekit-ciemny); }
.etykieta--cegla { background: var(--cegla-jasna); color: var(--cegla-ciemna); }
.etykieta--zielen { background: #e6f2ec; color: var(--sukces); }
.etykieta--szara { background: #eef1f3; color: #47555d; }
.etykieta--ostrzezenie { background: #fdf3e3; color: var(--ostrzezenie); }

.etykiety { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
a.etykieta { text-decoration: none; }
a.etykieta:hover { background: var(--blekit); color: #fff; }

/* ---------- Obszary ---------- */

.obszar-karta { display: flex; flex-direction: column; text-decoration: none; }
.obszar-karta__pasek { height: 6px; }
.obszar-naglowek {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 38px; align-items: center;
}

.lista-zagadnien { margin: 0; padding-left: 20px; }
.lista-zagadnien li { margin-bottom: 7px; color: var(--tekst-przygaszony); }

/* ---------- Jednostki i koła ---------- */

.jednostka {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); overflow: hidden;
}
.jednostka__glowa {
  padding: 24px; border-bottom: 1px solid var(--linia);
  display: flex; justify-content: space-between; gap: 22px;
  align-items: flex-start; flex-wrap: wrap;
}
.jednostka__glowa h3 { margin: 10px 0 6px; font-size: 1.3rem; }
.jednostka__glowa p { margin: 0; color: var(--tekst-przygaszony); }
.jednostka__tresc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); }
.jednostka__tresc > div { padding: 22px; }
.jednostka__tresc > div + div { border-left: 1px solid var(--linia); background: var(--blekit-mglisty); }
.jednostka__tresc h4 {
  margin: 0 0 10px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-przygaszony);
}

.kolo {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 24px;
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); padding: 24px;
}
.kolo__znak img { width: 116px; height: 116px; object-fit: cover; border-radius: var(--promien-maly); }
.kolo h3 { margin: 10px 0 8px; font-size: 1.25rem; }

.lista-prosta { margin: 0; padding-left: 20px; }
.lista-prosta li { margin-bottom: 8px; }

.linia-danych {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linia); font-size: .93rem;
  margin: 0;
}
.linia-danych:last-child { border-bottom: 0; }
.linia-danych dt {
  color: var(--tekst-przygaszony); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; padding-top: 2px;
}
.linia-danych dd { margin: 0; }

/* ---------- Aktualności ---------- */

.aktualnosc-karta { display: flex; flex-direction: column; }
.aktualnosc-karta .karta__tresc { display: flex; flex-direction: column; flex: 1; }
.aktualnosc-karta .strzalka { margin-top: auto; }
.meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  color: var(--tekst-przygaszony); font-size: .82rem; margin: 0 0 10px;
}

.artykul { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.artykul__tresc {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); overflow: hidden;
}
.artykul__tresc .wewnatrz { padding: 32px; }
.artykul__tresc p { color: #3b4952; }
.artykul__bok { display: grid; gap: 18px; position: sticky; top: 86px; }

/* ---------- Wydarzenia — układ zwarty ----------
   Wcześniej każde wydarzenie zajmowało pół ekranu. Teraz podstawowe dane
   mieszczą się w jednym wierszu, a opis i źródła chowają się pod rozwinięciem. */

.wydarzenia-lista {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); overflow: hidden;
}

.wydarzenie-wiersz { border-bottom: 1px solid var(--linia); }
.wydarzenie-wiersz:last-child { border-bottom: 0; }
.wydarzenie-wiersz[open] { background: var(--blekit-mglisty); }

.wydarzenie-wiersz > summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 26px;
  gap: 18px; align-items: center;
  padding: 14px 20px; cursor: pointer; list-style: none;
}
.wydarzenie-wiersz > summary::-webkit-details-marker { display: none; }
.wydarzenie-wiersz > summary:hover { background: var(--blekit-jasny); }

.wydarzenie-data {
  text-align: center; background: var(--blekit-jasny);
  border-radius: var(--promien-maly); padding: 7px 4px; line-height: 1.1;
}
.wydarzenie-data strong { display: block; font-size: 1.32rem; color: var(--granat); font-weight: 700; }
.wydarzenie-data span { font-size: .7rem; text-transform: uppercase; font-weight: 700; color: var(--blekit); }

.wydarzenie-opis { min-width: 0; }
.wydarzenie-opis h3 { margin: 0 0 3px; font-size: 1.04rem; }
.wydarzenie-opis p { margin: 0; font-size: .86rem; color: var(--tekst-przygaszony); }

.wydarzenie-znaczniki { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.wydarzenie-strzalka {
  color: var(--blekit); font-size: 1.25rem; text-align: center;
  transition: transform .15s;
}
.wydarzenie-wiersz[open] .wydarzenie-strzalka { transform: rotate(90deg); }

.wydarzenie-szczegoly { padding: 4px 20px 22px 102px; }
.wydarzenie-szczegoly p { font-size: .94rem; }

/* ---------- Prawo — zwarty wykaz aktów ---------- */

.prawo-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

.prawo-grupa {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); overflow: hidden;
}
.prawo-grupa__glowa { padding: 16px 20px; background: var(--granat); color: #fff; }
.prawo-grupa__glowa h3 { margin: 0; color: #fff; font-size: 1.04rem; }
.prawo-grupa__glowa p { margin: 4px 0 0; font-size: .82rem; color: #b9d5e2; }

.prawo-pozycja { border-bottom: 1px solid var(--linia); }
.prawo-pozycja:last-child { border-bottom: 0; }
.prawo-pozycja[open] { background: var(--blekit-mglisty); }

.prawo-pozycja > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 12px;
  align-items: start; padding: 13px 20px; cursor: pointer; list-style: none;
}
.prawo-pozycja > summary::-webkit-details-marker { display: none; }
.prawo-pozycja > summary:hover { background: var(--blekit-jasny); }

.prawo-sygnatura {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--blekit); margin-bottom: 3px;
}
.prawo-tytul { display: block; font-weight: 600; font-size: .95rem; color: var(--granat); line-height: 1.35; }
.prawo-pozycja--wazna .prawo-sygnatura { color: var(--cegla-ciemna); }
.prawo-znak { color: var(--blekit); font-size: 1.1rem; text-align: center; }
.prawo-pozycja[open] .prawo-znak { transform: rotate(45deg); display: inline-block; }

.prawo-tresc { padding: 0 20px 18px; font-size: .92rem; }
.prawo-tresc p { margin: 0 0 10px; color: var(--tekst-przygaszony); }
.prawo-wynika {
  background: var(--blekit-jasny); border-left: 3px solid var(--blekit);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
  padding: 11px 14px; margin: 0 0 10px; color: #2d4854;
}
.prawo-wynika strong {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blekit-ciemny); margin-bottom: 4px;
}

/* ---------- Kategorie operacji (strona Przepisy) ---------- */

.kategorie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kategoria {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien-1); padding: 22px; border-top: 4px solid var(--blekit);
}
.kategoria--szczegolna { border-top-color: var(--cegla); }
.kategoria--certyfikowana { border-top-color: #5b2f6e; }
.kategoria h3 { margin: 0 0 6px; font-size: 1.1rem; }
.kategoria__opis { color: var(--tekst-przygaszony); font-size: .93rem; margin: 0 0 14px; }
.kategoria ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.kategoria li { margin-bottom: 6px; color: var(--tekst-przygaszony); }

/* ---------- FAQ ---------- */

.faq-pozycja {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1);
}
.faq-pozycja + .faq-pozycja { margin-top: 10px; }
.faq-pozycja summary {
  padding: 17px 22px; cursor: pointer; font-weight: 600;
  color: var(--granat); font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.faq-pozycja summary::-webkit-details-marker { display: none; }
.faq-pozycja summary::after { content: "+"; color: var(--cegla); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.faq-pozycja[open] summary::after { content: "–"; }
.faq-pozycja[open] summary { border-bottom: 1px solid var(--linia); }
.faq-tresc { padding: 18px 22px 22px; }
.faq-tresc p { margin: 0 0 12px; color: #3b4952; }
.podstawa { font-size: .85rem; color: var(--tekst-przygaszony); border-top: 1px dashed var(--linia); padding-top: 10px; }

/* ---------- Kroki ---------- */

.kroki { display: grid; gap: 12px; }
.krok {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px;
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); padding: 20px; box-shadow: var(--cien-1);
}
.krok__numer {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--granat); color: #fff; font-size: 1.25rem; font-weight: 700;
  border-radius: 50%;
}
.krok h3 { margin: 0 0 6px; font-size: 1.06rem; }
.krok p { margin: 0; color: var(--tekst-przygaszony); }

/* ---------- Komunikaty ---------- */

.komunikat {
  padding: 15px 18px; border-left: 4px solid var(--blekit);
  background: var(--blekit-jasny); border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
}
.komunikat--uwaga { border-left-color: var(--cegla); background: var(--cegla-jasna); }
.komunikat--redakcja { border-left-color: var(--ostrzezenie); background: #fdf6ea; }
.komunikat--demo { border-left-color: var(--blad); background: #fdf0ee; }
.komunikat--demo strong { color: var(--blad); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.komunikat strong { display: block; margin-bottom: 6px; }
.komunikat p:last-child { margin-bottom: 0; }

.do-uzupelnienia {
  border: 1px dashed #cdbb96; background: #fdfaf3;
  border-radius: var(--promien-maly); padding: 18px;
}
.do-uzupelnienia h4 {
  margin: 0 0 10px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ostrzezenie);
}
.do-uzupelnienia ul { margin: 0; padding-left: 20px; }
.do-uzupelnienia li { margin-bottom: 6px; color: #5d5138; font-size: .92rem; }

.pasek-roboczy { background: #fdf6ea; border-bottom: 1px solid #ecdcc0; color: #6b5423; font-size: .86rem; }
.pasek-roboczy .kontener { padding: 9px 0; }

.karta--dzialanie { border-left: 4px solid var(--cegla); }

/* ---------- Zaproszenie / CTA ---------- */

.cta {
  background: linear-gradient(120deg, var(--granat), #075873);
  color: #fff; border-radius: var(--promien); padding: 34px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px;
  align-items: center; box-shadow: var(--cien-2);
}
.cta h2 { color: #fff; margin: 8px 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.cta p { margin: 0; color: #c9e0ea; max-width: 760px; }
.cta .nadtytul { color: #fff; }
.cta .nadtytul::before { background: var(--cegla); }

/* ---------- Formularze ---------- */

.pole { display: grid; gap: 6px; margin-bottom: 18px; }
.pole label { font-weight: 600; font-size: .92rem; }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 46px; padding: 11px 13px; font: inherit;
  border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly);
  background: #fff; color: var(--tekst);
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 3px solid rgba(0, 98, 136, .16); border-color: var(--blekit);
}
.pole textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.pole .podpowiedz { font-size: .84rem; color: var(--tekst-przygaszony); }
.wymagane { color: var(--blad); }

/* Pole wyszukiwania nie ma rozciągać się na całą szerokość ekranu. */
.pole--szukaj { max-width: 340px; }
.pasek-narzedzi {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 22px;
}
.pasek-narzedzi .pole { margin-bottom: 0; }

/* ---------- Rejestr pilotów ---------- */

.piloci-uklad {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px; align-items: start;
}
.piloci-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.pilot-karta {
  background: #fff; border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien-1); padding: 20px;
}
.pilot-karta__glowa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pilot-karta h3 { margin: 0 0 2px; font-size: 1.08rem; }
.pilot-karta__rola { margin: 0; font-size: .88rem; color: var(--tekst-przygaszony); }
.pilot-karta__numer { font-size: .74rem; color: var(--tekst-przygaszony); font-variant-numeric: tabular-nums; }
.pilot-karta h4 {
  margin: 14px 0 7px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-przygaszony);
}

/* Legenda: na dużym ekranie w kolumnie obok, na telefonie pod wykazem.
   Kolejność w kodzie HTML jest „lista → legenda”, więc po zwinięciu siatki
   legenda naturalnie ląduje na dole — bez sztuczek z order. */
.legenda-kompetencji { position: sticky; top: 86px; }
.legenda-kompetencji .karta__tresc { padding: 20px; }
.legenda-kompetencji h3 { font-size: 1rem; }
.legenda-kompetencji .linia-danych { grid-template-columns: 74px minmax(0, 1fr); font-size: .86rem; }

/* ---------- Kalendarz operacji ---------- */

.kalendarz-pasek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: #fff;
  border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien-1); margin-bottom: 16px;
}

.kalendarz {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--linia); gap: 1px; border: 1px solid var(--linia);
  border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien-1);
}
.kalendarz__glowa {
  background: var(--blekit-jasny); color: var(--granat); font-weight: 700;
  text-align: center; padding: 9px 4px; font-size: .78rem; text-transform: uppercase;
}
.kalendarz__dzien { background: #fff; min-height: 112px; padding: 8px; }
.kalendarz__dzien--pusty { background: #fbfcfd; }
.kalendarz__dzien--dzis { box-shadow: inset 0 0 0 2px var(--cegla); }
.kalendarz__numer { font-weight: 700; font-size: .8rem; color: var(--tekst-przygaszony); }
.kalendarz__wpis {
  display: block; margin-top: 6px; padding: 6px 8px;
  background: var(--blekit-jasny); border-left: 3px solid var(--blekit);
  border-radius: 0 var(--promien-maly) var(--promien-maly) 0;
  text-decoration: none; font-size: .74rem; line-height: 1.3;
}
.kalendarz__wpis:hover { background: #d7ebf3; }
.kalendarz__wpis strong { display: block; color: var(--granat); }
.kalendarz__wpis span { display: block; color: var(--tekst-przygaszony); }
.kalendarz__wpis small { display: block; color: var(--cegla-ciemna); font-weight: 700; }

/* ---------- Stopka ---------- */

.stopka { margin-top: 56px; background: var(--granat); color: #cadfe8; padding: 44px 0 26px; }
.stopka h3, .stopka h4 { color: #fff; margin-top: 0; }
.stopka h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.stopka__siatka { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px; }
.stopka a { color: #cadfe8; text-decoration: none; display: block; margin: 7px 0; font-size: .9rem; }
.stopka a:hover { color: #fff; text-decoration: underline; }
.stopka p { font-size: .9rem; }
.stopka__dol {
  border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 30px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .83rem;
}

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1100px) {
  .siatka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siatka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .kontener, .artykul, .obszar-naglowek, .piloci-uklad { grid-template-columns: 1fr; }
  .artykul__bok, .legenda-kompetencji { position: static; }
  .jednostka__tresc { grid-template-columns: 1fr; }
  .jednostka__tresc > div + div { border-left: 0; border-top: 1px solid var(--linia); }
  .stopka__siatka { grid-template-columns: repeat(2, 1fr); }
  .prawo-siatka { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 44px; }
  .hero__obraz { max-width: 560px; }
}

@media (max-width: 900px) {
  .nawigacja .kontener { flex-wrap: wrap; align-items: center; }
  .nawigacja__przelacznik { display: inline-flex; }
  .nawigacja__linki {
    display: none; width: 100%; flex-direction: column;
    background: var(--granat); margin-bottom: 8px;
    border-radius: var(--promien-maly); overflow: hidden;
  }
  .nawigacja__linki.otwarte { display: flex; }
  .nawigacja__linki a {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    min-height: 48px; padding: 10px 16px; font-size: .95rem;
  }
  .nawigacja__linki a[aria-current="page"]::after { display: none; }
  .nawigacja__linki a[aria-current="page"] { border-left: 4px solid var(--cegla); }
  .nawigacja__akcje { margin-left: auto; }
  .gorny-pasek__linki { display: none; }
  .piloci-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .siatka-2 { grid-template-columns: 1fr; }
  .piloci-siatka { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .kontener { width: calc(100% - 32px); }

  .siatka-2, .siatka-3, .siatka-4, .kategorie { grid-template-columns: 1fr; }
  .sekcja { padding: 38px 0; }
  .sekcja--waska { padding: 24px 0; }
  .sekcja__glowa { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sekcja__glowa .przycisk { width: 100%; }

  /* Nagłówek serwisu — na telefonie liczy się tytuł, nie znak graficzny. */
  .marka .kontener { gap: 12px; min-height: auto; padding: 12px 0; }
  .marka__kreska { display: none; }
  .marka__znak { width: min(168px, 52vw); }
  .marka__tytul h1 { font-size: 1.06rem; }
  .marka__tytul p { font-size: .8rem; }

  .hero { padding: 34px 0 32px; }
  .hero .kontener { gap: 26px; }
  .hero h2 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); margin: 12px 0 14px; }
  .hero p { font-size: 1rem; }
  .hero__akcje { margin-top: 22px; }
  .hero__akcje .przycisk { width: 100%; }
  /* Obraz zastępczy pod tekstem zabierał cały ekran na telefonie. */
  .hero__obraz { order: -1; max-width: none; }
  .hero__obraz img { aspect-ratio: 16 / 7; object-fit: cover; }

  .naglowek-strony { padding: 24px 0 22px; }
  .karta--skrot { min-height: auto; padding: 20px; }
  .karta__tresc { padding: 18px; }
  .artykul__tresc .wewnatrz { padding: 22px 18px; }

  .kolo { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .kolo__znak img { width: 72px; height: 72px; }
  .kolo h3 { margin-top: 6px; font-size: 1.12rem; }

  .cta { grid-template-columns: 1fr; padding: 24px 20px; }
  .cta .przycisk { width: 100%; }

  .krok { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .krok__numer { width: 40px; height: 40px; font-size: 1.05rem; }

  .linia-danych { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  .linia-danych dt { padding-top: 0; }

  .jednostka__glowa { padding: 18px; }
  .jednostka__glowa .przycisk { width: 100%; }
  .jednostka__tresc > div { padding: 18px; }

  .pole--szukaj { max-width: none; }
  .pasek-narzedzi { gap: 12px; }
  .pasek-narzedzi > * { width: 100%; }

  /* Wydarzenia — na telefonie data przenosi się nad tytuł */
  .wydarzenie-wiersz > summary {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
    gap: 14px; padding: 14px 16px; align-items: start;
  }
  .wydarzenie-znaczniki { grid-column: 2 / 4; justify-content: flex-start; margin-top: 6px; }
  .wydarzenie-szczegoly { padding: 0 16px 18px; }

  .prawo-pozycja > summary, .prawo-grupa__glowa { padding-inline: 16px; }
  .prawo-tresc { padding-inline: 16px; }

  .podnawigacja__etykieta { display: none; }
  .podnawigacja .kontener { width: 100%; padding-left: 16px; gap: 0; }

  .stopka { margin-top: 40px; padding: 34px 0 22px; }
  .stopka__siatka { grid-template-columns: 1fr; gap: 22px; }
  .stopka__dol { flex-direction: column; gap: 8px; }

  .kalendarz { grid-template-columns: 1fr; }
  .kalendarz__glowa { display: none; }
  .kalendarz__dzien { min-height: auto; }
  .kalendarz__dzien--pusty { display: none; }
  .kalendarz__numer { display: block; border-bottom: 1px solid var(--linia); padding-bottom: 5px; }
}

@media (max-width: 400px) {
  .kontener { width: calc(100% - 24px); }
  .marka__znak { width: min(150px, 58vw); }
  .marka__tytul p { display: none; }
  .hero h2 { font-size: 1.62rem; }
  .kolo { grid-template-columns: 1fr; }
  .kolo__znak img { width: 64px; height: 64px; }
  .wydarzenie-wiersz > summary { grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 10px; }
  .karta__tresc, .pilot-karta { padding: 16px; }
}

/* ---------- Druk ---------- */

@media print {
  .nawigacja, .podnawigacja, .gorny-pasek, .stopka, .pasek-roboczy, .hero__obraz { display: none; }
  body { background: #fff; font-size: 11pt; }
  .karta, .artykul__tresc { box-shadow: none; border-color: #999; }
  details { display: block; }
  details > summary { list-style: none; }
}

/* ==========================================================================
   WERSJA 2 — persony demonstracyjne, zakresy dostępu, moduły strony głównej
   ========================================================================== */

.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Pasek person demonstracyjnych ---------- */

.pasek-demo {
  background: linear-gradient(90deg, #2b2d42, #3c4266);
  color: #e8ecf7;
  border-bottom: 3px solid var(--cegla);
  font-size: .88rem;
}
.pasek-demo__form {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px 0;
}
.pasek-demo__etykieta { white-space: nowrap; }
.pasek-demo__etykieta strong { color: #fff; }
.pasek-demo select {
  min-height: 38px; padding: 6px 12px; font: inherit; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--promien-maly);
  background: rgba(255, 255, 255, .12); color: #fff;
}
.pasek-demo select option { color: var(--tekst); background: #fff; }
.pasek-demo__opis { color: #b9c2e0; font-size: .82rem; }

/* ---------- Oznaczenie zakresu dostępu ----------
   Delikatny pasek akcentu przy nagłówku strony plus etykieta.
   Nigdy sam kolor — zawsze towarzyszy mu tekst (UI-006). */

.naglowek-strony { border-left: 0 solid transparent; }
.naglowek-strony--spolecznosc { border-left: 5px solid #2f6f8f; background: linear-gradient(180deg, #fff, #eef5f9); }
.naglowek-strony--pilot { border-left: 5px solid #1f6b46; background: linear-gradient(180deg, #fff, #eef6f1); }
.naglowek-strony--operator { border-left: 5px solid var(--cegla); background: linear-gradient(180deg, #fff, #fbf1eb); }
.naglowek-strony--redakcja { border-left: 5px solid #8a5200; background: linear-gradient(180deg, #fff, #fbf5ea); }
.naglowek-strony--administracja { border-left: 5px solid #5b2f6e; background: linear-gradient(180deg, #fff, #f5eff8); }

.znacznik-zakresu {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 10px; font-size: .82rem; font-weight: 700; color: var(--granat);
}
.znacznik-zakresu__kropka {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.znacznik-zakresu__opis { font-weight: 400; color: var(--tekst-przygaszony); }
.znacznik-zakresu--spolecznosc { color: #2f6f8f; }
.znacznik-zakresu--pilot { color: #1f6b46; }
.znacznik-zakresu--operator { color: var(--cegla-ciemna); }
.znacznik-zakresu--redakcja { color: #8a5200; }
.znacznik-zakresu--administracja { color: #5b2f6e; }

.etykieta--zakres { border: 1px solid currentColor; background: transparent; }
.etykieta--zakres-spolecznosc { color: #2f6f8f; }
.etykieta--zakres-pilot { color: #1f6b46; }
.etykieta--zakres-operator { color: var(--cegla-ciemna); }
.etykieta--zakres-redakcja { color: #8a5200; }
.etykieta--zakres-administracja { color: #5b2f6e; }

/* ---------- Wyszukiwarka ---------- */

.szukajka__etykieta {
  display: block; font-weight: 700; margin-bottom: 8px; color: var(--granat);
}
.szukajka__wiersz { display: flex; gap: 10px; }
.szukajka input {
  flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; font: inherit;
  border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly); background: #fff;
}
.szukajka input:focus { outline: 3px solid rgba(0, 98, 136, .16); border-color: var(--blekit); }
.szukajka--hero { max-width: 720px; margin-top: 26px; }
.szukajka--hero .szukajka__etykieta { font-size: 1.05rem; }
.szukajka--hero input { min-height: 58px; box-shadow: var(--cien-2); }
.szukajka--dzial { max-width: 620px; }

.hero--szeroki { display: block; max-width: 860px; }
.hero__skroty { margin-top: 16px; font-size: .86rem; color: var(--tekst-przygaszony); }
.hero__skroty a {
  display: inline-block; margin: 4px 6px 0 0; padding: 4px 11px;
  background: #fff; border: 1px solid var(--linia); border-radius: 999px;
  text-decoration: none; color: var(--blekit-ciemny); font-weight: 600;
}
.hero__skroty a:hover { border-color: var(--blekit); background: var(--blekit-jasny); }

.nawigacja__ikona {
  display: flex; align-items: center; padding: 0 12px; color: #fff;
  text-decoration: none; font-size: 1.05rem;
}
.nawigacja__ikona:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Router zadań użytkownika ---------- */

.siatka-router {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.karta--router {
  padding: 24px; min-height: 210px; border-top: 4px solid var(--blekit);
  display: flex; flex-direction: column; justify-content: space-between;
}
.karta--router:hover { border-top-color: var(--cegla); }
.karta--router h3 { font-size: 1.08rem; }

.karta--sciezka { border-top: 4px solid var(--blekit); }
.karta--sciezka h3 { font-size: 1.25rem; }

.karta--kolo-mini { padding: 14px 16px; text-decoration: none; display: block; }
.karta--kolo-mini strong { display: block; color: var(--blekit-ciemny); }
.karta--kolo-mini span { display: block; font-size: .86rem; color: var(--tekst-przygaszony); }

/* ---------- Moduł „Ważne teraz” ---------- */

.alerty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.alert {
  background: #fff; border: 1px solid var(--linia); border-left: 5px solid var(--blekit);
  border-radius: var(--promien); box-shadow: var(--cien-1); padding: 22px;
}
.alert--zielen { border-left-color: var(--sukces); }
.alert--cegla { border-left-color: var(--cegla); background: #fffaf7; }
.alert--szara { border-left-color: var(--linia-mocna); background: #fbfcfc; }
.alert h3 { margin: 0 0 8px; font-size: 1.1rem; }
.alert p { margin: 0; color: var(--tekst-przygaszony); }
.alert__termin { font-weight: 700; color: var(--cegla-ciemna); font-size: .8rem; }

/* ---------- Karty „Czy wiesz, że” ---------- */

.ciekawostka {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien-1); padding: 24px; display: flex; flex-direction: column;
}
.ciekawostka__wstep {
  margin: 0 0 6px; font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cegla);
}
.ciekawostka__tekst {
  margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; color: var(--granat); line-height: 1.3;
}
.ciekawostka__rozwiniecie { margin: 0 0 14px; color: var(--tekst-przygaszony); font-size: .93rem; }
.ciekawostka .strzalka { margin-top: auto; text-decoration: none; }

/* ---------- Liczniki ---------- */

.liczniki {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.licznik {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien-1); padding: 20px 16px; text-align: center;
}
.licznik strong {
  display: block; font-size: 2.1rem; font-weight: 700; color: var(--granat); line-height: 1;
}
.licznik span { display: block; margin-top: 6px; font-size: .82rem; color: var(--tekst-przygaszony); }

/* ---------- Zakładki ---------- */

.zakladki { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.zakladka {
  padding: 9px 16px; border: 1px solid var(--linia-mocna); background: #fff;
  border-radius: 999px; font: inherit; font-weight: 600; font-size: .88rem;
  color: var(--tekst-przygaszony); cursor: pointer;
}
.zakladka:hover { border-color: var(--blekit); color: var(--blekit); }
.zakladka--aktywna { background: var(--blekit); border-color: var(--blekit); color: #fff; }

/* ---------- Słownik ---------- */

.slownik {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien-1); overflow: hidden;
}
.slownik__pozycja { padding: 16px 20px; border-bottom: 1px solid var(--linia); }
.slownik__pozycja:nth-child(odd) { border-right: 1px solid var(--linia); }
.slownik__pozycja dt { font-weight: 700; color: var(--granat); margin-bottom: 4px; }
.slownik__pozycja dd { margin: 0; color: var(--tekst-przygaszony); font-size: .93rem; }

/* ---------- Zestawy pól wyboru ---------- */

.zestaw-pol { border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px 18px; margin: 0 0 18px; }
.zestaw-pol legend { font-weight: 700; font-size: .92rem; padding: 0 8px; }
.zestaw-pol__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pole-wyboru { display: flex; align-items: center; gap: 9px; font-size: .93rem; }
.pole-wyboru input { width: auto; min-height: auto; }

/* ---------- Wyniki wyszukiwania ---------- */

.wynik { text-decoration: none; }
.wynik h3 { font-size: 1.05rem; margin-bottom: 6px; }

/* ---------- Responsywność wersji 2 ---------- */

@media (max-width: 1100px) {
  .siatka-router { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liczniki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .alerty { grid-template-columns: 1fr; }
  .slownik { grid-template-columns: 1fr; }
  .slownik__pozycja:nth-child(odd) { border-right: 0; }
}

@media (max-width: 680px) {
  .siatka-router { grid-template-columns: 1fr; }
  .karta--router { min-height: auto; }
  .liczniki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .licznik strong { font-size: 1.7rem; }
  .szukajka__wiersz { flex-direction: column; }
  .szukajka__wiersz .przycisk { width: 100%; }
  .zestaw-pol__siatka { grid-template-columns: 1fr; }
  .pasek-demo__form { gap: 8px; padding: 10px 0; }
  .pasek-demo__etykieta { white-space: normal; }
  .pasek-demo select { width: 100%; }
  .pasek-demo__opis { display: none; }
  .nawigacja__ikona { padding: 0 10px; }
}