/* ===================================================================
   WKLS - arkusz kierunku wizualnego
   Wersja 2.0, 18.09.2026. Zastepuje 29 sekcji narosłych w bazie przez
   pięć iteracji recenzji UX.

   DLACZEGO PLIK, A NIE POLE "DODATKOWY CSS" W EDYTORZE
   Dotychczasowy arkusz miał 774 linie i mieszkał w jednym wierszu bazy
   (wp_global_styles, post 6, klucz styles.css). W zrzucie SQL wychodził
   jako pojedyncza linia 54 676 znaków - nie dało się go ani przejrzeć,
   ani sensownie porównać między wersjami. Tutaj każda zmiana jest
   widoczna w diffie i jedzie na serwer przez `git pull`, tak jak reszta
   kodu. Pole w edytorze zostaje puste, z odsyłaczem do tego pliku.

   KOLEJNOŚĆ WCZYTANIA
   Arkusz jest doczepiany po uchwycie `global-styles` (patrz wkls.php),
   więc przy równej szczegółowości selektora wygrywa z ustawieniami
   z edytora. Nie polegamy na `!important` poza miejscami wymuszonymi
   przez sam WordPress - te są opisane w miejscu użycia.

   CZEGO ARKUSZ NIE PRZESKOCZY
   Style inline (`style="font-size:…"` w treści bloku) biją każdy
   selektor. Skala typograficzna zadziała dopiero, gdy znikną z treści
   - to warunek, nie kosmetyka. Dawna sekcja 2 była martwa dokładnie
   z tego powodu.
   =================================================================== */


/* === 1. Tokeny =====================================================
   Paleta wywiedziona z herbu, zmierzona z pikseli pliku: złoto #ffc201,
   czerwień #c00000. Złoty token serwisu (#fdbf02) już się zgadzał
   i zostaje. Czerwony został ściągnięty z #d50000 na herbowy - do
   18.09 serwis miał dwie różne czerwienie, żadnej zgodnej ze znakiem.

   Skala ma sześć stopni i kończy się na 76 px, bo tyle wynosi zmierzony
   sufit jednego wiersza dla napisu "WARSZAWSKA KOSZYKARSKA LIGA SZKÓŁ".
   96 px nie mieści się w jednym wierszu przy ŻADNEJ szerokości okna.
   =================================================================== */

:root {
  /* barwy */
  --wkls-czern:          #0b0b0b;
  --wkls-czern-glebia:   #000000;
  --wkls-biel:           #fcfcfc;
  --wkls-zloto:          #fdbf02;
  --wkls-czerwien:       #c00000;
  --wkls-czerwien-jasna: #e01b1b;
  --wkls-szary-pas:      #f3f3f3;
  --wkls-linia:          #e2e2e2;
  --wkls-tekst:          #2a2a2a;
  --wkls-tekst-cichy:    #6a6a6a;
  --wkls-tekst-na-czerni:#d6d6d6;

  /* stopnie skali */
  --wkls-s1: 16px;
  --wkls-s2: 20px;
  --wkls-s3: 28px;
  --wkls-s4: 40px;
  --wkls-s5: 56px;
  --wkls-s6: 76px;

  /* nagłówki - jedna definicja, używana i przez element, i przez komponent */
  --wkls-h1: clamp(2.6rem, 13.2vw, 3.4rem);
  --wkls-h2: clamp(1.75rem, 4.4vw, var(--wkls-s4));
  --wkls-h3: var(--wkls-s2);

  /* dwa promienie. Kształt jest sygnałem: okrągłe znaczy klikalne.
     Do 17.09 serwis miał ich siedem, w tym trzy nieodróżnialne
     (999px, 9999px i 50% renderują się identycznie, bo CSS i tak
     przycina promień do połowy krótszego boku). */
  --wkls-promien:       4px;
  --wkls-promien-akcja: 999px;

  /* rytm pionowy - trzy wartości, nie dwanaście */
  --wkls-rytm-w: 16px;   /* wewnątrz komponentu */
  --wkls-rytm-b: 40px;   /* między blokami sekcji */
  --wkls-rytm-s: 96px;   /* między sekcjami */

  /* szerokości: miara czytania osobno od szerokości struktury */
  --wkls-miara:     720px;
  --wkls-kontener: 1240px;
  --wkls-marges:     32px;
}

@media (min-width: 1024px) {
  :root {
    /* Na pulpicie nagłówek główny dobija do sufitu jednego wiersza
       i tam się zatrzymuje. Zmierzone: 74,64 px przy 1440 px okna. */
    --wkls-h1: min(calc(5.6vw - 6px), var(--wkls-s6));
  }
}

@media (max-width: 700px) {
  :root {
    --wkls-rytm-s: 64px;
    --wkls-marges: 24px;
  }
}


/* === 2. Podstawa ===================================================
   Krój tekstowy to Manrope, nagłówkowy Oswald. Oswald jest wąski
   i ma oś wagi kończącą się na 700 - wag 800 i 900 nie ma sensu
   zamawiać, renderują się identycznie jak 700.
   =================================================================== */

/* Ani motyw, ani rdzen WordPressa nie ustawiaja tego dla surowych <div>
   z bloku wp:html - a kontrakt kaze pisac w nim wszystkie komponenty.
   Bez tego .wkls-hero__tekst laczyl width:100% z dopelnieniem i strona
   glowna rozpychala sie o dokladnie 2 x 24 px marginesu: 390 -> 438 px. */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--wkls-biel);
  color: var(--wkls-tekst);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Wersaliki w wąskim kroju zlepiają się bez rozstrzelenia. Trzy stopnie
   świateł zależne od wielkości - im mniejszy stopień, tym więcej. */
.wkls-wersaliki-duze   { letter-spacing: .010em; }
.wkls-wersaliki-srednie{ letter-spacing: .040em; }
.wkls-wersaliki-male   { letter-spacing: .080em; }

h1, h2, h3, h4,
.wp-block-heading {
  text-transform: uppercase;
  letter-spacing: .012em;
  text-wrap: balance;
}

h1, .wp-block-heading.wkls-h1 { font-size: var(--wkls-h1); font-weight: 700; line-height: .96; }
h2, .wp-block-heading.wkls-h2 { font-size: var(--wkls-h2); font-weight: 700; line-height: 1.04; }
h3, .wp-block-heading.wkls-h3 { font-size: var(--wkls-h3); font-weight: 600; line-height: 1.20; letter-spacing: .03em; }

@media (min-width: 1024px) {
  h1, .wp-block-heading.wkls-h1 { line-height: .94; }
}

/* Nadtytuł: mała etykieta nad nagłówkiem sekcji. Niesie rolę sekcji,
   a nie jej treść, więc jest mały i rozstrzelony. */
.wkls-nadtytul {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wkls-czerwien);
  margin: 0 0 12px;
}
.wkls-nadtytul.wkls-zloty { color: var(--wkls-zloto); }

.wkls-lead {
  font-size: var(--wkls-s2);
  line-height: 1.55;
  color: var(--wkls-tekst-cichy);
}

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


/* === 3. Pasy sekcji ================================================
   Dotąd korpus strony był jedną białą kartką od "O Lidze" do "Partnerzy",
   a strukturę udawały cztery czerwone kreski wiszące wyśrodkowane
   między sekcjami. Kreska nie jest strukturą - jest protezą struktury.

   Teraz sekcję otwiera pas o własnym tle. Trzy tła, nie więcej:
   czerń (akcent, pasy faktów i wezwań), biel (treść), szarość
   (sekcja kontrastująca z sąsiadami).
   =================================================================== */

.wkls-pas {
  padding-block: var(--wkls-rytm-s);
}

/* Pasy stykaja sie bez szpary. Zrodlem bylo --wp--style--block-gap
   (1,2 rem), ktory uklad "constrained" nadaje kazdemu dziecku - takze
   pasom, ktore rytm pionowy niosa juz we wlasnym dopelnieniu. Tam, gdzie
   sasiaduja dwa czarne pasy (pas tytulowy i pas kontaktowy na /kontakt/,
   wezwanie i stopka na /szkoly/), 19,2 px bieli czytalo sie jak kreska,
   a nie jak odstep. Selektor z elementem bije regule motywu, bo ta siedzi
   w :where() o zerowej specyficznosci. */
main.wp-block-group { margin-top: 0; }
main.wp-block-group > * { margin-block: 0; }
body > footer.wp-block-template-part { margin-top: 0; }

/* Dwa czarne pasy jeden pod drugim czytaja sie jako JEDEN pas, wiec nie
   moga niesc miedzy soba dwoch dopelnien naraz. Na /kontakt/ pas tytulowy
   i pas kontaktowy dawaly razem 154 px pustej czerni, co wygladalo jak
   dziura w bloku, a nie jak odstep. Pas tytulowy jest czarny zawsze,
   wiec pierwszy czarny pas tresci traci dopelnienie gorne. */
.wkls-pas--czern + .wkls-pas--czern,
.entry-content > .wkls-pas--czern:first-child { padding-top: 0; }
.wkls-pas--czern  { background: var(--wkls-czern);     color: #fff; }
.wkls-pas--szary  { background: var(--wkls-szary-pas); }
.wkls-pas--biel   { background: var(--wkls-biel); }
.wkls-pas--ciasny { padding-block: calc(var(--wkls-rytm-s) * .6); }

.wkls-pas--czern h1,
.wkls-pas--czern h2,
.wkls-pas--czern h3,
.wkls-pas--czern .wp-block-heading { color: #fff; }
.wkls-pas--czern p { color: var(--wkls-tekst-na-czerni); }

/* Pojemnik o szerokości struktury. Dla bloków WordPressa tę rolę pełni
   `alignwide`, ale komponenty pisane w wp:html potrzebują własnego. */
.wkls-kontener {
  max-width: var(--wkls-kontener);
  margin-inline: auto;
  padding-inline: var(--wkls-marges);
}


/* === 4. Nagłówek sekcji ============================================
   Kreska należy do sekcji, którą OTWIERA, i stoi na lewej krawędzi
   treści - nie wisi wyśrodkowana między dwiema sekcjami, jak do 17.09.
   =================================================================== */

.wkls-kreska {
  width: 72px;
  height: 4px;
  background: var(--wkls-czerwien);
  margin: 0 0 18px;
  border: 0;
}
.wkls-pas--czern .wkls-kreska { background: var(--wkls-zloto); }

.wkls-glowa-sekcji {
  max-width: var(--wkls-miara);
  margin: 0 0 var(--wkls-rytm-b);
}
.wkls-glowa-sekcji > :last-child { margin-bottom: 0; }
.wkls-glowa-sekcji h2,
.wkls-glowa-sekcji .wp-block-heading { margin-bottom: 14px; }


/* === 5. Akcje ======================================================
   Czerwień ma JEDNĄ rolę: akcja. Do 17.09 miała trzy - ozdoba 51,5%,
   "tego nie ma" 38,9%, akcja 9,1%. Kolor, który znaczy trzy rzeczy,
   nie znaczy żadnej.

   Wysokość 56 px to nie estetyka, tylko cel dotykowy z zapasem
   (WCAG 2.5.8 wymaga 44). W pasku nagłówka akcja schodzi do 44 px,
   bo pasek musi zostać niski na telefonie w poziomie.
   =================================================================== */

.wkls-akcja,
.wkls-akcja-cicha,
.wp-block-button.wkls-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: var(--wkls-s1);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 36px;
  border-radius: var(--wkls-promien-akcja);
  min-height: 56px;
  border: 2px solid transparent;
  transition: transform .14s ease, background-color .14s ease,
              color .14s ease, border-color .14s ease;
}

.wkls-akcja,
.wp-block-button.wkls-button > .wp-block-button__link {
  background: var(--wkls-czerwien);
  color: #fff;
}
.wkls-akcja:hover,
.wkls-akcja:focus-visible,
.wp-block-button.wkls-button > .wp-block-button__link:hover,
.wp-block-button.wkls-button > .wp-block-button__link:focus-visible {
  background: var(--wkls-czerwien-jasna);
  color: #fff;
  transform: translateY(-2px);
}

.wkls-akcja-cicha {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.wkls-akcja-cicha:hover,
.wkls-akcja-cicha:focus-visible {
  border-color: var(--wkls-zloto);
  color: var(--wkls-zloto);
}
.wkls-akcja-cicha.wkls-na-bieli {
  color: var(--wkls-tekst);
  border-color: var(--wkls-linia);
}
.wkls-akcja-cicha.wkls-na-bieli:hover,
.wkls-akcja-cicha.wkls-na-bieli:focus-visible {
  border-color: var(--wkls-czerwien);
  color: var(--wkls-czerwien);
}

.wkls-strzalka { font-size: 1.1em; line-height: 1; }

/* Widoczny fokus na każdym tle. Obwódka dwubarwna, żeby była widoczna
   i na czerni, i na bieli, bez zgadywania kontekstu. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wkls-zloto);
  outline-offset: 2px;
  border-radius: var(--wkls-promien);
}


/* === 6. Nagłówek serwisu ===========================================
   Herb 40 px NIESIE KOLOR I ROZPOZNANIE, napis niesie czytanie.
   Zmierzone: otok herbu jest nieczytelny poniżej ~85 px przy DPR 1,
   więc nie liczymy na to, że ktoś go przeczyta - ma go rozpoznać.
   Do 17.09 herb stał wyłącznie w stopce, a w nagłówku był sam napis.
   =================================================================== */

header.wp-block-template-part {
  background: var(--wkls-czern);
  color: #fff;
  position: relative;
  z-index: 5;
}

/* Wysokosc paska nadaje arkusz, a NIE atrybut bloku. Atrybut produkuje
   styl inline, ktory zabilby regule dla telefonu w poziomie (sekcja 17)
   - dokladnie tak, jak zabijal ja stan zastany z dopelnieniem 20/20 px. */
header.wp-block-template-part .wp-block-group.alignwide {
  min-height: 76px;
  display: flex;
  align-items: center;
}

.wkls-marka {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 44px;   /* cel dotykowy - zmierzone 43x22 px przed poprawką */
}
.wkls-marka img { width: 40px; height: 40px; }
.wkls-marka .wkls-nazwa,
.wkls-marka .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
header.wp-block-template-part .wp-block-navigation-item__content {
  color: #e8e8e8;
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
header.wp-block-template-part .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation-item__content:focus-visible {
  color: var(--wkls-zloto);
  border-bottom-color: var(--wkls-zloto);
}

/* Prog zwijania nawigacji. Rdzen WordPressa ma go zaszyty na 600 px,
   a overlayMenu zna tylko mobile/always/never - "always" zwinaloby menu
   takze przy 1440 px, wbrew makiecie. Wiec prog robi arkusz.

   1299, a nie 1240: po przeniesieniu akcji "Zglos szkole" z menu do
   czerwonego przycisku pasek niesie marke + dziewiec pozycji + przycisk.
   Zmierzone na zywo - przy 1300 px pasek ma 76 px (jeden wiersz), przy
   1280 px juz 93 px (dwa wiersze). Przy 844x390 naglowek spada dzieki
   temu ze 113,4 px (29,1 % ekranu) na 61 px (15,6 %). */
@media (max-width: 1299px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: inline-flex;
  }
}

/* Akcja w pasku jest niższa niż w treści - pasek musi zostać płaski. */
header.wp-block-template-part .wp-block-button.wkls-button > .wp-block-button__link {
  padding: 11px 24px;
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;   /* etykieta akcji nie ma prawa lamac sie na dwa wiersze */
}


/* === 7. Hero =======================================================
   Tekst NIE leży na zdjęciu, więc zdjęcie nie musi być wyprane welonem.
   Pomiar stanu do 17.09: welon ścierał 48% zróżnicowania tonalnego
   przy 390 px, a mimo to 15,4% powierzchni liter podtytułu miało
   kontrast poniżej 4,5:1. Dwukolumnowy układ usuwa oba problemy naraz:
   napis siedzi na czerni, fotografia zostaje nietknięta.
   =================================================================== */

.wkls-hero {
  display: grid;
  grid-template-columns: 46fr 54fr;
  background: var(--wkls-czern);
}

.wkls-hero__tekst {
  padding: 76px 56px 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  margin-left: auto;
  width: 100%;
}
.wkls-hero__tekst h1,
.wkls-hero__tekst .wp-block-heading { color: #fff; margin-bottom: 22px; }
.wkls-hero__pod {
  color: var(--wkls-tekst-na-czerni);
  font-size: var(--wkls-s2);
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 30em;
}
.wkls-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.wkls-hero__foto { position: relative; overflow: hidden; min-height: 520px; }
.wkls-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 60%;
}

@media (max-width: 900px) {
  .wkls-hero { grid-template-columns: 1fr; }
  .wkls-hero__foto { min-height: 0; height: 210px; order: -1; }
  .wkls-hero__tekst { padding: 40px var(--wkls-marges) 44px; max-width: none; }
}

/* === 7a. Mapa zgłoszonych szkół w nagłówku =========================
   Zastepuje fotografie w prawej kolumnie hero. Rysunek jest wektorem
   z wlasnym viewBox, wiec o rozmiarze decyduje pojemnik, a proporcje
   pilnuje samo SVG (domyslne preserveAspectRatio dziala jak "contain").

   Typografia jest z gory przeskalowana pod to miejsce. Mapa ma
   1600x1679 jednostek, a dostaje okolo 720x600 px, czyli skala ~0,36:
   nazwa dzielnicy 36 jednostek to na ekranie ~13 px, liczba 60 to ~22 px.
   Dlatego wartosci w SVG wygladaja na przesadzone - bez tego etykiety
   spadlyby do szesciu pikseli i mapa bylaby ozdoba bez tresci.
   =================================================================== */

.wkls-hero__mapa {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 14px;
  background: var(--wkls-czern);
  overflow: hidden;
}
.wkls-hero__mapa .wkls-mapa {
  /* height:0 przy flex-grow:1 to jedyny sposob, zeby rysunek WYPELNIL komorke,
     a nie WYZNACZYL jej wysokosci. Z height:100% w komorce bez okreslonej
     wysokosci przegladarka liczy auto, mapa bierze wlasne proporcje (1600x1679)
     i rozpycha caly hero z 646 do 827 px - dokladnie ta sama pulapka, ktora
     wczesniej zastawilo kwadratowe zdjecie. Zerowa baza nie wnosi nic do
     wysokosci wiersza, wiec o niej decyduje kolumna z tekstem. */
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
  width: 100%;
  display: block;
}
.wkls-hero__zrodlo {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  /* --wkls-tekst-cichy (#6a6a6a) jest liczony pod biale tlo i na czerni daje
     3,64:1, czyli ponizej AA. Ten odcien mierzy 6,99:1 na --wkls-czern. */
  color: #9a9a9a;
  text-align: right;
}
.wkls-hero__zrodlo a { color: inherit; }

.wkls-mapa .pusta { fill: #131313; stroke: #2c2c2c; stroke-width: 3; }
.wkls-mapa .ma    { fill: #1e1809; stroke: var(--wkls-zloto); stroke-width: 4; }
.wkls-mapa .p-glow{ fill: var(--wkls-zloto); opacity: .2; r: 26; }
.wkls-mapa .p-dot { fill: var(--wkls-zloto); stroke: var(--wkls-czern); stroke-width: 3; r: 11; }
.wkls-mapa .pkt:hover .p-glow { opacity: .45; }
/* Podpisy leza na wierzchu punktow i dostaja ciemna otoczke. Bez niej liczba
   ginie w skupisku kropek w Srodmiesciu i na Woli - tam stoi 7 z 20 szkol. */
.wkls-mapa .dz {
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: var(--wkls-czern);
  stroke-width: 10;
  stroke-linejoin: round;
}
.wkls-mapa .dz-ile    { fill: var(--wkls-zloto); font: 700 60px/1 var(--wp--preset--font-family--oswald); }
.wkls-mapa .dz-nazwa  { fill: #8f8f8f; font: 600 36px/1 sans-serif; letter-spacing: .09em; }

@media (max-width: 900px) {
  /* Nad naglowkiem mapa nie ma sensu - najpierw ma padac nazwa ligi.
     Pasek 210 px byl dobry dla zdjecia, ale rysunek jest wyzszy niz szerszy. */
  .wkls-hero__mapa { min-height: 0; order: 0; padding: 4px 18px 12px; }
  .wkls-hero__mapa .wkls-mapa { flex: none; height: 400px; }
  /* Zmierzone: przy tej skali nazwa dzielnicy ma 7,3 px. Zostaja same liczby,
     a pelne nazwy sa dostepne z <title> przy kazdej dzielnicy. */
  .wkls-mapa .dz-nazwa { display: none; }
  .wkls-mapa .dz-ile { font-size: 74px; }
  /* Rysunek jest tu ponad dwa razy mniejszy, wiec punkty rosna w jednostkach
     viewBoxa, zeby na ekranie zostaly tej samej wielkosci co na pulpicie. */
  .wkls-mapa .p-glow { r: 46; }
  .wkls-mapa .p-dot  { r: 20; stroke-width: 5; }
}
@media (max-width: 700px) {
  /* Rysunek jest niemal kwadratowy (1600x1679), wiec o jego szerokosci
     decyduje wysokosc pojemnika. 360 px daje 343 px szerokosci, czyli prawie
     cala dostepna szerokosc telefonu - przy 290 px mapa zajmowala 276 z 354. */
  .wkls-hero__mapa .wkls-mapa { height: 360px; }
}


/* === 8. Pas faktów =================================================
   Serwis MA te liczby i do 17.09 nie pokazywał żadnej. Duża liczba jest
   podstawowym budulcem rejestru sportowego i jedynym szybkim dowodem,
   że rozgrywki istnieją naprawdę.
   =================================================================== */

.wkls-fakty {
  background: var(--wkls-czern);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.wkls-fakty__in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: var(--wkls-kontener);
  margin-inline: auto;
  padding: 40px var(--wkls-marges) 44px;
}
.wkls-fakt { display: flex; flex-direction: column; gap: 6px; }
.wkls-fakt__n {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.9rem);
  line-height: 1;
  color: var(--wkls-zloto);
  letter-spacing: .01em;
  /* Oswald nie ma cyfr tabelarycznych - kolumny liczb i tak by się
     nie wyrównały, więc nie udajemy tabeli. */
}
.wkls-fakt__o {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 700px) {
  .wkls-fakty__in { padding: 28px var(--wkls-marges) 32px; gap: 20px; }
}


/* === 9. Pasek dzielnic =============================================
   Przeniesiony spod hero - tam konkurował z nagłówkiem zamiast go
   domykać. Teraz zamyka pas faktów i jest cichszy: mniejszy stopień,
   bez żółtych kropek co słowo.
   =================================================================== */

/* Trzy tory MUSZA stac obok siebie, nie jeden pod drugim. Bez
   `display:flex` na pojemniku uklada je jeden pod drugim i pasek rosnie
   do trzech wierszy - zlapane na zrzucie 18.09, po przepisaniu arkusza.
   Kazdy tor jedzie o 100 % WLASNEJ szerokosci, wiec szew jest niewidoczny
   niezaleznie od tego, ile torow stoi w rzedzie. */
.wkls-dzielnice {
  background: var(--wkls-czern-glebia);
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .09);
  padding: 11px 0;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}
.wkls-dzielnice-track,
.wkls-dzielnice__tor {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  animation: wkls-przesuw 80s linear infinite;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #efefef;
}
.wkls-dzielnice-track span,
.wkls-dzielnice__tor span { padding-right: 18px; white-space: nowrap; }
/* Kropka rozdzielajaca idzie z arkusza, a nie z tresci - dzieki temu
   redakcja nie musi jej wpisywac przy kazdej nazwie. */
.wkls-dzielnice-track span::after,
.wkls-dzielnice__tor span::after {
  content: "•";
  color: var(--wkls-zloto);
  margin-left: 18px;
}
.wkls-dzielnice-track i,
.wkls-dzielnice__tor i { color: var(--wkls-zloto); font-style: normal; }

@keyframes wkls-przesuw {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Przełącznik pauzy zostaje - to wymóg WCAG 2.2.2 dla ruchu
   trwającego dłużej niż 5 s. */
.wkls-dzielnice__przelacznik { position: absolute; opacity: 0; pointer-events: none; }
.wkls-dzielnice__przelacznik:checked ~ .wkls-dzielnice-track,
.wkls-dzielnice__przelacznik:checked ~ .wkls-dzielnice__tor { animation-play-state: paused; }
.wkls-dzielnice__pauza {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #efefef; cursor: pointer; font-size: 12px;
  background: var(--wkls-czern-glebia);
  padding-inline: 10px;
}
.wkls-dzielnice__etykieta {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.wkls-dzielnice__gdy-stoi { display: none; }
.wkls-dzielnice__przelacznik:checked ~ .wkls-dzielnice__pauza .wkls-dzielnice__gdy-stoi { display: inline; }
.wkls-dzielnice__przelacznik:checked ~ .wkls-dzielnice__pauza .wkls-dzielnice__gdy-plynie { display: none; }


/* === 10. Kafle skrótów =============================================
   Do 17.09 były to cztery czarne pigułki wyśrodkowane na bieli, bez
   ikon i bez hierarchii - wyglądały jak etykiety, nie jak wejścia
   do najważniejszych treści serwisu. Kafel niesie nazwę, zdanie
   wyjaśniające i widoczne wejście.
   =================================================================== */

.wkls-skroty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.wkls-skrot {
  background: #fff;
  border: 1px solid var(--wkls-linia);
  border-radius: var(--wkls-promien);
  padding: 26px 24px 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .14s ease, transform .14s ease;
}
.wkls-skrot:hover,
.wkls-skrot:focus-visible { border-color: var(--wkls-czern); transform: translateY(-3px); }
.wkls-skrot h3 { color: var(--wkls-czern); }
.wkls-skrot p { font-size: 15px; color: var(--wkls-tekst-cichy); margin: 0; }
.wkls-skrot__wiecej {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wkls-czerwien);
  margin-top: auto;
  padding-top: 14px;
}
@media (max-width: 1000px) { .wkls-skroty { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wkls-skroty { grid-template-columns: 1fr; } }


/* === 11. Układ dwukolumnowy i lista punktów ======================== */

.wkls-dwie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.wkls-dwie h2,
.wkls-dwie .wp-block-heading { margin-bottom: 18px; }
@media (max-width: 900px) { .wkls-dwie { grid-template-columns: 1fr; gap: 36px; } }

.wkls-punkty {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.wkls-punkty li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.wkls-punkty__znak {
  width: 26px; height: 26px;
  border-radius: var(--wkls-promien);
  background: var(--wkls-czern);
  color: var(--wkls-zloto);
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  margin-top: 3px;
}
.wkls-punkty b {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .03em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.wkls-punkty div > span { font-size: 15px; color: var(--wkls-tekst-cichy); }


/* === 12. Kafle wpisów ============================================== */

.wkls-wpisy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .wkls-wpisy { grid-template-columns: 1fr; } }

.wkls-wpis {
  background: #fff;
  border: 1px solid var(--wkls-linia);
  border-radius: var(--wkls-promien);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .14s ease, transform .14s ease;
}
.wkls-wpis:hover,
.wkls-wpis:focus-visible { border-color: var(--wkls-czern); transform: translateY(-3px); }
/* Kadr o stałych proporcjach rezerwuje miejsce przed wczytaniem obrazu
   - to jedno z dwóch źródeł skoku układu, jakie zostały po iteracji 5. */
.wkls-wpis__kadr { aspect-ratio: 16 / 9; background: var(--wkls-czern); overflow: hidden; }
.wkls-wpis__kadr img { width: 100%; height: 100%; object-fit: cover; }
.wkls-wpis__tresc {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.wkls-wpis__data {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wkls-tekst-cichy);
}
.wkls-wpis h3 { color: var(--wkls-czern); }

/* Wariant z pętlą zapytania: ten sam kafel, ale znaczniki generuje
   WordPress. Klasa `wkls-wpisy` siedzi wtedy na bloku `post-template`,
   czyli na elemencie, który bezpośrednio zawiera kafle - siatka z góry
   działa bez zmian. Brakowało wyłącznie obudowy. */
/* Element listy generowany przez WordPressa nie niesie wygladu - jest
   wylacznie pojemnikiem. Wyglad niesie grupa `wkls-wpis` w srodku, ta sama,
   ktorej uzywa wariant statyczny. Dzieki temu kafel jest zdefiniowany RAZ.
   Gdyby wyglad siedzial tutaj, kafel mialby dwie ramki jedna w drugiej. */
.wkls-wpisy > .wp-block-post { display: flex; }
.wkls-wpisy > .wp-block-post > .wkls-wpis { width: 100%; }

.wkls-wpisy .wp-block-post-date {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wkls-tekst-cichy);
  margin-top: 20px;
}
.wkls-wpisy .wp-block-post-title { font-size: var(--wkls-h3); margin: 8px 0 0; }
.wkls-wpisy .wp-block-post-title a { text-decoration: none; color: var(--wkls-czern); }

/* Ten sam kadr dla pętli zapytania WordPressa (lista aktualności). */
.wkls-wpisy .wp-block-post-featured-image {
  aspect-ratio: 16 / 9;
  background: var(--wkls-czern);
  overflow: hidden;
  margin: 0;
}
.wkls-wpisy .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover;
}


/* === 13. Pas wezwania ============================================== */

.wkls-wezwanie { background: var(--wkls-czern); color: #fff; }
.wkls-wezwanie__in {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--wkls-kontener);
  margin-inline: auto;
  padding: 72px var(--wkls-marges);
}
.wkls-wezwanie h2,
.wkls-wezwanie .wp-block-heading { color: #fff; margin-bottom: 12px; }
.wkls-wezwanie p { color: var(--wkls-tekst-na-czerni); margin: 0; }
.wkls-wezwanie__prawa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.wkls-wezwanie__mail { font-size: 15px; color: var(--wkls-tekst-na-czerni); }
.wkls-wezwanie__mail a { color: var(--wkls-zloto); }
@media (max-width: 900px) {
  .wkls-wezwanie__in { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--wkls-marges); }
}


/* === 14. Partnerzy i patroni =======================================
   Rola nad polem, jedna lewa krawędź dla wszystkich. Do 16.09 były to
   dwa prawie niewidoczne prostokąty z cienką ramką na bieli.
   =================================================================== */

.wkls-patroni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}
.wkls-patron__rola {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wkls-tekst-cichy);
  margin: 0 0 12px;
}
.wkls-patron__pole {
  border: 1px solid var(--wkls-linia);
  border-radius: var(--wkls-promien);
  background: #fff;
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 18px;
}
.wkls-patron__pole img { max-height: 56px; width: auto; }


/* === 15. Stopka ====================================================
   Do 17.09 stopka miała 1259,3 px przy oknie 390 px - 149,2% wysokości
   ekranu, i była wyższa od treści na czterech z dziewięciu stron.
   Tutaj: bez wypunktowania, dwie kolumny odnośników na telefonie,
   logo i nazwa obok siebie. Zmierzone w makiecie: 640 px.
   =================================================================== */

footer.wp-block-template-part,
.wkls-stopka {
  background: var(--wkls-czern);
  color: var(--wkls-tekst-na-czerni);
  font-size: 15px;
}
.wkls-stopka__in {
  max-width: var(--wkls-kontener);
  margin-inline: auto;
  padding: 52px var(--wkls-marges) 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}
.wkls-stopka h4,
.wkls-stopka__tytul {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wkls-zloto);
  margin: 0 0 12px;
}
.wkls-stopka nav,
.wkls-stopka-lista {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wkls-stopka nav a,
.wkls-stopka-lista a {
  text-decoration: none;
  line-height: 2.2;
  color: var(--wkls-tekst-na-czerni);
  display: inline-block;   /* cel dotykowy - zmierzone 23 px przed poprawką */
  min-height: 24px;
}
.wkls-stopka nav a:hover,
.wkls-stopka nav a:focus-visible,
.wkls-stopka-lista a:hover,
.wkls-stopka-lista a:focus-visible { color: var(--wkls-zloto); }

.wkls-stopka__marka { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wkls-stopka__marka img { width: 56px; height: 56px; }
.wkls-stopka__marka b {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}
.wkls-stopka__spolecznosci { display: flex; gap: 10px; margin-top: 14px; }
.wkls-stopka__spolecznosci a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--wkls-promien);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 15px;
}
.wkls-stopka__spolecznosci a:hover,
.wkls-stopka__spolecznosci a:focus-visible { border-color: var(--wkls-zloto); color: var(--wkls-zloto); }

.wkls-stopka__dol { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 8px; }
.wkls-stopka__dol > div {
  max-width: var(--wkls-kontener);
  margin-inline: auto;
  padding: 18px var(--wkls-marges);
  font-size: 13px;
  color: #8f8f8f;      /* na #0b0b0b daje 6,09:1 - zmierzone, nie szacowane */
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .wkls-stopka__in { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px var(--wkls-marges) 22px; }
  .wkls-stopka__in > *:first-child { grid-column: 1 / -1; }
}


/* Pas tytułowy podstrony: stopień niżej niż nagłówek strony głównej,
   żeby hierarchia serwisu została czytelna. */
.wkls-pas-tytulowy h1,
.wkls-pas-tytulowy .wp-block-post-title {
  /* Dolna granica 3,2rem = 51,2 px, czyli 3,01:1 wobec tekstu 17 px.
     Pierwsza wersja (2,2rem) dawala przy 390 px 35,2 px i 2,07:1 - czyli
     GORZEJ niz stan zastany 2,44:1, ktory audyt wytknal jako splaszczenie
     hierarchii. Gorna granica 56 px trzyma tytul podstrony stopien nizej
     niz naglowek strony glownej (74,6 px przy 1440). */
  font-size: clamp(3.2rem, 10vw, var(--wkls-s5));
  line-height: 1.02;
  color: #fff;
  margin: 0;
}


/* === 16. Treść podstron ============================================
   Osiem podstron niesie długi tekst, listy i tabele. Miara czytania
   zostaje wąska (720 px) - szeroki wiersz męczy oko. Szeroka jest
   wyłącznie struktura: pasy, siatki kafli, tabele wyników.
   =================================================================== */

.wkls-tresc > * { max-width: var(--wkls-miara); }
.wkls-tresc > .alignwide,
.wkls-tresc > .alignfull,
.wkls-tresc > .wkls-pelna { max-width: none; }

.wkls-tresc h2 { margin-top: var(--wkls-rytm-b); }
.wkls-tresc h3 { margin-top: var(--wkls-rytm-w); }
.wkls-tresc h2:first-child,
.wkls-tresc h3:first-child { margin-top: 0; }

/* Tabela: nagłówek na czerni, wiersze rozdzielone linią, bez zebry.
   Zebra na czterech kolumnach dodaje szumu, a nie czytelności. */
.wkls-tabela,
.wkls-tresc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.wkls-tabela th,
.wkls-tresc table th {
  background: var(--wkls-czern);
  color: #fff;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
}
.wkls-tabela td,
.wkls-tresc table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wkls-linia);
}

/* Tabela szersza od ekranu przewija się w swoim pojemniku, a nie
   rozpycha całej strony. */
.wkls-przewijalna { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Lista dokumentów i szkół: jeden komponent zamiast trzech wariantów. */
.wkls-lista-kafli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.wkls-lista-kafli li {
  border: 1px solid var(--wkls-linia);
  border-radius: var(--wkls-promien);
  background: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}


/* === 17. Dostępność ================================================
   Reguły przeniesione z dawnych sekcji 9, 14, 15, 16, 17. Wszystkie
   mają zmierzone uzasadnienie i żadna nie jest kosmetyką.
   =================================================================== */

/* Zmierzone przy 390 px: przycisk menu 24x24 px przy wymaganych 44x44,
   pozycje menu 22,6 px wysokości. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding-block: 11px;
}

/* WCAG 2.5.8 zwalnia odnośniki OSADZONE W ZDANIU. Poniższe nimi nie są:
   tytuł wpisu na liście aktualności (zmierzone 20 px) oraz stos danych
   kontaktowych rozdzielony <br> (zmierzone 19-22 px). */
.wp-block-post-title a,
.wkls-dane-kontaktowe a {
  display: inline-block;
  min-height: 24px;
}
.wkls-dane-kontaktowe a { padding-block: 3px; }

/* Telefon w poziomie. Przy 844x390 nagłówek zabierał 71% wysokości
   ekranu; po tej regule 76 px, czyli 19%. Selektor celuje w sam
   `header`, bo header JEST częścią szablonu, nie jej potomkiem -
   ".wp-block-template-part header" od początku nie trafiało w nic. */
@media (max-height: 500px) and (orientation: landscape) {
  header.wp-block-template-part .wp-block-group.alignwide { padding-block: 6px; min-height: 0; }
  header.wp-block-template-part .wp-block-navigation { padding-block: 2px; }
  .wkls-hero__tekst { padding-block: 32px; }
  .wkls-hero__foto { height: 160px; }
}

/* Ograniczenie ruchu. Pasek dzielnic stoi, przejścia znikają. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wkls-skrot:hover,
  .wkls-wpis:hover,
  .wkls-akcja:hover { transform: none; }
}

/* Przejście do treści - pierwszy element w kolejności tabulacji. */
.wkls-przejdz {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--wkls-zloto);
  color: #111;
  padding: 12px 20px;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
}
.wkls-przejdz:focus { left: 16px; top: 16px; }


/* === 18. Odporność =================================================

   PRZYCISK BEZ PLIKU MÓWI TO WPROST
   Zmierzone porównanie getComputedStyle przycisku z aria-disabled
   i działającego "ZGŁOŚ SZKOŁĘ": tło, kolor tekstu, opacity, filter -
   wszystko identyczne. Różnił je WYŁĄCZNIE cursor: not-allowed, czyli
   sygnał dostępny tylko przy myszy. Dopisek dodaje arkusz, a nie treść,
   więc znika SAM w dniu, w którym ktoś wstawi adres pliku (filtr
   w mu-pluginie działa wyłącznie przy href równym dokładnie "#").

   SKOK UKŁADU PRZY PODMIANIE KROJU - DROGA JUŻ SPRAWDZONA I ZAMKNIĘTA
   Próbowane i odrzucone: krój zastępczy z nadpisanymi metrykami
   (size-adjust / ascent-override), czyli standardowa recepta. Dopasowanie
   wyszło co do 0,07 px na 3344 px szerokości, a CLS przy 390 px URÓSŁ
   z 0,08245 do 0,12932. Powód: skok nie bierze się ze średniej
   szerokości, tylko z ŁAMANIA WIERSZY. Stosunek szerokości Oswalda do
   Arialu nie jest jedną liczbą - rozrzut 0,683-0,859 między wagami
   i między wersalikami a tekstem mieszanym. Jedna wartość nie obsłuży
   obu naraz. NIE PRÓBUJ TEJ DROGI PONOWNIE. Rozwiązanie siedzi
   w font-display i we wstępnym pobieraniu kroju (mu-plugin), nie tutaj.
   =================================================================== */

.wkls-wkrotce::after {
  content: "wkrótce";
  display: inline-block;
  margin-inline-start: .6em;
  padding: .14em .55em;
  border-radius: var(--wkls-promien-akcja);
  background: #ffffff;
  color: #111111;          /* na bieli 18,1:1 */
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: .1em;
  white-space: nowrap;   /* bez tego lamie sie w srodku slowa przy 390 px */
}

/* Blok obrazu nie może rozpychać strony w poziomie. */
.wp-block-image img { max-width: 100%; height: auto; }