/* ==========================================================================
   Liga WBA — reguły komponentów.

   ŹRÓDŁO PRAWDY dla wartości: blok :root w context/2026-08-16-ligawba-ux/szablony/*.html
   (identyczny w 6 szablonach i w brand-book.html — sprawdzone: 40 tokenów, diff bez różnic).
   Wszystkie 40 tokenów są zadeklarowane w theme.json i tutaj używane WYŁĄCZNIE przez
   zmienne generowane przez WordPressa. Żadna wartość tokena nie jest tu powtórzona
   literałem — inaczej powstałoby drugie źródło prawdy.

   --------------------------------------------------------------------------
   DWA ODSTĘPSTWA W NAZWACH SLUGÓW — celowe, nie pomyłka:

   --border  ->  slug `hairline`   (zmienna --wp--preset--color--hairline)
   --text    ->  slug `body-text`  (zmienna --wp--preset--color--body-text)

   Dlaczego: slug palety generuje klasę `.has-<slug>-color` z `!important`.
   Slugi `border` i `text` dałyby `.has-border-color` i `.has-text-color`, a to są
   KLASY-FLAGI rdzenia WordPressa, dokładane przy KAŻDYM kolorze własnym
   (wp-includes/blocks/navigation-link.php:50, wp-includes/style-engine/class-wp-style-engine.php:149).
   Efekt kolizji: dowolny kolor własny bloku zostałby nadpisany przez preset z !important.
   Wartości i przeznaczenie tokenów pozostają 1:1, zmienia się tylko nazwa sluga.

   --------------------------------------------------------------------------
   PUŁAPKA NA PRZYSZŁOŚĆ — odstępy nazywają się `s-1`, nie `s1`:

   WordPress kebab-case'uje slugi przy generowaniu zmiennych (_wp_to_kebab_case),
   więc slug `s1` daje `--wp--preset--spacing--s-1`. Ale referencji
   `var:preset|spacing|s1` już NIE kebab-case'uje — wyprodukuje
   `var(--wp--preset--spacing--s1)`, czyli zmienną, która nie istnieje.
   Przeglądarka pomija taką deklarację bez żadnego błędu.
   Dlatego slugi to `s-1` … `s-10`: w tej postaci definicja i referencja się zgadzają.

   Pilnuje tego skrypt context/agents/2026-09-07-DEV-MOTYW-szablon-fse/sprawdz-zmienne.php
   (porównuje każde odwołanie w motywie ze zbiorem zmiennych realnie generowanych).

   --------------------------------------------------------------------------
   LITERAŁY PONIŻEJ, które NIE są tokenami brand booka — występują w szablonach
   jako wartości wpisane wprost i celowo nie awansują na tokeny:
     #C9CDD6, #9BA3B2  — tekst na ciemnym pasie (stopka, hero)
     rgba(255,255,255,.94), rgba(255,255,255,.10) — półprzejrzystości pasa i linii
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
}

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

/* --- nadkreślnik sekcji: .kicker z szablonu ------------------------------- */
.wba-kicker {
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0;
}

.wba-pagehead .wba-kicker {
	color: var(--wp--preset--color--gold);
}

/* --- ciemny pas nagłówka strony: .head / .hero z szablonu ----------------- */
.wba-pagehead {
	border-bottom: 4px solid var(--wp--preset--color--gold);
	position: relative;
	overflow: hidden;
}

/* okrąg boiska — dekoracja z .head::after */
.wba-pagehead::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 360px;
	height: 360px;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	pointer-events: none;
}

.wba-pagehead > * {
	position: relative;
	z-index: 1;
}

.wba-pagehead__title {
	color: var(--wp--preset--color--paper);
}

.wba-pagehead__desc,
.wba-pagehead__terms {
	color: #C9CDD6;
}

/* --- Powrót z wpisu na listę aktualności ---------------------------------
   Z otwartego wpisu nie dało się wrócić na listę inaczej niż przez menu:
   `single.html` miał pod artykułem tylko „Poprzedni / Następny wpis", a jedyne
   odnośniki do listy — czerwone kategorie pod tytułem — prowadzą do archiwum
   `/category/<nazwa>/`, czyli do innego zbioru niż `/aktualnosci/` z menu.

   Adres jest wpisany ścieżką, tak samo jak wszystkie odnośniki wewnętrzne
   w `parts/footer.html` i `parts/header.html`. Blok PHP liczący go z
   `get_option('page_for_posts')` byłby tu na wyrost: `/aktualnosci/` (strona
   8659) zostaje tym samym adresem także po planowanym przełączeniu na
   `templates/home.html`, opisanym niżej w README.

   KOLOR. `theme.json` daje każdemu odnośnikowi `color: red`, a na hover
   `red-700` — na ciemnym pasie oba są za ciemne. Nadpisujemy bez `!important`,
   bo reguła z `theme.json` siedzi w `:where()`, czyli ma wagę zerową; dwie
   klasy w selektorze wystarczą.

   STRZAŁKA z `::before`, a nie z treści bloku — żeby znak nie wszedł do
   tekstu odnośnika i żeby dało się go zmienić bez ruszania szablonu. */
.wba-powrot {
	margin: 0;
}

.wba-powrot a::before {
	content: "\2190";
	margin-right: .5em;
}

.wba-pagehead .wba-powrot {
	margin-bottom: var(--wp--preset--spacing--s-2);
}

/* `inline-block` z wyściółką, bo element `inline` ma pole wysokości kroju,
   a nie wiersza: zmierzone 14 px przy foncie 12 px i `line-height` 19,2 px.
   WCAG 2.5.8 wymaga 24 px dla celu, który nie jest linkiem w zdaniu — a ten
   stoi samodzielnie w akapicie. Po zmianie 29 px. `margin-bottom` schodzi
   z s-3 na s-2, żeby odstęp do daty został ten sam, co przed wyściółką. */
.wba-pagehead .wba-powrot a {
	color: #C9CDD6;
	display: inline-block;
	padding-block: 5px;
}

.wba-pagehead .wba-powrot a:hover,
.wba-pagehead .wba-powrot a:focus {
	color: var(--wp--preset--color--gold);
}

/* Wyjście spod artykułu. Osobny wiersz pod paskiem „Poprzedni / Następny",
   a nie trzecia pozycja w tym pasku: przy skrajnym wpisie jeden z sąsiadów
   wychodzi z rdzenia jako PUSTY `<div>` (patrz niżej), więc `space-between`
   rozkładałby trzy elementy o nierównych końcach i środkowy nie stawałby
   pośrodku. Własny wiersz stoi pośrodku niezależnie od tego, ilu sąsiadów
   wpis ma. */
.wba-powrot--koniec {
	margin-top: var(--wp--preset--spacing--s-5);
}

.wba-powrot--koniec a {
	display: inline-block;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-5);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--body-text);
	font-weight: 700;
}

.wba-powrot--koniec a:hover,
.wba-powrot--koniec a:focus {
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

/* --- Pasek sąsiadów wpisu: dwie stałe kolumny ----------------------------
   Układ zmieniał się z wpisu na wpis. Grupa miała `flexWrap: wrap`
   i `justifyContent: space-between`, a szerokość każdego odnośnika brała się
   z długości tytułu sąsiada — więc para stała obok siebie tylko dopóki suma
   ich szerokości naturalnych mieściła się w 1060 px kontenera.

   Zmierzone na sześciu wpisach (szerokości w px, przy 1100 px okna):

     second-league-24-may          313 + 307 =  640   obok siebie
     champions-league-16-17-may    326 + 309 =  655   obok siebie
     first-league-24-may           329 + 351 =  700   obok siebie
     8wba-finalowy-weekend         355 + 530 =  905   obok siebie
     champions-league-31-may       615 + 349 =  984   obok siebie
     second-league-31-may          534 + 610 = 1144   JEDEN POD DRUGIM

   Czemu zawijały, zamiast się ścisnąć, skoro mają `flex: 0 1 auto`? Bo przy
   `flex-wrap: wrap` przeglądarka najpierw dzieli elementy na wiersze, biorąc
   ich szerokość naturalną, a kurczy dopiero to, co w danym wierszu nadal się
   nie mieści. Element, który wylądował w wierszu sam, ma miejsca w nadmiarze,
   więc nie kurczy się wcale. Że mechanizm kurczenia istnieje, widać przy
   390 px: te same elementy o naturalnych 534 i 610 px mają zmierzone 350,
   a tekst zawija się na dwa wiersze.

   Drugi skutek zawinięcia: `space-between` przestawał cokolwiek robić — przy
   jednym elemencie w wierszu nie ma czego rozpychać, więc oba lądowały przy
   lewej krawędzi. Dlatego `space-between` jest zdjęte z szablonu: przy stałych
   kolumnach nie ma już czego rozkładać, a zostawione myliłoby przy czytaniu.

   Rozwiązanie: `flex-basis` liczone na połowę. Długi tytuł zawija się teraz
   WEWNĄTRZ swojej kolumny, zamiast spychać całość do nowego wiersza.
   `flex-grow: 0` jest tu istotne — przy wpisie najnowszym i najstarszym
   zostaje tylko jeden widoczny sąsiad, a z `grow: 1` samotny odnośnik rozlałby
   się na całą szerokość i „następny" przykleiłby się do lewej krawędzi, czyli
   na stronę zarezerwowaną dla „poprzedniego". Z `grow: 0` trzyma swoją połowę.

   `min-width: 0` zdejmuje domyślne `min-width: auto`, które nie pozwala
   elementowi flex zejść poniżej szerokości najdłuższego słowa. Tytuły bywają
   jednym długim wyrazem i bez tego rozepchnęłyby kolumnę. */
.wba-postnav__sasiedzi {
	gap: var(--wp--preset--spacing--s-5);
}

.wba-postnav__sasiedzi > * {
	flex: 0 1 calc(50% - var(--wp--preset--spacing--s-5) / 2);
	min-width: 0;
}

/* Rdzeń renderuje OBA elementy zawsze. Przy wpisie bez sąsiada z danej strony
   nie pomija bloku, tylko wypuszcza pusty `<div class="post-navigation-link-
   previous wp-block-post-navigation-link"></div>` — sprawdzone w kodzie
   odpowiedzi dla 44-sezon-ligowy-podsumowanie (brak poprzedniego) i dla
   odpalamy-zgloszenia-do-9wba (brak następnego).

   Pusty element ma zerową wysokość, ale nadal bierze udział w układzie: zajmuje
   swoją kolumnę i dokłada `gap` 20 px. Po zwinięciu kolumn poniżej 720 px widać
   to jako pustą przerwę nad jedynym odnośnikiem. `display: none` wyjmuje go
   z układu; kolumnę po właściwej stronie trzyma wtedy `margin-inline-start`
   przy „następnym". */
.wba-postnav__sasiedzi > .wp-block-post-navigation-link:empty {
	display: none;
}

/* --- Sąsiad w jednym wierszu, nadmiar tytułu wielokropkiem ----------------
   Tytuł dłuższy niż kolumna zawijał się na drugi wiersz. Teraz zostaje w jednym
   i jest ucinany przez `text-overflow: ellipsis`.

   Ucinany jest WYŁĄCZNIE tytuł, nie cały wiersz. Gdyby `overflow: hidden`
   siedziało na całym elemencie, wielokropek zjadałby najpierw koniec tytułu,
   a przy „następnym" (wyrównanym do prawej) — początek etykiety. Etykieta
   niesie kierunek („Poprzedni" kontra „Następny"), więc nie może zniknąć:
   dostaje `flex: none` i zostaje w całości zawsze.

   Element staje się kontenerem flex, żeby tytuł mógł się kurczyć niezależnie
   od etykiety. Uwaga na odstęp: między `<span>` a `<a>` stoi w kodzie zwykła
   spacja, ale węzeł tekstowy złożony z samych białych znaków NIE staje się
   elementem flex — spacja znika. Stąd `gap`, który ją przywraca.

   `min-width: 0` na tytule zdejmuje domyślne `min-width: auto`, które nie
   pozwoliłoby mu zejść poniżej szerokości najdłuższego słowa — bez tego
   wielokropek nigdy by się nie pojawił, tytuł po prostu rozepchnąłby kolumnę.

   Pełny tytuł zostaje w kodzie strony, ucięcie jest wyłącznie wizualne — więc
   czytnik ekranu i wyszukiwarka nadal widzą całość. */
.wba-postnav__sasiedzi .wp-block-post-navigation-link {
	display: flex;
	gap: .35em;
	white-space: nowrap;
}

.wba-postnav__sasiedzi .post-navigation-link-next {
	justify-content: flex-end;
}

.wba-postnav__sasiedzi .post-navigation-link__label {
	flex: none;
}

.wba-postnav__sasiedzi .wp-block-post-navigation-link a {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wba-postnav__sasiedzi .post-navigation-link-next {
	margin-inline-start: auto;
	text-align: right;
}

/* Poniżej 720 px kolumna jest za wąska na tytuł — ten sam próg, na którym
   motyw zwija inne układy dwukolumnowe. Wyrównanie do prawej schodzi razem
   z kolumnami: pod sobą, przy tej samej krawędzi, czyta się lepiej. */
@media (max-width: 720px) {
	.wba-postnav__sasiedzi > * {
		flex-basis: 100%;
	}

	.wba-postnav__sasiedzi .post-navigation-link-next {
		margin-inline-start: 0;
		text-align: left;
	}
}

/* --- tytuł sekcji: .block-h h2 z szablonu -------------------------------- */
.wba-sec-title {
	margin: 0;
}

/* --- karta wpisu: .post z szablonu --------------------------------------- */
.wba-post {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wba-post__thumb {
	margin: 0;
	background-color: var(--wp--preset--color--card-2);
}

/* Ramka 16:9, a NIE stała wysokość — ta sama poprawka, co w karcie hero
   8.09, tylko zostawiona wtedy w pięciu innych miejscach (index, archive,
   search, 404, wzorzec aktualności).

   Skąd się wzięło 110 px: z makiety, gdzie kafle miały `height:110px`
   i `background-size:cover`. Tylko że w makiecie obrazy były zmyślone
   i miały 1280×480, czyli 2,67:1 — przy karcie 376 px naturalna wysokość
   wychodziła 141 px, więc kadr 110 px zabierał 22 % i banner nadal się
   czytał.

   Prawdziwe obrazy wyróżniające są 16:9. Policzone na wszystkich 316:
     1,78 (16:9)  186 szt.   1,67   79 szt.   1,92   30 szt.
     pozostałe    21 szt., skrajne 1,24 i 2,34
   Przy karcie 376 px i wysokości 110 px to kadr 3,42:1, czyli WYCINAŁ 48 %
   wysokości zdjęcia — a że zdjęcia to drużyny z głowami u góry i banerem
   z nazwą u dołu, kadr wyśrodkowany ucinał jedno i drugie naraz.

   `object-fit: cover` zostaje, bo siatka trzykolumnowa musi mieć równe
   wysokości kafli. Przy 16:9 kosztuje to zero dla 186 obrazów, 6 % dla
   79 i 7 % dla 30 — czyli dla 93 % zbioru najwyżej kilka procent. */
.wba-post__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.wba-post__body {
	padding: var(--wp--preset--spacing--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-2);
	flex: 1;
}

.wba-post__title {
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
}

.wba-post__title a {
	color: var(--wp--preset--color--body-text);
}

.wba-post__title a:hover {
	color: var(--wp--preset--color--red);
}

.wba-post__excerpt {
	color: var(--wp--preset--color--muted);
	margin-top: 0;
}

.wba-post__excerpt .wp-block-post-excerpt__more-link {
	margin-top: auto;
	font-weight: 700;
	color: var(--wp--preset--color--red);
}

/* --- siatka wpisów: .news z szablonu (3 kolumny, gap s4) ----------------- */
.wba-news__grid {
	gap: var(--wp--preset--spacing--s-4);
}

/* --- paginacja ----------------------------------------------------------- */
.wba-pagination {
	gap: var(--wp--preset--spacing--s-3);
	font-weight: 700;
}

/* --- tabele: thead na atramencie, jak w brand booku ---------------------- */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	background: var(--wp--preset--color--card);
}

.wp-block-table thead th {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-align: left;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 12px 14px;
	border: 0;
}

.wp-block-table tbody td {
	padding: 11px 14px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* --- separator ----------------------------------------------------------- */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	opacity: 1;
}

/* ==========================================================================
   NAGŁÓWEK — odwzorowanie .topbar / .topbar-in / .brand / nav.main z szablonu
   ========================================================================== */

/* PRZYKLEJA SIĘ OPAKOWANIE, NIE SAM PASEK.
   `position: sticky` trzyma element wyłącznie w obrębie JEGO RODZICA, a
   rodzicem paska jest `header.wp-block-template-part` o dokładnie tej samej
   wysokości: zmierzone 77 px i 77 px. Pasek nie miał więc gdzie jechać i
   przyklejenie nigdy nie działało — przy `scrollY` 700 górna krawędź paska
   stała na −700 px, czyli odjeżdżał razem ze stroną. Na telefonie znaczyło to,
   że po zjechaniu w dół menu było nieosiągalne bez powrotu na samą górę
   strony o wysokości 8 520 px.
   Opakowanie jest dzieckiem `.wp-site-blocks` (4 147 px na stronie głównej),
   więc ma w czym jechać. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* WYSOKOŚĆ PRZYKLEJONEGO PASKA, DO ODCZYTU PRZEZ RESZTĘ MOTYWU. Token stoi tu,
   a nie w arkuszu karty meczu, bo opisuje pasek — a pasek jest tutaj. Wszystko,
   co też się przykleja, musi zaczynać się pod tą liczbą, inaczej wjedzie pod
   pasek (`z-index: 30`) i zniknie.
   Zmierzone `getBoundingClientRect().height`: 77,0 px przy 375, 1200 i 1440 px,
   na wszystkich pięciu typach stron. */
:root {
	--wba-pasek-gorny: 77px;
}

.wba-topbar {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* TŁO I ROZMYCIE SIEDZĄ NA WARSTWIE POD PASKIEM, NIE NA SAMYM PASKU.
   Powód jest mechaniczny, nie estetyczny. `backdrop-filter` inny niż `none`
   czyni z elementu BLOK ZAWIERAJĄCY dla potomków `position: fixed`
   (CSS Filter Effects 2, § backdrop-filter). Menu mobilne rdzenia to dokładnie
   taki potomek: `.wp-block-navigation__responsive-container.is-menu-open`
   ma `position: fixed; inset: 0` i liczyło te zera względem paska, nie okna.

   Zmierzone przed poprawką przy 375 × 812 px: nakładka 375 × 76 px zamiast
   375 × 812, przycisk „Zamknij menu” na y = −34 px (poza ekranem, nie do
   kliknięcia), 1114 px treści menu w oknie o wysokości 76 px. Widoczna była
   jedna pozycja, ucięta prawą krawędzią — menu mobilne było nieużywalne.

   Pseudoelement daje ten sam wygląd i nie tworzy bloku zawierającego dla
   nakładki, bo nakładka nie jest jego potomkiem. `z-index: -1` chowa go pod
   treścią paska i zostaje w jego kontekście składania (pasek ma własny przez
   `position: sticky` + `z-index: 30`), więc nie ucieka pod tło strony. */
.wba-topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* literał ze szablonu: półprzejrzysty papier pod blur */
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
}

/* padding jawnie, nie z useRootPaddingAwareAlignments — pomiar w przeglądarce
   dał paddingLeft/Right = 0 na tym elemencie, czyli logotyp dotykał krawędzi
   okna. Szablon ma .topbar-in{padding:0 var(--s5)}. */
/* 76 px, nie 66 (poprawka 8.09): logotyp ma 40 px, więc przy 66 px zostawało
   po 13 px nad i pod nim i pasek czytał się jak ściśnięty. 76 px daje po 18 px.
   Ten jeden wymiar jest odstępstwem od szablonu z sierpnia — świadomym. */
.wba-topbar__in {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	min-height: 76px;
	gap: var(--wp--preset--spacing--s-5);
	padding-inline: var(--wp--preset--spacing--s-5);
}

/* Odstęp trzyma PRZERWA KONTENERA, a nie margines przycisku — i to nie jest
   kwestia gustu. Reguła układu, którą rdzeń generuje dla tej grupy, zawiera
   `.wp-container-core-group-is-layout-… > * { margin: 0 }`. Ma siłę jednej
   klasy, tak samo jak `.wba-topbar__cta`, a wchodzi na stronę PO arkuszu motywu
   (jako `<style id="core-block-supports">` w nagłówku), więc przy równej
   specyficzności wygrywa. Zmierzone: `marginLeft` = 0 px przy jawnie zapisanym
   20 px. `gap` żadnemu resetowi nie podlega. */
.wba-topbar__right {
	gap: var(--wp--preset--spacing--s-5);
	margin-left: auto;
}

/* --- logotyp: .brand ----------------------------------------------------- */
.wba-brand {
	gap: 10px;
}

.wba-brand__mark {
	margin: 0;
	flex: none;
}

.wba-brand__mark img {
	/* 40 px → 48 px (+20 %) po wypadnięciu pozycji „Strona główna” z nawigacji
	   10.09.2026 — zwolnione miejsce w pasie idzie na znak, nie na powietrze. */
	height: 48px;
	width: auto;
	display: block;
	border-radius: 0;
}

/* Znak marki jest odnośnikiem na stronę główną (pozycja „Strona główna” wypadła
   z nawigacji 10.09.2026). Odnośnik musi być blokiem, inaczej jego własna
   wysokość linii dokłada kilka pikseli pod obrazkiem i pas nagłówka rośnie. */
.wba-brand__mark a {
	display: block;
	line-height: 0;
}

.wba-brand__wm {
	line-height: 1;
}

.wba-brand__name {
	margin: 0;
	line-height: 1;
}

.wba-brand__name a {
	color: var(--wp--preset--color--body-text);
}

/* 0.5rem i .2em to literały ze szablonu (.brand .wm small) — poniżej skali
   krojów, bo to element znaku firmowego, nie tekst treści. */
.wba-brand__sub {
	display: block;
	margin: 2px 0 0;
	font-size: .5rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	line-height: 1.2;
}

/* --- nawigacja: nav.main -------------------------------------------------
   Przerwa 20 px, nie 24 (poprawka 8.09). Cztery piksele mniej na sześciu
   przerwach to 24 px odzyskane — dokładnie tyle, ile kosztuje odsunięcie
   przycisku „Zgłoś drużynę" od menu. Pasek nie zrobił się więc szerszy
   i próg zwijania nawigacji przy 1160 px zostaje nienaruszony. */
.wba-nav {
	gap: var(--wp--preset--spacing--s-5);
}

.wba-nav .wp-block-navigation-item__content {
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}

/* Kolory pozycji rozdzielone na dwa konteksty. Wcześniej były wspólne i to był
   błąd: overlay mobilny ma tło --ink, a reguły :hover/:focus/current wymuszały
   --body-text (prawie czarny). Zmierzone prawdziwym kliknięciem w burger przy
   375 px: tekst rgb(20,22,28) na tle rgb(20,24,33), kontrast 1.02 — FAIL.
   Menu mobilne było praktycznie niewidoczne. Samo sprawdzenie, że overlay się
   otwiera, tego nie pokazywało. */

/* --- pasek na papierze (overlay zamknięty) --- */
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content,
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--body-text);
	border-bottom-color: var(--wp--preset--color--red);
}

/* --- overlay mobilny na --ink --- */
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	border-bottom: 0;
	padding: 14px 0;
	font-size: var(--wp--preset--font-size--medium);
}

.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

/* w overlayu podmenu jest listą w miejscu, nie kartą-dropdownem —
   biała karta na ciemnym tle byłaby obcym elementem */
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 0 var(--wp--preset--spacing--s-4);
	min-width: 0;
}

.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 0;
	font-size: var(--wp--preset--font-size--small);
}

.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--gold);
}

/* MARGINES BOCZNY I WYRÓWNANIE DO LEWEJ W NAKŁADCE.
   Pasek poziomy jest wyrównany do prawej (`items-justified-right` na bloku)
   i dla paska to jest dobre — ale nakładka dziedziczyła `align-items: flex-end`
   razem z nim. Zmierzone przy 375 px: sześć pozycji miało prawą krawędź na
   375,0 px, czyli dokładnie na krawędzi ekranu, przy pustej lewej połowie.
   W nakładce pełnoekranowej czyta się to jak tekst uciekający poza ekran.
   Rdzeń przewiduje tu własny padding, ale jego reguła przegrywa z układem
   bloku — zmierzony `padding` nakładki wynosił 0px. */
.wba-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding-inline: var(--wp--preset--spacing--s-5);
	padding-block-end: var(--wp--preset--spacing--s-5);
}

/* `.wp-block-navigation-item` (czyli każde `li`) musi być na tej liście razem
   z kontenerami: pozycja z podmenu jest kolumną flex obejmującą własny
   odnośnik ORAZ całe podmenu pod nim, więc dziedziczone `flex-end` dosuwało
   sam odnośnik do prawej krawędzi tej kolumny. Zmierzone: „Rozgrywki”
   zaczynało się na 159 px, choć jego `li` zaczyna się na 20 px.

   Selektory klasowe, nie `ul`/`li`: przy gołych nazwach elementów reguła
   przegrywała z układem bloku i `align-items` wracało do `flex-end`
   — sprawdzone pomiarem, nie założone. */
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wba-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

/* przycisk zamknięcia: 44 × 44, czyli tyle co burger — to jego para, a rdzeń
   daje mu 24 × 24, poniżej progu celu dotknięcia. Ikona zostaje 24 px,
   rośnie samo pole dotknięcia. */
.wba-nav .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

/* podmenu: karta na papierze, jak .card w szablonie */
.wba-nav .wp-block-navigation__submenu-container {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--s-2) 0;
	min-width: 232px;
}

/* Rozwijane menu na desktopie musi być białą kartą, a wychodziło czarne.
   Przyczyna nie jest w tym pliku: rdzeń dokleja kolory OVERLAYU MOBILNEGO
   do kontenera podmenu także na desktopie — kontener dostaje klasy
   `has-ink-background-color` i `has-paper-color`, bo blok nawigacji ma
   overlayBackgroundColor="ink" i overlayTextColor="paper". Klasy narzędziowe
   presetów rdzeń generuje z !important, więc zwykła reguła z `background:
   var(--card)` przegrywała bez śladu. Zmierzone przed poprawką:
   tło rgb(20,24,33), tekst rgb(255,255,255).
   Ramkę zabierała z kolei specyficzność: `.wp-block-navigation:not(
   .has-background) .wp-block-navigation__submenu-container` to (0,3,0),
   nasza reguła (0,2,0) — więc obowiązywało rgba(0,0,0,.15), nie --hairline.
   Stąd tutaj i wyższa specyficzność, i !important: to jedyny sposób pobicia
   klasy narzędziowej rdzenia. Overlay mobilny zostaje ciemny, dlatego
   selektor jest zawężony przez :not(.is-menu-open). */
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--card) !important;
	color: var(--wp--preset--color--body-text) !important;
	border: 1px solid var(--wp--preset--color--hairline);
}

.wba-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px var(--wp--preset--spacing--s-4);
	border-bottom: 0;
}

/* Wiersz pod kursorem w białej karcie: sam kolor tekstu nie wystarczy, bo
   pozycje i tak są ciemne. Podświetlamy cały wiersz, więc odnośnik musi być
   blokiem — inaczej tło obejmuje tylko szerokość napisu. */
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
}

.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wba-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--body-text);
}

/* przycisk przełączający podmenu — jedyna droga do podmenu z klawiatury
   dla rodziców bez adresu (Rozgrywki, O Lidze) */
.wba-nav .wp-block-navigation-submenu__toggle {
	color: inherit;
}

/* --- przycisk „Zgłoś drużynę”: .nav-btn ---------------------------------
   Przycisk stał 12 px od ostatniej pozycji menu i zlewał się z nawigacją
   w jedną zbitą taśmę — to była główna przyczyna wrażenia ściśniętego paska.
   Teraz 20 px przerwy kontenera, kreska pionowa i 20 px światła po niej,
   razem 41 px. Kreska niesie informację, a nie ozdobę: rozdziela NAWIGACJĘ
   od DZIAŁANIA. */
.wba-topbar__cta {
	flex: none;
}

/* Kreska tylko tam, gdzie jest co rozdzielać. Poniżej 1160 px nawigacja jest
   burgerem, a kreska między dwoma przyciskami nie mówi nic. */
@media (min-width: 1160px) {

	.wba-topbar__cta {
		padding-left: var(--wp--preset--spacing--s-5);
		border-left: 1px solid var(--wp--preset--color--hairline);
	}
}

.wba-topbar__cta .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- punkt łamania 1160 px — ZMIERZONY, nie przepisany z szablonu -------
   Rdzeń zwija nawigację przy 600 px (wp-includes/blocks/navigation/style.min.css,
   @media (min-width:600px) — sprawdzone w źródle). Szablon zwija przy 820 px,
   ale szablon rysowano na 7 KRÓTKICH etykietach.

   Pomiar na realnym menu (Chrome, 1160 px, po twardym przeładowaniu):
     logotyp 229 px + nawigacja 692 px (7 pozycji: 98+122+82+62+74+52+57
     = 548 px, plus 6 przerw × 24 px) + CTA 135 px + przerwy = 1089 px treści.
     Z poziomym paddingiem 2 × 20 px pasek potrzebuje 1129 px okna.
   Przy progu 820 px istniało 269-pikselowe pasmo (820–1089 px), w którym pasek
   się NIE mieścił, a burgera jeszcze nie było — czyli menu było nieosiągalne.
   Dlatego nawigacja pozioma dopiero od 1160 px (szerokość projektowa),
   poniżej overlay. Odstępstwo od szablonu jest świadome i wynika z pomiaru. */
@media (min-width: 600px) and (max-width: 1159.98px) {

	.wba-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wba-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
		z-index: 100000;
	}
}

/* CTA zostaje w pasku razem z burgerem (jak .nav-btn w szablonie) i znika
   dopiero przy 520 px — tam szablon też redukuje pas sponsora.
   Rachunek: logotyp 229 + przerwa 12 + CTA 135 + przerwa 12 + burger 44
   + padding 40 = 472 px, więc do 520 px pasek się mieści. */
@media (max-width: 519.98px) {

	/* dwie klasy, nie jedna: WordPress generuje dla core/buttons regułę układu
	   `.wp-container-core-buttons-is-layout-…{display:flex}` o tej samej sile
	   co pojedyncza klasa, i przy równej specyficzności wygrywa kolejność
	   źródeł. Zmierzone: przy 500 px `.wba-topbar__cta{display:none}` NIE
	   zadziałało — element nadal raportował display:flex. */
	.wba-topbar__cta.wp-block-buttons {
		display: none;
	}
}

/* burger: 44x44 jak .burger w szablonie */
.wba-nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   STOPKA — trzy pasy: partnerzy (jasny), stopka właściwa (ink), pas dolny

   Zgłoszenie 9.09: „stopka też wygląda słabo, zrób ją bardziej profesjonalną
   (nie musi być ciemna), i dodaj tam też partnera technologicznego Move
   Closer”. Stan przed poprawką: dwie ogromne białe płyty z logotypami na
   --ink i NIC więcej — bez nawigacji, bez kontaktu, bez noty o prawach,
   bez organizatora. Płyty były najjaśniejszym elementem całej strony i były
   puste, więc stopka czytała się jak niedokończony placeholder.

   DLACZEGO PŁYTY ZNIKAJĄ, A NIE ZOSTAJĄ ŁADNIEJSZE
   Płyta istniała z jednego powodu, zapisanego przy poprzedniej wersji:
   Stelman, Spalding i MM Pro Basket to ciemna grafika na przejrzystym tle
   i na --ink (#141821) zanikają. Powód był prawdziwy, ale rozwiązywał objaw.
   Właściwe rozwiązanie to JASNY PAS: logotypy leżą wprost na --surface,
   bez płyty, bez cienia i bez promienia. Ten sam układ ma większość serwisów
   ligowych (jasny pas partnerów nad ciemną stopką) i on rozstrzyga pytanie
   „ciemna czy jasna” — jedno i drugie, każde tam, gdzie ma sens.

   ROZMIARY LOGOTYPÓW SĄ WYLICZONE, NIE DOBRANE OKIEM
   Wszystkie sześć plików to obraz wyśrodkowany w przejrzystym płótnie
   180×130 albo 200×150 — i płótna mają RÓŻNE wypełnienie. Zmierzone
   obwiednie kanału alfa (skrypt na GD, próg alfa 100):

     PZKosz        180×130  ->  art 107×130   art/płótno w pionie 100 %
     Basket Kids   180×130  ->  art  90×124                        95 %
     Stelman       180×130  ->  art 173×46                         35 %
     Spalding      180×130  ->  art 178×74                         57 %
     TEKOpro       200×150  ->  art 132×132                        88 %
     MM Pro Basket 200×150  ->  art 195×72                         48 %

   Dlatego jednakowa wysokość płótna dawała nierówny obraz: przy 130 px
   PZKosz pokazywał 130 px grafiki, a Stelman 46 px. Wysokości niżej
   wyrównują POLE POWIERZCHNI grafiki (cel 4 900 px², czyli ~70×70), przez
   co wszystkie logotypy mają porównywalny ciężar optyczny. Każde jest przy
   tym pomniejszane (najwięcej Spalding 2,3×), więc nic się nie rozmywa.

   PASY NIE MAJĄ KRESEK MIĘDZY SOBĄ, bo obowiązuje zasada zapisana przy
   pasie statystyk: zmiana tonu JEST separatorem. Kreska zostaje tylko tam,
   gdzie tonu nie ma — między partnerami i sponsorami oraz nad pasem dolnym.
   ========================================================================== */

/* --- pas partnerów ------------------------------------------------------- */

.wba-partners.wp-block-group {
	padding-block: var(--wp--preset--spacing--s-7);
	margin-top: var(--wp--preset--spacing--s-10);
}

/* Oba zbiory stoją OBOK siebie, w proporcji 2:1 — bo tyle mają logotypów
   (cztery i dwa). Pierwsza wersja stawiała je jeden pod drugim z etykietą
   w kolumnie po lewej i zmierzone wyszło 350 px wysokości pasa, z czego
   ~340 px szerokości po prawej stało puste: cztery logotypy nie wypełnią
   1032 px, jeśli nie są ogromne. Pionowa kreska między zbiorami niesie
   informację (partner to nie sponsor), więc nie jest ozdobą. */
.wba-partners__in {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: stretch;
	gap: var(--wp--preset--spacing--s-8);
}

/* `stretch` na siatce plus `flex: 1` na rzędzie, a nie `align-items: center`
   na siatce. Przy centrowaniu zbiory mają różną wysokość (Stelman ma 102 px,
   najwyższy sponsor 88) i etykieta SPONSORZY zjeżdżała 20 px niżej niż
   PARTNERZY — zmierzone na zrzucie 1440 px. Tak obie etykiety stoją w jednej
   linii, a logotypy centrują się w równych polach. */
.wba-partners__grp {
	display: flex;
	flex-direction: column;
}

.wba-partners__in > .wba-partners__grp + .wba-partners__grp {
	margin-block-start: 0;
	padding-left: var(--wp--preset--spacing--s-8);
	border-left: 1px solid var(--wp--preset--color--hairline);
}

.wba-partners .wba-partners__lbl {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--muted);
}

/* space-between, nie stały odstęp: logotypy mają wtedy krawędzie wyrównane
   do krawędzi zbioru, a więc i do etykiety nad nimi. */
.wba-partners .wba-partners__row {
	flex: 1;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s-6);
	row-gap: var(--wp--preset--spacing--s-5);
}

.wba-partners .wba-partners__logo {
	margin: 0;
}

/* Wysokość idzie zmienną, a nie sześcioma regułami z `height`, żeby zejście
   na wąski ekran było JEDNYM współczynnikiem, a nie szóstym nadpisaniem. */
.wba-partners .wba-partners__logo img {
	display: block;
	width: auto;
	height: calc(var(--wba-logo-h) * var(--wba-logo-k, 1));
	border-radius: 0;
}

.wba-partners__logo.is-pzkosz {
	--wba-logo-h: 76px;
}

.wba-partners__logo.is-basketkids {
	--wba-logo-h: 86px;
}

.wba-partners__logo.is-stelman {
	--wba-logo-h: 102px;
}

.wba-partners__logo.is-spalding {
	--wba-logo-h: 80px;
}

.wba-partners__logo.is-tekopro {
	--wba-logo-h: 80px;
}

.wba-partners__logo.is-mmpb {
	--wba-logo-h: 88px;
}

/* --- stopka właściwa ----------------------------------------------------- */

/* #C9CDD6 — literał ze szablonu (footer color).
   UWAGA: grupa stopki NIE MOŻE mieć atrybutu textColor, bo preset generuje
   `.has-paper-color{color:… !important}` i zabija tę regułę. Zmierzone:
   przed zdjęciem textColor tekst stopki renderował się jako rgb(255,255,255). */
.wba-foot.wp-block-group {
	padding-block: var(--wp--preset--spacing--s-9);
	color: #C9CDD6;
}

.wba-foot__in {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s-8);
}

/* Zerowanie globalnego `--wp--style--block-gap: 20px`, który rdzeń dokłada
   każdemu dziecku poza pierwszym. W siatce ten margines nie jest odstępem
   między rzędami, tylko PRZESUNIĘCIEM elementu w dół: zmierzone 1440 px,
   etykieta SPONSORZY 20 px niżej niż PARTNERZY, nagłówki kolumn 20 px niżej
   niż herb. Dwie klasy w selektorze, bo reguły układu mają siłę jednej. */
.wba-foot__in.wp-block-group > * + * {
	margin-block-start: 0;
}

/* Dwie klasy, bo reguła rdzenia dla listy ma siłę jednej. */
.wba-foot .wba-foot__nav {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-2);
	font-size: var(--wp--preset--font-size--small);
}

.wba-foot .wba-foot__h {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--paper);
}

.wba-foot .wba-foot__h--2 {
	margin-block-start: var(--wp--preset--spacing--s-7);
}

/* Odnośniki: globalny `elements.link` z theme.json daje im czerwień, która na
   --ink ma 2,25:1. Selektor z dwiema klasami wygrywa z `:root :where(a…)`. */
.wba-foot a {
	color: #C9CDD6;
	text-decoration: none;
}

.wba-foot a:hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Obwódka fokusa jest ZŁOTA, nie czerwona jak w resztach motywu — i to jest
   różnica wymuszona pomiarem, nie gustem: --red na --ink daje 2,25:1, a --gold
   9,94:1. Czerwona obwódka na ciemnym pasie po prostu nie jest widoczna. */
.wba-foot a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 2px;
	color: var(--wp--preset--color--paper);
}

/* --- kolumna marki ------------------------------------------------------- */

/* Herb idzie na BIAŁEJ płytce — ta sama decyzja i ten sam powód, co przy
   `.wba-dr__herb` na stronie drużyny i przy pasie partnerów: logo WBA to
   ciemna grafika na przejrzystym tle i wprost na --ink ginie. Zmierzone na
   zrzucie 1440 px przed poprawką: znak był widoczny, ale czytał się jak
   plama. Płytka jest o promień mniejsza niż herb drużyny, bo to znak
   serwisu, nie bohater strony. */
.wba-foot__brand .wba-brand__mark {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	padding: var(--wp--preset--spacing--s-2);
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--md);
}

.wba-foot__brand .wba-brand__mark img {
	height: 68px;
	width: auto;
}

.wba-foot__brand .wba-brand__name {
	color: var(--wp--preset--color--paper);
}

.wba-foot__brand .wba-brand__sub {
	color: #9BA3B2;
}

.wba-foot .wba-foot__about {
	margin: var(--wp--preset--spacing--s-5) 0 0;
	max-width: 30ch;
	color: #9BA3B2;
}

/* Odznaka sezonu to jedyny mocny akcent w stopce. Numer bierze się z danych
   („8WBA” to sposób, w jaki liga zapisuje sezony — patrz wzorzec
   wba/stopka-marka), więc nie zestarzeje się w styczniu. */
.wba-foot .wba-foot__sezon {
	margin: var(--wp--preset--spacing--s-6) 0 0;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: 7px 16px;
	border: 1px solid rgba(248, 184, 0, .40);
	border-radius: var(--wp--custom--radius--pill);
}

.wba-foot__sezon-l {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #9BA3B2;
}

.wba-foot__sezon-n {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

/* --- pas dolny ----------------------------------------------------------- */

.wba-foot .wba-foot__dol {
	margin-block-start: var(--wp--preset--spacing--s-8);
	padding-top: var(--wp--preset--spacing--s-6);
	border-top: 1px solid rgba(255, 255, 255, .10);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s-5);
}

.wba-foot .wba-foot__copy,
.wba-foot .wba-foot__org {
	margin: 0;
	color: #9BA3B2;
}

.wba-foot .wba-foot__org {
	margin-block-start: 4px;
}

.wba-foot__mc {
	gap: var(--wp--preset--spacing--s-4);
}

.wba-foot .wba-foot__mc-lbl {
	margin: 0;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #9BA3B2;
}

.wba-foot .wba-foot__mc-logo {
	margin: 0;
}

.wba-foot__mc-logo img {
	display: block;
	height: 21px;
	width: auto;
	border-radius: 0;
}

/* --- zejście na wąskie ekrany -------------------------------------------- */

@media (max-width: 1023.98px) {

	.wba-foot__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--s-7);
	}

	.wba-foot__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 899.98px) {

	.wba-partners__in {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--s-6);
	}

	.wba-partners__in > .wba-partners__grp + .wba-partners__grp {
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--s-6);
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--hairline);
	}

	/* Po rozklejeniu zbiorów rząd ma całą szerokość pasa, a `space-between`
	   rozpycha DWA logotypy sponsorów na przeciwne krawędzie — zmierzone przy
	   768 px: 504 px pustki między TEKOpro i MM Pro Basket. Od tego progu
	   logotypy idą więc po lewej, ze stałym odstępem. */
	.wba-partners .wba-partners__row {
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--s-9);
	}
}

@media (max-width: 599.98px) {

	.wba-partners .wba-partners__row {
		--wba-logo-k: .68;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		place-items: center;
		gap: var(--wp--preset--spacing--s-5);
	}

	.wba-foot .wba-foot__dol {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   HERO — odwzorowanie .hero / .hero-in / .spotlight z szablonu

   UWAGA na ciemne tło: grupa hero NIE ma atrybutu textColor (świadomie — patrz
   lekcja przy stopce, gdzie `.has-paper-color{…!important}` zabijało regułę
   motywu). Kolor ustawiam zwykłą regułą na kontenerze, a potomkowie dziedziczą.
   Bez tego tekst odziedziczyłby --body-text i byłby ciemny na ciemnym.
   ========================================================================== */

.wba-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 4px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--paper);
}

/* okrąg i linia środkowa — dekoracja „boiska” z .hero::before / ::after */
.wba-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -140px;
	width: 320px;
	height: 320px;
	border: 2px solid rgba(255, 255, 255, .07);
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

.wba-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: rgba(255, 255, 255, .06);
	pointer-events: none;
}

/* 48 px w pionie, nie 40 (poprawka 8.09). Przy 40 px pas miał 332 px wysokości
   na hasło w stopniu wyświetlaniowym, akapit, dwa wezwania i kartę — treść
   niemal dotykała krawędzi pasa. */
.wba-hero__in {
	position: relative;
	z-index: 1;
	padding-block: var(--wp--preset--spacing--s-9);
	gap: var(--wp--preset--spacing--s-7);
}

.wba-hero .wba-kicker {
	color: var(--wp--preset--color--gold);
}

.wba-hero__title {
	text-transform: uppercase;
	line-height: 1.02;
	color: var(--wp--preset--color--paper);
}

/* akcent w haśle — .hero h1 span w szablonie */
.wba-hero__accent {
	color: var(--wp--preset--color--gold);
}

/* #C9CDD6 — literał ze szablonu (.hero p) */
.wba-hero__lead {
	color: #C9CDD6;
	max-width: 46ch;
	margin: 0;
}

.wba-hero__cta {
	gap: var(--wp--preset--spacing--s-3);
}

/* .btn-light z szablonu: biały przycisk na ciemnym pasie.
   Dwie klasy w selektorze, żeby wygrać ze `.wp-element-button` z theme.json
   bez sięgania po !important. */
.wba-btn-light .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--body-text);
	box-shadow: none;
}

.wba-btn-light .wp-block-button__link:hover,
.wba-btn-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--card-2);
	color: var(--wp--preset--color--body-text);
}

/* --- karta najnowszego wpisu: .spotlight ---
   #1C2130 i rgba(255,255,255,.10) to literały ze szablonu.

   PRZEBUDOWA PRAWEJ STRONY PASA (8.09). Trzy rzeczy naraz:
   1. karta jest WĘŻSZA od kolumny (440 px w 496 px) i dociśnięta do prawej,
      więc między hasłem a kartą stoi 56 px światła zamiast zera,
   2. zdjęcie idzie w ramce 16:9 i nie jest kadrowane — wszystkie dwanaście
      ostatnich obrazów wyróżniających to 1280×720, czyli dokładnie 16:9,
      a poprzedni kadr 494×132 (3,74:1) wycinał ponad połowę wysokości,
   3. etykieta „Najnowsze" przestała być nadkreślnikiem nad tytułem i weszła
      na zdjęcie jako chorągiewka. Wersalikowy nadkreślnik nad nagłówkiem to
      najczęstszy odruch, a nie decyzja; chorągiewka na zdjęciu ma zadanie:
      OZNACZA obraz i oszczędza jeden wiersz w treści karty. */
.wba-spotlight__card {
	position: relative;
	background: #1C2130;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	max-width: 440px;
	margin-left: auto;
	transition: border-color .18s ease;
}

.wba-spotlight__card:hover,
.wba-spotlight__card:focus-within {
	border-color: rgba(255, 255, 255, .26);
}

.wba-spotlight__thumb {
	margin: 0;
}

/* Ramka proporcji zostaje w CSS, choć źródło jest już 16:9: gdyby kiedyś
   trafił się obraz pionowy, karta ma nie zmienić wysokości pasa. */
.wba-spotlight__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.wba-spotlight__body {
	padding: var(--wp--preset--spacing--s-5);
}

/* Chorągiewka na zdjęciu. Złoto z palety, nie nowy kolor:
   #14161C na #F8B800 to 10,20:1 — zmierzone, z zapasem nad AA. */
.wba-spotlight__lbl {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 6px 12px;
	border-bottom-right-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--on-gold);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
}

.wba-spotlight__title {
	margin: 0 0 var(--wp--preset--spacing--s-2);
	letter-spacing: .02em;
	text-transform: none;
}

.wba-spotlight__title a {
	color: var(--wp--preset--color--paper);
}

.wba-spotlight__title a:hover {
	color: var(--wp--preset--color--gold);
}

.wba-spotlight__date {
	color: #C9CDD6;
	margin: 0;
}

@media (max-width: 819.98px) {

	.wba-hero__in.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}

	.wba-hero__in.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Po zwinięciu kolumn karta wraca do lewej krawędzi, żeby jej brzeg stał
	   w jednej linii z hasłem i akapitem nad nią. Ogranicznik rośnie do 560 px,
	   ale NIE znika: przy pełnych 728 px zdjęcie 16:9 ma 408 px wysokości
	   i pas rósł do 856 px (zmierzone). Przy 560 px zdjęcie ma 314 px,
	   pas 738 px, a po prawej zostaje światło zamiast rozdmuchanego plakatu. */
	.wba-spotlight__card {
		max-width: 560px;
		margin-left: 0;
	}
}

/* ==========================================================================
   PAS SPONSORA TYTULARNEGO — odwzorowanie .sponsor / .sponsor-in z szablonu
   ========================================================================== */

.wba-sponsor {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-sponsor__in {
	padding-block: var(--wp--preset--spacing--s-4);
	gap: var(--wp--preset--spacing--s-5);
	text-align: center;
}

.wba-sponsor__lbl {
	margin: 0;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}

/* Znak sponsora tytularnego. Wysokość, nie szerokość: pas ma trzymać rytm
   niezależnie od proporcji znaku, gdyby liga kiedyś podmieniła plik.
   Bez max-width przy wąskim ekranie znak wyszedłby poza kolumnę, bo <img>
   z atrybutem width nie zawęża się sam. */
.wba-sponsor__logo {
	margin: 0;
	line-height: 0;
}

.wba-sponsor__logo img {
	height: 30px;
	width: auto;
	max-width: 100%;
}

/* Przerywana ramka slotu została z czasu, gdy miejsce na logo było puste
   (do 10.09.2026). Reguła zostaje, bo pas sponsora w Edytorze Witryny
   pokazuje slot, dopóki wzorzec nie zostanie wstawiony. */
.wba-sponsor__slot {
	margin: 0;
	padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-5);
	border: 1px dashed var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--faint);
	font-style: italic;
}

/* ==========================================================================
   NAGŁÓWEK SEKCJI — .block-h z szablonu
   ========================================================================== */

.wba-block-h {
	gap: var(--wp--preset--spacing--s-4);
}

.wba-block-h__more {
	margin: 0;
}

.wba-block-h__more a {
	color: var(--wp--preset--color--red);
	font-weight: 700;
}

/* ==========================================================================
   PIONOWY RYTM PASÓW PEŁNEJ SZEROKOŚCI

   W szablonie pasy stykają się: .topbar → .sponsor → .hero → .layout, bez
   przerw; odstęp pionowy niesie WYŁĄCZNIE wewnętrzny padding każdego pasa
   (.sponsor-in 16 px, .hero-in 40 px, .layout 32 px).

   Zmierzone przed poprawką (Chrome, 1200 px):
     przerwa pasek→sponsor 20 px, sponsor→hero 20 px, hero→aktualności 20 px,
     .wba-main margin-top 20 px,
     oraz .wba-sponsor i .wba-hero z padding-block 20 px, którego NIE ustawiałem.
   Źródła: globalny --wp--style--block-gap: 20px oraz reguła rdzenia
   `:where(.wp-block-group.has-background){padding:1.25em 2.375em}`.

   Dwie klasy w selektorach, bo reguły układu WordPressa mają siłę jednej klasy
   i przy równej specyficzności wygrywa kolejność źródeł — czego nie kontroluję.
   Marginesy wpisane jawnie w atrybutach bloków są stylem liniowym, więc te
   reguły ich nie ruszają; zerują tylko odstęp pochodzący z block-gap.
   ========================================================================== */

.wp-site-blocks > .wba-main {
	margin-block-start: 0;
}

.wba-main.wp-block-group > * {
	margin-block-start: 0;
}

.wba-sponsor.wp-block-group,
.wba-hero.wp-block-group {
	padding-block: 0;
}

/* ==========================================================================
   PAS STATYSTYK — TABELA, CZOŁÓWKA STRZELCÓW, NAJBLIŻSZE MECZE

   Trzy bloki dynamiczne z `inc/blok-tabela-skrot.php`, `inc/blok-strzelcy.php`
   i `inc/blok-najblizsze-mecze.php`. Odpowiedniki sekcji .mini, .scorer i .up
   z makiety context/2026-08-16-ligawba-ux/szablony/index.html.

   Styl leży TUTAJ, a nie w arkuszach `blocks/<blok>/style.css`, z jednego
   wymiernego powodu:
   `wp_maybe_inline_styles()` ma wspólny budżet na wstrzykiwanie arkuszy w treść
   strony, a arkusz widgetu (13 990 B) mieści się w nim dziś tylko dlatego, że
   nikt inny go nie zjada. Ten plik ma 22 kB, czyli JEST już nad progiem i wchodzi
   jako osobny plik — dopisanie do niego nie rusza budżetu. Trzy nowe arkusze
   bloków wypchnęłyby arkusz widgetu z wstrzyknięcia i dodały mu żądanie sieciowe.

   Rytm tonalny pasów: hero (ink) → widget (surface) → statystyki (papier)
   → najbliższe (surface) → aktualności (papier). Zmiana tonu jest separatorem,
   dlatego pasy nie mają dodatkowych kresek poziomych.
   ========================================================================== */

/* --- nagłówek sekcji samowystarczalny ------------------------------------
   `.wba-block-h` we wzorcach dostaje układ flex z klasy kontenera rdzenia
   (`.wp-container-core-group-is-layout-*`). Blok renderowany w PHP takiej klasy
   NIE dostaje, bo nie przechodzi przez mechanizm układów. Dlatego układ i odstęp
   dolny wpisujemy w samą klasę — wartości są identyczne z tymi, które wzorce
   mają w atrybutach, więc dla wzorców nic się nie zmienia. */
.wba-block-h {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--s-4);
}

/* --- herb drużyny w kartach statystyk ------------------------------------ */
.wba-crest {
	flex: none;
	object-fit: contain;
}

/* Zaślepka o rozmiarze herbu: trzyma kolumnę nazw w jednej linii. */
.wba-crest--pusty {
	display: inline-block;
	width: 24px;
	height: 24px;
}

/* --- biała karta: .card + .pad z makiety --------------------------------- */
.wba-karta {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: var(--wp--preset--spacing--s-5);
}

/* --- pas z treścią strony głównej ----------------------------------------
   `wp:post-content` wchodzi do szablonu, żeby treść wpisana w edytorze strony
   „Strona główna" NIE GINĘŁA. Bez tego bloku pole treści tej strony jest w
   wp-admin martwą powierzchnią: redaktor pisze, zapisuje i nie widzi nic —
   pułapka, w którą łatwo wpaść i trudno się z niej domyślić.
   Pas zwija się do zera, gdy strona nie ma treści, bo inaczej pusty blok
   zostawiałby 64 px pionowego odstępu między widgetem a tabelą. */
.wba-tresc:not(:has(.wp-block-post-content > *)) {
	display: none;
}

/* --- pas z tabelą i strzelcami ------------------------------------------- */
.wba-statystyki__kol.wp-block-columns {
	gap: var(--wp--preset--spacing--s-6);
	margin-bottom: 0;
}

/* Sekcja wypełnia kolumnę na pełną wysokość, żeby dwie karty obok siebie
   kończyły się na tej samej linii niezależnie od liczby wierszy. */
.wba-statystyki .wba-tabela,
.wba-statystyki .wba-strzelcy {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wba-statystyki .wba-karta {
	flex: 1;
}

/* --- plakietka rozgrywek: .lgtag z makiety -------------------------------
   Promień `sm`, a nie `pill` jak w makiecie, i to jest poprawka na danych:
   w makiecie napis brzmiał „Liga WBA • po 11 kol." (21 znaków wymyślonych),
   a prawdziwy to „Champions League · Dywizja A · po 11 kolejkach" (45 znaków).
   Pigułka złamana na dwie linie wygląda na błąd; zaokrąglony znacznik nie. */
.wba-tabela__lg,
.wba-strzelcy__lg {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--s-3);
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--on-red);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.45;
	text-transform: uppercase;
}

/* --- tabela: .mini z makiety --------------------------------------------- */

/* `position: relative` NIE JEST TU OZDOBĄ — bez niego cały serwis przewija się
   w poziomie na telefonie.

   Nagłówki tabel mają rozwinięcia skrótów w `<span class="screen-reader-text">`
   (rdzeń WP: `position: absolute`, 1×1 px, `clip-path: inset(50%)`). Bez
   przodka pozycjonowanego blokiem zawierającym takiego elementu jest OKNO,
   więc span wymyka się każdemu `overflow` po drodze i zostaje w pozycji
   statycznej — czyli tam, gdzie stoi jego nagłówek, np. 767 px od lewej przy
   oknie 375 px. Jego prawy kraniec staje się wtedy szerokością dokumentu.

   Zmierzone przy oknie 375 px: karta zawodnika przewijała się o 393 px, karta
   meczu o 900 px, a zrzut po przewinięciu pokazywał czystą biel. Tabele NIE
   były winne — one obcinają poprawnie (kontener 293 px, treść 1327 px).
   Dlatego `overflow-x: clip` na opakowaniu strony nic nie dawało: nie obcina
   się czegoś, czego blokiem zawierającym jest okno.

   Diagnoza z niezależnego audytu (BIZ, 10.09.2026) — moja pierwsza próba
   celowała w tabele i była chybiona. */
.wba-tabela__obudowa {
	position: relative;
	overflow-x: auto;
}

.wba-tabela__t {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
}

/* `overflow-wrap: break-word` przychodzi z zewnątrz (dziedziczone, nie z tego
   motywu — zmierzone `getComputedStyle`) i w wąskiej tabeli robiło szkodę:
   liczba „11" łamała się na dwie linie jako „1" i „1", a „PIASECZUSETS" na
   „PIASECZUS" i „ETS". Komórki liczbowe dostają `nowrap`, nazwa drużyny może
   się łamać, ale WYŁĄCZNIE na spacjach. */
.wba-tabela__t th,
.wba-tabela__t td {
	overflow-wrap: normal;
	white-space: nowrap;
	word-break: normal;
}

.wba-tabela__t .wba-tabela__tm {
	white-space: normal;
}

.wba-tabela__t th {
	/* Układ odniesienia dla podpowiedzi pod spodem. Przyklejone kolumny
	   (`.wba-wykaz__lp`, `.wba-wykaz__kto`) nadpisują to na `sticky` własnym,
	   mocniejszym selektorem — i dobrze, bo one skrótów nie mają. */
	position: relative;
	padding: 6px;
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Selektor MUSI być złożony z dwóch klas: `.wba-tabela__t th` ma siłę (0,1,1),
   więc sama klasa kolumny (0,1,0) przegrywała i wszystkie nagłówki wychodziły
   do prawej — „Drużyna" stała nad nazwami wyrównanymi do lewej. Zmierzone:
   `getComputedStyle(th).textAlign` = „right" dla wszystkich siedmiu kolumn. */
.wba-tabela__t .wba-tabela__th-poz,
.wba-tabela__t .wba-tabela__th-tm {
	text-align: left;
}

/* Rozwinięcie skrótu NIE siedzi już w `title` — od 15.09.2026 niesie je dymek
   `.wba-tabela__opis` niżej, a od 16.09.2026 wywołuje go `.wba-tabela__skrot`.
   Do 16.09.2026 stało tu zdanie „Rozwinięcie skrótu zostaje w `title`”, które
   przestało być prawdą przy pierwszej z tych zmian i nikt go nie poprawił.
   Kropkowanej kreski pod spodem nie ma celowo: w nagłówku o wysokości 11 px
   czytała się jak artefakt renderowania. */
.wba-tabela__t abbr {
	border: 0;
	cursor: help;
	text-decoration: none;
}

/* WYWOŁYWACZ DYMKA — przycisk opakowujący skrót. Dlaczego przycisk, a nie
   `tabindex` na `<abbr>`: powód siedzi w `wba_skrot_z_opisem()`
   (inc/statystyki-wspolne.php), razem z umową o jednym przycisku na nagłówek.

   Tutaj liczy się jedno: przycisk ma być NIEWIDOCZNY. Nagłówek po jego dołożeniu
   ma wyglądać co do piksela tak samo, jak wyglądał, więc oddajemy wszystko, co
   przeglądarka nadaje przyciskowi z własnego arkusza.

   `font: inherit` JEDNYM SKRÓTEM, a nie osobnymi własnościami: `<button>` nie
   dziedziczy rodziny, rozmiaru ani `line-height`, a rozjazd tego ostatniego
   podniósłby wiersz nagłówka w każdej tabeli serwisu. `letter-spacing`
   i `text-transform` trzeba dopisać osobno, bo NIE są częścią skrótu `font`,
   a nagłówek jest rozstrzelony i pisany wersalikami.

   `position` ZOSTAJE STATYCZNY i to nie jest przeoczenie. Dymek pozycjonuje się
   bezwzględnie względem `<th>` (`top: calc(100% + 4px); right: 0`). Gdyby
   przycisk dostał `position: relative`, przejąłby rolę bloku zawierającego
   i dymek odmierzałby się od szerokości samego skrótu zamiast od komórki.

   Bez własnego `cursor`: dziedziczy `help` z `<abbr>` w środku, a w tabeli
   sortowalnej `.wba-wykaz__sortuj` nadpisuje to na `pointer` — ta klasa stoi
   dalej w pliku, więc przy równej sile selektora wygrywa. */
.wba-tabela__t .wba-tabela__skrot {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
}

/* Obrys fokusa rysujemy sami, bo domyślny obrysowuje CAŁY przycisk — a ten
   w tabeli sortowalnej jest rozciągnięty na szerokość komórki i obwódka wokół
   pustego pola nie mówi, co jest zaznaczone.

   Kolor i grubość jak w reszcie serwisu (`red-700`, 2 px) — konwencja
   z `mecz-staty.css`, `mecz-zapis.css`, `mecz-mapa.css`.

   ODSUNIĘCIE DODATNIE, w odróżnieniu od box score, gdzie jest ujemne. Tam
   przycisk zdejmuje wypełnienie komórki ujemnymi marginesami i sięga jej
   krawędzi, więc obrys na zewnątrz wyszedłby poza kontener z `overflow-x: auto`
   i został przycięty. Tutaj przycisk siedzi WEWNĄTRZ 6-pikselowego wypełnienia
   `<th>`, więc 2 px na zewnątrz nadal mieści się w komórce — zmierzone
   w przeglądarce, pudełko obrysu nie wychodzi poza obrys tabeli. */
.wba-tabela__t .wba-tabela__skrot:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

/* PODPOWIEDŹ PRZY SKRÓCIE KOLUMNY. Zastąpiła `title` (15.09.2026), czyli dymek
   natywny. Ten ma dwie wady, których nie da się obejść atrybutem: pokazuje się
   po około sekundzie zwłoki i nie da się go wywołać palcem. `cursor: help`
   wyżej zostaje bez zmian — znak zapytania nad skrótem to jedyny sygnał, że
   jest tu czego szukać, więc zmieniło się tylko to, co się po nim dzieje.

   `opacity`, A NIE `display: none` — i to nie jest wybór estetyczny.
   `display: none` znosi układ, więc dymek nie ma pudełka i nie da się zmierzyć,
   czy nie wystaje poza obudowę przewijaną. Przy `opacity: 0` pudełko zostaje
   i sprawdzian czyta jego położenie BEZ najechania, którego zrzut DOM-u i tak
   nie potrafi wywołać. `pointer-events: none` dokłada to, co `display: none`
   dawało za darmo: niewidoczny dymek nie może przechwycić kursora.

   BEZ `transition` — celowo. Zamówione było „od razu”, a przejście, choćby
   dwustumilisekundowe, jest właśnie tą zwłoką, przez którą natywny dymek
   przestał wystarczać.

   Nagłówek jest wersalikami, rozstrzelony, w kolorze wyblakłym i 11-pikselowy.
   Dymek dziedziczyłby to wszystko, więc każdą z tych rzeczy trzeba odwołać
   wprost — inaczej wyjaśnienie byłoby mniej czytelne niż skrót, który wyjaśnia.

   Kontrast tła `ink` (#141821) do tekstu `paper` (#FFFFFF): 17,76:1, policzone
   z luminancji relatywnej. Próg AA to 4,5:1. */
.wba-tabela__opis {
	position: absolute;
	z-index: 4;
	top: calc(100% + 4px);
	right: 0;
	width: max-content;
	max-width: 220px;
	padding: 6px 8px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--paper);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	text-align: left;
	text-transform: none;
	white-space: normal;
}

/* TRZY WEJŚCIA DO DYMKA, BO SĄ TRZY SPOSOBY OBSŁUGI STRONY. Do 16.09.2026 była
   tu jedna reguła — `abbr:hover`.

   CO Z ZARZUTU ZMIERZYŁEM, ZANIM DOŁOŻYŁEM RESZTĘ — bo połowa go nie przeszła.
   KLAWIATURA: `<abbr>` bez `tabindex` jest nieosiągalne Tabem i tu zarzut trafia
   w całości — dymka nie dało się wywołać z klawiatury w ogóle.
   DOTYK: zarzut mówił, że dotknięcie nagłówka „nie pokazuje nic”, i to się NIE
   POTWIERDZIŁO. Chrome z emulacją urządzenia dotykowego zostawia na dotkniętym
   elemencie LEPKI `:hover` (zgodność wsteczna z czasów, gdy strony robiono na
   mysz), więc stary układ odsłaniał się dotknięciem. Zmierzone na atrapie dwóch
   nagłówków: `opacity` 0 → 1 po dotknięciu, `abbr:hover` = true.

   1. MYSZ — `abbr:hover`, bez zmian. Dymek jest NASTĘPNYM rodzeństwem skrótu,
      więc wystarczy selektor sąsiedztwa: bez `:has()` i bez wiązania się z całą
      komórką. Najechanie na samą komórkę nadal nie odsłania niczego — kursor ze
      znakiem zapytania stoi nad skrótem i to on obiecuje wyjaśnienie, a nie
      puste pole obok. W tabeli sortowalnej to rozróżnienie jest szczególnie
      ważne, bo przycisk sortujący zajmuje CAŁĄ szerokość komórki.

   2. KLAWIATURA — `:focus-visible` na przycisku skrótu. Nie `:focus`: przycisk
      w tabeli sortowalnej jest jednocześnie przyciskiem sortującym, a kliknięcie
      myszą zostawia na nim fokus. Przy `:focus` dymek zawisałby po każdym
      posortowaniu nad pierwszym wierszem — czyli nad liczbą, po którą się
      właśnie sortowało. `:focus-visible` przy kliknięciu myszą nie zapala się,
      przy Tabie tak.

   3. DOTYK — `:focus` pod `@media (hover: none)`. `:focus-visible` po dotknięciu
      się NIE zapala (przeglądarka uznaje dotyk za wskaźnik, nie za klawiaturę) —
      zmierzone, nie założone. Ta gałąź NIE JEST jedynym, co odsłania dymek pod
      palcem: lepki hover z akapitu wyżej robi to samo. Jest natomiast jedynym,
      co opiera zachowanie na semantyce OPISANEJ (fokus), a nie na heurystyce
      zgodności, która znika, gdy cokolwiek innego przejmie wskaźnik, i różni się
      między silnikami — iOS traktuje dotknięcie elementu klikalnego inaczej niż
      zwykłego tekstu, a tego nie miałem na czym zmierzyć.
      Że robi coś realnego, też jest zmierzone: po dotknięciu i odsunięciu
      wskaźnika BEZ dotykania czegoś innego lepki hover znika, fokus zostaje,
      a dymek świeci dalej tylko dzięki tej gałęzi — ze zdjętą gałęzią `opacity`
      spada do 0. Pomiar: `tools/podpowiedzi-skrotow/gest.py`, „GEST 2”.
      Zapłatą jest to, że po dotknięciu nagłówka w tabeli sortowalnej dymek stoi
      do następnego dotknięcia gdzie indziej.

   CZEGO TU NADAL NIE MA: zamykania Escapem (WCAG 1.4.13 „Dismissible”).
   Wymaga JavaScriptu, a tabele statyczne — skład drużyny, kariera zawodnika,
   tabela skrócona — żadnego skryptu nie wczytują. Zgłoszone świadomie jako
   brak, nie przeoczone. */
.wba-tabela__t abbr:hover + .wba-tabela__opis,
.wba-tabela__t .wba-tabela__skrot:focus-visible .wba-tabela__opis {
	opacity: 1;
}

@media (hover: none) {
	.wba-tabela__t .wba-tabela__skrot:focus .wba-tabela__opis {
		opacity: 1;
	}
}

/* 12 px w pionie, nie 8 jak w makiecie: karta tabeli i karta strzelców stoją
   w jednym rzędzie i rozciągają się do wspólnej wysokości, a pięć wierszy
   tabeli jest niższe od pięciu wierszy czołówki. Zmierzone przy 8 px: karta
   409 px, treść 311 px, czyli 98 px martwego pola na spodzie. Luźniejsze
   wiersze wypełniają je czymś pożytecznym zamiast pustką. */
.wba-tabela__t td {
	padding: 12px 6px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.wba-tabela__t .wba-tabela__poz,
.wba-tabela__t .wba-tabela__tm {
	text-align: left;
}

/* KOMÓRKA NAZWY NIE JEST FLEXEM — i to jest naprawa, nie kosmetyka.

   Do 11.09.2026 stało tu `display: flex`, żeby herb stanął obok nazwy drużyny.
   Skutek uboczny był taki, że komórka WYPADAŁA z modelu kolumn tabeli, a CSS
   2.1 §17.2.1 owija sąsiadujące niekomórkowe rodzeństwo w JEDNĄ anonimową
   komórkę. Tabela, która postawiła tę klasę na dwóch sąsiednich komórkach,
   miała więc w wierszu o jedną kolumnę mniej niż w nagłówku i KAŻDA liczba
   stała pod złym nagłówkiem — wyglądając przy tym poprawnie na zrzucie.

   Zmierzone na sześciu konfiguracjach: jedna flexowa komórka w wierszu daje
   rozjazd 0,0 px (dostaje własną anonimową komórkę), dwie sąsiadujące dają
   18 z 20 kolumn przesuniętych, do 143,1 px przy 1280 px.

   Wymagało to już trzech nadpisań w trzech różnych kontenerach
   (`.wba-zw__sezony`, `.wba-zw__lista`, tabele wykazów). Trzy wyjątki od
   jednej reguły znaczą, że zła jest reguła, nie kontenery — więc flex idzie
   do WNĘTRZA komórki, gdzie i tak już był: `.wba-tabela__lnk` jest flexem
   i to on ustawia herb obok nazwy. Wszystkie 12 użyć tej klasy w motywie
   siedzi na `<td>` albo `<th>` (sprawdzone gerpem), więc komórki wracają do
   swojego naturalnego `table-cell` bez deklarowania go. */

/* Herb bez otaczającego odnośnika trafia się tylko przy drużynie bez sluga —
   dziś takiej nie ma (112 z 112 mają slug), ale wtedy flexa nie ma i odstęp
   musi dać margines. */
.wba-tabela__tm > .wba-crest {
	margin-right: var(--wp--preset--spacing--s-2);
}

.wba-tabela__nm {
	font-weight: 700;
	line-height: 1.2;
}

.wba-tabela__pkt {
	font-weight: 800;
}

/* --- numer miejsca: .pos z makiety, lider na złoto ----------------------- */
.wba-poz,
.wba-strzelec::before {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--wp--preset--color--card-2);
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.wba-poz.is-lider {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--on-gold);
}

/* --- seria formy --------------------------------------------------------- */
.wba-forma {
	display: inline-flex;
	gap: 3px;
}

/* `<i>` bez kursywy: element niesie tu znaczenie „plakietka", nie emfazę. */
.wba-forma__z {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border-radius: 5px;
	color: var(--wp--preset--color--on-red);
	font-size: .625rem;
	font-style: normal;
	font-weight: 800;
	line-height: 1;
}

.wba-forma__z.is-w {
	background: var(--wp--preset--color--win);
}

.wba-forma__z.is-l {
	background: var(--wp--preset--color--loss);
}

.wba-forma__z.is-n {
	background: var(--wp--preset--color--card-2);
	color: var(--wp--preset--color--muted);
}

/* --- czołówka strzelców: .scorer z makiety ------------------------------- */
.wba-strzelcy__l {
	counter-reset: strzelec;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wba-strzelec {
	counter-increment: strzelec;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-3) 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Numer rysuje licznik CSS, bo `<ol>` niesie kolejność już w znaczeniu —
   wypisywanie jej drugi raz w treści dublowałoby ją dla czytnika ekranu.
   Numer jest tu na miejscu: to ranking, a nie lista dowolna. */
.wba-strzelec::before {
	content: counter(strzelec);
}

.wba-strzelec:first-child {
	padding-top: 0;
}

.wba-strzelec:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wba-strzelec__herb {
	display: flex;
	flex: none;
}

.wba-strzelec__kto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wba-strzelec__nm {
	font-weight: 600;
	line-height: 1.25;
}

.wba-strzelec__tt {
	color: var(--wp--preset--color--muted);
	line-height: 1.25;
}

.wba-strzelec__pts {
	margin-left: auto;
	color: var(--wp--preset--color--red);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.1;
	text-align: right;
	white-space: nowrap;
}

.wba-strzelec__jed {
	display: block;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Zasada kwalifikacji idzie na SPÓD karty, nie do plakietki na górze:
   plakietka odpowiada na pytanie „czyje to dane", a nie „jak je policzono".
   Wciśnięta w plakietkę łamała ją na dwie linie i podnosiła kartę o 17 px. */
.wba-tabela__nota,
.wba-strzelcy__nota {
	margin: var(--wp--preset--spacing--s-3) 0 0;
	padding-top: var(--wp--preset--spacing--s-3);
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted);
}

/* --- najbliższe mecze: .up z makiety, ale w pasie pełnej szerokości ------ */

/* Tło idzie na PAS, nie na sekcję bloku: sekcja siedzi w kontenerze o szerokości
   treści (1160 px), więc pomalowana na szaro dałaby prostokąt na środku strony
   zamiast pasa od krawędzi do krawędzi. */
.wba-najblizsze-pas {
	background: var(--wp--preset--color--surface);
}

/* 300 px, nie 248: przy 248 px na 1 160 px szerokości wchodziły cztery kostki
   po 278 px, a w takiej kostce na nazwę drużyny zostawało ~130 px i „HUTNIK
   WARSZAWA", „BBALL BOOMERS", „BASKET KOCJANA" łamały się na dwie linie
   (zmierzone: kostki po 122 px wysokości). Przy 300 px wchodzą trzy kostki
   po ~371 px i nazwy mieszczą się w jednej linii. */
.wba-najblizsze__l {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--s-4);
	list-style: none;
	margin: 0;
	overflow-wrap: normal;
	padding: 0;
	word-break: normal;
}

/* Kostka jest biała, a nie przezroczysta na tle pasa, i to jest decyzja
   zmierzona: `faint` (#6B7484) na `surface` (#F4F5F7) daje 4,32:1, czyli poniżej
   AA; na białym 4,71:1 i przechodzi. Godzina i skrót miesiąca są właśnie
   w `faint`, więc kostka musi mieć własne, jaśniejsze tło. */
.wba-mecz {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-4);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wba-mecz__kiedy {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	width: 52px;
}

.wba-mecz__d {
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.wba-mecz__m {
	color: var(--wp--preset--color--faint);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wba-mecz__vs {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-1);
	min-width: 0;
	font-size: .875rem;
	font-weight: 600;
}

.wba-mecz__tm {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	line-height: 1.2;
}

/* Kreska stoi w kolumnie herbów, nie na lewej krawędzi: gospodarz i gość leżą
   jeden pod drugim, więc separator wyrównany do lewej odczepiał się od obu
   i czytał się jak zabłąkany znak przy dacie. Wyśrodkowany na szerokość herbu
   spina oba wiersze w jedną parę. */
.wba-mecz__x {
	width: 24px;
	color: var(--wp--preset--color--faint);
	font-weight: 700;
	text-align: center;
}

.wba-mecz__godz {
	flex: none;
	color: var(--wp--preset--color--faint);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Odnośnik do karty meczu. Wersalik w rozmiarze mikro, a NIE pastylka
   z obwódką jak `.wba-dr__ml` w tabeli meczów drużyny: kostka ma już 52 px
   kolumny daty, dwa wiersze nazw i godzinę, więc obwódka zabierała szerokość
   właśnie nazwom — a to one są treścią kostki.
   `min-height: 24px` nie jest ozdobą: sam napis w mikro ma ~14 px wysokości,
   czyli poniżej minimalnego celu dotknięcia (WCAG 2.5.8, 24 × 24 px).
   Kolor `muted` (#59616E) na białej kostce daje 6,25:1 — patrz komentarz
   o tle kostki wyżej, na `surface` ten sam kolor by nie przeszedł. */
.wba-mecz__lnk {
	display: flex;
	flex: none;
	align-items: center;
	min-height: 24px;
	padding-inline: var(--wp--preset--spacing--s-2);
	color: var(--wp--preset--color--muted);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-mecz__lnk:hover,
.wba-mecz__lnk:focus {
	color: var(--wp--preset--color--red);
}

/* Karta stanu pustego rozkłada zdanie i odnośnik na przeciwne końce, zamiast
   zostawiać 1 160 px białego pola pod jednym akapitem. */
.wba-najblizsze .is-pusto .wba-karta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s-4);
}

/* Czołówka strzelców przed pierwszą kolejką mówi tym samym głosem co pusty
   pas najbliższych meczów — to ten sam stan strony głównej. */
.wba-najblizsze__pusto,
.wba-strzelcy__pusto {
	margin: 0;
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

.wba-najblizsze__pusto-link,
.wba-strzelcy__pusto-link {
	margin: 0;
}

.wba-strzelcy__pusto-link {
	margin-top: var(--wp--preset--spacing--s-3);
}

.wba-najblizsze__pusto-link a,
.wba-strzelcy__pusto-link a {
	color: var(--wp--preset--color--red);
	font-weight: 700;
}

/* --- węższe ekrany -------------------------------------------------------
   Kolumna „Forma" wypada pierwsza: jest oznaczona `aria-hidden`, więc nie
   niesie treści dla czytnika ekranu, a bez niej tabela mieści się bez
   przewijania w poziomie na 360 px. */
@media (max-width: 560px) {

	.wba-tabela__th-forma,
	.wba-tabela__forma {
		display: none;
	}

	/* Ciaśniejsza tabela na wąskim ekranie: przy 360 px na treść zostaje 278 px,
	   a przy stopniu pisma .875rem i odstępach 6 px kolumna nazwy schodziła pod
	   szerokość „PIASECZUSETS" i nazwa się łamała. */
	.wba-tabela__t {
		font-size: .8125rem;
	}

	.wba-tabela__t th {
		padding: 6px 4px;
	}

	.wba-tabela__t td {
		padding: 10px 4px;
	}

	/* Herb w czołówce strzelców schodzi z wąskiego ekranu. Jest dekoracyjny
	   (`alt=""`), a drużyna stoi wypisana słowami w wierszu pod nazwiskiem —
	   więc nic nie ginie, a kolumna z nazwiskiem zyskuje 40 px. Zmierzone przy
	   360 px: pozycje listy miały 79-97 px, bo i nazwisko, i drużyna łamały się
	   na dwie linie. Numer miejsca zostaje: to ranking, kolejność jest treścią. */
	.wba-strzelec__herb {
		display: none;
	}

	.wba-strzelec {
		gap: var(--wp--preset--spacing--s-2);
	}
}

/* ==========================================================================
   PASEK WYBORU ROZGRYWEK — blok `wba/pasek-rozgrywek`

   Dwa wiersze mają CELOWO różny wygląd, bo niosą różny rodzaj wyboru. Liga
   jest nawigacją — podkreślenie pod napisem, jak zakładka. Dywizja jest
   filtrem wewnątrz ligi — pigułka, jak przełącznik. Ten sam wygląd w obu
   wierszach kazałby czytać hierarchię z samego wcięcia. Ten podział był już
   w zakładkach wewnątrz widgetu tabeli i zostaje bez zmian; zmieniło się
   miejsce paska i jego zasięg.

   STANU WYBRANEGO NIE MA W TYM ARKUSZU. Reguły „ta liga jest wybrana” i „ta
   dywizja jest wybrana” generuje PHP do `<style>` w nagłówku, bo muszą
   wymieniać konkretne slugi z bazy i muszą zadziałać przed pierwszym
   malowaniem — patrz `wba_wybor_css()`. Szukanie ich tutaj jest pomyłką,
   dlatego stoi tu ta uwaga.

   ODSTĘP POD PASKIEM TO PADDING, NIE MARGINES, i to nie jest kwestia gustu:
   reguła układu, którą rdzeń generuje dla grupy `.wba-statystyki`, zawiera
   `.wp-container-core-group-is-layout-… > * { margin: 0 }`, ma siłę jednej
   klasy i wchodzi na stronę PO arkuszu motywu — więc margines pojedynczej
   klasy przegrywa. Ta sama pułapka co przy `.wba-topbar__right`.
   ========================================================================== */

.wba-pasek {
	padding-bottom: var(--wp--preset--spacing--s-6);
}

.wba-pasek__ligi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-4);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Zerowanie jest obowiązkowe, bo to `<button>`: bez `appearance` i `font:
   inherit` przeglądarka daje mu własne tło, obramowanie i krój systemowy —
   reguły motywu dla przycisków (`.wp-element-button`) tych elementów nie
   dotyczą, a te przyciski mają wyglądać jak tekst, nie jak akcja. */
.wba-pasek__t {
	appearance: none;
	/* -1 px w dół: podkreślenie wybranej ligi nakrywa kreskę paska, zamiast
	   stać nad nią jako druga, grubsza linia. */
	margin: 0 0 -1px;
	padding: 0 2px var(--wp--preset--spacing--s-2);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 2px 2px 0 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	/* Stopień pisma większy niż w zakładkach wewnątrz widgetu (.875 → 1 rem):
	   pasek nie jest już elementem jednej karty, tylko wyborem rządzącym całym
	   pasem statystyk, i musi wyglądać na nadrzędny wobec nagłówków sekcji
	   pod nim. */
	font-size: 1rem;
	/* Grubość pisma jest ta sama w obu stanach. Pogrubienie wybranej ligi
	   zmieniałoby jej szerokość, więc pasek przeskakiwałby przy każdym
	   kliknięciu — stan niesie kolor i podkreślenie. */
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.4;
}

.wba-pasek__t:hover,
.wba-pasek__t:focus {
	color: var(--wp--preset--color--ink);
}

/* DRUGI WIERSZ MA STAŁĄ WYSOKOŚĆ — to odpowiedź na cenę nazwaną przy decyzji
   o dwóch poziomach paska. Ligi bez dywizji nie mają w nim pigułek, więc bez
   tego wysokość paska skakałaby przy przełączaniu, a cała treść pod nim
   przesuwałaby się o tę wartość. Wysokość trzyma się dwiema rzeczami naraz:
   `min-height` jako podłogą i tym, że pigułka i napis pojedynczej fazy mają
   IDENTYCZNĄ wysokość pudełka (ten sam stopień pisma, ta sama interlinia, to
   samo dopełnienie pionowe). Zmierzone przesunięcie: 0 px. */
.wba-pasek__dyw {
	display: flex;
	align-items: center;
	min-height: 1.6rem;
	margin-top: var(--wp--preset--spacing--s-3);
}

.wba-pasek__grupa {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
}

.wba-pasek__d {
	appearance: none;
	margin: 0;
	padding: 5px 12px;
	background: var(--wp--preset--color--card-2);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	/* `muted`, nie `faint`: na tle `card-2` faint daje 4,13:1, czyli pod AA
	   dla drobnego pisma. Zmierzone, nie oszacowane. */
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.3;
}

.wba-pasek__d:hover,
.wba-pasek__d:focus {
	color: var(--wp--preset--color--ink);
}

/* Nazwa jedynej fazy ligi bez dywizji: TEKST, nie przycisk. Przełącznik
   z jedną opcją jest kontrolką, której nie da się użyć — a miejsce w wierszu
   trzeba zająć, żeby treść pod paskiem nie skakała. Dopełnienie i metryki
   pisma są te same co w pigułce, żeby wysokość wiersza była identyczna. */
.wba-pasek__jedna {
	/* `block`, NIE `inline-block`, i to jest różnica ZMIERZONA, nie
	   stylistyczna. Przy `inline-block` wiersz dywizji miał 27,09 px zamiast
	   25,59 px, bo blok rodzica liczy wtedy pełną wysokość linii razem z
	   miejscem na znaki podrzędne linii bazowej — a pigułki są elementem
	   `flex`, czyli blokowym, i tej szpary nie mają. Skutek: treść pod paskiem
	   przesuwała się o 1,50 px przy przełączaniu na ligę bez dywizji.
	   Po zmianie przesunięcie wynosi 0 px. */
	display: block;
	padding: 5px 0;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wba-pasek__t:focus-visible,
.wba-pasek__d:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

/* --- nazwa drużyny jako odnośnik do jej strony ---------------------------
   Odnośnik zastąpił w komórce dwa elementy (herb i nazwę), więc PRZEJMUJE ich
   układ: `.wba-tabela__tm` jest flexem i jego jedynym dzieckiem jest teraz
   `<a>`. Bez tego herb i nazwa stanęłyby jeden pod drugim.
   Podkreślenie z globalnej reguły `a:hover` biegłoby pod herbem — zdejmujemy
   je z odnośnika i wracamy z nim na sam napis. */
.wba-tabela__lnk {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	min-width: 0;
	color: inherit;
}

.wba-tabela__lnk:hover,
.wba-tabela__lnk:focus {
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

.wba-tabela__lnk:hover .wba-tabela__nm,
.wba-tabela__lnk:focus .wba-tabela__nm {
	text-decoration: underline;
}

/* Nazwisko zawodnika jako odnośnik do jego karty — w box score karty meczu,
   w tabeli składu na stronie drużyny i w bloku strzelców na stronie głównej.
   Kolor dziedziczy, żeby tabela nie zamieniła się w płachtę niebieskich
   napisów: tu KAŻDY wiersz jest odnośnikiem, więc wyróżnianie ich kolorem
   nie nosi już żadnej informacji. Podkreślenie kropkowane mówi, że da się
   kliknąć, a pełne pojawia się przy najechaniu — ta sama logika, co przy
   `.wba-tabela__lnk` wyżej. */
.wba-zw-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--wp--preset--color--faint);
	text-underline-offset: 0.2em;
}

.wba-zw-link:hover,
.wba-zw-link:focus {
	color: var(--wp--preset--color--red);
	text-decoration-style: solid;
	text-decoration-color: currentColor;
}

/* ==========================================================================
   STRONY DANYCH — trasy `/druzyna/<slug>/`, `/mecz/<...>-<id>/`,
   `/terminarz/<sezon>/<poziom>/` i `/zawodnik/<slug>/`

   Pas i kolumna treści są WSPÓLNE dla wszystkich czterech tras, nie skopiowane:
   każda ma mieć kolumnę dokładnie tej samej szerokości co strona główna,
   a cztery zapisy tej samej arytmetyki rozjechałyby się przy pierwszej zmianie
   makiety.

   Szablon jest plikiem PHP (`inc/szablon-druzyny.php`), więc `<main>` NIE
   dostaje klas układu WordPressa (`is-layout-constrained`, `has-global-padding`)
   — te powstają wyłącznie dla bloków przechodzących przez mechanizm układów.
   Dlatego szerokość i marginesy boczne wpisujemy tutaj, ODWZOROWUJĄC model
   rdzenia: pas trzyma marginesy boczne (te same zmienne
   `--wp--style--root--padding-*`, którymi steruje `theme.json`), a szerokość
   1160 px ogranicza treść w środku. Ta sama arytmetyka co na stronie głównej,
   więc obie strony mają kolumnę treści dokładnie tej samej szerokości.
   ========================================================================== */

.wba-dr__pas,
.wba-mecz__pas,
.wba-tm__pas,
.wba-zw__pas {
	padding-top: var(--wp--preset--spacing--s-7);
	padding-right: var(--wp--style--root--padding-right);
	padding-bottom: var(--wp--preset--spacing--s-10);
	padding-left: var(--wp--style--root--padding-left);
}

/* `.wba-mecz-karta`, A NIE `.wba-mecz`, i to nie jest kaprys nazewniczy:
   `.wba-mecz` JEST JUŻ ZAJĘTE — od `blok-najblizsze-mecze.php` (l. 164), gdzie
   oznacza jeden kafel meczu w białej karcie (wiersz flex z obramowaniem).
   Zmierzone w przeglądarce po pierwszej wersji tej reguły: sztuczny
   `<li class="wba-mecz">` dostawał `flex-direction: column`, `max-width: 1160px`
   i `margin-inline-start: 320px`, czyli kafel zamieniłby się w wyśrodkowaną
   kolumnę na całą szerokość treści. Dzisiaj tego nie widać, bo blok stoi
   w stanie pustym (`is-pusto`) — `najblizsze_mecze()` wymaga
   `rozpoczecie >= teraz`, a wszystkie cztery mecze `STATUS_SCHEDULED` w bazie
   są z przeszłości. Pierwszy zaplanowany mecz w przyszłości ujawniłby ten błąd
   na stronie głównej. Nazwa kafla należy do cudzego pliku, więc ustępuje ta,
   która powstaje teraz. */
.wba-dr,
.wba-mecz-karta,
.wba-tm,
.wba-zw {
	display: flex;
	max-width: 1160px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-7);
	margin-inline: auto;
}

/* --- nagłówek: karta na atramencie, a nie pas pełnej szerokości ----------
   Ciemny pas (`.wba-pagehead`) wymagałby rozbicia renderu na dwie części
   wołane osobno w szablonie, a każda z nich potrzebuje tych samych zapytań —
   czyli albo podwójny odczyt bazy, albo memoizacja dla jednego efektu
   wizualnego. Karta na atramencie niesie tę samą tożsamość (ink + złota
   krawędź + okrąg boiska) w jednym wywołaniu.
   Okrąg jest tym samym motywem, co w `.wba-pagehead::after` — świadome
   powtórzenie motywu z reszty serwisu, nie nowy pomysł. */
.wba-dr__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s-5);
	overflow: hidden;
	padding: var(--wp--preset--spacing--s-6);
	background: var(--wp--preset--color--ink);
	border-bottom: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--paper);
}

.wba-dr__head::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -90px;
	width: 320px;
	height: 320px;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	pointer-events: none;
}

/* Herb dostaje białą podkładkę, bo herby są rysowane na biel: na atramencie
   ciemne kontury i czarne napisy części klubów byłyby nieczytelne. */
.wba-dr__herb {
	position: relative;
	z-index: 1;
	display: grid;
	flex: none;
	place-items: center;
	width: 112px;
	height: 112px;
	padding: var(--wp--preset--spacing--s-2);
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--lg);
}

.wba-dr__id {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-2);
	min-width: 0;
}

.wba-dr__kicker {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Nazwy w bazie idą wersalikami i sięgają 14 znaków („WARSAW RAPTORS”),
   a `h1` z `theme.json` ma 2,5 rem. Przy 390 px szerokości ekranu to nie
   mieści się w jednej linii, więc stopień pisma skaluje się z szerokością.
   Łamanie WYŁĄCZNIE na spacjach — dzielenie w środku nazwy czyta się jak błąd
   danych (ta sama zasada, co w tabeli). */
.wba-dr__nazwa {
	margin: 0;
	font-size: clamp(1.75rem, 4.4vw, 2.5rem);
	overflow-wrap: normal;
	word-break: normal;
}

.wba-dr__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
}

/* Plakietka na półprzejrzystej bieli, nie w kolorze: drużyna może grać
   w dwóch rozgrywkach naraz (zmierzone: MOLES w sezonie 6 stoją w dwóch
   dywizjach Third League), a dwie kolorowe plakietki obok siebie
   konkurowałyby o uwagę z nazwą. Pozycja idzie na złoto, bo to jedyna liczba
   w nagłówku. */
.wba-dr__tag {
	display: inline-flex;
	/* `flex-wrap`, bo przy wąskiej kolumnie opis rozgrywek łamie się w środku
	   plakietki, a pozycja — jako drugi element flexa wyrównany do pierwszej
	   linii bazowej — uciekała wtedy do PRAWEGO GÓRNEGO róg, odklejona od
	   swojego opisu. Zmierzone przy 390 px: opis brał trzy linie, pozycja
	   stała przy pierwszej. Z zawijaniem pozycja spada pod opis i zostaje
	   z nim w jednej kolumnie. */
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s-2);
	padding: 6px 12px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--wp--custom--radius--pill);
	font-size: .75rem;
	font-weight: 700;
}

.wba-dr__tag-poz {
	color: var(--wp--preset--color--gold);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	white-space: nowrap;
}

/* Drużyna z archiwum, która nie gra w tym sezonie: stan normalny, nie błąd,
   więc plakietka jest wyciszona, a nie ostrzegawcza. */
.wba-dr__tag.is-cicha {
	background: none;
	color: #C9CDD6;
	font-weight: 600;
}

/* --- mecze sezonu: wiersze na kreskach, nie kostki ----------------------
   Na stronie głównej najbliższe mecze są białymi kostkami na tle pasa
   (`.wba-mecz`). Tutaj lista stoi WEWNĄTRZ białej karty, więc białe kostki
   miałyby niewidoczne krawędzie. Wiersze rozdzielone kreską czytają się jak
   terminarz i mieszczą trzynaście pozycji bez przewijania. */
.wba-dr__mecze {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-dr__mecz {
	display: grid;
	grid-template-areas: "data rywal wynik linki";
	grid-template-columns: 88px minmax(0, 1fr) 104px auto;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-3) 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* Kolumny liczą się WSPÓLNIE dla wszystkich wierszy, nie osobno w każdym.
   Zmierzone przed poprawką: dwa mecze z trzynastu mają tylko odnośnik „Karta
   meczu” (brak nagrania), więc ich kolumna odnośników była węższa, a wynik
   uciekał w prawo o kilkadziesiąt pikseli — trzynaście wierszy z dwiema
   różnymi siatkami. Powód: każde `<li>` było własnym gridem, a ścieżki
   kolumn nie przechodzą przez granicę kontenera.
   `subgrid` daje wierszom ścieżki rodzica, czyli jeden wspólny rytm kolumn.
   Bez `subgrid` (starsza przeglądarka) zostaje siatka per wiersz z reguł
   wyżej — nierówna, ale kompletna; nic nie znika. */
@media (min-width: 721px) {

	@supports (grid-template-columns: subgrid) {

		.wba-dr__mecze {
			display: grid;
			/* Odstęp między kolumnami MUSI stać tutaj: w osi podsiatkowej
			   przeglądarka bierze przerwy rodzica i ignoruje własne
			   `gap` wiersza. Bez tego kolumny stykałyby się. */
			grid-template-columns: 88px minmax(0, 1fr) 104px auto;
			column-gap: var(--wp--preset--spacing--s-3);
		}

		.wba-dr__mecz {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
		}
	}
}

.wba-dr__mecz:first-child {
	padding-top: 0;
	border-top: 0;
}

.wba-dr__mecz:last-child {
	padding-bottom: 0;
}

.wba-dr__data {
	grid-area: data;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-dr__rywal {
	display: flex;
	grid-area: rywal;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	min-width: 0;
	font-weight: 700;
	line-height: 1.2;
}

.wba-dr__rywal a {
	color: inherit;
}

.wba-dr__rywal a:hover,
.wba-dr__rywal a:focus {
	color: var(--wp--preset--color--red);
}

/* Wynik: kolor niesie plakietka Z/P, a same liczby zostają na atramencie.
   Cyfry w zieleni i czerwieni na przemian w trzynastu wierszach dawałyby
   pasek świąteczny, w którym nie widać, kto z kim grał. */
.wba-dr__wynik {
	display: flex;
	grid-area: wynik;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--s-2);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	white-space: nowrap;
}

/* `<b>` bez pogrubienia w roli plakietki — element niesie tu znaczenie,
   tak samo jak `<i>` w serii formy. */
.wba-dr__wl {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	color: var(--wp--preset--color--on-red);
	font-size: .6875rem;
	font-weight: 800;
	line-height: 1;
}

.wba-dr__wynik.is-w .wba-dr__wl {
	background: var(--wp--preset--color--win);
}

.wba-dr__wynik.is-l .wba-dr__wl {
	background: var(--wp--preset--color--loss);
}

.wba-dr__wynik.is-brak {
	color: var(--wp--preset--color--faint);
	font-size: .75rem;
	font-weight: 600;
}

/* Pigułki wyrównane do LEWEJ krawędzi swojej kolumny, nie do prawej.
   Zmierzone na BASKET WILNO: 15 meczów, 4 bez nagrania. Przy `flex-end`
   te cztery wiersze dosuwały „Boxscore” i „Kartę Genius” do prawej, więc
   obie pigułki stały w innym miejscu niż w pozostałych jedenastu, a wykaz
   czytało się jak rozjechaną tabelę.
   Kolumna odnośników ma stałą szerokość dzięki `subgrid` wyżej, więc przy
   `flex-start` pierwsza pigułka startuje w tym samym punkcie w KAŻDYM
   wierszu, a luka po brakującym wideo wypada z prawej — tam, gdzie wideo
   by stało. Telefon miał `flex-start` od początku; teraz oba progi mówią
   to samo i nadpisanie w zapytaniu medialnym niżej przestało być
   potrzebne. */
.wba-dr__mlinki {
	display: flex;
	grid-area: linki;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--s-2);
}

.wba-dr__ml {
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-dr__ml:hover,
.wba-dr__ml:focus {
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

/* Wideo dostaje kolor YouTube'a, bo z dwóch odnośników w wierszu to ono jest
   powodem, dla którego ktoś tu wchodzi. Karta meczu zostaje wyciszona. */
.wba-dr__ml.is-yt {
	background: var(--wp--preset--color--yt);
	border-color: var(--wp--preset--color--yt);
	color: var(--wp--preset--color--on-yt);
}

.wba-dr__ml.is-yt:hover,
.wba-dr__ml.is-yt:focus {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-yt);
}

/* --- skład i historia: tabele motywu z dwiema poprawkami ---------------- */
.wba-dr__nr {
	color: var(--wp--preset--color--faint);
}

/* Wiersz bieżącego sezonu w historii: złota krawędź i lekkie tło, bez
   pogrubienia całego wiersza. Zmierzone: atrament na tle gold 12 % (#FEF6E0)
   daje 16,5:1, więc podświetlenie nie kosztuje czytelności. */
/* Kolumna sezonu: do lewej i tak wąska, jak jej treść. Przejmowała z tabeli
   ligowej `text-align: right` i wolne miejsce szerokiego ekranu, więc na
   1440 px „9WBA” stało ~320 px od lewej krawędzi karty (zrzut 24.09.2026). */
.wba-dr__hist th:first-child,
.wba-dr__hist .wba-dr__sez {
	width: 1%;
	text-align: left;
}

.wba-dr__hist .wba-tabela__tm {
	width: 100%;
}

.wba-dr__hist .is-biezacy td {
	background: rgba(248, 184, 0, .12);
}

.wba-dr__hist .is-biezacy td:first-child {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--gold);
	font-weight: 800;
}

.wba-dr__z {
	color: var(--wp--preset--color--faint);
}

.wba-dr__pusto {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* --- galerie na stronie drużyny ---------------------------------------
   Karty z okładką 3:2 (object-fit), cała karta jest jednym odnośnikiem do
   galerii na karcie meczu. Siatka auto-fill jak lista „Najbliższe mecze”. */
.wba-dr-gal__l {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wba-dr-gal__lnk {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wba-dr-gal__lnk:hover .wba-dr-gal__para {
	text-decoration: underline;
}

.wba-dr-gal__lnk:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

.wba-dr-gal__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--wp--preset--color--hairline);
}

.wba-dr-gal__opis {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4) var(--wp--preset--spacing--s-4);
}

.wba-dr-gal__para {
	font-weight: 700;
	line-height: 1.3;
}

.wba-dr-gal__wynik {
	font-weight: 800;
	white-space: nowrap;
}

.wba-dr-gal__meta,
.wba-dr-gal__ile {
	color: var(--wp--preset--color--muted);
}

.wba-dr-gal__wiecej {
	margin-top: var(--wp--preset--spacing--s-4);
}

.wba-dr-gal__wiecej[open] > .wba-dr-gal__przycisk {
	margin-bottom: var(--wp--preset--spacing--s-4);
}

.wba-dr-gal__przycisk {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--s-4);
	font-weight: 700;
	cursor: pointer;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wba-dr-gal__przycisk:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

/* Telefon: dwie kolumny zamiast jednej — 11 kart na pełną szerokość
   to 3 800 px przewijania samej sekcji (zmierzone przy 390 px). */
@media (max-width: 599px) {
	.wba-dr-gal__l {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--s-3);
	}

	.wba-dr-gal__opis {
		padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-3);
	}

	.wba-dr-gal__para {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- strona drużyny na wąskim ekranie -----------------------------------
   Wiersz meczu z pięciu kolumn schodzi na trzy rzędy. Data i miejsce idą
   parą na górze (to metryka wiersza), pod nimi rywal z wynikiem, na końcu
   odnośniki na całą szerokość — bo przy 390 px dwie pigułki obok nazwy
   drużyny zabierały jej całe miejsce. */
@media (max-width: 720px) {

	.wba-dr__mecz {
		grid-template-areas:
			"data  data"
			"rywal wynik"
			"linki linki";
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--s-2);
		padding: var(--wp--preset--spacing--s-4) 0;
	}

	.wba-dr__mlinki {
		margin-top: var(--wp--preset--spacing--s-1);
	}

	.wba-dr__head {
		padding: var(--wp--preset--spacing--s-5);
	}
}

/* Nagłówek na telefonie układa się w pion. Zmierzone przy 390 px: herb (88 px)
   z odstępem zabierał 108 z 310 px, więc na nazwę i plakietkę zostawało 202 px
   — „TRYBANSKI BASKETBALL ACADEMY”, najdłuższa nazwa w bieżącym sezonie
   (28 znaków), łamała się na trzy linie. Herb nad nazwą oddaje kolumnie całą
   szerokość pasa. */
@media (max-width: 560px) {

	.wba-dr__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--s-4);
	}

	.wba-dr__herb {
		width: 88px;
		height: 88px;
	}

	.wba-dr__id {
		width: 100%;
	}
}

/* ==========================================================================
   PEŁNE TABELE — blok `wba/tabele` na `/liga/tabele/`

   Karty w siatce, która sama decyduje o liczbie kolumn. W sezonie 8 daje to
   po jednej kolumnie na dwunastodrużynowe dywizje Champions i First League
   i po dwie na czterodrużynowe grupy o miejsca w Third League — bez ani
   jednego zapytania medialnego o szerokość i bez znajomości liczby wierszy
   w CSS-ie.
   ========================================================================== */

.wba-tabele__lead {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	color: var(--wp--preset--color--muted);
}

/* „Stan na …” pod tytułem poziomu — podpis pod kreską nagłówka, przed siatką kart. */
.wba-tabele__stan {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	color: var(--wp--preset--color--muted);
}

.wba-tabele__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0 0 var(--wp--preset--spacing--s-7);
	padding: 0;
	list-style: none;
}

.wba-tabele__n {
	display: inline-block;
	padding: 6px 14px;
	background: var(--wp--preset--color--card-2);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .04em;
}

.wba-tabele__n:hover,
.wba-tabele__n:focus {
	background: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--on-red);
	text-decoration: none;
}

.wba-tabele__poziom {
	margin-bottom: var(--wp--preset--spacing--s-9);

	/* Kotwica z nawigacji nie może wsunąć nagłówka pod górny pasek — a samo
	   `s-6` (24 px) tego NIE załatwiało, bo nie liczyło wysokości paska.
	   Pasek przykleja się na `.wp-block-template-part` (`position: sticky;
	   top: 0`), nie na `.wba-topbar`, więc przy sprawdzaniu łatwo go przeoczyć:
	   `.wba-topbar` ma `position: relative`.

	   Zmierzone przed poprawką po kliknięciu każdego z czterech odnośników
	   („Liga Mistrzów”, „1. Liga”, „2. Liga”, „3. Liga”), na 390, 768, 1200
	   i 1440 px: dolna krawędź paska na 77 px, nagłówek sekcji na 24 px,
	   czyli ZAKRYTY W CAŁOŚCI (53 px zachodzenia) — `elementFromPoint`
	   w środku nagłówka zwracał `IMG` z paska, nie nagłówek. Wyglądało to
	   jak przewinięcie o 53 px za daleko: ląduje się na tabelach, bez tytułu
	   poziomu. Po poprawce nagłówek stoi na 93 px, 16 px pod paskiem,
	   a `elementFromPoint` zwraca `H2.wba-sec-title`.

	   Ten sam wzorzec co `.wba-mecz__kotwica` w `mecz-naglowek.css` — jeśli
	   kiedyś zmieni się wysokość paska, zmienia się jedna zmienna. */
	scroll-margin-top: calc(var(--wba-pasek-gorny, 77px) + var(--wp--preset--spacing--s-4));
}

.wba-tabele__poziom:last-of-type {
	margin-bottom: var(--wp--preset--spacing--s-6);
}

.wba-tabele__ttl {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	padding-bottom: var(--wp--preset--spacing--s-3);
	border-bottom: 2px solid var(--wp--preset--color--hairline);
}

.wba-tabele__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
	gap: var(--wp--preset--spacing--s-5);
	align-items: start;
}

/* Karta jest kontenerem zapytań, żeby kolumna „Forma” schodziła wtedy, gdy
   ciasno jest W KARCIE, a nie wtedy, gdy ciasno jest w oknie. Reguła medialna
   na 560 px nie umiała tego rozstrzygnąć: przy oknie 1200 px karta w dwóch
   kolumnach ma ~560 px i tabela z siedmioma kolumnami się w niej dusiła,
   mimo że okno było szerokie. Bez `@container` zostaje przewijanie poziome
   `.wba-tabela__obudowa` — brzydsze, ale kompletne. */
.wba-tabele__k {
	container-type: inline-size;
}

@container (max-width: 560px) {

	.wba-tabele__k .wba-tabela__th-forma,
	.wba-tabele__k .wba-tabela__forma {
		display: none;
	}
}

.wba-tabele .wba-tabela__nota {
	margin-top: 0;
}

/* ==========================================================================
   KARTA MECZU — trasa `/mecz/<...>-<id>/`

   Pas treści i kolumnę dziedziczy po sekcji „Strony danych" wyżej
   (`.wba-mecz__pas`, `.wba-mecz`), więc tutaj są WYŁĄCZNIE części własne
   karty: nagłówek starcia, noty o stanie wyniku, minięcie transmisji
   i box score.

   ŻELAZNA REGUŁA TEJ SEKCJI: strona nigdy nie przewija się w poziomie.
   Wszystko, co bywa szersze od okna — a box score ma 24 kolumny — przewija
   się we WŁASNYM kontenerze z `overflow-x: auto`.
   ========================================================================== */

/* --- nagłówek: karta na atramencie, jak nagłówek drużyny ------------------
   Ten sam materiał (ink + złota krawędź + okrąg boiska) co `.wba-dr__head`,
   ale układ jest inny: tam jeden herb obok nazwy, tu dwie drużyny wokół
   wyniku. Dlatego osobne reguły, a nie modyfikator wspólnej klasy. */
.wba-mecz__head {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--s-6);
	background: var(--wp--preset--color--ink);
	border-bottom: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--paper);
}

/* Okrąg boiska — powtórzenie motywu z `.wba-pagehead::after`
   i `.wba-dr__head::after`. Przesunięcie jest inne, bo ten nagłówek jest
   wyższy: przy offsetach ze strony drużyny okrąg wchodził między herby. */
.wba-mecz__head::after {
	content: "";
	position: absolute;
	top: -140px;
	right: -120px;
	width: 380px;
	height: 380px;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	pointer-events: none;
}

/* Metryka: data, rozgrywki, hala. Kropki rozdzielające są w HTML-u
   (`aria-hidden`), a nie w `::before`, bo elementów bywa jeden, dwa albo trzy
   — 155 z 2 937 meczów nie ma hali, 17 nie ma daty. Kropka z CSS-a zostałaby
   wtedy sierotą na początku linii. */
.wba-mecz__metryka {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0 0 var(--wp--preset--spacing--s-5);
	color: rgba(255, 255, 255, .72);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.wba-mecz__kropka {
	color: var(--wp--preset--color--gold);
}

/* --- starcie: `<h1>` z dwiema drużynami i wynikiem ----------------------
   `1fr auto 1fr` daje wynik dokładnie na środku niezależnie od długości nazw.
   `min-width: 0` na kolumnach drużyn jest OBOWIĄZKOWE: bez niego kolumna
   siatki nie schodzi poniżej szerokości najdłuższego słowa i przy nazwach
   w rodzaju „AB BASKET LEGIONOWO" na 320 px cała strona dostawała poziomy
   pasek przewijania. */
/* `stretch`, a NIE `start` — i to jest naprawa zmierzonej usterki. Przy
   `align-items: start` obie strony starcia miały wysokość własnej treści,
   więc gdy jedna nazwa łamała się na dwie linie, a druga nie, etykiety
   „GOSPODARZ" i „GOŚĆ" stały na różnych wysokościach: zmierzone na 320 px
   **17 px różnicy przy kroju 11 px**, czyli półtorej wysokości litery.
   Wynik zostaje na górze (`align-self: start` niżej), bo jego pozycja
   względem herbów jest tu układem, nie przypadkiem. */
.wba-mecz__starcie {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: stretch;
	gap: var(--wp--preset--spacing--s-3);
	grid-template-columns: 1fr auto 1fr;
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

/* Trzy wiersze — herb, nazwa, rola — i CAŁY zapas wysokości bierze NAZWA
   (`1fr`). Dzięki temu rola siedzi przy dolnej krawędzi rozciągniętego bloku,
   a więc na tej samej wysokości po obu stronach, niezależnie od tego, na ile
   linii złamie się nazwa. Nazwa jest wyśrodkowana w swoim wierszu, żeby krótka
   nazwa nie wisiała pod herbem z dziurą pod spodem. */
.wba-mecz__druzyna {
	display: grid;
	min-width: 0;
	align-items: center;
	justify-items: center;
	gap: var(--wp--preset--spacing--s-2);
	grid-template-rows: auto 1fr auto;
	text-align: center;
}

/* Herb dostaje białą podkładkę z tego samego powodu co na stronie drużyny:
   herby są rysowane na biel, więc na atramencie czarne napisy części klubów
   byłyby nieczytelne. */
.wba-mecz__herb {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	padding: var(--wp--preset--spacing--s-2);
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--lg);
}

.wba-mecz__herb-i {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Zastępstwo z inicjałów. Na dzisiejszych danych NIEOSIĄGALNE — wszystkie 112
   drużyn mają herb z plikiem — ale pierwsza drużyna bez herbu nie ma zostawiać
   w nagłówku pustego białego kwadratu. */
.wba-mecz__herb-z {
	color: var(--wp--preset--color--ink);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: .02em;
}

/* `anywhere`, a NIE `break-word` — I TO JEST NAPRAWA ZASTANEGO BŁĘDU, nie
   zmiana gustu. Oba tryby łamią wiersz DOKŁADNIE TAK SAMO: dzielą wyraz tylko
   wtedy, gdy sam nie mieści się w wierszu, więc „TARCHO TERROR" nadal łamie się
   na spacji. Różnią się wyłącznie tym, czy złamanie wchodzi do wyliczenia
   `min-content` — i o to tu chodzi.

   Nazwa jest elementem siatki z `justify-items: center`, czyli ma rozmiar
   `fit-content`, a ten nie schodzi poniżej `min-content`. Przy `break-word`
   `min-content` to szerokość najdłuższego wyrazu, więc pudełko rosło ponad
   kolumnę: ZMIERZONE na 320 px, karta 2603103 — „WHITE CHOCOLATES" miało
   **100 px w kolumnie 67 px** i wychodziło **33 px** za prawą krawędź `<h1>`,
   gdzie ucinał je `overflow: hidden` nagłówka. Widać było „WHIT / CHOCOLA".
   Przy `anywhere` `min-content` spada do szerokości jednego znaku, pudełko
   dostaje 67 px i wyraz łamie się w środku — brzydko, ale w całości.

   Ekspozycja przed naprawą: 16 z 112 drużyn ma wyraz ≥ 10 znaków, co dotyka
   **596 z 2 937 kart**.

   `justify-items: stretch` na bloku drużyny NIE ZAŁATWIA SPRAWY — zmierzone,
   nie przewidziane: nazwa zostawała przy 100 px i tych samych 33 px wyjścia.
   Powód jest ten sam, co wyżej: blok ma jedną niejawną kolumnę o rozmiarze
   `auto`, czyli szerokości NAJWIĘKSZEGO `min-content` wśród swoich dzieci.
   Przy `break-word` to sama nazwa ustawiała tę kolumnę na 100 px, więc
   rozciąganie do kolumny nic nie dawało. (Pierwsze wyjaśnienie, które tu
   napisałem — „automatyczne minimum elementu siatki" — obaliłem pomiarem:
   dopisanie `min-width: 0` do nazwy nie zmienia ani piksela.)

   ZOSTAJE RESZTKA 13 px I NIE JEST TO NAZWA. Po tej zmianie niejawną kolumnę
   bloku ustawia najszerszy nierozerwalny wyraz, jaki w nim został — etykieta
   roli „GOSPODARZ" (dziewięć liter, wersaliki, `letter-spacing: .08em`,
   `min-content` = **80 px** wobec kolumny 67 px). Zmierzone
   `getComputedStyle(blok).gridTemplateColumns`: **80,0156 px** po stronie
   gospodarza i 66,8906 px po stronie gościa, gdzie etykieta „GOŚĆ" ma 36 px.
   Nazwa tylko dziedziczy tę szerokość. Nic nie jest już OBCINANE (nadmiar
   `<h1>` = 0 na wszystkich mierzonych kartach), ale nazwa wchodzi 5 px
   w pudełko wyniku. Naprawa dotyczy etykiety, nie nazwy (mniejszy
   `letter-spacing` albo krój przy ≤ 600 px) i jest osobną decyzją. */
.wba-mecz__nazwa {
	overflow-wrap: anywhere;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.wba-mecz__nazwa-a {
	color: inherit;
	text-decoration: none;
}

.wba-mecz__nazwa-a:hover,
.wba-mecz__nazwa-a:focus {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wba-mecz__rola {
	color: rgba(255, 255, 255, .72);
	/* Rozmiar plynny zamiast klasy presetu `has-micro-font-size` w HTML: preset
	   WordPressa generuje `font-size: ... !important`, wiec z arkusza nie da sie
	   go zmniejszyc na waskich ekranach (zmierzone: wstrzykniety inline
	   `font-size` nie zmienia ani piksela, min-content zostaje 80,02 px).
	   Granice: 0.6875rem = 11 px, czyli dokladnie tyle, ile dawal preset micro
	   (theme.json), wiec na szerokich ekranach wyglad jest bez zmian; 0.59375rem
	   = 9,5 px to najmniejsza wartosc, przy ktorej etykieta miesci sie w bloku
	   druzyny przy 320 px i trzycyfrowym wyniku. 2.6vw wprowadza pelne 11 px od
	   ~423 px w gore. Powod: naglowek to grid `1fr auto 1fr`, a `min-width: 0`
	   na `.wba-mecz__druzyna` celowo pozwala kolumnie zejsc ponizej min-content
	   (bez tego siatka wystawalaby za viewport), wiec przy 320 px blok ma
	   66,89 px przy wyniku dwucyfrowym i 55,97 px przy trzycyfrowym, a
	   `justify-items: center` daje dzieciom `fit-content`, ktore nie schodzi
	   ponizej min-content. Etykieta 80,02 px rozpychala wiec cala zawartosc
	   bloku: nazwa wystawala o 13,13 px i wchodzila 5,13 px na pudelko wyniku
	   (przy trzycyfrowym: 24,05 px i 16,05 px). */
	font-size: clamp(0.59375rem, 2.6vw, 0.6875rem);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Wynik dużym krojem — `clamp`, bo na 320 px dwie liczby trzycyfrowe
   z dwukropkiem muszą zmieścić się w kolumnie `auto` między dwiema
   kolumnami `1fr`. */
.wba-mecz__wynik {
	display: flex;
	align-items: baseline;
	align-self: start;
	gap: 2px;
	padding-top: var(--wp--preset--spacing--s-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wba-mecz__pkt {
	font-size: clamp(2rem, 1.25rem + 3.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
}

.wba-mecz__dwukropek {
	color: var(--wp--preset--color--gold);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
}

/* Mecz bez wyniku pokazuje w tym miejscu godzinę — to jedyna liczba, którą
   o nim wiemy na pewno. Mniejszy krój, bo godzina nie jest wynikiem i nie ma
   udawać, że nim jest.

   ETYKIETA „POCZĄTEK” NAD GODZINĄ NIE JEST OZDOBĄ: „20:00” w tym samym
   miejscu ekranu, w którym inne karty pokazują wynik, czyta się jak 20:0 —
   a 20:0 jest w tej lidze zapisem walkoweru, więc dwuznaczność jest realna,
   nie teoretyczna. Kolumna zamiast rzędu, bo etykieta ma stać NAD liczbą;
   `align-items: baseline` z rzędu wyrównywałoby ją do cyfr. */
.wba-mecz__wynik.is-godzina {
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.1;
}

/* KOLOR JEST WYNIKIEM POMIARU, NIE PRZENIESIENIA Z INNEGO MIEJSCA. Napisałem
   tu najpierw `muted` — tak jak w liście meczów dnia, która stoi na białej
   karcie. Zmierzone `getComputedStyle` w przeglądarce: nagłówek ma tło `ink`
   (#141821), więc `muted` daje na nim **2,84:1**, czyli poniżej progu 4,5
   i mniej niż połowę tego, co trzeba. `rgba(255, 255, 255, .72)` — ta sama
   wartość, co „gospodarz"/„gość" i metryka w tym samym nagłówku — składa się
   z tłem do rgb(189, 190, 193) i daje **9,56:1**. */
.wba-mecz__pocz-e {
	color: rgba(255, 255, 255, .72);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	text-transform: uppercase;
}

/* Kolor wpisany JAWNIE, choć dziedziczony byłby ten sam: przez pomyłkę
   w zbiorczej zmianie nazwy klasy godzina dostała tu na chwilę `faint`
   (#6B7484), czyli 3,77:1 na tle `ink`. Przy 24 px pogrubionych to jeszcze
   przechodzi jako duży tekst (próg 3:1), ale jako zwykły tekst już nie —
   a rozmiar zmienia się `clamp`-em. `paper` daje 17,76:1 przy każdym. */
.wba-mecz__pocz {
	color: var(--wp--preset--color--paper);
	font-size: clamp(1.5rem, 1.125rem + 1.5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
}

/* --- noty o stanie wyniku ------------------------------------------------
   Nota jest częścią nagłówka, nie osobną sekcją: przy walkowerze musi stać
   MIĘDZY wynikiem oficjalnym a tabelą, bo inaczej tabela kłóciłaby się
   z wynikiem nad nią bez żadnego wyjaśnienia. */
.wba-mecz__nota {
	position: relative;
	z-index: 1;
	margin: var(--wp--preset--spacing--s-5) 0 0;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	background: rgba(255, 255, 255, .09);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--paper);
	font-weight: 500;
	line-height: 1.55;
	text-transform: none;
}

.wba-mecz__nota.is-niezgodny {
	border-left-color: var(--wp--preset--color--loss);
}

.wba-mecz__nota.is-bez-wyniku {
	border-left-color: rgba(255, 255, 255, .45);
}

/* --- węższe ekrany -------------------------------------------------------
   Herb schodzi z 88 na 56 px, bo przy trzech kolumnach na 320 px zostaje na
   drużynę około 100 px i herb 88 px nie zostawiał miejsca na nazwę. */
@media (max-width: 600px) {
	.wba-mecz__head {
		padding: var(--wp--preset--spacing--s-4);
	}

	.wba-mecz__herb {
		width: 56px;
		height: 56px;
		padding: 4px;
	}

	.wba-mecz__herb-z {
		font-size: 1.125rem;
	}

	.wba-mecz__starcie {
		gap: var(--wp--preset--spacing--s-2);
		font-size: .875rem;
	}

	/* Sam mniejszy krój nie wystarcza, samo zdjęcie trackingu też nie: przy
	   bloku 55,97 px (320 px, wynik trzycyfrowy) etykieta ma 69,1 px przy
	   9,5 px z `letter-spacing: .08em` i 72,09 px przy 11 px z trackingiem
	   zdjętym — dopiero oba razem dają 63,05 px. Zmierzone na kartach 2384097
	   (64:70) i 2554410 (129:91): nachodzenie na pudełko wyniku 5,13 → 0 i
	   16,05 → 0 px, w jednym wierszu na obu. `overflow-wrap: anywhere` też
	   zeruje kolizję, ale łamie „GOSPODARZ" na dwa wiersze przy trzycyfrowym
	   wyniku (wysokość elementu 12,5 → 25 px), dlatego odrzucone. */
	.wba-mecz__rola {
		letter-spacing: normal;
	}
}

/* --- sekcje karty i box score -------------------------------------------- */
.wba-mecz__sek {
	margin: 0;
}

.wba-mecz__bs-tyt {
	margin: var(--wp--preset--spacing--s-5) 0 var(--wp--preset--spacing--s-3);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Wiersz z LiveStats (#756): gwiazdka przy nazwisku i legenda pod tabelą. */
.wba-mecz__bs-ls {
	margin-left: .125em;
	color: var(--wp--preset--color--red);
	font-weight: 700;
}

.wba-mecz__bs-leg {
	margin: var(--wp--preset--spacing--s-2) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
}

.wba-mecz__bs-tyt:first-child {
	margin-top: 0;
}

.wba-mecz__bs-tyt a {
	color: inherit;
	text-decoration: none;
}

.wba-mecz__bs-tyt a:hover,
.wba-mecz__bs-tyt a:focus {
	color: var(--wp--preset--color--red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* TO JEST TO MIEJSCE, KTÓRE PILNUJE, ŻEBY STRONA NIE PRZEWIJAŁA SIĘ W POZIOMIE.
   Box score ma 26 kolumn i jest szerszy od kolumny treści na każdym ekranie —
   przewija się więc TUTAJ, we własnym kontenerze, a nie razem ze stroną.
   `tabindex="0"` w HTML-u, bo bez JavaScriptu to jedyny sposób na przewinięcie
   z klawiatury. */
.wba-mecz__bs-obudowa {
	/* Blok zawierający dla ukrytych rozwinięć skrótów — powód przy
	   `.wba-tabela__obudowa` wyżej. */
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;

	/* WSKAZÓWKA PRZEWIJANIA — bez niej tabela na 320 px wyglądała na skończoną
	   przy CZTERECH widocznych kolumnach z 26, bo pasek nakładkowy systemu
	   znika w spoczynku, a `::before/::after` i `box-shadow` były `none`.
	   Zmierzone przed: 238 px widoku na 1 167 px treści, czyli 80 % kolumn
	   niewidzialnych bez ani jednego sygnału.

	   Technika jest czysto CSS-owa i opiera się na `background-attachment`:
	   ZASŁONA w kolorze karty jest `local`, więc jedzie razem z treścią,
	   a CIEŃ jest `scroll`, więc stoi przy prawej krawędzi widoku. Zasłona leży
	   wyżej w stosie warstw (pierwsza = na górze), więc gasi cień dokładnie
	   wtedy, gdy nie ma już nic do przewinięcia w prawo. Zero JavaScriptu
	   i zero nasłuchów — działa też przy wyłączonych skryptach.

	   CIENIA PRZY LEWEJ KRAWĘDZI NIE MA, choć technika daje go za darmo:
	   sprawdzone pomiarem z pikseli — leżałby POD przyklejoną kolumną nazwisk
	   (nieprzejrzyste tło `card`, `left: 0`), więc nigdy nie byłby widoczny.
	   Lewą granicę znaczy szew tej kolumny, teraz o kontraście 3,06:1.
	   Zmierzone przy prawej krawędzi (kanał R w połowie wysokości):
	   196 → 255 przed przewinięciem i na środku, 255 na końcu. */
	background:
		linear-gradient(to left, var(--wp--preset--color--card), var(--wp--preset--color--card)) right center / 24px 100% no-repeat,
		linear-gradient(to left, rgba(20, 24, 33, .26), rgba(20, 24, 33, 0)) right center / 18px 100% no-repeat;
	background-attachment: local, scroll;
}

.wba-mecz__bs-obudowa:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

/* `separate`, a NIE `collapse`, i to jest wymóg techniczny: przy
   `border-collapse: collapse` obramowania komórek należą do tabeli, nie do
   komórek, więc przyklejona kolumna (`position: sticky`) gubi swoje krawędzie
   i przewijane liczby przechodzą przez nią bez linii rozdzielającej. */
.wba-mecz__bs {
	width: max-content;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .8125rem;

	/* `fixed`, a nie `auto`, RAZEM z `<colgroup>` w HTML-u. Przy `auto`
	   przeglądarka wymiarowała każdą z dwóch tabel osobno, według jej własnej
	   treści: zmierzone 3 z 26 kolumn przesunięte o 7 px, więc drużyn nie dawało
	   się czytać kolumna do kolumny. `fixed` bierze szerokości z `<col>`
	   i obie tabele wychodzą identyczne, niezależnie od zawartości.
	   `width: max-content` (nie `100%`), bo tabela MA być szersza od kontenera
	   — to on ją przewija. */
	table-layout: fixed;
}

/* Szerokości kolumn w pięciu wiadrach. Klasę wybiera `wba_mecz_klasa_kolumny()`
   z typu kolumny; `is-eff` i `is-pm` są szersze od zwykłej liczby, bo obie
   przyjmują wartości ujemne i potrzebują miejsca na znak.
   `is-proc` musi zmieścić „100,0 %" bez ucięcia — sprawdzane pomiarem
   `scrollWidth <= clientWidth` na każdej komórce. */
.wba-mecz__bs-c.is-nm {
	width: 150px;
}

.wba-mecz__bs-c.is-nr {
	width: 42px;
}

.wba-mecz__bs-c.is-min {
	width: 56px;
}

.wba-mecz__bs-c.is-l {
	width: 46px;
}

.wba-mecz__bs-c.is-proc {
	width: 62px;
}

.wba-mecz__bs-c.is-eff {
	width: 50px;
}

.wba-mecz__bs-c.is-pm {
	width: 50px;
}

/* `nowrap` na liczbach z tego samego powodu, co w tabeli skrótu: dziedziczone
   `overflow-wrap: break-word` łamało dwucyfrowe liczby na dwie linie. */
/* KRESKI SĄ CIEMNIEJSZE OD `hairline` I TO NIE JEST KAPRYS. `hairline`
   (#E1E4E9) na białym daje 1,27:1, a WCAG 1.4.11 wymaga 3:1 od elementów
   nietekstowych potrzebnych do zrozumienia interfejsu. W tabeli o 26 kolumnach,
   z której na telefonie widać cztery, kreska wiersza jest JEDYNĄ rzeczą
   prowadzącą oko przez wiersz — bez niej przy przewijaniu w prawo gubi się,
   czyj to wiersz. #8B94A4 daje 3,06:1 na bieli i 2,68:1 na `card-2` w wierszu
   sumy, gdzie i tak stoi gruba atramentowa krawędź.

   Tokenu `--wp--preset--color--hairline` NIE ZMIENIAM: siedzi w `theme.json`
   i trzyma kreski w całym serwisie, a to jest cudzy teren i osobna decyzja.

   TOKEN SIEDZI NA KARCIE, A NIE NA TABELI — poprawka 12.09.2026. Przedtem
   stał na `.wba-mecz__bs`, czyli na samej tabeli, i czytały go stamtąd trzy
   reguły z jej wnętrza (kreska wiersza, podkreślenie `<abbr>`, cień
   przyklejonej kolumny z nazwiskiem). Czwarta, `.wba-mecz__lg` niżej, opisuje
   LEGENDĘ SKRÓTÓW, która jest SIOSTRĄ tabeli, a nie jej potomkiem — więc
   tokenu nie dziedziczyła i deklaracja przewracała się na etapie wartości
   obliczonej. Zmierzone w przeglądarce przed poprawką:
   `getComputedStyle(legenda).getPropertyValue('--wba-mecz-kreska')` → pusty
   napis, `border-top` → `0px none`. Kreska nad legendą nigdy się nie
   narysowała.

   `.wba-karta.wba-mecz__k` to NAJBLIŻSZY WSPÓLNY PRZODEK obu — sprawdzone
   w drzewie, nie zgadnięte (przejście w górę od tabeli i szukanie pierwszego
   wspólnego przodka z legendą). Przeniesienie w górę nie zmienia wartości
   trzem regułom, które już działały: wszystkie trzy stoją wewnątrz tabeli,
   a tabela wewnątrz tej karty. Zmierzone po zmianie na tych trzech (kreska
   wiersza, cień kolumny nazwisk, podkreślenie skrótu) — wartości identyczne.

   Dlaczego nie osobna wartość dla legendy: literał `#8B94A4` stoi w serwisie
   już w dwóch miejscach (tu i `mecz-staty.css`, gdzie DEV-STATY podał go jako
   `--wba-staty-kreska` właśnie dlatego, że tego tokenu nie dosięgał). Trzecia
   kopia tej samej liczby robi z niej wartość do utrzymywania w trzech
   miejscach naraz. */
.wba-karta.wba-mecz__k {
	--wba-mecz-kreska: #8B94A4;
}

.wba-mecz__bs th,
.wba-mecz__bs td {
	padding: 8px 7px;
	border-bottom: 1px solid var(--wba-mecz-kreska);
	overflow-wrap: normal;
	text-align: right;
	white-space: nowrap;
	word-break: normal;
}

.wba-mecz__bs thead th {
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/*
 * Tekst dla czytnika ekranu NIE dziedziczy wersalików z nagłówka. Zmierzone
 * w drzewie dostępności Chrome: nazwa kolumny wychodziła jako
 * „PRZEWINIENIA WYMUSZONE NA PRZECIWNIKU", bo przeglądarka bierze do niej
 * tekst RENDEROWANY, razem z `text-transform`. Zdanie zapisane wersalikami
 * część czytników literuje, więc nazwa wraca tu do zapisu naturalnego.
 * `letter-spacing` zerowany z tego samego powodu — dotyczy tekstu, który
 * i tak nie jest widoczny.
 */
.wba-mecz__bs thead th .screen-reader-text {
	letter-spacing: normal;
	text-transform: none;
}

/* Kropkowane podkreślenie WRACA. Wcześniej było zdjęte razem z obramowaniem
   i jedynym sygnałem, że skrót ma rozwinięcie, zostawał `cursor: help` — czyli
   nic dla dotyku i nic dla klawiatury. Podkreślenie to konwencja `<abbr>`,
   a pełne rozwinięcia stoją teraz i tak w legendzie pod tabelami. */
.wba-mecz__bs abbr {
	border: 0;
	cursor: help;
	text-decoration: underline dotted;
	text-decoration-color: var(--wba-mecz-kreska);
	text-underline-offset: 3px;
}

/* --- legenda skrótów ------------------------------------------------------
   Kolumny automatyczne, bo par jest 25 i na telefonie mają się złożyć w jedną
   kolumnę, a na biurku w cztery — bez trzech progów `@media`. */
.wba-mecz__lg {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 2px var(--wp--preset--spacing--s-5);
	margin: var(--wp--preset--spacing--s-5) 0 0;
	padding: var(--wp--preset--spacing--s-4) 0 0;
	border-top: 1px solid var(--wba-mecz-kreska);
}

.wba-mecz__lg-p {
	display: flex;
	gap: var(--wp--preset--spacing--s-2);
	align-items: baseline;
	line-height: 1.45;
}

/* Wersaliki robi CSS, a nie PHP: nagłówek tabeli ma `text-transform: uppercase`,
   więc `PFw` wyświetla się jako `PFW`. Legenda musi być pisana tak samo, bo
   inaczej nie da się jej dopasować wzrokiem do nagłówka — a `PF` i `PFW`
   różnią się jedną literą. */
.wba-mecz__lg-s {
	flex: none;
	min-width: 52px;
	color: var(--wp--preset--color--body-text);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wba-mecz__lg-r {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
}

.wba-mecz__bs tbody td {
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
}

/* Przyklejona kolumna z nazwiskiem. Bez niej przy 26 kolumnach nie wiadomo,
   czyj to wiersz — a to jedyna informacja, bez której cała tabela jest
   bezużyteczna. Tło MUSI być nieprzejrzyste, inaczej przewijane liczby
   przechodzą pod spodem. */
.wba-mecz__bs .wba-mecz__bs-nm {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 150px;
	box-shadow: 1px 0 0 var(--wba-mecz-kreska);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
	text-align: left;
	white-space: normal;
}

.wba-mecz__bs thead .wba-mecz__bs-nm {
	z-index: 2;
	color: var(--wp--preset--color--muted);
}

/* Wiersz sumy: tabela kończy się wnioskiem. Kreska nad nim jest gruba
   i atramentowa, żeby dało się go odróżnić od kolejnego zawodnika jednym
   spojrzeniem, nie czytaniem. */
.wba-mecz__bs tfoot th,
.wba-mecz__bs tfoot td {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 0;
	background: var(--wp--preset--color--card-2);
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

/* NAPRAWA KOLIZJI SPECYFICZNOŚCI, nie dopisek „dla pewności”. Reguła wyżej
   (`.wba-mecz__bs tfoot th`, czyli klasa + dwa elementy = 0-1-2) PRZEGRYWAŁA
   z regułą przyklejonej kolumny (`.wba-mecz__bs .wba-mecz__bs-nm`, dwie klasy
   = 0-2-0), więc komórka „Razem" zostawała biała, a szary pas wiersza sumy
   startował od drugiej kolumny. Zmierzone: `rgb(255,255,255)` obok
   `rgb(238,240,243)` — biała szpara na 2 815 kartach. Ten selektor ma 0-2-2
   i wygrywa z oboma. */
.wba-mecz__bs tfoot .wba-mecz__bs-nm {
	background: var(--wp--preset--color--card-2);
}

.wba-mecz__pusto {
	margin: 0;
	padding: var(--wp--preset--spacing--s-4) 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

@media (max-width: 600px) {
	/* `min-width` już nie wystarcza — przy `table-layout: fixed` szerokość
	   kolumny bierze się z `<col>`, więc zwężamy właśnie `<col>`. */
	.wba-mecz__bs-c.is-nm {
		width: 112px;
	}

	.wba-mecz__bs .wba-mecz__bs-nm {
		min-width: 0;
	}

	.wba-mecz__bs th,
	.wba-mecz__bs td {
		padding: 7px 5px;
	}
}

/* --- transmisja: odtwarzacz od razu, plansza tylko przy `reduce` ----------
   Domyślnie w ramce siedzi `<iframe>` wstawiony skryptem w czasie parsowania,
   więc tło widać wyłącznie przez chwilę przed jego pojawieniem się i na
   ścieżce zapasowej. Plansza jest rysowana CSS-em (gradient + okrąg), bez
   żądania sieciowego — kadr z `i.ytimg.com` dochodzi TYLKO w wariancie
   `prefers-reduced-motion: reduce`, regułą na końcu tej sekcji. */
.wba-mecz__tv {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(circle at 30% 20%, rgba(248, 184, 0, .16), transparent 55%),
		linear-gradient(160deg, var(--wp--preset--color--slate), var(--wp--preset--color--ink));
	border-radius: var(--wp--custom--radius--md);
}

/* Pudełko trzyma wysokość sekcji transmisji także wtedy, gdy ramka odkleiła
   się od układu — inaczej w chwili przyklejenia strona podskakuje o całą
   wysokość odtwarzacza (629 px przy 1440). Proporcja jest tu, a nie tylko na
   ramce, bo to pudełko jest tym, co zostaje w miejscu. */
.wba-mecz__tv-miejsce {
	aspect-ratio: 16 / 9;
}

/* PRZYKLEJONY ODTWARZACZ — tylko tam, gdzie obok zmieści się jeszcze przebieg
   meczu w układzie dwukolumnowym. Próg 1200 px jest policzony, nie wybrany:
   przebieg poniżej 760 px przechodzi na układ jednokolumnowy (próg w
   `mecz-zapis.css`), najmniejszy sensowny odtwarzacz to 320 px, do tego trzy
   odstępy 24 + 32 + 24 — razem 1160 px, więc 1200 daje 40 px zapasu.
   Przyklejanie włącza skrypt klasą; sam arkusz nie ma jak wiedzieć, czy
   czytelnik jest już w przebiegu meczu. */
@media (min-width: 1200px) {
	.wba-mecz__tv--przyklejony {
		/* Lewa krawędź okna, więc i zaokrąglenie tylko od strony treści —
		   zaokrąglony róg przy samej krawędzi ekranu wygląda na obcięty. */
		border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
		box-shadow: 0 12px 32px rgba(20, 24, 33, .28);
		left: 0;
		position: fixed;
		/* DOLNA KRAWĘDŹ PASA ZE ZNAKAMI I BELKĄ — film zaczyna się dokładnie
		   pod nim, bez szpary. Rachunek stoi przy `--wba-film-gora`
		   w `mecz-zapis.css`: 77 px paska górnego + 60 px treści pasa + 1 px
		   kreski = 138 px. Zmierzone przy 1440 px: pas 77–138, film od 138,0. */
		top: var(--wba-film-gora, 138px);
		width: var(--wba-film-szer, 22rem);
		/* FILM RYSUJE SIĘ NAD BELKĄ KWARTY (ta ma 7) I NAD PASEM ZE ZNAKAMI
		   (ten ma 6). Decyzja Piotra z 12.09.2026: nagranie ma być na wierzchu.
		   Po przebudowie na jeden pas (makieta z 12.09.2026) kolizja jest już
		   tylko teoretyczna, bo pas kończy się na 138 px, a film od 138 px się
		   zaczyna — kolejność warstw zostaje na wypadek zmiany wysokości.
		   Wcześniej było odwrotnie i biała belka wcinała się w kadr; zmierzone
		   przy 1920 px: zakrywała 131 px prawej krawędzi nagrania.
		   Nadal NIŻEJ niż pasek górny strony (30) — gdyby ten kiedyś urósł,
		   film ma wsunąć się pod niego, a nie go przykryć. */
		z-index: 8;
	}
}

.wba-mecz__tv-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Prawdziwy `<button>`, nie `div` z obsługą zdarzenia — obsługa klawiaturą
   i widoczny fokus mają działać bez dopisywania `tabindex` i `role`. */
.wba-mecz__tv-btn {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-5);
	border: 0;
	background: none;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	text-align: center;
}

.wba-mecz__tv-btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}

/* Trójkąt odtwarzania rysuje CSS, więc nie wchodzi do tekstów do tłumaczenia
   ani do nazwy dostępnej przycisku. Ta sama zasada, co w kartach widgetu. */
.wba-mecz__tv-play {
	display: grid;
	width: 68px;
	height: 68px;
	flex: none;
	place-items: center;
	background: var(--wp--preset--color--gold);
	border-radius: 50%;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.wba-mecz__tv-play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid var(--wp--preset--color--on-gold);
}

.wba-mecz__tv-btn:hover .wba-mecz__tv-play {
	transform: scale(1.06);
}

.wba-mecz__tv-txt {
	display: grid;
	gap: 4px;
	max-width: 44ch;
}

.wba-mecz__tv-tyt {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.25;
	text-transform: uppercase;
}

.wba-mecz__tv-meta {
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Zmierzone `getComputedStyle`: biel przy 78 % na tym gradiencie daje
   kontrast powyżej progu AA, a niżej (72 %, jak przy roli w nagłówku)
   spadał poniżej na najjaśniejszym fragmencie plamy złota. */
/* Zdanie o kliknięciu jest schowane DOMYŚLNIE i pokazuje się tylko przy
   `prefers-reduced-motion: reduce` — patrz blok `@media` na końcu tej sekcji. */
.wba-mecz__tv-klik {
	display: none;
}

/* --- wariant „ograniczone animacje": kadr wraca, samoczynny start nie -----
   Kadr wchodzi WŁASNOŚCIĄ WŁASNĄ (`--wba-mecz-kadr` w atrybucie `style`),
   a nie `background-image` wpisanym w arkusz, bo adres jest inny dla każdego
   meczu. Ważniejsze: adres w NIEUŻYTEJ własności własnej nie jest pobierany,
   więc poza tym blokiem `i.ytimg.com` nie dostaje ani jednego żądania.

   Przesłona nad kadrem nie jest przyciemnieniem „dla nastroju": napisy w ramce
   są białe i ZŁOTE, a kadr bywa dowolnie jasny. Bez przesłony biel na białym
   kadrze ma 1,00:1.

   ALFA JEST .80, A NIE .72, I TO JEST POPRAWKA PO POMIARZE. Przy .72 najgorsze
   możliwe tło to rgb(86, 89, 95): biel ma na nim 7,02:1 i przechodzi, ale
   ZŁOTO (#F8B800) — którym pisana jest linia „kanał · długość", czyli jedyna
   konkretna informacja w planszy — ma **3,96:1** i nie przechodzi progu 4,5.
   Pierwsza wersja tego komentarza mierzyła biel i tytuł, a złota nie zmierzyła.
   Przy .80 tło to rgb(67, 70, 77): złoto **5,33:1**, biel **9,45:1**.
   Hala z przepalonymi oknami to realny kadr, więc to nie jest przypadek
   teoretyczny.

   Przy braku kadru (`hqdefault.jpg` czasem nie istnieje) warstwa wypada przez
   `none` w wartości zapasowej i zostaje sama plansza z gradientu. */
@media (prefers-reduced-motion: reduce) {
	.wba-mecz__tv {
		background:
			linear-gradient(rgba(20, 24, 33, .8), rgba(20, 24, 33, .8)),
			var(--wba-mecz-kadr, none) center / cover no-repeat,
			radial-gradient(circle at 30% 20%, rgba(248, 184, 0, .16), transparent 55%),
			linear-gradient(160deg, var(--wp--preset--color--slate), var(--wp--preset--color--ink));
	}

	.wba-mecz__tv-auto {
		display: none;
	}

	.wba-mecz__tv-klik {
		display: inline;
	}
}

/* Bez JS przycisk zostaje na ekranie, ale nie ma czym obsłużyć kliknięcia —
   drogą do filmu jest odnośnik „otwórz na YouTube" w nocie. OBA zdania muszą
   wtedy zniknąć, bo oba kłamałyby: nic nie startuje samo i kliknięcie nic nie
   robi. Ten blok stoi PO bloku `reduce` świadomie — gdy oba warunki są
   spełnione naraz, wygrywa ten, więc zdanie o kliknięciu też się schowa. */
@media (scripting: none) {
	.wba-mecz__tv-auto,
	.wba-mecz__tv-klik {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Plansza 16:9 ma na 320 px tylko 134 px wysokości. Trzecia linia tekstu
	   już z niej wyszła (jest teraz w nocie pod ramką), ale odstępy zostają
	   ciasne — mniejszy `padding` i `gap` dają zapas, żeby przy dłuższej nazwie
	   kanału nic się nie urwało. Zmierzone po zmianie: nadmiar 0 px. */
	.wba-mecz__tv-btn {
		gap: var(--wp--preset--spacing--s-2);
		padding: var(--wp--preset--spacing--s-3);
	}

	.wba-mecz__tv-play {
		width: 52px;
		height: 52px;
	}

	.wba-mecz__tv-play::before {
		margin-left: 5px;
		border-top-width: 10px;
		border-bottom-width: 10px;
		border-left-width: 16px;
	}

	.wba-mecz__tv-tyt {
		font-size: .9375rem;
	}
}

/* --- pozostałe mecze tego dnia ------------------------------------------- */
.wba-mecz__dnia {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-mecz__dnia-i + .wba-mecz__dnia-i {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* Cały wiersz jest odnośnikiem, a nie „zobacz" na końcu: cel kliknięcia ma
   być tak duży, jak wiersz, który się czyta. `grid` z trzema kolumnami trzyma
   godziny i wyniki w pionie mimo różnej długości nazw. */
.wba-mecz__dnia-l,
.wba-mecz__dnia-i > .wba-mecz__dnia-g {
	display: grid;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	padding: 10px 0;
	color: inherit;
	text-decoration: none;
}

.wba-mecz__dnia-l:hover,
.wba-mecz__dnia-l:focus-visible {
	background: var(--wp--preset--color--surface);
	box-shadow: -8px 0 0 var(--wp--preset--color--surface), 8px 0 0 var(--wp--preset--color--surface);
}

.wba-mecz__dnia-g {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .04em;
}

.wba-mecz__dnia-p {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	font-weight: 700;
	line-height: 1.25;
}

.wba-mecz__dnia-d {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-wrap: break-word;
}

.wba-mecz__dnia-x {
	color: var(--wp--preset--color--faint);
}

.wba-mecz__dnia-w {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	white-space: nowrap;
}

.wba-mecz__dnia-w.is-brak {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Adnotacja walkoweru na liście meczów dnia. Stoi POD wynikiem, a nie obok,
   bo obok zabierałaby szerokość kolumnie nazw — a ta na 320 px jest wąskim
   gardłem całego wiersza. `text-align: right` trzyma ją pod liczbą, do której
   się odnosi. Kolor `muted`: 6,25:1 na bieli, 5,73:1 na podświetlonym
   wierszu. */
.wba-mecz__dnia-w.is-walkower {
	line-height: 1.15;
	text-align: right;
}

.wba-mecz__dnia-wk {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wba-mecz__dnia-l:hover .wba-mecz__dnia-p,
.wba-mecz__dnia-l:focus-visible .wba-mecz__dnia-p {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Na 320 px nazwy drużyn zajmują dwa i trzy wiersze, więc para przestaje się
   czytać jako rząd: `flex-wrap` wypychał kreskę na koniec zawiniętego wiersza
   i wychodziło „NLB – / YOUNG OLD TEAM” albo „ORLY TEMIDY / – ⊙ OCTO”.
   Zmierzone: `.wba-mecz__dnia-d` ma tam 103 px szerokości przy 110–124 px
   treści.
   Rozwiązanie jest to samo, co w kostce „Najbliższych meczów” (`.wba-mecz__x`
   wyżej): gospodarz i gość jeden pod drugim, a kreska WYŚRODKOWANA na szerokość
   herbu, czyli w tej samej kolumnie co herby. Wtedy spina oba wiersze w parę
   zamiast błąkać się przy nazwie. */
@media (max-width: 600px) {
	/* `align-items` MUSI zostać na `stretch` (wartość początkowa), a nie na
	   `flex-start` — i to jest przyczyna, nie objaw. W kolumnie osią poprzeczną
	   jest szerokość, więc przy `flex-start` dzieci dostają `max-content`:
	   zmierzone na 320 px `.wba-mecz__dnia-d` miało **140 px** przy rodzicu
	   **110 px**, czyli wychodziło 30 px za kolumnę i wchodziło na wynik.
	   Zmierzone na dniu z 20 meczami: **16 kolizji, najgorsza 29 px** — po
	   zmianie 0. `min-width: 0` i `overflow-wrap: break-word` tego nie łapią,
	   bo nazwa MIEŚCI SIĘ w swoim pudełku; to pudełko jest za szerokie.

	   `flex-wrap: nowrap` W TEJ SAMEJ REGULE NIE JEST OZDOBĄ — bez niego samo
	   `stretch` nie działa i to zmierzyłem, nie przewidziałem. Kontener
	   z `flex-wrap: wrap` (z reguły bazowej) jest WIELOLINIOWY, a w takim
	   `stretch` rozciąga dzieci do rozmiaru LINII, nie kontenera; linia zaś
	   dostaje rozmiar największego dziecka, czyli znowu `max-content`.
	   Po samym `stretch` na 320 px było wciąż 140 px przy rodzicu 110 px
	   i 18 kolizji; po `nowrap` — 110 px i zero. W kolumnie dwóch nazw nie ma
	   czego zawijać, więc `nowrap` nic tu nie odbiera.
	   Zdradliwe: na 390 px samo `stretch` WYGLĄDAŁO na naprawę (0 kolizji),
	   bo tam rozmiar linii przypadkiem równał się szerokości kolumny. */
	.wba-mecz__dnia-p {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 2px;
	}

	.wba-mecz__dnia-x {
		width: 24px;
		text-align: center;
	}
}

/* ==========================================================================
   ARTYKUŁ: KOLUMNA TEKSTU I PRAWA KOLUMNA

   Zmierzone przed zmianą (viewport 1440 px, sześć wpisów): kolumna tekstu
   1160 px, krój 16 px, MEDIANA 151-155 znaków w wierszu. Klasyczny zakres
   czytelności to 45-75 znaków, czyli byliśmy dwukrotnie powyżej górnej
   granicy. Decyzja Piotra: krój 18 px, kolumna 660 px, prawa kolumna 440 px
   z odstępem 60 px (660 + 60 + 440 = 1160, czyli bez zmiany `contentSize`
   w `theme.json`).

   KOLUMNA MA JEDNAK 630 px, NIE 660 — i to jest zmiana wymuszona pomiarem,
   o który specyfikacja wprost prosiła („zweryfikuj to pomiarem, nie przyjmij
   z przeliczenia"). Przeliczenie zakładało szerokość znaku 8,8 px przy kroju
   18 px; ZMIERZONA na sześciu wpisach wynosi 8,13-8,69 px, czyli MNIEJ — więc
   w tej samej szerokości mieści się WIĘCEJ znaków, nie mniej. Mediany znaków
   w wierszu przy kolejnych szerokościach (te same sześć wpisów, 1440 px):

     660 px → 73, 77, 77, 80, 78, 80   — dwa wpisy NAD górną granicą 78
     640 px → 71, 74, 75, 77, 76, 78   — sześć na sześć, ale styka z granicą
     630 px → 70, 74, 74, 76, 75, 77   — sześć na sześć z zapasem
     620 px → 70, 74, 73, 75, 74, 75

   Suma zostaje 1160 px, prawa kolumna zostaje 440 px — zmienia się wyłącznie
   podział między kolumną tekstu a odstępem (630 + 90 + 440). Gdyby jednak
   ważniejsze było samo 660 px niż przedział 70-78, wystarczy zmienić dwie
   liczby niżej: `gap` na 60px i `max-width` na 660px.
   ========================================================================== */

/* `1fr 440px`, a NIE `660px 440px`, i to jest różnica działania, nie zapisu.
   Przy kontenerze 1160 px `1fr` wychodzi dokładnie 630 px, a przy węższym
   sama się kurczy — ścieżka o stałej szerokości wypchnęłaby układ poza
   ekran, bo `grid` nie zmniejsza ścieżek o definitywnej wielkości. */
@media (min-width: 1120px) {

	.wba-article__uklad {
		display: grid;
		grid-template-columns: 1fr 440px;
		gap: var(--wp--preset--spacing--s-7) 90px;
		align-items: start;
	}
}

/* `max-width` NA KOLUMNIE TEKSTU DZIAŁA NA KAŻDEJ SZEROKOŚCI, także wtedy, gdy
   układ jest jednokolumnowy. Bez tego okno 1000 px dałoby wiersz szerokości
   ~1000 px, czyli z powrotem ~148 znaków — a to jest dokładnie ta wada, którą
   naprawiamy. Punkt przełamania układu i szerokość wiersza to dwie różne
   sprawy i muszą być zapisane osobno. */
.wba-article__tresc {
	max-width: 630px;
	font-size: 1.125rem;
}

/* --- neutralizacja wklejek ------------------------------------------------
   ZMIERZONE, dlaczego celujemy w kontener i jego dzieci, a nie w `p`:
   z 320 opublikowanych wpisów ZERO jest na blokach Gutenberga, 230 (72 %) to
   wklejka z Facebooka w gołych `<div>`-ach, a w treściach jest 6353 wystąpień
   `<div>` przy zaledwie 245 `<p>`. Klasy wklejek to zaciemnione nazwy
   Facebooka (`oygrvhab`, `kvgmc6g5`, `tbxw36s4`…), więc jako selektory są
   bezużyteczne. */
.wba-article__tresc *,
.wba-article__tresc > * {
	box-sizing: border-box;
	max-width: 100%;
}

/* `max-width: 100%`, a NIE `width: 100%`: 1634 z 2345 obrazów w treściach ma
   `width="16"` — to emotki Facebooka wstawione w zdania. `width: 100%`
   rozdmuchałoby je na całą szerokość kolumny. Duże szerokości (313 × 1280,
   126 × 1000, 25 × 1024, 13 × 1600) kurczą się same. */
.wba-article__tresc :is( img, iframe, video, embed, object, svg ) {
	height: auto;
	max-width: 100%;
}

/* TRESC STRON, NIE WPISOW. Regula wyzej celuje w `.wba-article__tresc`, czyli
   `post-content` z `single.html`. Strony sklada `page.html`, gdzie ten sam blok
   idzie bez dodatkowej klasy - zostaje samo `.entry-content`. Osadzona mapa na
   „Halach" stala wiec poza zasiegiem tamtej reguly.

   Mapa Google przychodzi z tresci ze sztywnym `width="600" height="450"` -
   liczbami wpisanymi w 2021, gdy uklad byl inny. ZMIERZONE przed poprawka na
   /o-lidze/hale/: kolumna ma 570 px, mapa 600 px, wiec wystaje o 30 px i wchodzi
   POD sasiednia kolumne ze zdjeciami. Odstep miedzy mapa a zdjeciem wynosil
   -10 px przy 1200 i 1440 px oraz -98 px przy 1024 px, czyli nachodzily na
   siebie. Przy 390 px mapa rozpychala cala strone: 230 px poziomego przewijania.

   `aspect-ratio`, a NIE samo `height: auto`: `<iframe>` nie bierze proporcji
   z atrybutow tak, jak bierze ja `<img>`, wiec `height: auto` zwinaloby mape do
   domyslnych 150 px. Proporcja 600/450 to te same liczby, ktore stoja
   w atrybutach - kadr zostaje ten sam, zmienia sie tylko skala. */
.wba-article .entry-content iframe[src*="google.com/maps"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 600 / 450;
}

/* Odstep miedzy kolumnami tresci. Domyslne 20 px przychodzi z rdzenia
   Gutenberga, nie z naszej skali odstepow; `s-7` (32 px) daje zdjeciom wyrazny
   dystans od mapy. Zakres celowo zawezony do `.entry-content`: kolumny strony
   glownej (`.wba-statystyki__kol`) leza POZA blokiem tresci i tej zmiany nie
   widza. Selektor dziecka bezposredniego, zeby nie ruszac kolumn zagniezdzonych
   w innych blokach. */
.wba-article .entry-content > .wp-block-columns {
	gap: var(--wp--preset--spacing--s-7);
}

/* Zdjecie w kolumnie tresci stoi w jej srodku, nie przy lewej krawedzi.

   Skad problem: blok obrazu bez wybranego wyrownania renderuje `<figure>` na
   CALA szerokosc kolumny, ale z `text-align: start`, wiec wezszy `<img>` lgnie
   do lewej. Na „Kontakcie" wszystkie akapity w obu kolumnach maja
   `text-align: center` wpisane w tresci, a zdjecia wstawiono bez wyrownania —
   i tylko one odstawaly.

   ZMIERZONE (1440 px, `<img>` wzgledem `<figure>`):
     Kontakt  Marcin-Krysiak 300 px w figurze 564 px, luz 264 px -> przesuniecie 132 px
     Kontakt  Logo-na-przezr 350 px w figurze 564 px, luz 214 px -> przesuniecie 107 px
     Hale     hala-1         499 px w figurze 564 px, luz  65 px -> przesuniecie  33 px

   Poza tymi trzema regula nie rusza NICZEGO: na „Dla Sponsorow" (6 obrazow)
   i w „Historii rozgrywek" (45 obrazow) figura ma dokladnie szerokosc obrazu,
   wiec luz wynosi 0 i srodkowanie jest bezruchem. Wpisy sa poza zasiegiem,
   bo zaden wpis nie uzywa bloku kolumn — sprawdzone zapytaniem po
   `post_content`. Kolumny strony glownej leza poza `.entry-content`.

   `text-align`, a nie `margin: auto`: `<img>` jest elementem liniowym, wiec
   marginesy automatyczne go nie wysrodkuja. Ta sama droga, ktora rdzen wybiera
   dla `.wp-block-image.aligncenter`. */
.wba-article .entry-content .wp-block-column .wp-block-image {
	text-align: center;
}

/* --- Regulamin: rozdziały główne większe od śródtytułów --------------------
   W Regulaminie CAŁA treść miała jeden rozmiar. Zmierzone na żywej stronie:
   rozdział „3. Organizacja ligi i rozgrywek", śródtytuł „3.1. Poziomy
   rozgrywkowe" i punkt „3.6.1." dawały identyczne 16 px — różnicę niósł
   wyłącznie `<strong>`. Pięć rozdziałów głównych jest teraz blokiem nagłówka,
   więc rozmiar bierze się z `theme.json`: h2 = `x-large` = 22 px, waga 800.

   Sprawdzony też wariant z h3 (18 px): przy śródtytułach, które i tak są
   pogrubione, 2 px różnicy nie czyta się jako początek rozdziału. Stąd h2.

   Zdejmowane są dwie rzeczy, które h2 dostaje od motywu, a których ten
   dokument nie chce:
   * `text-transform: uppercase` — zrobiłoby z „3. Organizacja ligi
     i rozgrywek" wersaliki, a to zmiana brzmienia, nie rozmiaru;
   * `letter-spacing: 0.03em` (0,66 px) — rozstrzelenie pracuje na krótkich
     tytułach sekcji na stronie głównej, nie na zdaniu w regulaminie.

   Odstęp górny: akapity mają `margin-top: 20 px` i dokładnie tyle samo
   dostawał nagłówek, więc nowy rozdział nie odcinał się od ostatniego punktu
   poprzedniego. `s-8` (40 px) daje podwójną przerwę nad i pojedynczą pod —
   nagłówek trzyma się swojej treści, a nie poprzedniej.

   Klasa, a nie sam `h2`: szablon `page.html` jest wspólny dla wszystkich
   stron, więc `.entry-content h2` przemalowałoby nagłówki także tam, gdzie
   wersaliki są zamierzone. `style20` do zawężenia nie wystarczy — ta martwa
   klasa po starej stronie siedzi na każdym akapicie Regulaminu. */
.wba-article .entry-content h2.wba-regulamin__rozdzial {
	margin-top: var(--wp--preset--spacing--s-8);
	text-transform: none;
	letter-spacing: normal;
}

/* 60 wystąpień inline `font-size` (29 × `14pt`, 18 × `1rem`, 13 × `18pt`)
   OMINĘŁOBY zmianę kroju: `1rem` to 16 px, czyli MNIEJ niż nowy krój treści,
   a `18pt` to 24 px. Bez tego pomiar „znaków w wierszu" na takim wpisie
   wychodziłby poza przedział nie z winy szerokości kolumny, tylko kroju.
   Selektor celuje w atrybut, więc dotyka wyłącznie tych 60 elementów;
   `!important` jest konieczne, bo przegrywa się z atrybutem `style`. */
.wba-article__tresc [style*="font-size"] {
	font-size: inherit !important;
}

/* 1106 wystąpień inline `text-align: justify`. Wyrównanie obustronne BEZ
   dzielenia wyrazów rozciąga spacje, żeby dopchać wiersz do krawędzi, a przy
   kolumnie 630 px jest na czym to zobaczyć.

   ZMIERZONE (1440 px, przerwa międzywyrazowa ÷ naturalna szerokość spacji):
   mediana 1,49-1,63, p95 3,22-4,06, do 54% przerw rozciągniętych o ≥ 50%,
   pionowe ciągi szerokich przerw długości 3 wierszy. Po neutralizacji te same
   bloki: mediana 1,00, p95 1,00, ciągów 0. Pomiar w
   `tools/uklad-artykulu/pomiar-hero.js`.

   SELEKTOR CELUJE W DEKLARACJĘ, NIE W WŁAŚCIWOŚĆ: `[style*="text-align"]`
   złapałby też 70 wystąpień `text-align: center` i spłaszczyłby centrowanie,
   czyli dołożył drugą, niezamówioną zmianę. W bazie nie ma ani jednego
   wariantu bez spacji ani pisanego wielkimi literami (zmierzone), a strażnik
   w `tools/uklad-artykulu/sprawdz.php` zaczerwieni się, jeśli taki się
   pojawi — zamiast cicho ominąć tę regułę.

   Dziedziczenie działa na naszą korzyść: 8 bloków niesie `justify` inline,
   a wyrównanie miało 18 elementów; po tej regule `justify` ma 0. */
.wba-article__tresc [style*="text-align: justify"] {
	text-align: left !important;
}

/* Adresy i długie nazwy własne w kolumnie 630 px nie mają gdzie się złamać. */
.wba-article__tresc {
	overflow-wrap: break-word;
}

/* --- prawa kolumna -------------------------------------------------------- */
.wba-article__aside {
	display: grid;
	gap: var(--wp--preset--spacing--s-6);
	align-content: start;
}

.wba-modul {
	padding: var(--wp--preset--spacing--s-5);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

/* Moduł tabeli to TEN SAM blok, co na stronie głównej — niesie własną białą
   kartę, więc druga skorupa dałaby ramkę w ramce. */
.wba-modul.is-blok {
	padding: 0;
	background: none;
	border: 0;
}

.wba-modul__h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s-2);
	margin-bottom: var(--wp--preset--spacing--s-4);
}

.wba-modul__tyt {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* `!important` jest tu KONIECZNE i ma jedną przyczynę: nagłówek bloku tabeli
   powstaje w `wba_naglowek_sekcji()` z klasą `has-x-large-font-size`, a klasy
   rozmiarów WordPressa niosą własne `!important`. Funkcja jest wspólna ze
   stroną główną, więc klasy nie da się z niej zdjąć bez zmiany tamtej strony.
   Bez tej reguły nagłówek „Tabela" ma w kolumnie 440 px 22 px przy 18 px
   pozostałych nagłówków modułów. */
.wba-article__aside .wba-sec-title {
	font-size: 1.125rem !important;
}

.wba-modul__more a,
.wba-modul__lnk {
	color: inherit;
}

.wba-modul__more a {
	color: var(--wp--preset--color--red);
	font-weight: 700;
}

.wba-modul__l,
.wba-wyniki {
	display: grid;
	gap: var(--wp--preset--spacing--s-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wba-modul__i {
	display: grid;
	gap: 2px;
	padding-bottom: var(--wp--preset--spacing--s-3);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-modul__i:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wba-modul__lnk {
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.wba-modul__lnk:hover,
.wba-modul__lnk:focus {
	color: var(--wp--preset--color--red);
}

.wba-modul__d,
.wba-modul__nota {
	color: var(--wp--preset--color--muted);
}

.wba-modul__nota {
	margin: var(--wp--preset--spacing--s-3) 0 0;
	padding-top: var(--wp--preset--spacing--s-3);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* --- ostatnie wyniki ------------------------------------------------------
   Cała kostka jest odnośnikiem, bo jej jedynym celem jest karta meczu —
   inaczej niż w „Najbliższych meczach" na stronie głównej, gdzie kostka
   niesie `<time>` z maszynowym `datetime` i opakowanie w `<a>` zabrałoby
   czytnikom możliwość odczytania samej daty. */
.wba-wynik__lnk {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	padding: var(--wp--preset--spacing--s-3);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	text-decoration: none;
}

.wba-wynik__lnk:hover,
.wba-wynik__lnk:focus-visible {
	border-color: var(--wp--preset--color--red);
}

.wba-wynik__tm {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.25;
	/* `min-width: 0` jest obowiązkowe: bez niego ścieżka `1fr` nie zejdzie
	   poniżej `min-content` nazwy drużyny i wynik wypadnie z kostki. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.wba-wynik__tm:last-child {
	text-align: right;
}

.wba-wynik__pkt {
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Zwycięzcę niesie GRUBOŚĆ, nie kolor: przy wyniku równym (walkowery zapisane
   obustronnie jako 20:0 zdarzają się w tych danych) żadna liczba nie zostaje
   wyróżniona i kostka nie kłamie. */
.wba-wynik__l {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
}

.wba-wynik__l.is-wyg {
	color: var(--wp--preset--color--ink);
	font-weight: 900;
}

.wba-wynik__sep {
	color: var(--wp--preset--color--faint);
}

/* Kolumna „Forma" w tabeli wciśniętej w 440 px nie ma prawa się zmieścić —
   siedem kolumn w tej szerokości daje przewijanie w poziomie wewnątrz karty.
   Zdejmujemy ją TYLKO w prawej kolumnie: jest oznaczona `aria-hidden`, więc
   dla czytnika ekranu nie niesie treści, a reguła z `@media (max-width: 560px)`
   tu nie działa, bo zapytania medialne patrzą na okno, nie na kontener. */
.wba-article__aside .wba-tabela__th-forma,
.wba-article__aside .wba-tabela__forma {
	display: none;
}


/* --- Lupa: powiększenie zdjęcia po kliknięciu -------------------------
   Obsługa w assets/js/lupa.js; tam też powód, dlaczego nie używamy lupy
   rdzenia. Klikalne są tylko obrazki oznaczone przez skrypt — emoji 16x16
   z Facebooka zostają zwykłymi obrazkami. */
.entry-content img[data-wba-lupa="tak"] {
	cursor: zoom-in;
}

.entry-content img[data-wba-lupa="tak"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Blokada przewijania tła. Bez niej strona przewija się pod otwartą lupą. */
.wba-lupa-otwarta {
	overflow: hidden;
}

.wba-lupa {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-4);
	background: rgba(20, 24, 33, 0.94);
	cursor: zoom-out;
}

/* Rdzeniowe [hidden] przegrywa z display:flex, więc mówimy to wprost. */
.wba-lupa[hidden] {
	display: none;
}

.wba-lupa__obraz {
	max-width: 96vw;
	max-height: 84vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: default;
	background: var(--wp--preset--color--ink);
}

.wba-lupa__podpis {
	margin: 0;
	max-width: 72ch;
	text-align: center;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	cursor: default;
}

.wba-lupa__zamknij {
	position: absolute;
	top: var(--wp--preset--spacing--s-3);
	right: var(--wp--preset--spacing--s-3);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--paper);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.wba-lupa__zamknij:hover,
.wba-lupa__zamknij:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.6);
}

.wba-lupa__zamknij:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.wba-lupa__obraz {
		max-height: 74vh;
	}
}


/* ==========================================================================
   TERMINARZ — `/terminarz/<sezon>/<poziom>/` (inc/strona-terminarza.php)
   --------------------------------------------------------------------------
   Wiersz meczu ma OŚ w środku: gospodarz wyrównany do prawej, wynik na osi,
   gość do lewej. To nie estetyka — przy 74 meczach Champions League wzrok
   szuka wyniku w jednym miejscu, a nie w miejscu zależnym od długości nazwy
   drużyny („POLSKA KLUB SPORTOWY” ma 20 znaków, „MOLES” pięć).

   Kolumny liczą się WSPÓLNIE dla wszystkich wierszy dnia przez `subgrid` —
   ta sama poprawka i ten sam powód co w `.wba-dr__mecze` wyżej: bez tego
   każde `<li>` jest własnym gridem i mecze bez nagrania mają węższą kolumnę
   odnośników, co przesuwa wynik o kilkadziesiąt pikseli.
   ========================================================================== */

.wba-tm__head {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--s-6);
	background: var(--wp--preset--color--ink);
	border-bottom: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--paper);
}

/* Okrąg boiska — ten sam motyw co w `.wba-dr__head::after` i `.wba-pagehead::after`. */
.wba-tm__head::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -90px;
	width: 320px;
	height: 320px;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	pointer-events: none;
}

.wba-tm__head-tekst {
	position: relative;
	z-index: 1;
}

.wba-tm__kicker {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wba-tm__nazwa {
	margin: var(--wp--preset--spacing--s-2) 0 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.wba-tm__sezon {
	margin: var(--wp--preset--spacing--s-2) 0 0;
	color: rgba(255, 255, 255, .78);
	font-weight: 700;
}

.wba-tm__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: var(--wp--preset--spacing--s-4) 0 0;
	padding: 0;
	list-style: none;
}

.wba-tm__tag {
	padding: 4px 10px;
	background: rgba(255, 255, 255, .08);
	border-radius: var(--wp--custom--radius--pill);
	color: rgba(255, 255, 255, .86);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- przełącznik poziomów rozgrywek ------------------------------------- */

.wba-tm__poziomy-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-tm__poziom {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 1;
}

.wba-tm__poziom a,
.wba-tm__poziom.is-biezacy {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.wba-tm__poziom a {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
}

.wba-tm__poziom a:hover,
.wba-tm__poziom a:focus {
	background: var(--wp--preset--color--hairline);
}

.wba-tm__poziom.is-biezacy {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* --- pasek sezonów drużyny ---------------------------------------------- */

/* Wygląd pigułek jak przełącznik terminarza (.wba-tm__poziom) — ten sam
   gest w dwóch miejscach serwisu. Różnica jedna: drużyna ma do 13 sezonów,
   więc na wąskim ekranie pasek przewija się w poziomie zamiast łamać się
   na cztery rzędy, które spychały mecze pod zgięcie. */
.wba-dr__sezony {
	margin-block: var(--wp--preset--spacing--s-4) 0;
}

.wba-dr__sezony-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-dr__sezon {
	flex: none;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.wba-dr__sezon a,
.wba-dr__sezon.is-biezacy {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.wba-dr__sezon a {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
}

.wba-dr__sezon a:hover,
.wba-dr__sezon a:focus {
	background: var(--wp--preset--color--hairline);
}

.wba-dr__sezon.is-biezacy {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

@media (max-width: 781px) {
	.wba-dr__sezony-lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--wp--preset--spacing--s-2);
		scrollbar-width: thin;
	}
}

.wba-dr__sez {
	white-space: nowrap;
}

/* --- dzień meczowy ------------------------------------------------------- */

.wba-tm__dzien {
	padding: var(--wp--preset--spacing--s-5);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
}

/* Dzień z meczem jeszcze nierozegranym dostaje złotą krawędź od lewej —
   jeden znak, bez powtarzania słowa „najbliższy” w każdym nagłówku. Dziś
   w bazie nie ma ani jednego meczu w przyszłości (2932 zakończone, 4 wpisy
   `STATUS_SCHEDULED` z przeszłości), więc ta reguła czeka na 9WBA. */
.wba-tm__dzien.is-przyszly {
	border-left: 4px solid var(--wp--preset--color--gold);
}

.wba-tm__data {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	/* Nazwy dni i miesięcy przychodzą z `wp_date()` małą literą („sobota,
	   15 lutego 2026”) — to poprawna polszczyzna, więc nie wersalikujemy
	   całości, tylko podnosimy pierwszą literę. */
	text-transform: none;
}

.wba-tm__data::first-letter {
	text-transform: uppercase;
}

.wba-tm__dzien-meta {
	margin: 6px 0 0;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-tm__mecze {
	margin: var(--wp--preset--spacing--s-4) 0 0;
	padding: 0;
	list-style: none;
}

.wba-tm__mecz {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 84px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-3) 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

@media (min-width: 721px) {

	@supports (grid-template-columns: subgrid) {

		.wba-tm__mecze {
			display: grid;
			/* Odstęp musi stać na rodzicu: w osi podsiatkowej przeglądarka
			   bierze przerwy rodzica i ignoruje `gap` wiersza. */
			grid-template-columns: 52px minmax(0, 1fr) 84px minmax(0, 1fr) auto;
			column-gap: var(--wp--preset--spacing--s-3);
		}

		.wba-tm__mecz {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
		}
	}
}

.wba-tm__mecz:first-child {
	padding-top: 0;
	border-top: 0;
}

.wba-tm__mecz:last-child {
	padding-bottom: 0;
}

.wba-tm__godz {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.wba-tm__ekipa {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	min-width: 0;
	font-weight: 700;
	line-height: 1.2;
}

.wba-tm__ekipa.is-gosp {
	justify-content: flex-end;
	text-align: right;
}

.wba-tm__ekipa a {
	color: inherit;
	text-decoration: none;
}

.wba-tm__ekipa a:hover,
.wba-tm__ekipa a:focus {
	text-decoration: underline;
}

.wba-tm__ekipa-nazwa {
	display: block;
	overflow-wrap: anywhere;
}

.wba-tm__wynik {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wba-tm__pkt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

/* Wygrana ciemna, przegrana wyblakła: różnica bez koloru, bo kolor niesie tu
   już inne znaczenia (złoto = przyszłość, czerwień = marka). */
.wba-tm__pkt.is-w {
	color: var(--wp--preset--color--body-text);
}

.wba-tm__dwukropek {
	color: var(--wp--preset--color--faint);
}

.wba-tm__wynik.is-przed,
.wba-tm__wynik.is-brak {
	color: var(--wp--preset--color--faint);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wba-tm__mlinki {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.wba-tm__ml {
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-tm__ml:hover,
.wba-tm__ml:focus {
	background: var(--wp--preset--color--hairline);
}

.wba-tm__ml.is-yt {
	background: var(--wp--preset--color--yt);
	border-color: var(--wp--preset--color--yt);
	color: var(--wp--preset--color--on-yt);
}

.wba-tm__ml.is-yt:hover,
.wba-tm__ml.is-yt:focus {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wba-tm__hala {
	grid-column: 2 / -1;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-tm__pusto,
.wba-tm__wroc {
	margin: 0;
}

/* --- telefon: godzina i wynik w jednym wierszu, drużyny pod nimi ---------
   Pierwsza wersja stawiała wynik MIĘDZY drużynami („gospodarz / 78 : 51 /
   gość”), tak jak na szerokim ekranie. Obejrzane na 375 px: wynik wklinowany
   między dwie nazwy czyta się źle, bo nie wiadomo, do której należy pierwsza
   liczba, a wiersz rósł do czterech linii. Godzina po lewej i wynik po prawej
   w jednej linii dają nagłówek meczu, a pod nim stoją obie drużyny — ten
   układ znają wszystkie mobilne tabele wyników.
   Herb gospodarza wskakuje wtedy PRZED nazwę (`row-reverse`), żeby oba
   wiersze drużyn zaczynały się herbem, a nie raz herbem, raz literą. */

@media (max-width: 720px) {

	.wba-tm__mecz {
		grid-template-areas:
			"godz  wynik"
			"gosp  gosp"
			"gosc  gosc"
			"linki linki"
			"hala  hala";
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 6px var(--wp--preset--spacing--s-3);
		padding: var(--wp--preset--spacing--s-4) 0;
	}

	.wba-tm__godz {
		grid-area: godz;
	}

	.wba-tm__ekipa.is-gosp {
		flex-direction: row-reverse;
		grid-area: gosp;
		justify-content: flex-end;
		text-align: left;
	}

	.wba-tm__wynik {
		grid-area: wynik;
		justify-content: flex-end;
	}

	.wba-tm__ekipa.is-gosc {
		grid-area: gosc;
	}

	.wba-tm__mlinki {
		grid-area: linki;
		justify-content: flex-start;
		margin-top: 4px;
	}

	.wba-tm__hala {
		grid-area: hala;
	}

	.wba-tm__nazwa {
		font-size: var(--wp--preset--font-size--large);
	}
}


/* ==========================================================================
   SPIS TERMINARZY — rozdzielnik pod `/liga/terminarz-2/`
   (inc/blok-spis-terminarzy.php)
   --------------------------------------------------------------------------
   Sezon to karta, rozgrywki w niej to kafelki z liczbą meczów. Liczba stoi
   przy każdej pozycji, bo to jedyna informacja, która odróżnia „Baraże” (7
   meczów) od „Third League” (92) przed kliknięciem.
   ========================================================================== */

.wba-spis {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-5);
}

.wba-spis__sezon {
	padding: var(--wp--preset--spacing--s-5);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
}

/* Sezon w toku dostaje złotą krawędź i słowo „trwa” — ten sam znak co dzień
   przyszły w terminarzu, żeby oba widoki mówiły tym samym językiem. */
.wba-spis__sezon.is-biezacy {
	border-left: 4px solid var(--wp--preset--color--gold);
}

.wba-spis__nazwa {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
}

.wba-spis__znacznik {
	display: inline-block;
	padding: 3px 9px;
	background: var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--gold-ink);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.wba-spis__meta {
	margin: 6px 0 0;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-spis__poziomy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--s-2);
	margin: var(--wp--preset--spacing--s-4) 0 0;
	padding: 0;
	list-style: none;
}

.wba-spis__poziom a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.wba-spis__poziom a:hover,
.wba-spis__poziom a:focus {
	background: var(--wp--preset--color--hairline);
}

.wba-spis__poziom-nazwa {
	font-weight: 700;
	line-height: 1.2;
}

.wba-spis__poziom-ile {
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* ==========================================================================
   KARTA ZAWODNIKA — `/zawodnik/<slug>/` (inc/strona-zawodnika.php)
   --------------------------------------------------------------------------
   Pas i kolumnę dziedziczy po sekcji „Strony danych" wyżej (`.wba-zw__pas`,
   `.wba-zw`), a tabele po `.wba-tabela__t` — tutaj są WYŁĄCZNIE części własne:
   nagłówek z ostatnią drużyną, kafle kariery, rozwijane sezony w liście meczów
   i kafle rekordów.

   ŻELAZNA REGUŁA, ta sama co na karcie meczu: strona nigdy nie przewija się
   w poziomie. Tabela sezonów ma 13 kolumn, a lista meczów 7 — obie przewijają
   się we WŁASNYM kontenerze `.wba-tabela__obudowa`.

   KONTRAST LICZONY Z PIKSELI (WCAG AA ≥ 4,5:1), nie oceniany okiem:
   paper/ink 17,76:1 · gold/ink 10,02:1 · biel 78 %/ink 11,05:1 ·
   biel 86 %/plakietka na ink 10,74:1 · body-text/card-2 15,84:1 ·
   muted/card-2 5,47:1 · muted/card 6,25:1 · faint/card 4,71:1 ·
   biel/win 5,03:1 · biel/loss 6,57:1.
   Etykieta kafla używa `muted`, a NIE `faint`, i to jest wynik pomiaru:
   faint (#6B7484) na tle kafla (card-2 #EEF0F3) daje 4,13:1, czyli poniżej
   progu. Na białej karcie ten sam faint przechodzi (4,71:1), więc pod listą
   meczów zostaje.
   ========================================================================== */

/* --- nagłówek: karta na atramencie, jak drużyna i terminarz --------------- */
/* Flex, a NIE grid z dwiema kolumnami: pole z numerem znika, gdy numeru nie
   znamy, a przy `grid-template-columns: auto 1fr` sam tekst wpadłby wtedy do
   kolumny `auto` i skurczył się do szerokości treści. Flex radzi sobie
   z brakującym dzieckiem bez dodatkowej reguły. */
.wba-zw__head {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--s-5);
	overflow: hidden;
	padding: var(--wp--preset--spacing--s-6);
	background: var(--wp--preset--color--ink);
	border-bottom: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--paper);
}

/* Okrąg boiska — ten sam motyw co `.wba-dr__head::after` i `.wba-tm__head::after`. */
.wba-zw__head::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -90px;
	width: 320px;
	height: 320px;
	border: 2px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	pointer-events: none;
}

.wba-zw__head-tekst {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	/* Bez `min-width: 0` długie nazwisko rozpycha element flexowy ponad
	   szerokość rodzica i wypycha pole z numerem poza kadr. */
	min-width: 0;
}

/* --- pole portretu: dziś numer, docelowo zdjęcie ------------------------- */

/* Kwadrat o proporcjach przyszłego zdjęcia, żeby dołożenie zdjęcia było
   podmianą zawartości, a nie przebudową pasa.

   Kontrast policzony z pikseli (WCAG), nie oceniony ze zrzutu: panel to
   atrament #141821 z bielą 6 %, czyli #22262E. Złoto #F8B800 daje na nim
   8,56:1, podpis w bieli 70 % (#BDBEC0) — 8,15:1. Oba ponad AA. */
.wba-zw__portret {
	position: relative;
	z-index: 1;
	display: grid;
	flex: none;
	place-content: center;
	gap: 4px;
	width: 132px;
	height: 132px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--wp--custom--radius--lg);
	text-align: center;
}

/* `tabular-nums` trzyma „11" i „44" w tej samej szerokości — bez tego kafle
   sąsiednich zawodników mają optycznie różną wagę. Numer ma najwyżej dwa
   znaki (zmierzone: 17 162 wiersze jednoznakowe, 27 056 dwuznakowych, ani
   jednego dłuższego), więc rozmiar może być stały. */
.wba-zw__portret-numer {
	color: var(--wp--preset--color--gold);
	font-size: 3.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wba-zw__portret-podpis {
	color: rgba(255, 255, 255, .70);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --- wariant ze zdjęciem: kadr po lewej, zszyty gradientem --------------- */

/* Zdjęcie zajmuje lewe 55 % pasa i nie ma żadnej zasłony — ani narastającej
   w prawo, ani winiety. Jedyne, co się z nim dzieje poza odbarwieniem, to
   gradient na PRAWYCH 14 % jego szerokości, który sprowadza kadr do koloru
   nagłówka.

   To jest maska, a nie przykrywka: `mask-image` USUWA prawą krawędź zamiast
   nakładać na nią półprzezroczystą warstwę. Dlatego nie ma szwu — nie ma
   czego zszywać, zdjęcia tam po prostu nie ma. Pozostałe trzy krawędzie nie
   potrzebują niczego, bo pokrywają się z krawędziami pasa i obcina je jego
   `border-radius` razem z `overflow: hidden`.

   Gradient ma SIEDEM przystanków i zaczyna się na 55 %, a nie na 86 %. Obie
   te rzeczy robią to samo: usuwają moment, w którym widać, że kadr się
   kończy.

   Pierwsza wersja gasła na ostatnich 14 % szerokości i przy trzech
   przystankach. Krótkie przejście znaczy stromą zmianę krycia na piksel,
   a stroma zmiana jest widoczna jako pionowy pas — niezależnie od tego, ile
   ma przystanków. Dlatego przejście zajmuje teraz 45 % szerokości zdjęcia.

   Same przystanki układają się w krzywą, a nie w prostą: krycie trzyma się
   wysoko przez pierwszą trzecią przejścia (.94 na 64 %, .80 na 72 %), potem
   opada szybciej i wypłaszcza się przy zerze (.14 na 94 %). Liniowa rampa ma
   dwa załamania — na początku i na końcu — i oko łapie oba. Ta krzywa nie ma
   żadnego.

   Koszt jest świadomy: kadr w pełnej sile zajmuje 55 % swojej szerokości
   zamiast 86 %, czyli ok. 350 px zamiast 550 px przy pasie 1160 px.

   Kolumna tekstu startuje ZA zdjęciem, na 57 %, czyli za końcem gradientu.
   To jest warunek, nie estetyka: kadr NIE JEST tu przygaszony, więc tekst
   postawiony na nim nie miałby mierzalnego kontrastu — tło zmieniałoby się
   pod każdą literą razem ze zdjęciem. Na atramencie biel ma ok. 14,5:1
   niezależnie od tego, co jest w kadrze, i to jest jedyny sposób, żeby ta
   strona zachowywała się tak samo dla wszystkich 530 zawodników ze zdjęciem.

   Czerwonego dymu nie ma od 18.09.2026. Pełna siła robiła różową łunę na
   jasnym parkiecie, a połowa siły dawała przewagę czerwieni 41/255 wyłącznie
   w cieniach — czyli nic, czego dałoby się nie przeoczyć. Element, który albo
   przeszkadza, albo jest niewidoczny, nie ma wersji dobrej. */
.wba-zw__foto {
	position: absolute;
	z-index: 0;
	inset: 0 auto 0 0;
	width: 55%;
	-webkit-mask-image: linear-gradient(90deg,
			#000 0%,
			#000 55%,
			rgba(0, 0, 0, .94) 64%,
			rgba(0, 0, 0, .80) 72%,
			rgba(0, 0, 0, .58) 80%,
			rgba(0, 0, 0, .34) 88%,
			rgba(0, 0, 0, .14) 94%,
			transparent 100%);
	        mask-image: linear-gradient(90deg,
			#000 0%,
			#000 55%,
			rgba(0, 0, 0, .94) 64%,
			rgba(0, 0, 0, .80) 72%,
			rgba(0, 0, 0, .58) 80%,
			rgba(0, 0, 0, .34) 88%,
			rgba(0, 0, 0, .14) 94%,
			transparent 100%);
}

/* `object-position` wyżej niż środek, bo w kadrze z boiska twarze są nad
   linią połowy wysokości, a pod nią parkiet.

   `brightness(.72)`, a nie .42 jak przy kadrze pod całym pasem: tam zdjęcie
   było tłem pod tekstem i musiało zejść z drogi, tu jest połową kompozycji
   i niesie ją samo. Ta sama wartość w obu wariantach znaczyłaby, że jeden
   z nich jest ustawiony pod drugi. */
.wba-zw__foto-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 32%;
	filter: grayscale(1) contrast(1.2) brightness(.72);
}

/* Stały awatar (bez przypisanego zdjęcia) kotwiczy się dołem: sylwetka
   ma ramiona przy dolnej krawędzi, a przy kadrze „twarze wyżej niż środek"
   obcinało jej czubek głowy. */
.wba-zw__foto--awatar .wba-zw__foto-img {
	object-position: 50% 100%;
}

.wba-zw__head--foto .wba-zw__head-tekst {
	margin-left: 57%;
}

/* Duch numeru — to, czym na makiecie była wycinanka postaci: duży element,
   który nie pozwala prawej stronie pasa być pustym atramentem. Obrys, nie
   wypełnienie, bo cyfra ma być fakturą, a nie drugą informacją obok złotego
   numeru przy drużynie.

   Stoi w PRAWYM GÓRNYM narożniku, i to jest wynik poprawki, nie pierwszy
   pomysł. Przy dolnej krawędzi wchodził na ostatni kafel: kafel ma tło
   w bieli 7 %, więc obrys przez niego prześwitywał i cyfra wyglądała jak
   usterka renderowania, a nie jak nadruk.

   9,5 rem, a nie 12 — kolumna tekstu zwęziła się do 43 % pasa, gdy zdjęcie
   dostało 55 % szerokości, i przy 12 rem obrys dochodził do nazwiska. */
.wba-zw__duch {
	position: absolute;
	z-index: 0;
	right: 26px;
	top: 14px;
	color: transparent;
	font-size: 9.5rem;
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: .8;
	font-variant-numeric: tabular-nums;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .14);
	pointer-events: none;
	user-select: none;
}

/* Imię lekką odmianą NAD nazwiskiem w 900 — zamiast wersalikowego nadtytułu
   „ZAWODNIK”, który zniknął. Dwie linijki niosą tę samą informację (to jest
   osoba, a nie drużyna) i robią to samym krojem, a nie etykietą.

   Kreska pod nazwiskiem jest `::after`, a nie osobnym elementem: to element
   rysunku, nie treści, więc nie ma po co wpuszczać go do kodu strony. */
.wba-zw__nazwa {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
}

.wba-zw__nazwa-i {
	display: block;
	color: rgba(255, 255, 255, .92);
	font-size: .58em;
	font-weight: 400;
	letter-spacing: .01em;
}

.wba-zw__nazwa-n {
	display: block;
	margin-top: .04em;
	font-weight: 900;
	letter-spacing: -.015em;
}

.wba-zw__nazwa::after {
	content: "";
	display: block;
	width: 84px;
	height: 3px;
	margin-top: var(--wp--preset--spacing--s-4);
	background: var(--wp--preset--color--red-700);
}

/* Numer przy drużynie, nie na zdjęciu. Złoto na atramencie daje 10,02:1
   (wartość policzona dla całej rodziny stron danych, nagłówek tego pliku). */
.wba-zw__numer {
	color: var(--wp--preset--color--gold);
	font-size: 1.125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.wba-zw__druzyna {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	margin: var(--wp--preset--spacing--s-5) 0 0;
	font-weight: 700;
}

/* Herb na białej podkładce — herby są rysowane na biel, więc na atramencie
   ciemne kontury części klubów byłyby nieczytelne. Ta sama podkładka co
   w `.wba-dr__herb`, tylko mniejsza. */
.wba-zw__herb {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--md);
}

/* Nazwa drużyny większa niż liga pod nią (uwaga Marcina 26.10.2026: drużyna
   to ważniejsza informacja niż poziom rozgrywkowy), a liga odsunięta o jeden
   odstęp i cieńsza — dwa wiersze różnej wagi zamiast jednego ciągu. */
.wba-zw__druzyna-nm {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.15;
}

.wba-zw__druzyna-nm a {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.wba-zw__druzyna-nm a:hover,
.wba-zw__druzyna-nm a:focus {
	text-decoration: underline;
}

.wba-zw__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: var(--wp--preset--spacing--s-4) 0 0;
	padding: 0;
	list-style: none;
}

.wba-zw__tag {
	padding: 4px 10px;
	background: rgba(255, 255, 255, .08);
	border-radius: var(--wp--custom--radius--pill);
	color: rgba(255, 255, 255, .86);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- kafle kariery: cztery liczby W PASIE ------------------------------- */

/* Przeniosły się tu z sekcji „Kariera w liczbach" 18.09.2026 i dlatego stoją
   na atramencie, a nie na jasnej karcie. Cztery liczby odpowiadają na pytanie
   „kto to jest" bez czytania tabel.

   `flex`, a nie `grid` z `auto-fit`: kafli jest zawsze dokładnie cztery i mają
   dzielić dostępną szerokość równo. `auto-fit` z `minmax(140px, 1fr)` przy
   kolumnie tekstu zwężonej do 58 % zrzucał czwarty kafel do drugiego rzędu na
   szerokościach, na których wszystkie cztery jeszcze się mieściły.

   Kontrast policzony z pikseli, nie oceniony ze zrzutu: kafel to atrament
   z bielą 7 %, a stoi na najciemniejszej części kadru (zasłona 92–96 %),
   więc liczba w bieli i skrót w bieli 80 % trzymają się tam z zapasem.
   Dopisek w bieli 62 % jest NAJSŁABSZYM elementem pasa i dlatego siedzi
   wewnątrz kafla z własnym tłem, a nie wprost na zdjęciu — biel 72 % nad
   najjaśniejszym pikselem odsłoniętego kadru dawała 4,43:1, czyli poniżej
   progu AA. */
.wba-zw__kafle {
	display: flex;
	gap: var(--wp--preset--spacing--s-3);
	margin: var(--wp--preset--spacing--s-5) 0 0;
	padding: 0;
	list-style: none;
}

.wba-zw__kafel {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--wp--custom--radius--md);
}

.wba-zw__kafel-v {
	display: block;
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.wba-zw__kafel-e {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .80);
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
}

.wba-zw__kafel-s {
	display: block;
	color: rgba(255, 255, 255, .62);
}

/* Dwie tabele kariery obok siebie na szerokim ekranie: „razem i na mecz" oraz
   skuteczności czyta się razem, a jedna pod drugą zostawiała 300 px pustego
   pola po prawej. Poniżej 721 px wracają na siebie. */
.wba-zw__pary {
	display: grid;
	gap: var(--wp--preset--spacing--s-5);
}

@media (min-width: 721px) {

	.wba-zw__pary {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

/* --- tabela sezonów ------------------------------------------------------ */

/* KOMÓRKI NAZWY WRACAJĄ DO `table-cell` — i to nie jest kosmetyka, tylko
   naprawa błędnie opisanych liczb.

   Globalna `.wba-tabela__tm` jest flexem, bo w tabeli ligowej mieści herb
   OBOK nazwy drużyny. Tu ta sama klasa opisuje zwykłą komórkę tekstową, a
   `display: flex` wyjmuje komórkę z modelu kolumn tabeli: dwie pierwsze
   komórki wiersza siadały jedna pod drugą w tym samym miejscu, przez co CAŁA
   reszta wiersza przesuwała się o jedną kolumnę w lewo względem nagłówków.
   Zmierzone przed naprawą (`getBoundingClientRect`, okno 1280 px): nagłówek
   „PKT” stał nad wartością 7,6 (średnia na mecz), suma 190 punktów pod
   „MIN”, a „FT%” nad pustym miejscem. Strona podawała więc prawdziwe liczby
   pod fałszywymi opisami — najgorszy możliwy rodzaj usterki, bo wygląda
   dobrze na zrzucie.

   Wewnątrz komórki flex nie jest do niczego potrzebny: `.wba-zw__sezon-nm`
   i `.wba-zw__poziomy` są blokami i same stają jeden pod drugim. */
/* `display: table-cell` zniknęło stąd 11.09.2026 razem z globalnym flexem —
   komórka jest komórką sama z siebie. Zostaje samo wyrównanie do góry, bo tu
   komórki są wielowierszowe (nazwa sezonu i pod nią poziomy rozgrywek), a
   domyślne `middle` odsuwałoby pierwszą linię od nazwiska w tym samym rzędzie. */
.wba-zw__sezony .wba-tabela__tm,
.wba-zw__lista .wba-tabela__tm {
	vertical-align: top;
}

.wba-zw__sezon-nm {
	display: block;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.wba-zw__poziomy {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--faint);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-zw__poziomy a {
	color: inherit;
}

.wba-zw__sep {
	color: var(--wp--preset--color--faint);
}

/* --- kontekst rozgrywek (26.10.2026) ------------------------------------- */

/* Rozgrywki i sezon pod nazwą drużyny w pasie. Biel 86 % jak w tagach:
   ta sama kolumna tekstu, ten sam zmierzony kontrast. Podkreślenie odnośnika
   przygaszone, pełne dopiero pod wskaźnikiem — na atramencie biała linia
   pod każdym słowem ciężyła bardziej niż samo słowo. */
.wba-zw__liga {
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, .86);
	font-weight: 500;
	line-height: 1.3;
}

.wba-zw__liga a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .4);
}

.wba-zw__liga a:hover,
.wba-zw__liga a:focus {
	text-decoration-color: currentColor;
}

/* Przełącznik: rząd sezonów (pigułki jak pasek sezonów drużyny,
   `.wba-dr__sezon`) i pod nim rząd grup sezonu — dwuwierszowe kafelki:
   drużyna tłustym, pod nią liga i liczba meczów. Jedna linia
   „9WBA · 3. Liga · Honey Badgers Białołęka · 5 meczów” ma ponad 40 znaków
   i trzy takie pigułki nie mieszczą się obok siebie w 720 px; dwa wiersze
   trzymają trzy w jednym rzędzie. Promień `md`, nie pigułkowy: kafelek
   o dwóch wierszach wyglądał jak przycisk.

   Rząd sezonów jest LŻEJSZY od rzędu grup (bez obramowania, podkreślenie
   zamiast ramki na bieżącym): to nawigacja po czasie, a wybór „czego
   patrzysz” zapada w rzędzie grup.

   Pas sezonów PRZEWIJA SIĘ W POZIOMIE zamiast łamać na linie — 14 sezonów
   nie mieści się w 1 200 px i łamanie dawało dwie nierówne linie z „Całą
   karierą” samotnie na drugiej. „Cała kariera” stoi POZA przewijanym
   pasem, przy prawej krawędzi, odcięta kreską, więc jest widoczna zawsze.
   Maska na prawym brzegu pasa (zanikanie do przezroczystości) mówi, że
   dalej są starsze sezony; pasek przewijania zostaje cienki. */
.wba-zw__konteksty {
	margin-block: var(--wp--preset--spacing--s-4) 0;
}

.wba-zw__sezony-pas {
	display: flex;
	align-items: stretch;
	margin: 0 0 var(--wp--preset--spacing--s-3);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-zw__sezony-rzad {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	gap: 0 var(--wp--preset--spacing--s-3);
	min-width: 0;
	margin: 0;
	padding: 0 32px 0 0;
	overflow-x: auto;
	scrollbar-width: thin;
	list-style: none;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

.wba-zw__sezony-rzad--kariera {
	flex: none;
	padding: 0 0 0 var(--wp--preset--spacing--s-3);
	border-left: 1px solid var(--wp--preset--color--hairline);
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.wba-zw__sezon-p {
	flex: none;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.2;
}

.wba-zw__sezon-p a,
.wba-zw__sezon-p.is-biezacy {
	display: block;
	padding: 6px 2px 10px;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.wba-zw__sezon-p a:hover,
.wba-zw__sezon-p a:focus {
	border-bottom-color: var(--wp--preset--color--hairline);
}

.wba-zw__sezon-p.is-biezacy {
	border-bottom-color: var(--wp--preset--color--ink);
}

.wba-zw__sezon-t {
	display: block;
	font-weight: 700;
	white-space: nowrap;
}

.wba-zw__sezon-o {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-zw__konteksty-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-zw__kontekst {
	flex: none;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.2;
}

.wba-zw__kontekst a,
.wba-zw__kontekst.is-biezacy {
	display: block;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
}

.wba-zw__kontekst a {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
}

.wba-zw__kontekst a:hover,
.wba-zw__kontekst a:focus {
	background: var(--wp--preset--color--hairline);
}

.wba-zw__kontekst.is-biezacy {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wba-zw__kontekst-t {
	display: block;
	font-weight: 700;
	white-space: nowrap;
}

.wba-zw__kontekst-o {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wba-zw__kontekst.is-biezacy .wba-zw__kontekst-o {
	color: rgba(255, 255, 255, .72);
}

@media (max-width: 781px) {
	.wba-zw__konteksty-lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--wp--preset--spacing--s-2);
		scrollbar-width: thin;
	}
}

/* Granica „Cała kariera”: gruba kreska atramentu, bo niżej zmienia się
   pytanie (z „jak gra w tej lidze” na „kto to jest”), a sekcje po obu
   stronach wyglądają identycznie i bez kreski przejście byłoby niewidoczne. */
.wba-zw__czesc {
	margin-top: var(--wp--preset--spacing--s-7);
	padding-top: var(--wp--preset--spacing--s-5);
	border-top: 3px solid var(--wp--preset--color--ink);
}

.wba-zw__czesc-opis {
	margin: var(--wp--preset--spacing--s-2) 0 0;
	color: var(--wp--preset--color--muted);
}

/* Wiersz oglądanej grupy w tabeli sezonów i odnośnik do grupy w nazwie sezonu. */
.wba-zw__sezony tr.is-biezacy th,
.wba-zw__sezony tr.is-biezacy td {
	background: var(--wp--preset--color--surface);
}

.wba-zw__sezon-lnk {
	color: inherit;
}

/* --- lista meczów: sezon rozwijany -------------------------------------- */

/* `<details>`, a nie skrypt dociągający wiersze: treść zwiniętego sezonu jest
   w DOM, więc idzie do indeksu i znajduje ją wyszukiwanie w stronie. Powód
   pełniejszy w docbloku `wba_zawodnik_mecze()`. */
.wba-zw__sezon-blok + .wba-zw__sezon-blok {
	margin-top: var(--wp--preset--spacing--s-3);
	padding-top: var(--wp--preset--spacing--s-3);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.wba-zw__sezon-tyt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3);
	cursor: pointer;
	padding: 4px 0;
}

.wba-zw__sezon-tyt:hover .wba-zw__sezon-nm,
.wba-zw__sezon-tyt:focus-visible .wba-zw__sezon-nm {
	text-decoration: underline;
}

.wba-zw__sezon-dr {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
}

.wba-zw__sezon-dr a {
	color: inherit;
}

.wba-zw__sezon-sumy {
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	margin-left: auto;
	text-transform: uppercase;
	white-space: nowrap;
}

/* KOLUMNY LISTY MECZÓW SĄ TE SAME W KAŻDYM SEZONIE — `table-layout: fixed`
   plus udziały procentowe. Każdy sezon ma własną tabelę (bo własne `<details>`),
   więc przy układzie automatycznym każda z trzynastu dobierała szerokości do
   swojej najdłuższej nazwy rywala: zmierzone 173/521/162/92/66/52/52 w jednym
   sezonie i 0/447/181/103/74/59/59 w drugim. Po rozwinięciu dwóch sezonów naraz
   liczby w kolumnach nie stały w jednej linii pionowej.

   `min-width` zostaje w `rem`, żeby na telefonie tabela była szersza od pasa
   i przewijała się we własnym kontenerze — zamiast ściskać kolumny do
   nieczytelnych słupków. Na szerokim ekranie wygrywa `width: 100%`. */
.wba-zw__lista {
	min-width: 40rem;
	table-layout: fixed;
}

.wba-zw__lista th:nth-child(1),
.wba-zw__lista td:nth-child(1) {
	width: 15%;
}

.wba-zw__lista th:nth-child(2),
.wba-zw__lista td:nth-child(2) {
	width: 33%;
}

.wba-zw__lista th:nth-child(3),
.wba-zw__lista td:nth-child(3) {
	width: 16%;
}

.wba-zw__lista th:nth-child(4),
.wba-zw__lista td:nth-child(4) {
	width: 12%;
}

.wba-zw__lista th:nth-child(n+5),
.wba-zw__lista td:nth-child(n+5) {
	width: 8%;
}

.wba-zw__sezon-blok[open] .wba-zw__sezon-tyt {
	margin-bottom: var(--wp--preset--spacing--s-3);
}

.wba-zw__mdata {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

/* Wynik jest odnośnikiem do karty meczu — plakietka Z/P zostaje ta sama, co
   na stronie drużyny (`.wba-dr__wl`), żeby oba widoki mówiły tym samym
   językiem. */
.wba-zw__wynik {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

a.wba-zw__wynik:hover,
a.wba-zw__wynik:focus {
	text-decoration: underline;
}

.wba-zw__wl {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--faint);
	border-radius: 5px;
	color: var(--wp--preset--color--on-red);
	font-size: .6875rem;
	font-weight: 800;
	line-height: 1;
}

.wba-zw__wynik.is-w .wba-zw__wl {
	background: var(--wp--preset--color--win);
}

.wba-zw__wynik.is-l .wba-zw__wl {
	background: var(--wp--preset--color--loss);
}

.wba-zw__wynik.is-brak {
	color: var(--wp--preset--color--faint);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- pierścienie skuteczności ------------------------------------------- */

/*
 * Wartość i łuk leżą w JEDNEJ komórce siatki, jedno na drugim — bez
 * pozycjonowania bezwzględnym. Dzięki temu środek pierścienia trzyma się
 * środka przy każdym rozmiarze, a tekst nie wymaga przeliczania offsetu.
 *
 * Łuk rysujemy `stroke-dasharray` na okręgu obróconym o -90°, żeby zaczynał
 * się na godzinie dwunastej, a nie trzeciej.
 *
 * Kolor jest JEDEN dla wszystkich trzech — informację niesie wypełnienie,
 * a wartość i tak stoi liczbą w środku. Powód w docbloku
 * `wba_zawodnik_pierscienie()`.
 */

.wba-zw__pier {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--s-4);
	margin: 0 0 var(--wp--preset--spacing--s-5);
	padding: 0;
	list-style: none;
}

.wba-zw__pier-i {
	display: grid;
	justify-items: center;
	text-align: center;
}

.wba-zw__pier-k {
	display: grid;
	place-items: center;
	width: 108px;
	max-width: 100%;
}

.wba-zw__pier-k > * {
	grid-area: 1 / 1;
}

.wba-zw__pier-s {
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
}

.wba-zw__pier-t,
.wba-zw__pier-w {
	fill: none;
	stroke-width: 9;
}

.wba-zw__pier-t {
	stroke: var(--wp--preset--color--hairline);
}

.wba-zw__pier-w {
	stroke: var(--wp--preset--color--slate);
	stroke-linecap: round;
}

.wba-zw__pier-v {
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.wba-zw__pier-e {
	margin-top: 10px;
	color: var(--wp--preset--color--body-text);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wba-zw__pier-m {
	margin-top: 2px;
	color: var(--wp--preset--color--muted);
}

/* --- ostatni mecz ------------------------------------------------------- */

.wba-zw__om {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wba-zw__om-gora {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	align-items: center;
	justify-content: space-between;
	color: var(--wp--preset--color--muted);
}

.wba-zw__om-wl {
	border-radius: var(--wp--custom--radius--sm);
	padding: 2px 8px;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-zw__om-wl.is-win {
	background: var(--wp--preset--color--win);
}

.wba-zw__om-wl.is-loss {
	background: var(--wp--preset--color--loss);
}

/*
 * Trzy kolumny, ze środkową na `auto`: wynik ma tyle miejsca, ile potrzebuje,
 * a nazwy drużyn dzielą resztę po równo i zawijają. `minmax(0, 1fr)` zdejmuje
 * domyślne `min-width: auto`, bez którego długa nazwa rozpycha siatkę zamiast
 * się złamać.
 */
.wba-zw__om-starcie {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--s-3);
	align-items: center;
	margin-top: var(--wp--preset--spacing--s-3);
}

.wba-zw__om-dr {
	display: flex;
	gap: var(--wp--preset--spacing--s-2);
	align-items: center;
	min-width: 0;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.wba-zw__om-dr.is-rywal {
	flex-direction: row-reverse;
	text-align: right;
}

.wba-zw__om-wynik {
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.wba-zw__om-d {
	margin: 0 2px;
	color: var(--wp--preset--color--muted);
}

.wba-zw__om-linia {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--s-2);
	margin-top: var(--wp--preset--spacing--s-4);
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--s-3);
	text-align: center;
}

.wba-zw__om-sv {
	display: block;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.wba-zw__om-se {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}

a.wba-zw__om:hover .wba-zw__om-wynik,
a.wba-zw__om:focus .wba-zw__om-wynik {
	text-decoration: underline;
}

/* --- najlepsze mecze ---------------------------------------------------- */

.wba-zw__nl {
	display: grid;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-zw__nl-i {
	background: var(--wp--preset--color--card-2);
	border-radius: var(--wp--custom--radius--md);
}

.wba-zw__nl-l {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	color: inherit;
	text-decoration: none;
}

a.wba-zw__nl-l:hover,
a.wba-zw__nl-l:focus {
	background: var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wba-zw__nl-kto {
	display: flex;
	gap: var(--wp--preset--spacing--s-2);
	align-items: center;
	min-width: 0;
	flex-wrap: wrap;
}

.wba-zw__nl-nm {
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.wba-zw__nl-dt {
	color: var(--wp--preset--color--muted);
}

.wba-zw__nl-liczby {
	display: flex;
	gap: var(--wp--preset--spacing--s-4);
	align-items: baseline;
}

.wba-zw__nl-s {
	display: flex;
	gap: 4px;
	align-items: baseline;
	color: var(--wp--preset--color--muted);
}

.wba-zw__nl-s b {
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

/* --- odznaki ------------------------------------------------------------ */

/*
 * Kafel odznaki ma ten sam fundament co rekord życiowy (tło `card-2`, promień
 * `md`, cały obszar klikalny), więc obie sekcje czytają się jako rodzeństwo.
 * Różnica jest jedna: pasek poziomu po lewej.
 *
 * Pasek NIE JEST jedynym nośnikiem rzadkości — ta stoi w samej etykiecie
 * („Triple-double" kontra „Debiut w WBA"). Kolor tylko ją powtarza, więc nic
 * nie ginie przy monochromatycznym wydruku ani przy zaburzeniu widzenia barw.
 *
 * `auto-fit` z minimum 220 px, a nie 180 px jak przy rekordach: etykiety odznak
 * są dłuższe („Mecz 5+ przechwytów"), a opis pod nimi niesie nazwę rywala.
 * Przy 180 px łamały się na trzy wiersze.
 */

.wba-zw__odz {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-zw__odz-i {
	background: var(--wp--preset--color--card-2);
	border-left: 3px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--md);
}

/*
 * `gold-ink`, a NIE `gold`. Złoto marki (#F8B800) daje na kaflu #EEF0F3
 * kontrast 1,55:1 — pasek rzadkiej odznaki byłby praktycznie niewidoczny,
 * choć na zrzucie wygląda mocno, bo oko porównuje nasycenie, nie jasność.
 * Ciemne złoto z palety daje 6,31:1 (i 5,65:1 na tle najechania), więc pasek
 * widać, a skojarzenie ze złotem zostaje. Zmierzone 17.09.2026.
 */
.wba-zw__odz-i.is-rzadka {
	border-left-color: var(--wp--preset--color--gold-ink);
}

.wba-zw__odz-i.is-wyczyn {
	border-left-color: var(--wp--preset--color--red);
}

.wba-zw__odz-i.is-dorobek {
	border-left-color: var(--wp--preset--color--slate);
}

.wba-zw__odz-l {
	display: block;
	padding: var(--wp--preset--spacing--s-4);
	color: inherit;
	text-decoration: none;
}

a.wba-zw__odz-l:hover,
a.wba-zw__odz-l:focus {
	background: var(--wp--preset--color--hairline);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
}

.wba-zw__odz-t {
	display: block;
	color: var(--wp--preset--color--body-text);
	font-weight: 800;
	line-height: 1.2;
}

.wba-zw__odz-m {
	display: block;
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
}

/* --- rekordy życiowe ---------------------------------------------------- */

.wba-zw__rekordy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-zw__rek {
	background: var(--wp--preset--color--card-2);
	border-radius: var(--wp--custom--radius--md);
}

.wba-zw__rek-l,
.wba-zw__rek {
	display: block;
}

.wba-zw__rek-l {
	padding: var(--wp--preset--spacing--s-4);
	color: inherit;
	text-decoration: none;
}

.wba-zw__rek:not(:has(.wba-zw__rek-l)) {
	padding: var(--wp--preset--spacing--s-4);
}

.wba-zw__rek-l:hover,
.wba-zw__rek-l:focus {
	background: var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wba-zw__rek-v {
	display: block;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--xx-large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.wba-zw__rek-e {
	display: block;
	margin-top: 4px;
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-zw__rek-m {
	display: block;
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
}

.wba-zw__pusto {
	margin: 0;
}

@media (max-width: 720px) {

	.wba-zw__nazwa {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/* Pole zostaje OBOK tekstu, tylko mniejsze. Zrzucone pod tekst zabierałoby
	   132 px wysokości nad nazwiskiem, a 92 px obok mieści się nawet przy
	   szerokości 390 px. */
	.wba-zw__portret {
		gap: 2px;
		width: 92px;
		height: 92px;
	}

	.wba-zw__portret-numer {
		font-size: 2.25rem;
	}

	/* Na wąskim ekranie zasłona obraca się o ćwierć obrotu: kadr zostaje
	   czytelny GÓRĄ, a narasta w dół, bo tekst stoi pod nim, nie obok.
	   Odsunięcie kolumny w prawo tu nie działa — przy 390 px z kadru 4:3
	   zostałby po lewej pionowy wycinek szerokości ~120 px, z którego nie
	   widać akcji, tylko fragment koszulki.

	   `padding-top` daje kadrowi własne pole u góry pasa. Mniej niż tu znaczy
	   nazwisko na najjaśniejszej części zdjęcia. */
	/* Przy jednej kolumnie ten sam gradient obraca się o ćwierć obrotu: kadr
	   zostaje czysty górą i gaśnie w dół.

	   `padding-top` MUSI być większy niż wysokość zdjęcia (288 px), i to jest
	   poprawka po pomiarze, nie pierwotny zamysł. Przy 196 px pierwsza linijka
	   tekstu wchodziła w ogon gradientu, gdzie zdjęcie ma jeszcze ok. 30 %
	   krycia: tło pod nazwiskiem dochodziło do #7C7D80, czyli biel 4,12:1,
	   a dopisek w kaflu do 3,99:1 — poniżej AA. Tu obowiązuje ta sama zasada
	   co na szerokim ekranie: kadr NIE JEST przygaszony, więc tekst nie ma
	   prawa na nim stać. */
	.wba-zw__head--foto {
		padding-top: 300px;
	}

	.wba-zw__foto {
		inset: 0 0 auto 0;
		width: 100%;
		height: 288px;
		-webkit-mask-image: linear-gradient(180deg,
				#000 0%,
				#000 48%,
				rgba(0, 0, 0, .94) 59%,
				rgba(0, 0, 0, .80) 68%,
				rgba(0, 0, 0, .58) 78%,
				rgba(0, 0, 0, .34) 87%,
				rgba(0, 0, 0, .14) 94%,
				transparent 100%);
		        mask-image: linear-gradient(180deg,
				#000 0%,
				#000 48%,
				rgba(0, 0, 0, .94) 59%,
				rgba(0, 0, 0, .80) 68%,
				rgba(0, 0, 0, .58) 78%,
				rgba(0, 0, 0, .34) 87%,
				rgba(0, 0, 0, .14) 94%,
				transparent 100%);
	}

	.wba-zw__foto-img {
		object-position: 50% 26%;
	}

	.wba-zw__head--foto .wba-zw__head-tekst {
		margin-left: 0;
	}

	/* Duch schodzi z drogi: przy jednej kolumnie stałby dokładnie pod kaflami,
	   a jego obrys przez tło kafla prześwituje. */
	.wba-zw__duch {
		display: none;
	}

	/* Cztery kafle w rzędzie potrzebują ok. 520 px; poniżej wchodzą po dwa. */
	.wba-zw__kafle {
		flex-wrap: wrap;
	}

	.wba-zw__kafel {
		flex: 1 1 42%;
	}

	/* Sumy sezonu wracają pod nazwę, bo `margin-left: auto` przy zawinięciu
	   wypychałby je na własną linię wyrównane do prawej — a etykieta i liczby
	   mają się zaczynać w tej samej kolumnie co nazwa sezonu. */
	.wba-zw__sezon-sumy {
		margin-left: 0;
	}
}

/* --- wykazy: pięć ekranów po widgetach Genius Sports --------------------- */

/* Wspólny szkielet `/liga/druzyny/`, `/liga/zawodnicy/`,
   `/liga/statystyki-zawodnikow/`, `/liga/statystyki/` i `/liga/liderzy/`.
   Prefiks `wba-wykaz`, a nie `wba-spis`, bo `wba-spis` jest już zajęty przez
   spis terminarzy i znaczy tam coś innego — rozdzielnik sezonów, nie wykaz
   pozycji. */
.wba-wykaz {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-5);
}

/* --- przełącznik sezonów ------------------------------------------------- */

/* Trzynaście sezonów w dwóch grupach. Grupy stoją jedna pod drugą, a nie obok,
   bo „Sezony” ma jedenaście pozycji i „Puchary” dwie — w jednym rzędzie druga
   grupa wyglądałaby jak ogon pierwszej. */
.wba-wykaz__sezony {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s-3);
	padding: var(--wp--preset--spacing--s-4);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
}

.wba-wykaz__grupa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3);
}

/* Szerokość ustalona, żeby listy obu grup zaczynały się w jednej pionowej
   linii. Bez tego „Puchary” (dłuższe słowo) przesuwałyby swoje pozycje
   w prawo względem „Sezonów” i przełącznik wyglądałby na krzywy. */
.wba-wykaz__grupa-tytul {
	flex: 0 0 5.5rem;
	color: var(--wp--preset--color--faint);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wba-wykaz__opcje {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-wykaz__wybor {
	display: block;
	padding: 5px 12px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--body-text);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

a.wba-wykaz__wybor:hover,
a.wba-wykaz__wybor:focus {
	background: var(--wp--preset--color--card-2);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
}

/* Pigułka zapalona: czerwień znaczy „to jest w wyborze”. Kontrast białego na
   #A80000 wynosi 7,88:1 — liczone z luminancji relatywnej, nie oceniane okiem. */
.wba-wykaz__wybor.is-wybrany {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--on-red);
}

/* Zapalona pigułka, która NIE jest odnośnikiem, to jedyny zaznaczony sezon —
   wyboru pustego nie ma, więc nie da się go zgasić. Kursor ma o tym mówić,
   zanim ktoś kliknie i nic się nie stanie. */
span.wba-wykaz__wybor.is-wybrany {
	cursor: default;
}

/* TU BYŁ BŁĄD DO 15.09.2026, gdy zapalona pigułka stała się klikalna:
   `a.wba-wykaz__wybor:hover` ma swoistość (0,2,1), a `.wba-wykaz__wybor.is-wybrany`
   tylko (0,2,0) — więc najechanie na zapaloną pigułkę gasiło jej czerwień na szare
   `card-2` i wyglądało jak odznaczenie, zanim ktokolwiek kliknął. Ta reguła ma
   (0,3,1) i wygrywa. Ciemny atrament zamiast czerwieni mówi „kliknięcie to
   zdejmie”, a jednocześnie nie udaje stanu zgaszonego: kontrast białego na
   #141821 to 17,76:1. */
a.wba-wykaz__wybor.is-wybrany:hover,
a.wba-wykaz__wybor.is-wybrany:focus {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-red);
}

/* --- metadane i nota ---------------------------------------------------- */

.wba-wykaz__meta {
	margin: 0;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-wykaz__meta strong {
	color: var(--wp--preset--color--ink);
}

.wba-wykaz__nota {
	margin: 0;
	padding-top: var(--wp--preset--spacing--s-3);
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--muted);
	text-wrap: pretty;
}

.wba-wykaz__pusto {
	margin: 0;
	padding: var(--wp--preset--spacing--s-6);
	background: var(--wp--preset--color--card);
	border: 1px dashed var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* --- wyszukiwanie w tabeli ---------------------------------------------- */

/* Pole wstawia `szukanie.js`, więc bez JavaScriptu tych reguł nic nie dotyczy.
   Stoi PRZED obudową tabeli, nie w niej: obudowa przewija się w poziomie
   (do 22 kolumn), a pole przewijające się w bok razem z nagłówkami byłoby
   nie do trafienia na telefonie. */
.wba-wykaz__szukajka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-3);
	margin-block-end: var(--wp--preset--spacing--s-5);
}

.wba-wykaz__szukaj-etykieta {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 700;
}

.wba-wykaz__szukaj-pole {
	flex: 1 1 14rem;
	max-width: 22rem;
	padding: 7px 12px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--body-text);
	font-family: inherit;
	font-size: 1rem;
}

/* 16 px to nie jest wybór estetyczny: Safari na iOS przybliża widok przy
   wejściu w pole o piśmie mniejszym niż 16 px, a strona zostaje przybliżona
   po wyjściu. Dlatego pole ma `1rem`, mimo że etykieta obok jest mniejsza. */

.wba-wykaz__szukaj-pole:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 1px;
}

.wba-wykaz__szukaj-ile {
	flex: 0 0 auto;
	margin: 0;
	color: var(--wp--preset--color--faint);
	font-size: .8125rem;
}

/* BEZ TEJ REGUŁY WYSZUKIWANIE NIE DZIAŁA. Atrybut `hidden` działa przez
   `display: none` z arkusza przeglądarki, a ten ma swoistość zero — każda
   reguła nadająca wierszowi `display: table-row` (własna czy z rdzenia) go
   bije. Wiersz zostaje wtedy widoczny mimo `hidden`, czyli filtr „działa”
   w kodzie, a na ekranie nie robi nic. */
.wba-wykaz__t tbody tr[hidden] {
	display: none;
}

/* --- sortowanie kolumn -------------------------------------------------- */

/* Przycisk musi wyglądać DOKŁADNIE jak nagłówek, w który wszedł: przeglądarka
   nie dziedziczy do `button` ani pisma, ani koloru, ani wyrównania, więc każde
   z nich trzeba oddać jawnie. `text-align: inherit` zamiast `right` — kolumna
   z nazwą jest wyrównana do lewej i ma dostać to samo wyrównanie, co jej
   nagłówek. */
.wba-wykaz__sortuj {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
}

/* Kolumna z nazwą jest wyrównana do lewej, liczbowe do prawej — przycisk
   rozciągnięty na całą szerokość musi więc dosunąć treść do właściwej
   krawędzi, a nie zostawić ją po lewej. */
.wba-tabela__t th:not(.wba-tabela__th-tm):not(.wba-tabela__th-poz) .wba-wykaz__sortuj {
	justify-content: flex-end;
}

.wba-wykaz__sortuj:hover,
.wba-wykaz__sortuj:focus-visible {
	color: var(--wp--preset--color--red);
}

/* Wskaźnik kierunku RYSUJEMY, nie wpisujemy znakiem: trójkąt z krawędzi nie
   wchodzi do drzewa dostępności ani do zaznaczenia tekstu, a znak „▼” robi
   jedno i drugie. Kierunek i tak niesie `aria-sort` na nagłówku — dla
   czytnika ekranu to jedyne wiarygodne źródło. */
.wba-wykaz__sortuj::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	opacity: 0;
}

/* Strzałka pojawia się dopiero pod wskaźnikiem albo na kolumnie sortowanej.
   Dwadzieścia dwa nagłówki ze stałą strzałką to dwadzieścia dwa znaczki, które
   nic nie mówią — kolumna sortowana jest jedna. */
.wba-wykaz__sortuj:hover::after,
.wba-wykaz__sortuj:focus-visible::after,
th[aria-sort] .wba-wykaz__sortuj::after {
	opacity: 1;
}

.wba-wykaz__sortuj::after,
th[aria-sort="descending"] .wba-wykaz__sortuj::after {
	border-top: 5px solid currentColor;
	border-bottom: 0;
}

th[aria-sort="ascending"] .wba-wykaz__sortuj::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

th[aria-sort] .wba-wykaz__sortuj {
	color: var(--wp--preset--color--red);
}

/* --- szeroka tabela statystyk ------------------------------------------- */

/* Pierwsza kolumna zostaje na ekranie przy przewijaniu w poziomie. Przy 22
   kolumnach liczba bez nazwiska obok jest bezużyteczna, a nazwisko wyjeżdża
   za lewą krawędź już przy trzeciej kolumnie. Tło jest OBOWIĄZKOWE: bez niego
   pod przyklejoną komórką przejeżdżałyby kolumny, które ma zasłaniać. */
.wba-wykaz__t {
	min-width: 100%;
}

.wba-wykaz__t .wba-wykaz__lp {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--wp--preset--color--card);
}

.wba-wykaz__t .wba-wykaz__kto {
	position: sticky;
	left: 34px;
	z-index: 2;
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wp--preset--color--hairline);
}

.wba-wykaz__t thead .wba-wykaz__lp,
.wba-wykaz__t thead .wba-wykaz__kto {
	z-index: 3;
	background: var(--wp--preset--color--card);
}

/* Nazwa w szerokiej tabeli może się łamać — inaczej sama kolumna nazwisk
   miałaby 14 rem i wypchnęła liczby jeszcze dalej za krawędź.

   `overflow-wrap: break-word` DOTYCZY WYŁĄCZNIE TEJ KOLUMNY i jest odwrotnością
   decyzji z `.wba-tabela__t` wyżej, gdzie łamanie w środku słowa wyłączyliśmy,
   żeby „PIASECZUSETS” nie rozpadało się na „PIASECZUS” i „ETS”. Ta decyzja
   miała drugą stronę, której wtedy nie zmierzyliśmy: słowo dłuższe od kolumny
   nie łamie się, ale też nie znika — `overflow` jest widoczny, a komórka ma
   `z-index: 2`, więc nazwisko WYJEŻDŻA NA SĄSIEDNIĄ KOLUMNĘ I KŁADZIE SIĘ NA
   JEJ TREŚCI. Zmierzone przy 375 px: „Hydyr Mammetgurbanov” — link 126,8 px
   w komórce 120 px, prawa krawędź linku 6,3 px ZA początkiem napisu
   „BANKSTERS” w następnej kolumnie. Zasięg: 1 z 749 nazwisk w tabeli
   zawodników i 6 z 58 nazw w tabeli drużyn.

   Nieczytelne robią się wtedy DWA napisy zamiast jednego, więc łamanie jest
   mniejszym złem — tym bardziej że łamanie na spacjach i tak jest tu normą
   (459 z 749 nazwisk zajmuje przy 375 px dwie linie), a `break-word` łamie
   w środku słowa TYLKO wtedy, gdy słowo nie ma jak się zmieścić. Kolumny
   liczbowe zostają przy `nowrap` i `normal` — „11” nadal nie rozpadnie się
   na „1” i „1”.

   Czego NIE wybraliśmy i dlaczego: mniejszy stopień pisma w tej kolumnie
   musiałby zejść do 12 px, żeby 126,9 px weszło w 112 px treści komórki — to
   zmiana dla wszystkich 749 wierszy dla siedmiu przypadków; szersza kolumna
   (140 px) zabiera 20 z 375 px ekranu na stałe; `hyphens: auto` nie zadziała,
   bo wymyślone nazwy drużyn nie mają w słowniku miejsc podziału. */
.wba-wykaz__t .wba-wykaz__kto {
	max-width: 12rem;
	white-space: normal;
}



/* --- siatka kart (drużyny) ---------------------------------------------- */

.wba-wykaz__karty {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-wykaz__karta a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-3);
	height: 100%;
	padding: 12px 14px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.wba-wykaz__karta a:hover,
.wba-wykaz__karta a:focus {
	background: var(--wp--preset--color--card-2);
	border-color: var(--wp--preset--color--muted);
}

.wba-wykaz__karta img {
	flex: 0 0 auto;
}

.wba-wykaz__karta-nm {
	font-weight: 700;
	line-height: 1.2;
}

.wba-wykaz__karta-ile {
	display: block;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- wykaz alfabetyczny (zawodnicy) ------------------------------------- */

.wba-wykaz__litery {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-wykaz__litera a,
.wba-wykaz__litera span {
	display: grid;
	place-items: center;
	min-width: 2rem;
	padding: 4px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-decoration: none;
}

.wba-wykaz__litera a:hover,
.wba-wykaz__litera a:focus {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--on-red);
}

/* Litera bez ani jednego nazwiska zostaje w rzędzie, ale nie udaje odnośnika:
   dziura w alfabecie czyta się jak błąd wypisywania, a wyszarzona litera
   mówi wprost „tu nikogo nie ma”.

   BEZ `opacity` — i to nie kosmetyka. Token `faint` daje na papierze 4,71:1,
   ale `opacity: .5` na wierzchu składało go do #B5BAC2, czyli 1,96:1 przy
   progu 4,5:1 (zmierzone dwukrotnie, na sezonie 8 dotyczyło Q i X). Samo WCAG
   dałoby się tu obronić wyłączeniem dla elementów nieaktywnych, ale przy
   1,96:1 litera przestaje być czytelna, czyli nie robi tego, po co ją tam
   postawiono: widać dziurę, nie literę. */
.wba-wykaz__litera span {
	color: var(--wp--preset--color--faint);
}

/* Odstęp nad sekcją, do której skacze pasek liter, MUSI być równy wysokości
   przyklejonego paska — inaczej nagłówek ląduje pod nim. Wysokość zna tylko
   przeglądarka (pasek zawija się: raz jeden rząd, raz trzy), więc wpisuje ją
   `assets/js/pasek-liter.js` w `--wba-pasek-h`. Zmierzone przed poprawką:
   pasek 59,8 px przy jednym rzędzie i 139,8 px przy trzech, odstęp 24 px.

   Wartość awaryjna 3.75rem = 60 px to przypadek jednego rzędu, czyli szeroki
   ekran — strona bez JS zachowuje się wtedy poprawnie. */
.wba-wykaz__sekcja {
	scroll-margin-top: calc(var(--wba-pasek-h, 3.75rem) + var(--wp--preset--spacing--s-2));
}

.wba-wykaz__sekcja-h {
	margin: 0 0 var(--wp--preset--spacing--s-3);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
}

.wba-wykaz__nazwiska {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2px var(--wp--preset--spacing--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* LICZBA MECZÓW STOI PRZY SWOIM NAZWISKU, NIE PRZY CUDZYM.

   Wcześniej `a` był blokiem na całą szerokość słupka (222,4 px), więc liczba
   spadała do własnej linii. Zmierzone odległości środków linii: nazwisko →
   swoja liczba 32,3 px, ta liczba → NASTĘPNE nazwisko 30,9 px. Liczba była
   o 1,4 px bliżej cudzego nazwiska — czyli prawo bliskości wskazywało nie tę
   parę, którą trzeba.

   Wiersz jest więc flexem w jednej linii. Liczba idzie tuż za nazwiskiem
   (`gap`), a NIE jest dosunięta do prawej krawędzi słupka: dosunięcie
   odtworzyłoby dokładnie ten sam problem, tylko w poziomie.

   `padding: 5px 0` na odnośniku zostaje i to jest wymóg, nie ozdoba: wysokość
   celu dotknięcia bierze się dziś WYŁĄCZNIE z niego (16 px tekstu + 2 × 5 px
   + interlinia = 35,6 px zmierzone przy 375 px). Bez niego cel spada do
   wysokości linii, czyli pod próg 24 × 24 px. */
.wba-wykaz__nazwiska li {
	display: flex;
	align-items: baseline;
	gap: .4em;
	min-width: 0;
}

.wba-wykaz__nazwiska a {
	padding: 5px 0;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
}

.wba-wykaz__nazwiska a:hover,
.wba-wykaz__nazwiska a:focus {
	color: var(--wp--preset--color--red);
	text-decoration: underline;
}

.wba-wykaz__ile {
	color: var(--wp--preset--color--faint);
	font-variant-numeric: tabular-nums;
}

/* --- liderzy: kafle po kategoriach -------------------------------------- */

.wba-wykaz__liderzy {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--s-4);
}

.wba-wykaz__kat {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--s-4);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--lg);
}

.wba-wykaz__kat-h {
	margin: 0 0 2px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.wba-wykaz__kat-opis {
	margin: 0 0 var(--wp--preset--spacing--s-3);
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-wykaz__kat-lista {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-wykaz__kat-poz {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
	padding: 7px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.wba-wykaz__kat-poz:first-child {
	border-top: 0;
}

.wba-wykaz__kat-kto {
	min-width: 0;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.wba-wykaz__kat-kto a {
	color: inherit;
}

.wba-wykaz__kat-tm {
	display: block;
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-wykaz__kat-v {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	white-space: nowrap;
}

/* Telefon: tytuł grupy przełącznika wraca nad listę, bo 5,5 rem etykiety
   plus pigułki sezonów nie mieszczą się w jednym rzędzie przy 375 px. */
@media (max-width: 600px) {
	.wba-wykaz__grupa-tytul {
		flex: 0 0 100%;
	}

	/* PIGUŁKI SEZONÓW PRZEWIJAJĄ SIĘ W POZIOMIE, ZAMIAST ZAWIJAĆ SIĘ NA OSIEM
	   RZĘDÓW. Zmierzone przy 375 × 812 px: przełącznik zajmował 302,4 px
	   (8 rzędów: dwie etykiety grup i 13 pigułek, z czego cztery mają długie
	   nazwy w rodzaju „Tagomago.pl Cup Amator 2021"), a treść zaczynała się
	   dopiero na 805 px — czyli pierwszy ekran telefonu nie pokazywał ani
	   jednej liczby.

	   Dlaczego bez skryptu przewijającego wybraną pigułkę na widok: pigułki
	   stoją od najnowszej, a domyślnie wybrana JEST najnowsza, więc w zwykłym
	   wejściu wybrana pigułka stoi pierwsza. Kto wybrał starszy sezon, właśnie
	   go dotknął, a nazwa i tak stoi pełnym tekstem w linii meta pod
	   przełącznikiem — wybór nigdy nie jest niejasny.

	   Przewijanie jest zamknięte w tym pojemniku: strona nie przewija się
	   w poziomie, sprawdzone pomiarem `documentElement.scrollWidth`. */
	.wba-wykaz__opcje {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.wba-wykaz__opcje > li {
		scroll-snap-align: start;
	}

	.wba-wykaz__wybor {
		white-space: nowrap;
	}

	/* Przyklejona zostaje TYLKO nazwa. Numer porządkowy i nazwa razem to
	   34 px + 12 rem = 226 px z 375 px szerokości ekranu, czyli 60 % okna
	   zajęte przez dwie kolumny — na przewijane liczby zostawałoby 149 px.
	   Numer wraca więc do przewijania, a nazwa przejmuje jego miejsce przy
	   lewej krawędzi. */
	.wba-wykaz__t .wba-wykaz__lp {
		position: static;
	}

	.wba-wykaz__t .wba-wykaz__kto {
		left: 0;
		min-width: 7.5rem;
		max-width: 7.5rem;
		overflow-wrap: break-word;
	}

	/* Nazwisko dłuższe od kolumny nie może wyjechać na kolumnę obok.
	   Zmierzone przy 375 px: „Hydyr Mammetgurbanov” — link 126,8 px w komórce
	   120 px, prawa krawędź linku 6,3 px ZA początkiem napisu „BANKSTERS”
	   w następnej kolumnie, a komórka ma `z-index: 2`, więc nazwisko leżało NA
	   niej. Zasięg: 1 z 749 nazwisk zawodników i 6 z 58 nazw drużyn. Przy 1280
	   px nie ma ani jednego przypadku, więc cała poprawka siedzi tutaj.

	   TRZY WARTOŚCI, KAŻDA Z INNEGO POWODU — sprawdzone pomiarem po kolei:

	   `overflow-wrap: break-word` na komórce, a `anywhere` na linku. Oba
	   opisują to samo łamanie w środku słowa i różnią się jednym: `anywhere`
	   wchodzi do rozmiaru min-content, `break-word` nie. Na linku musi być
	   `anywhere`, bo link jest od poprawki celów dotknięcia `inline-flex`
	   i jego szerokość liczy się z min-content zawartości — przy `break-word`
	   pudełko linku zostawało 126,8 px i wyjeżdżało dokładnie jak przed
	   poprawką. Na komórce `anywhere` byłoby zaś zbyt mocne samo w sobie:
	   min-content spadał do jednego znaku i nazwisko łamało się po literze
	   (link 27,5 × 140,8 px, strona 46 698 → 84 616 px).

	   `min-width: 7.5rem` obok `max-width: 7.5rem`, bo `anywhere` na linku
	   ciągnie min-content komórki w dół i sam `max-width` przestaje kolumnę
	   trzymać: zmierzone 88,6 px zamiast 120 px, a nazwisk zajmujących dwie
	   linie było wtedy 722 z 749 wobec 459. `width: 7.5rem` tu NIE wystarcza
	   — sprawdzone, kolumna dalej wychodziła 88,6 px, bo w układzie auto jawna
	   szerokość komórki jest tylko preferencją i przegrywa z rozdziałem
	   miejsca. `min-width` wchodzi do minimum kolumny, więc trzyma: 120 px,
	   459 z 749 nazwisk w dwóch liniach, strona 46 698 → 46 716 px.

	   Czego NIE wybraliśmy: mniejszy stopień pisma musiałby zejść do 12 px,
	   żeby 126,9 px weszło w 112 px treści komórki — zmiana dla 749 wierszy
	   dla siedmiu przypadków; szersza kolumna (140 px) zabiera 20 z 375 px
	   ekranu na stałe; `hyphens: auto` nie zadziała, bo wymyślone nazwy drużyn
	   nie mają w słowniku miejsc podziału; zwykły link (bez `inline-flex`)
	   łamie się poprawnie, ale wraca do 19 px wysokości celu. */
	.wba-wykaz__t .wba-wykaz__kto a {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}

/* --- wykazy: drobne elementy komórek ------------------------------------ */

.wba-wykaz__karta-tekst {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

/* Wszystkie kluby zawodnika, jeden pod drugim. Zastąpiło znacznik „+1”
   z dymkiem (15.09.2026): dymka nie dało się otworzyć palcem, nie dało się
   z niego wejść na żadną drużynę, a wyszukiwarka i tak szukała po klubach,
   których kolumna nie pokazywała.

   Lista jest listą także przy jednym klubie — 92 % wierszy ma dokładnie
   jeden, a `<ul>` z jednym `<li>` wygląda tak samo jak sama nazwa. Jedna
   reguła zamiast przypadku szczególnego w kodzie i w arkuszu. */
.wba-wykaz__kluby {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Nazwy klubów bywają tak długie, że JEDNA zawija się na dwie linie
   („KOMANDOSI JEDZA GWOZDZIE”), więc odstęp między pozycjami musi być
   wyraźnie większy niż odstęp między liniami wewnątrz jednej nazwy —
   inaczej nie widać, gdzie kończy się klub, a zaczyna następny. Zmierzone
   na zrzucie: przy 3 px trzy kluby Klimkiewicza czytały się jak jeden ciąg.

   ODRZUCONE: wcięcie kontynuacji (`text-indent` ujemny przy dodatnim
   `padding-inline-start`). Wygląda dobrze w teorii i jest klasycznym
   rozwiązaniem dla list, ale tutaj wysunęło pierwszą linię poza komórkę
   i nazwy zostały ucięte z lewej — widać to było na zrzucie od razu. */
.wba-wykaz__klub {
	line-height: 1.25;
}

/* Odstęp tylko MIĘDZY klubami, nie nad pierwszym — inaczej wiersz z jednym
   klubem (czyli 92 % wierszy) byłby wyższy niż sąsiednie kolumny i rytm
   tabeli by się rozjechał. */
.wba-wykaz__klub + .wba-wykaz__klub {
	margin-block-start: var(--wp--preset--spacing--s-2);
}

/* Kreska „brak danych” jest jaśniejsza od liczb, bo nie jest wartością —
   ma się nie liczyć w rytmie kolumny. */
.wba-wykaz__brak {
	color: var(--wp--preset--color--faint);
}

.wba-wykaz__roz.is-plus {
	color: var(--wp--preset--color--win);
}

.wba-wykaz__roz.is-minus {
	color: var(--wp--preset--color--loss);
}

/* Pasek liter zostaje na ekranie przy przewijaniu wykazu 2138 nazwisk —
   bez tego powrót do wyboru litery znaczy przewinięcie kilkunastu ekranów
   w górę. Tło jest obowiązkowe, inaczej nazwiska przejeżdżałyby pod paskiem. */
/* PASEK LITER ZACZYNA SIĘ POD PASKIEM STRONY, NIE PRZY KRAWĘDZI OKNA.
   Przy `top: 0` przyklejał się dokładnie tam, gdzie stoi pasek górny, a ten ma
   `z-index: 30` przeciw 5 tutaj — więc pasek liter był ZAKRYTY W CAŁOŚCI, nie
   częściowo. Zmierzone na `/liga/zawodnicy/` przy `scrollY` 2500:
   `rect.top` = 0 przy wysokości 60,6 px, a `elementFromPoint` w jego środku
   zwracał element menu z paska górnego. Litery były więc nieklikalne od chwili,
   gdy strona ruszyła w dół — czyli zawsze, bo do liter sięga się właśnie
   podczas przewijania długiego wykazu. */
.wba-wykaz__pasek-liter {
	position: sticky;
	top: var(--wba-pasek-gorny, 77px);
	z-index: 5;
	margin: 0 calc(-1 * var(--wp--preset--spacing--s-3));
	padding: var(--wp--preset--spacing--s-3);
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Przy `prefers-reduced-motion` przyklejony pasek zostaje — to nie ruch, tylko
   położenie. Zdejmujemy go natomiast, gdy okno jest bardzo niskie: pasek liter
   zajmowałby wtedy większość widocznej wysokości. */
@media (max-height: 420px) {
	.wba-wykaz__pasek-liter {
		position: static;
		margin: 0;
		padding: 0;
		background: none;
		border-bottom: 0;
	}
}

/* --- odnośniki między pięcioma wykazami --------------------------------- */

/* PASEK STOI W NAGŁÓWKU, A NIE POD TREŚCIĄ — i to jest poprawka, nie zmiana
   gustu. Pierwsza wersja siedziała pod notą, z uzasadnieniem „kto wszedł na
   statystyki drużyn, przyszedł po tabelę, a nie po spis innych stron”. Przy
   krótkiej stronie to się trzyma; przy 749 wierszach nie: zmierzone
   47 747 px od góry na stronie wysokiej 48 602 px, czyli 53 ekrany przewijania
   przy oknie 1280 × 900. Odnośnik, do którego trzeba przewinąć 53 ekrany,
   praktycznie nie istnieje.

   ODNOŚNIKI TEKSTOWE, A NIE PIGUŁKI — żeby nagłówek nie zamienił się w ścianę
   pigułek. Nad nimi stoi już przełącznik sezonów, czyli 13 pigułek zawijających
   się przy 375 px na cztery rzędy; czwarty rząd tych samych kształtów
   przestałby się czytać jako inna rzecz. A to JEST inna rzecz: sezony to
   wybór jednej z trzynastu wartości, wykazy to przejście na inną stronę.

   Odstęp w pionie nie jest ozdobą: bez niego cel dotknięcia ma wysokość samego
   wiersza tekstu, czyli poniżej progu 24 px. */
.wba-wykaz__rodzenstwo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--s-2);
	margin-top: var(--wp--preset--spacing--s-2);
}

.wba-wykaz__rodzenstwo-t {
	color: var(--wp--preset--color--faint);
	letter-spacing: .04em;
	padding-block: 5px;
	text-transform: uppercase;
}

.wba-wykaz__rodzenstwo ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-wykaz__rodzenstwo a {
	display: inline-block;
	padding-block: 5px;
	color: var(--wp--preset--color--body-text);
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--hairline);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wba-wykaz__rodzenstwo a:hover,
.wba-wykaz__rodzenstwo a:focus {
	color: var(--wp--preset--color--red);
	text-decoration-color: currentColor;
}

/* --- cele dotknięcia w tabelach wykazów --------------------------------- */

/* WCAG 2.5.8 chce 24 × 24 px na cel, a zmierzone było 13-17,6 px w pionie:
   przycisk sortowania 22,7 × 17,6 px, odnośnik nazwiska w komórce 117,3 × 13 px,
   odnośnik drużyny 102,2 × 16,5 px (1280 px, `/liga/statystyki-zawodnikow/`).
   798 z 1533 celów na tej stronie było pod progiem.

   Wiersz ma 69,8 px wysokości, więc te odnośniki nie były małe z powodu braku
   miejsca — po prostu nie brały tego, które już mają. Odstęp w pionie nie
   zmienia więc wysokości wiersza ani długości strony; sprawdzone pomiarem.

   `min-width` na nagłówku, a nie na przycisku: przycisk ma `width: 100%`, więc
   był węższy od 24 px tylko wtedy, gdy węższa była sama kolumna (najwęższa
   zmierzona 34 px, z czego 12 px to odstęp komórki). */
.wba-wykaz__t thead th {
	min-width: 36px;
}

.wba-wykaz__t .wba-wykaz__sortuj {
	min-height: 24px;
}

/* `min-height`, A NIE `padding` — i to jest druga próba, bo pierwsza kosztowała
   przewijanie. Odstęp 6 px w pionie na odnośniku podniósł wiersz z 69,8 px do
   81,8 px, a stronę z 48 602 px do 58 361 px, czyli o 20 % — cel dotknięcia
   kupiony za dziesięć tysięcy pikseli przewijania w tabeli o 749 wierszach.
   `min-height: 24px` daje ten sam cel i nie rusza wysokości wiersza, bo wiersz
   jest i tak wyższy.

   Ta sama reguła obejmuje nazwiska w kaflach liderów: przy 375 px miały 19 px
   wysokości, czyli 62 z 78 celów na `/liga/liderzy/` było pod progiem. Karty
   drużyn na `/liga/druzyny/` progu nie łamały (cel 335 × 66 px), bo tam
   odnośnik obejmuje całą kartę. */
.wba-wykaz__t tbody a,
.wba-wykaz__kat-kto a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	min-width: 0;
}


/* ==========================================================================
   AKTUALNOŚCI I ARCHIWA KATEGORII — układ 1/3 + 2/3 z drzewem kategorii
   --------------------------------------------------------------------------
   Używają tego: `templates/page-aktualnosci.html` (stan zastany: zwykła strona
   8659), `templates/home.html` (stan docelowy: właściwa strona wpisów) oraz
   `templates/category.html` przez `parts/lista-wpisow.html`. Jeden zestaw klas
   dla trzech szablonów, żeby przełączenie `page_for_posts` nie było zmianą
   wyglądu.
   ========================================================================== */

/* `1fr 2fr`, a NIE dwie szerokości w pikselach: stosunek 1 : 2 ma się trzymać
   na każdej szerokości kontenera, a nie tylko przy 1160 px. Odstęp 40 px
   wchodzi w podział raz, więc lewa kolumna to (kontener − 40) / 3.
   ZMIERZONE przy 1280 px: 373,33 px / 746,67 px, stosunek 2,000.

   Próg 900 px, a nie 1120 px jak przy treści wpisu (`.wba-article__uklad`):
   tam prawa kolumna ma stałe 440 px i poniżej 1120 px kolumna tekstu robiła
   się za wąska. Tutaj obie kolumny są ułamkowe, więc kurczą się razem —
   przy 900 px lewa ma ~273 px, a prawa ~547 px i mieści dwie karty wpisów. */
@media (min-width: 900px) {

	.wba-uklad-2k {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 40px;
		align-items: start;
	}

	/* Układ przepływowy rdzenia dokłada `margin-block-start` każdemu dziecku
	   poza pierwszym. W siatce ten odstęp zsumowałby się z `gap` i zepchnąłby
	   prawą kolumnę w dół względem lewej. Poniżej progu ten sam margines JEST
	   potrzebny — to on rozdziela drzewo od listy w jednej kolumnie — więc
	   zerujemy go tylko tu. */
	.wba-uklad-2k > * {
		margin-block-start: 0;
	}

	/* Drzewo jedzie ze stroną, nie zostaje przyklejone: przy 10 kategoriach
	   panel ma ~420 px, a lista wpisów bywa dziesięć razy wyższa, więc
	   `position: sticky` trzymałby pusty panel przez większość przewijania. */
	.wba-uklad-2k__lewa {
		min-width: 0;
	}

	.wba-uklad-2k__prawa {
		min-width: 0;
	}
}

/* Dwie karty w prawej kolumnie na szerokich ekranach, JEDNA poniżej 600 px.
   Rdzeń wystawia `grid-template-columns: repeat(2, minmax(0, 1fr))` bez żadnego
   zapytania medialnego (sprawdzone w wygenerowanym `<style>`), więc przy 375 px
   zostałyby dwie karty po ~165 px — na miniaturę, datę, tytuł i zajawkę to za
   mało. Selektor jest zagnieżdżony (0,2,0), a klasa rdzenia ma 0,1,0, więc
   wygrywa bez `!important`. */
@media (max-width: 599.98px) {

	.wba-uklad-2k__prawa .wba-news__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- drzewo kategorii (blok wba/drzewo-kategorii) ------------------------ */

.wba-drzewo {
	padding: var(--wp--preset--spacing--s-4);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

/* `padding-inline` taki sam, jak na odnośnikach: bez tego tytuł panelu stał
   8 px w lewo od nazw kategorii, bo nazwy mają odstęp wewnętrzny odnośnika.
   ZMIERZONE przed poprawką: tytuł na x = 77, wszystkie nazwy na x = 85. */
.wba-drzewo__tytul {
	margin: 0 0 var(--wp--preset--spacing--s-3);
	padding-inline: var(--wp--preset--spacing--s-2);
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wba-drzewo__lista {
	display: grid;
	row-gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-drzewo__wszystkie {
	margin: 0 0 var(--wp--preset--spacing--s-3);
	padding-bottom: var(--wp--preset--spacing--s-3);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Zagnieżdżenie kreską, a nie wcięciem listy: `padding-inline-start` na `<ul>`
   sumuje się z każdym poziomem i przy trzech poziomach nazwa kategorii zaczyna
   się w połowie panelu. Kreska mówi to samo i kosztuje 13 px niezależnie od
   głębokości. Dziś w bazie WSZYSTKIE kategorie mają `parent = 0`, więc ta
   reguła nie działa na niczym — jest na zapas, bo hierarchia jest w bloku
   zrobiona i przetestowana. */
.wba-drzewo__lista--pod {
	margin-top: 2px;
	margin-inline-start: 6px;
	padding-inline-start: 7px;
	border-inline-start: 1px solid var(--wp--preset--color--hairline);
}

/* `min-height: 24px` i `padding-inline`, BEZ odstępu w pionie — ta sama zasada
   co przy `.wba-wykaz__t tbody a`: na pięciu wykazach ligowych odstęp w pionie
   podniósł stronę o 20 %, a `min-height` daje ten sam cel dotknięcia (WCAG
   2.5.8, 24 × 24 px) za zero pikseli przewijania, bo wiersz i tak jest wyższy.
   Tu wiersz ma ~24-27 px, więc `min-height` jest tym, co go podtrzymuje.

   `color` jawnie: theme.json ustawia `elements.link.color.text` na `red`, więc
   bez tego dziesięć kategorii byłoby dziesięcioma czerwonymi napisami. Kolor
   `body-text` (#14161C) na `surface` (#F4F5F7) daje 16,58:1 — policzone
   z pikseli, nie ocenione okiem. */
.wba-drzewo__lnk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s-2);
	min-height: 24px;
	padding-inline: var(--wp--preset--spacing--s-2);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--body-text);
	line-height: 1.25;
	text-decoration: none;
}

.wba-drzewo__lnk:hover,
.wba-drzewo__lnk:focus-visible {
	background: var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wba-drzewo__nazwa {
	min-width: 0;
	font-weight: 700;
}

/* `muted` (#59616E), a NIE `faint` (#6B7484) — i to jest różnica przejścia,
   nie gustu. Na `surface` (#F4F5F7) `faint` daje 4,32:1, czyli POD progiem AA
   4,5:1; `muted` daje 5,73:1. Na białej karcie `faint` przechodzi (4,71:1)
   i dlatego stoi w `.wba-spis__poziom-ile` — ale tamten element leży na czymś
   innym. Policzone z wartości pikseli. */
.wba-drzewo__ile {
	flex: none;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Bieżąca kategoria na atramencie: 17,76:1 dla napisu i 13,93:1 dla licznika.
   Tło, a nie sama zmiana koloru napisu — przy dziesięciu pozycjach w jednym
   panelu różnica odcienia tekstu ginie, a wypełnienie widać od razu. */
.wba-drzewo__poz.is-biezaca > .wba-drzewo__lnk,
.wba-drzewo__lnk[aria-current="page"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wba-drzewo__poz.is-biezaca > .wba-drzewo__lnk .wba-drzewo__ile,
.wba-drzewo__lnk[aria-current="page"] .wba-drzewo__ile {
	color: var(--wp--preset--color--hairline);
}

/* Przodek bieżącej kategorii: sama nazwa mocniej, bez tła. Tło dostaje
   WYŁĄCZNIE bieżąca, żeby „gdzie jestem" miało jedną odpowiedź — to samo
   rozróżnienie, które w HTML-u niesie `aria-current` tylko na jednej pozycji. */
.wba-drzewo__poz.is-nadrzedna > .wba-drzewo__lnk {
	color: var(--wp--preset--color--ink);
}

.wba-drzewo__poz.is-nadrzedna > .wba-drzewo__lnk .wba-drzewo__nazwa {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --- logotypy FIBA i Genius Sports przy widgecie parkietów ---------------
   Stoją w LEWYM RYNSZTOKU sekcji „Ostatnio na parkietach", czyli poza
   kontenerem środkującym — tak jak w widgecie Genius, z którego pochodzą.
   Do 2026-09-11 towarzyszyły pasowi statystyk; to jest PRZENIESIENIE, nie
   zdublowanie — ta sama atrybucja dwa razy na jednej stronie to szum.

   KOTWICA JEST W SZABLONIE, NIE W TYM WIDGECIE. `.wba-live` renderuje PHP
   bloku (`inc/blok-dzis-na-parkietach.php`) i nie ma `position`, a jego reguł
   nie ruszamy. Dlatego `front-page.html` opakowuje blok parkietów w grupę
   `.wba-logobox-kotwica`; jedyne, co ta grupa robi, to daje logotypom kontekst
   pozycjonowania dokładnie o wysokości widgetu. Logobox stoi w niej ZA blokiem
   parkietów, żeby to nie `.wba-live` łapał 20 px `block-gap` od rdzenia
   (patrz „PIONOWY RYTM PASÓW" wyżej — pasy mają się stykać bez szpary).

   W PIONIE: PRZY PASKU MECZÓW, NA BIELI. `.wba-live` dzieli się na dwa pasy
   i oba idą przez całą szerokość okna, więc rynsztok ma na ich wysokości dwa
   różne kolory. Zmierzone (`getComputedStyle`, 1440 px):
     `.wba-live`            szary `rgb(244, 245, 247)`, 0–700 px sekcji,
     `.wba-live__fixtures`  biały `rgb(255, 255, 255)`, 418–675 px sekcji.
   Logotypy mają stać na bieli, przy pasku kart meczów (`.wba-live__list`,
   452–675 px). `document.elementFromPoint` w rynsztoku na tej wysokości trafia
   w `.wba-live__fixtures` — biel sięga do krawędzi okna, więc logobox NIE
   potrzebuje własnego tła.

   KOTWICZYMY OD DOŁU, NIE OD GÓRY, i to nie jest wybór stylu: górna krawędź
   białego pasa (418 px) zależy od wysokości odtwarzacza, a odległość od dołu
   sekcji do dołu bieli to `padding-bottom` 24 px w `.wba-live__in` plus 1 px
   `border-bottom` sekcji — dwie stałe. `bottom: s-10` (64 px) stawia pudełko
   o wysokości 142 px w przedziale 494–636 px sekcji, czyli 76 px pod górną
   krawędzią bieli i 39 px nad jej dolną, ze środkiem 1,5 px od środka paska
   kart. Zmierzone przy 1360, 1440 i 1920 px: geometria pasa jest identyczna
   (418–675), więc ten sam `bottom` trzyma się na całej szerokości.

   POZIOM LICZONY, NIE WPISANY, I TO `max()` Z DWÓCH REGUŁ:
     trzymaj się kolumny treści — `rynsztok - bok - 20 px`,
     ale nigdy nie wchodź bliżej krawędzi okna niż środek rynsztoka —
     `(rynsztok - bok) / 2`,
   gdzie rynsztok = `(100% - content-size) / 2`. Procent liczy się od grupy
   kotwiczącej, czyli od tego samego pudełka, w którym środkuje się treść, więc
   całość idzie za `--wp--style--global--content-size` bez ani jednej liczby
   z pomiaru. Punkt przecięcia obu reguł wypada tam, gdzie rynsztok = bok + 40 px,
   czyli przy 1370 px: niżej wygrywa środkowanie, wyżej trzymanie się treści.
   Zmierzone: 1360 px → 17,5 px z obu stron; 1440 px → 20 px do treści, 55 px do
   krawędzi; 1920 px → 20 px do treści, 295 px do krawędzi.
   Samo środkowanie w rynsztoku odpadło, bo przy 1920 px odsuwało logotypy
   157 px od paska meczów — a mają stać PRZY nim.

   BOK 65 px, BO TYLE MA RASTER — I TO JEST WYNIK POSZUKIWAŃ, NIE LENISTWO.
   `fibaH.png` i `gs_widget.png` mają w źródle 65 × 65 px (2 349 B i 2 204 B),
   więc każde powiększenie to rozmycie. Przeszukane i puste: `/resources/images/`
   na CDN Genius (16 wariantów nazw, same 404), strona główna widgetu
   (`GSlogo.png` 448 × 134, `GS_powered.png` 175 × 35, `gs_logo_14.png` 87 × 88
   — to znaki samego Genius Sports, bez FIBA LiveStats, i poziome),
   `hosted.dcd.shared.geniussports.com` (żadnego zasobu atrybucji),
   `www.fibalivestats.com` (404), Wikimedia Commons (brak obu znaków).
   Znaku FIBA LiveStats nie wolno przerysować — to znak towarowy. Lepszy mały
   ostry niż duży rozmyty, więc zostaje 65 px, czyli `naturalWidth` = szerokość
   wyświetlania.

   Poniżej 1360 px pudełko wraca do zwykłego wiersza pod widgetem.
   Logotypów NIE CHOWAMY na małych ekranach: to atrybucja źródła danych,
   a nie ozdoba. --- */
.wba-logobox-kotwica {
	position: relative;
}

.wba-logobox {
	display: flex;
	justify-content: center;
	margin-block: var(--wp--preset--spacing--s-3);
}

.wba-logobox .logobox-content {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s-2);
}

.wba-logobox a {
	display: block;
}

.wba-logobox img {
	display: block;
	width: 44px;
	height: 44px;
}

@media (min-width: 1360px) {
	.wba-logobox {
		--wba-logobox-bok: 65px;

		position: absolute;
		bottom: var(--wp--preset--spacing--s-10);
		left: max(
			calc((((100% - var(--wp--style--global--content-size)) / 2) - var(--wba-logobox-bok)) / 2),
			calc(((100% - var(--wp--style--global--content-size)) / 2) - var(--wba-logobox-bok) - var(--wp--preset--spacing--s-5))
		);
		width: var(--wba-logobox-bok);
		margin: 0;
	}

	.wba-logobox .logobox-content {
		flex-direction: column;
		gap: var(--wp--preset--spacing--s-3);
	}

	.wba-logobox img {
		width: var(--wba-logobox-bok);
		height: var(--wba-logobox-bok);
	}
}

/* --- przebieg meczu: zakladki, zapis zdarzen, mapa rzutow ----------------
   Kolory z palety theme.json, bez ani jednej nowej wartosci. Gospodarz bierze
   `slate`, gosc `red-700` — te same dwie role, co w naglowku karty meczu, wiec
   znaczenie koloru jest na calej karcie jedno.

   ZAKLADKI DZIALAJA DOPIERO Z JAVASCRIPTEM i tak sa napisane: w HTML-u pasek
   ma `hidden`, a oba panele sa widoczne, kazdy z wlasnym naglowkiem. Skrypt
   odslania pasek, dodaje `.wba-zakladki--wlaczone` i chowa drugi panel. Bez
   skryptu zostaja dwie sekcje jedna pod druga — pelna tresc, tylko bez
   przelaczania. Dlatego naglowki panelu chowamy WYLACZNIE pod ta klasa. --- */
.wba-zakladki__pasek {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-1);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	margin-bottom: var(--wp--preset--spacing--s-5);
}

.wba-zakladki__z {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	/* 44 px wysokosci celu dotkniecia bierze sie z tego odstepu, nie z
	   `min-height` — przy zmianie skali czcionki cel rosnie razem z tekstem. */
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	margin-bottom: -1px;
}

.wba-zakladki__z[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--red-700);
	color: var(--wp--preset--color--body-text);
}

.wba-zakladki--wlaczone .wba-zakladki__h {
	/* Naglowek panelu jest w trybie zakladek powtorzeniem etykiety zakladki,
	   ale zostaje w drzewie dostepnosci: panel ma `aria-labelledby` na przycisk,
	   a naglowek daje czytnikowi punkt nawigacji po naglowkach. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wba-zakladki__p:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 4px;
}

/* Zapis zdarzen */
.wba-zdarzenia__kw {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.wba-zdarzenia__kw:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* `<summary>` zamiast przycisku z JavaScriptem: zwijanie kwart musi dzialac
   takze bez skryptu, bo to jedyna droga do tresci trzech pozostalych kwart.
   `list-style: none` plus `::-webkit-details-marker` zdejmuje domyslny
   trojkacik w obu rodzinach silnikow; wlasny wskaznik jest nizej. */
.wba-zdarzenia__kwarta {
	align-items: center;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: var(--wp--preset--spacing--s-3);
	letter-spacing: 0.04em;
	list-style: none;
	/* 44 px celu dotkniecia z odstepu, nie z `min-height` — rosnie z czcionka. */
	padding: var(--wp--preset--spacing--s-4) 0;
	text-transform: uppercase;
}

.wba-zdarzenia__kwarta::-webkit-details-marker {
	display: none;
}

.wba-zdarzenia__kwarta::before {
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	flex: 0 0 auto;
	height: 7px;
	transform: rotate(-45deg);
	width: 7px;
}

.wba-zdarzenia__kw[open] > .wba-zdarzenia__kwarta::before {
	transform: rotate(45deg);
}

.wba-zdarzenia__kwarta:focus-visible {
	outline: 2px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

.wba-zdarzenia__kwarta-i {
	color: var(--wp--preset--color--faint);
	font-weight: 400;
	letter-spacing: 0;
	margin-left: auto;
	text-transform: none;
}

.wba-zdarzenia__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wba-zdarzenia__z {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	display: grid;
	/* Cztery kolumny: zegar, druzyna, tresc, wynik. Tresc bierze cala resztke
	   (`1fr`), a nie `auto` — inaczej dlugie nazwisko rozpychalo kolumne wyniku. */
	grid-template-columns: 3.25rem 2.25rem 1fr 3.25rem;
	gap: var(--wp--preset--spacing--s-2);
	padding: var(--wp--preset--spacing--s-2) 0;
}

.wba-zdarzenia__z:last-child {
	border-bottom: 0;
}

.wba-zdarzenia__czas {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.wba-zdarzenia__dr {
	border-radius: 4px;
	color: var(--wp--preset--color--paper);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 2px 4px;
	text-align: center;
}

.wba-zdarzenia__z--gospodarz .wba-zdarzenia__dr {
	background: var(--wp--preset--color--slate);
}

.wba-zdarzenia__z--gosc .wba-zdarzenia__dr {
	background: var(--wp--preset--color--red-700);
}

.wba-zdarzenia__dr--brak {
	background: none;
}

.wba-zdarzenia__kto {
	font-weight: 600;
}

.wba-zdarzenia__co {
	color: var(--wp--preset--color--muted);
}

.wba-zdarzenia__wynik {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

/* Mapa rzutow */
.wba-rzuty__filtr {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2);
	margin-bottom: var(--wp--preset--spacing--s-4);
}

.wba-rzuty__b {
	appearance: none;
	background: var(--wp--preset--color--card-2);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	color: var(--wp--preset--color--body-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	padding: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-4);
}

.wba-rzuty__b.is-wybrany {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wba-rzuty__plansza {
	/* Proporcja boiska FIBA 28:15. `position: relative` jest ukladem
	   odniesienia dla znacznikow, ktore stoja na procentach — tych samych,
	   jakie oddaje zrodlo. */
	aspect-ratio: 28 / 15;
	background: var(--wp--preset--color--card-2);
	border-radius: 8px;
	max-width: 100%;
	position: relative;
	width: 100%;
}

.wba-boisko {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.wba-boisko line,
.wba-boisko path,
.wba-boisko circle,
.wba-boisko rect {
	stroke: var(--wp--preset--color--muted);
	stroke-width: 8;
}

.wba-boisko__obrys {
	stroke-width: 12;
}

.wba-rzut {
	border-radius: 50%;
	/* 10 px srednicy przy 1160 px szerokosci to 0,86 % boiska — znacznik jest
	   wiekszy niz punkt, ktory oznacza, i tak ma byc: rzuty z tego samego
	   miejsca musza byc widoczne jako skupisko, a nie jako jedna kropka. */
	height: 10px;
	margin: -5px 0 0 -5px;
	position: absolute;
	width: 10px;
}

.wba-rzut--gospodarz {
	background: var(--wp--preset--color--slate);
	border: 2px solid var(--wp--preset--color--slate);
}

.wba-rzut--gosc {
	background: var(--wp--preset--color--red-700);
	border: 2px solid var(--wp--preset--color--red-700);
}

.wba-rzut--niecelny {
	/* Niecelny to obwodka bez wypelnienia — roznica jest w KSZTALCIE, nie
	   w samym kolorze, wiec czytelna takze przy zaburzeniach widzenia barw. */
	background: transparent;
}

.wba-rzuty__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s-2) var(--wp--preset--spacing--s-5);
	list-style: none;
	margin: var(--wp--preset--spacing--s-4) 0 0;
	padding: 0;
}

.wba-rzuty__legenda li {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	gap: var(--wp--preset--spacing--s-2);
}

.wba-rzuty__legenda .wba-rzut {
	position: static;
	margin: 0;
	flex: 0 0 auto;
}

.wba-rzuty__sumy {
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--s-4);
	width: 100%;
}

.wba-rzuty__sumy th,
.wba-rzuty__sumy td {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: var(--wp--preset--spacing--s-2);
	text-align: right;
}

.wba-rzuty__sumy th[scope="row"],
.wba-rzuty__sumy thead th:first-child {
	text-align: left;
}

.wba-rzuty__sumy td {
	font-variant-numeric: tabular-nums;
}

/* Pobieranie na zadanie */
.wba-zdarzenia__b {
	appearance: none;
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-6);
}

.wba-zdarzenia__b[disabled] {
	background: var(--wp--preset--color--muted);
	cursor: default;
}

.wba-zdarzenia__stan {
	color: var(--wp--preset--color--muted);
	margin: var(--wp--preset--spacing--s-3) 0 0;
}

@media (max-width: 600px) {
	.wba-zdarzenia__z {
		/* Na telefonie wynik idzie pod tresc, a nie do czwartej kolumny:
		   przy 335 px szerokosci karty cztery kolumny zostawialy tresci
		   niespelna 150 px. */
		grid-template-columns: 3rem 2.25rem 1fr;
	}

	.wba-zdarzenia__wynik {
		grid-column: 3;
		text-align: left;
	}

	.wba-rzut {
		height: 8px;
		width: 8px;
		margin: -4px 0 0 -4px;
		border-width: 1.5px;
	}

	.wba-rzuty__b {
		/* Zmierzone przed poprawka: 114 x 39 px. Prog 24 x 24 byl spelniony,
		   ale to przyciski obok siebie, ktore na telefonie trafia sie kciukiem
		   w biegu — 44 px to wysokosc, przy ktorej nie trzeba celowac. */
		padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	}
}

/* ---------------------------------------------------------------------------
 * Strona zawodnika — wykresy widoku rozgrywek (inc/zawodnik-wykresy.php)
 *
 * Jedna seria to zawodnik (atrament), odniesienie ligi jest szare (`faint`).
 * Wygrana/porażka: `win`/`loss` z motywu plus kształt (pełny/pusty znacznik),
 * bo sama para barw ma pod deuteranopią za małą różnicę.
 * ------------------------------------------------------------------------- */

.wba-zw__pod {
	margin: var(--wp--preset--spacing--s-5) 0 var(--wp--preset--spacing--s-3);
	color: var(--wp--preset--color--body-text);
	font-weight: 700;
}

.wba-zw__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 6px var(--wp--preset--spacing--s-4);
	margin: 0 0 var(--wp--preset--spacing--s-3);
	color: var(--wp--preset--color--muted);
}

.wba-zw__leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wba-zw__leg::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
}

.wba-zw__leg--slupek::before {
	width: 18px;
	height: 8px;
	border-radius: 4px;
}

.wba-zw__leg--kreska::before {
	width: 18px;
	height: 2px;
	border-radius: 0;
	background: var(--wp--preset--color--faint);
}

.wba-zw__leg--za2::before { background: var(--wp--preset--color--ink); border-radius: 2px; }
.wba-zw__leg--za3::before { background: var(--wp--preset--color--slate); border-radius: 2px; }
.wba-zw__leg--wolne::before { background: var(--wp--preset--color--faint); border-radius: 2px; }

.wba-zw__leg--celny::before { background: var(--wp--preset--color--ink); }

.wba-zw__leg--niecelny::before {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink);
}

.wba-zw__leg--wygrana::before { background: var(--wp--preset--color--win); }

.wba-zw__leg--porazka::before {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--loss);
}

/* 1. Porównanie ze średnią ligi — siatka: etykieta | tor | wartość | percentyl */

.wba-zw__por {
	display: grid;
	grid-template-columns: minmax(96px, 150px) 1fr auto auto;
	column-gap: var(--wp--preset--spacing--s-3);
	row-gap: 10px;
	align-items: center;
}

.wba-zw__por-w {
	display: contents;
}

.wba-zw__por-e {
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.wba-zw__por-tor {
	position: relative;
	display: block;
	height: 16px;
	border-radius: 4px;
	background: var(--wp--preset--color--card-2);
	overflow: visible;
}

.wba-zw__por-s {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 0 4px 4px 0;
	background: var(--wp--preset--color--ink);
}

.wba-zw__por-sr {
	position: absolute;
	top: -4px;
	width: 2px;
	height: 24px;
	margin-left: -1px;
	background: var(--wp--preset--color--faint);
	box-shadow: 0 0 0 2px var(--wp--preset--color--card);
}

.wba-zw__por-v {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 48px;
	color: var(--wp--preset--color--body-text);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
}

.wba-zw__por-l {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	white-space: nowrap;
}

.wba-zw__por-p {
	min-width: 88px;
	color: var(--wp--preset--color--muted);
	text-align: right;
	white-space: nowrap;
}

/* Profil rzutowy — słupki stosowe (część całości), 2 px przerwy tła */

.wba-zw__stosy {
	display: grid;
	gap: 8px;
}

.wba-zw__stos-w {
	display: grid;
	grid-template-columns: minmax(64px, 96px) 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--s-3);
}

.wba-zw__stos-e {
	color: var(--wp--preset--color--muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-zw__stos {
	display: flex;
	gap: 2px;
	height: 22px;
	border-radius: 4px;
	overflow: hidden;
}

.wba-zw__stos-s {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-width: 0;
}

.wba-zw__stos-s--za2 { background: var(--wp--preset--color--ink); }
.wba-zw__stos-s--za3 { background: var(--wp--preset--color--slate); }
.wba-zw__stos-s--wolne { background: var(--wp--preset--color--faint); }

.wba-zw__stos-n {
	color: var(--wp--preset--color--paper);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.wba-zw__stosy .wba-zw__legenda {
	margin: 2px 0 0;
}

.wba-zw__rekordy--miary {
	margin-top: var(--wp--preset--spacing--s-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.wba-zw__rekordy--miary .wba-zw__rek-v {
	font-size: var(--wp--preset--font-size--x-large);
}

.wba-zw__rekordy--miary .wba-zw__rek-e {
	text-transform: none;
	letter-spacing: 0;
}

/* 2. Mapa rzutów */

.wba-zw__mapa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--s-5);
	align-items: start;
}

.wba-zw__mapa-plansza {
	background: var(--wp--preset--color--card-2);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--s-3);
}

.wba-zw__boisko {
	position: static;
	display: block;
	width: 100%;
	height: auto;
}

.wba-zw__rzut {
	fill: transparent;
	stroke: var(--wp--preset--color--ink);
	stroke-width: 7;
}

.wba-zw__rzut.is-celny {
	fill: var(--wp--preset--color--ink);
	stroke: var(--wp--preset--color--card-2);
	stroke-width: 5;
}

.wba-zw__strefy .wba-tabela__pkt {
	font-weight: 700;
}

.wba-zw__strefy-suma th,
.wba-zw__strefy-suma td {
	border-top: 2px solid var(--wp--preset--color--hairline);
	font-weight: 700;
}

/* 3. Forma — SVG liniowy i słupki +/- */

.wba-zw__forma-wybor {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--wp--preset--spacing--s-3);
}

.wba-zw__forma-p {
	appearance: none;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--body-text);
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
}

.wba-zw__forma-p[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.wba-zw__forma-p:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.wba-zw__figura {
	margin: 0;
}

.wba-zw__figura + .wba-zw__figura {
	margin-top: var(--wp--preset--spacing--s-4);
}

.wba-zw__figura-o {
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
}

.wba-zw__wykres {
	display: block;
	width: 100%;
	height: auto;
	font-family: inherit;
}

.wba-zw__siatka {
	stroke: var(--wp--preset--color--hairline);
	stroke-width: 1;
}

.wba-zw__siatka--zero {
	stroke: var(--wp--preset--color--muted);
}

.wba-zw__os {
	fill: var(--wp--preset--color--muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* Napis średniej leży na torze słupków, więc dostaje obwódkę w kolorze karty. */
.wba-zw__os--liga {
	fill: var(--wp--preset--color--faint);
	font-weight: 600;
	paint-order: stroke;
	stroke: var(--wp--preset--color--card);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.wba-zw__liga-linia {
	stroke: var(--wp--preset--color--faint);
	stroke-width: 2;
}

.wba-zw__linia {
	fill: none;
	stroke: var(--wp--preset--color--ink);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.wba-zw__pkt {
	stroke-width: 2;
}

.wba-zw__pkt.is-wygrana {
	fill: var(--wp--preset--color--win);
	stroke: var(--wp--preset--color--card);
}

.wba-zw__pkt.is-porazka {
	fill: var(--wp--preset--color--card);
	stroke: var(--wp--preset--color--loss);
}

.wba-zw__wykres a:hover .wba-zw__pkt,
.wba-zw__wykres a:focus .wba-zw__pkt {
	r: 7;
}

.wba-zw__wart {
	fill: var(--wp--preset--color--body-text);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.wba-zw__slupek {
	fill: var(--wp--preset--color--ink);
}

.wba-zw__wykres a:hover .wba-zw__slupek,
.wba-zw__wykres a:focus .wba-zw__slupek {
	fill: var(--wp--preset--color--slate);
}

@media (max-width: 720px) {

	.wba-zw__por {
		grid-template-columns: 1fr auto;
		row-gap: 4px;
	}

	.wba-zw__por-e {
		grid-column: 1;
	}

	.wba-zw__por-p {
		grid-column: 2;
		min-width: 0;
	}

	.wba-zw__por-tor {
		grid-column: 1;
		margin-bottom: 8px;
	}

	.wba-zw__por-v {
		grid-column: 2;
		flex-direction: row;
		gap: 8px;
		align-items: baseline;
		margin-bottom: 8px;
	}

	.wba-zw__mapa {
		grid-template-columns: 1fr;
	}

	.wba-zw__os {
		font-size: 14px;
	}

	.wba-zw__wart {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * Strona zawodnika — zakładki Przegląd / Statystyki / Mecze (26.10.2026)
 *
 * Trzy adresy, nie panele: pasek to zwykła lista odnośników, bieżąca
 * zakładka jest tekstem z `aria-current`. Podkreślenie w `red-700` jak
 * w zakładkach karty meczu, żeby zakładki STRONY czytały się inaczej niż
 * pas sezonów niżej (ten ma podkreślenie w atramencie).
 * ------------------------------------------------------------------------- */

.wba-zw__zakladki {
	margin: 0 0 var(--wp--preset--spacing--s-4);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-zw__zakladki-l {
	display: flex;
	gap: var(--wp--preset--spacing--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-zw__zakladka > a,
.wba-zw__zakladka > span {
	display: block;
	margin-bottom: -1px;
	padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-4);
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.wba-zw__zakladka > a:hover,
.wba-zw__zakladka > a:focus-visible {
	color: var(--wp--preset--color--body-text);
	border-bottom-color: var(--wp--preset--color--hairline);
}

.wba-zw__zakladka.is-biezaca > span {
	color: var(--wp--preset--color--body-text);
	border-bottom-color: var(--wp--preset--color--red-700);
}

/* Wykresy: dwa warianty w DOM, ekran wybiera jeden (audyt 26.10, U1). */
.wba-zw__wykres--waski {
	display: none;
}

/* Noty pod kartami: miara wiersza do 72 znaków (audyt 26.10, U12). */
.wba-zw__k .wba-tabela__nota {
	max-width: 72ch;
}

@media (max-width: 720px) {

	.wba-zw__zakladki-l {
		gap: 0;
	}

	.wba-zw__zakladka {
		flex: 1 1 0;
		text-align: center;
	}

	.wba-zw__zakladka > a,
	.wba-zw__zakladka > span {
		padding: var(--wp--preset--spacing--s-3) var(--wp--preset--spacing--s-2);
	}

	.wba-zw__wykres--szeroki {
		display: none;
	}

	.wba-zw__wykres--waski {
		display: block;
	}

	/* viewBox 360 na ~308 px treści = skala 0,86: 15 px → ~13 px na ekranie. */
	.wba-zw__wykres--waski .wba-zw__os {
		font-size: 15px;
	}

	.wba-zw__wykres--waski .wba-zw__wart {
		font-size: 16px;
	}

	/* Tabela meczów bez przewijania: Data, Rywal, Wynik, Pkt — minuty,
	   zbiórki i asysty schodzą (audyt 26.10, U2: 332 px tabeli było poza
	   kadrem bez żadnego śladu przewijania). */
	.wba-zw__lista {
		min-width: 0;
	}

	.wba-zw__lista th:nth-child(4),
	.wba-zw__lista td:nth-child(4),
	.wba-zw__lista th:nth-child(6),
	.wba-zw__lista td:nth-child(6),
	.wba-zw__lista th:nth-child(7),
	.wba-zw__lista td:nth-child(7) {
		display: none;
	}

	.wba-zw__lista th:nth-child(1),
	.wba-zw__lista td:nth-child(1) {
		width: 22%;
	}

	.wba-zw__lista th:nth-child(2),
	.wba-zw__lista td:nth-child(2) {
		width: 40%;
	}

	.wba-zw__lista th:nth-child(3),
	.wba-zw__lista td:nth-child(3) {
		width: 24%;
	}

	.wba-zw__lista th:nth-child(5),
	.wba-zw__lista td:nth-child(5) {
		width: 14%;
	}

	/* Kafle liczbowe sekcji wykresów w dwóch kolumnach (audyt 26.10, U9). */
	.wba-zw__rekordy--miary {
		grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
		gap: var(--wp--preset--spacing--s-2);
	}

	.wba-zw__rekordy--miary .wba-zw__rek:not(:has(.wba-zw__rek-l)),
	.wba-zw__rekordy--miary .wba-zw__rek-l {
		padding: var(--wp--preset--spacing--s-3);
	}
}