/* ==========================================================================
   Karta meczu — sekcja „Galeria”. Kontaktówka i podgląd.

   Arkusz wchodzi PO `komponenty.css` i tylko na kartach meczów, które mają
   album (81 z 2 937) — warunek stoi w `inc/mecz-galeria.php`, nie tutaj.

   --------------------------------------------------------------------------
   JAK SIĘ UKŁADA WIERSZ — to jest sedno tego pliku.

   Kafel dostaje `flex: var(--ar) 1 0%`, czyli bazę ZEROWĄ i przyrost
   proporcjonalny do proporcji zdjęcia. Wtedy szerokość kafla wychodzi
   `ar_i / Σar · (szerokość wiersza − odstępy)`, a jego wysokość — z
   `aspect-ratio` — `(szerokość − odstępy) / Σar`, czyli TA SAMA dla wszystkich
   kafli wiersza. Wiersz jest więc wypełniony co do piksela przy dowolnej
   szerokości kolumny i bez jednej liczby wpisanej w atrybut `style`.

   Podziału na wiersze układ NIE zrobi — o tym, ile kafli wchodzi do wiersza,
   decyduje PHP (dla 1112 px) i skrypt (dla szerokości rzeczywistej).

   OSTATNI WIERSZ NIE JEST ROZCIĄGANY: `--niepelny` wyłącza przyrost i stawia
   kafle w wysokości docelowej, od lewej. Bez tego galeria z jednym zdjęciem
   rozdmuchałaby je na całą szerokość kolumny.

   --------------------------------------------------------------------------
   `--wba-gal-h` I `--wba-gal-o` SĄ JEDNYM ŹRÓDŁEM PRAWDY dla wysokości wiersza
   i odstępu: czyta je zarówno układ, jak i skrypt (`getComputedStyle`).
   Zmiana progu w media query przelicza układ bez dotykania JavaScriptu.
   Odpowiedniki w PHP (`WBA_GALERIA_WYSOKOSC`, `WBA_GALERIA_ODSTEP`) obsługują
   wyłącznie pierwszy render dla szerokości odniesienia.
   ========================================================================== */

.wba-galeria {
	--wba-gal-h: 170px;
	--wba-gal-o: 6px;
}

/* Niżej wiersz musi być niższy, bo inaczej przy 375 px do wiersza wchodzi
   sześć kafli po 55 px i nie widać na nich nic. Wartości dobrane tak, żeby
   w wierszu stawały 2–3 zdjęcia. */
@media (max-width: 899.98px) {
	.wba-galeria { --wba-gal-h: 150px; }
}

@media (max-width: 599.98px) {
	.wba-galeria { --wba-gal-h: 128px; }
}

@media (max-width: 419.98px) {
	.wba-galeria { --wba-gal-h: 112px; }
}

/* --- nagłówek sekcji ---------------------------------------------------- */

.wba-galeria__info {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s-2);
	flex-wrap: wrap;
	margin: 0 0 var(--wp--preset--spacing--s-3);
	font-size: .875rem;
	line-height: 1.4;
}

.wba-galeria__licz {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.wba-galeria__zrodlo {
	margin-left: auto;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.wba-galeria__zrodlo:hover,
.wba-galeria__zrodlo:focus-visible {
	color: var(--wp--preset--color--ink);
	border-bottom-color: currentColor;
}

/* --- kontaktówka -------------------------------------------------------- */

.wba-galeria__kontakt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wba-gal-o);
}

.wba-galeria__rzad {
	display: flex;
	align-items: flex-start;
	gap: var(--wba-gal-o);
}

.wba-galeria__kafel {
	/* Baza zerowa + przyrost proporcjonalny — rachunek w nagłówku pliku.
	   `min-width: 0` jest OBOWIĄZKOWE, nie ozdobne: domyślne `min-width: auto`
	   elementu elastycznego bierze minimalną szerokość treści, a treścią jest
	   obrazek o własnej szerokości wewnętrznej — bez tego przy wąskiej kolumnie
	   wiersz rozpychałby się poza kolumnę. */
	flex: var(--ar, 1) 1 0%;
	min-width: 0;
	aspect-ratio: var(--ar, 1);
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm, 8px);
	overflow: hidden;
	background: var(--wp--preset--color--card-2);
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

.wba-galeria__kafel img {
	width: 100%;
	height: 100%;
	display: block;
	/* Proporcja kafla JEST proporcją zdjęcia (obie z tej samej pary liczb
	   w bazie), więc `cover` nie ma czego przyciąć — stoi tu wyłącznie po to,
	   żeby zaokrąglenie układu do 1/64 px nie wyszło białym paskiem. */
	object-fit: cover;
}

.wba-galeria__kafel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--ink);
	opacity: 0;
	transition: opacity .15s ease;
}

.wba-galeria__kafel:hover::after {
	opacity: .14;
}

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

/* Wiersz niepełny: bez rozciągania, wysokość docelowa, od lewej krawędzi.
   `flex-wrap` jest siatką bezpieczeństwa dla strony bez JavaScriptu — podział
   na wiersze jest wtedy policzony dla 1112 px, więc na wąskim ekranie ostatni
   wiersz mógłby nie zmieścić się w kolumnie. Zawija się zamiast wyjść poza. */
.wba-galeria__rzad--niepelny {
	flex-wrap: wrap;
}

.wba-galeria__rzad--niepelny .wba-galeria__kafel {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	height: var(--wba-gal-h);
}

/* --- zwijanie: pole wyboru zamiast skryptu ------------------------------ */

/* Schowane wizualnie, ale ZOSTAJE W KOLEJNOŚCI FOKUSA — `display: none`
   wyjęłoby je z niej i rozwinięcie przestałoby być dostępne z klawiatury.
   Obwódka rysuje się na etykiecie, niżej. */
.wba-galeria__przel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.wba-galeria__przel:not(:checked) ~ .wba-galeria__kontakt > .wba-galeria__rzad:nth-child(n+4) {
	display: none;
}

/* Zanik nad ostatnim widocznym wierszem — znak, że pod spodem jest więcej.
   Kolor musi być tłem karty, nie białym literałem, bo karta ma własny token.

   48 px, nie 88: przy 88 zanik zakrywał 61,7 % trzeciego wiersza (142,7 px
   przy 1440 px), więc wybrane „trzy wiersze” wyglądało jak dwa i pół. Przy 48
   zakrywa 33,6 % i nadal mówi, że pod spodem jest więcej. Wartość jest związana
   z WYSOKOŚCIĄ WIERSZA, nie z wysokością karty: wiersze mierzą 137–170 px przy
   1440 px, więc zanik ma zostać poniżej połowy najniższego z nich. */
.wba-galeria__przel:not(:checked) ~ .wba-galeria__kontakt::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--wp--preset--color--card));
	pointer-events: none;
}

.wba-galeria__wiecej {
	display: block;
	width: -moz-max-content;
	width: max-content;
	max-width: 100%;
	margin: var(--wp--preset--spacing--s-3) auto 0;
	padding: .75rem 1.375rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.wba-galeria__wiecej:hover {
	background: var(--wp--preset--color--card-2);
}

.wba-galeria__przel:focus-visible ~ .wba-galeria__wiecej {
	outline: 3px solid var(--wp--preset--color--red-700);
	outline-offset: 2px;
}

.wba-galeria__przel:not(:checked) ~ .wba-galeria__wiecej .wba-galeria__wiecej-z,
.wba-galeria__przel:checked ~ .wba-galeria__wiecej .wba-galeria__wiecej-p {
	display: none;
}

/* --- podgląd ------------------------------------------------------------ */

.wba-galeria__podglad {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Musi stać PO regule z `display: flex`, inaczej warstwa byłaby widoczna
   zawsze: własna deklaracja `display` bije domyślne `[hidden]` z arkusza
   przeglądarki. */
.wba-galeria__podglad[hidden] {
	display: none;
}

.wba-galeria__tlo {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 24, 33, .93);
	cursor: zoom-out;
	-webkit-appearance: none;
	appearance: none;
}

.wba-galeria__duze {
	position: relative;
	max-width: calc(100vw - 7rem);
	max-height: calc(100vh - 7rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--sm, 8px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.wba-galeria__licznik {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	margin: 0;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	/* Zmierzone (`getComputedStyle` + złożenie warstw, najgorszy przypadek —
	   biała karta pod nakładką): biel na tej podkładce daje 18,73 : 1,
	   a biała ikona na przycisku sterowania 10,07 : 1. Liczone, nie oceniane
	   okiem — podgląd zrzutu normalizuje jasność. */
	color: #FFFFFF;
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.wba-galeria__x,
.wba-galeria__poprz,
.wba-galeria__nast {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wba-galeria__x:hover,
.wba-galeria__poprz:hover,
.wba-galeria__nast:hover {
	background: rgba(255, 255, 255, .24);
}

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

.wba-galeria__x {
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
}

.wba-galeria__poprz,
.wba-galeria__nast {
	top: 50%;
	width: 3.25rem;
	height: 3.25rem;
	transform: translateY(-50%);
}

.wba-galeria__poprz { left: 1rem; }
.wba-galeria__nast  { right: 1rem; }

/* Blokada przewijania strony pod nakładką. Na `html`, nie na `body`: iOS
   Safari ignoruje `overflow: hidden` na `body`. */
.wba-galeria-stop {
	overflow: hidden;
}

@media (max-width: 599.98px) {
	.wba-galeria__duze {
		max-width: calc(100vw - 1.5rem);
		max-height: calc(100vh - 9rem);
	}

	.wba-galeria__x {
		top: .5rem;
		right: .5rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	.wba-galeria__poprz,
	.wba-galeria__nast {
		top: auto;
		bottom: .625rem;
		width: 3rem;
		height: 3rem;
		transform: none;
	}

	.wba-galeria__poprz { left: .75rem; }
	.wba-galeria__nast  { right: .75rem; }

	.wba-galeria__licznik {
		bottom: 1.5rem;
	}
}

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

/* ===========================================================================
   PANEL „KTO JEST NA ZDJĘCIU”

   Wchodzi tylko z klasą `--osoby` na warstwie podglądu, więc album meczu bez
   protokołu wygląda dokładnie jak dotąd — PHP nie dokłada panelu, gdy nie ma
   kogo pokazać.

   KONTRAST LICZONY Z PIKSELI PO ZŁOŻENIU WARSTW, nie oceniany ze zrzutu
   (podgląd obrazu normalizuje jasność). Najgorszy przypadek to biała karta
   pod nakładką `rgba(20,24,33,.93)`; na niej panel `rgba(255,255,255,.08)`,
   na nim pozycja `rgba(255,255,255,.06)` — efektywnie rgb(66,69,76).
   Zmierzone na tym tle:
     biel                       9,57 : 1
     tekst wtórny .78           6,59 : 1
     „na zdjęciu”  #7BE0A8      5,96 : 1
     „odrzucone”   #FFA8A8      5,20 : 1
   Wszystko powyżej AA (4,5 : 1). Kolor NIE JEST jedynym nośnikiem stanu —
   obok stoi słowo, bo stan ma być czytelny także bez rozróżniania barw.
   =========================================================================== */

.wba-galeria__podglad--osoby {
	gap: 1.5rem;
	padding: 2.5rem 1rem;
}

.wba-galeria__osoby {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	gap: .5rem;
	width: 20rem;
	max-height: calc(100vh - 7rem);
	padding: 1rem;
	border-radius: var(--wp--custom--radius--sm, 8px);
	background: rgba(255, 255, 255, .08);
	color: #FFFFFF;
}

.wba-galeria__osoby-tyt {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.wba-galeria__osoby-lead {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: .75rem;
	line-height: 1.45;
}

/* Linia stanu trzyma wysokość także pusta — inaczej lista podskakiwałaby
   przy każdym zapisie o wysokość jednego wiersza. */
.wba-galeria__osoby-stan {
	min-height: 1.15rem;
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: .75rem;
	line-height: 1.15rem;
}

.wba-galeria__grupy,
.wba-galeria__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wba-galeria__grupy {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	/* Pasek przewijania w środku panelu, a nie na jego krawędzi. */
	margin-right: -.25rem;
	padding-right: .25rem;
}

.wba-galeria__grupa-tyt {
	margin: 0 0 .25rem;
	color: rgba(255, 255, 255, .62);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wba-galeria__lista {
	display: flex;
	flex-direction: column;
	gap: .1875rem;
}

.wba-galeria__os {
	display: flex;
	align-items: stretch;
	gap: .1875rem;
}

.wba-galeria__os-tak,
.wba-galeria__os-nie {
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--xs, 6px);
	background: rgba(255, 255, 255, .06);
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wba-galeria__os-tak {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .375rem .5rem;
	text-align: left;
}

.wba-galeria__os-nie {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.875rem;
	color: rgba(255, 255, 255, .62);
}

.wba-galeria__os-tak:hover,
.wba-galeria__os-nie:hover {
	background: rgba(255, 255, 255, .14);
}

.wba-galeria__os-tak:focus-visible,
.wba-galeria__os-nie:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* Numer w stałej szerokości, żeby nazwiska stały w jednej kolumnie także
   przy numerach jedno- i dwucyfrowych. */
.wba-galeria__os-nr {
	flex: 0 0 1.5rem;
	color: rgba(255, 255, 255, .62);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

.wba-galeria__os-nazwa {
	flex: 1 1 auto;
	overflow: hidden;
	font-size: .8125rem;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wba-galeria__os-stan {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .62);
	font-size: .6875rem;
	line-height: 1.3;
	white-space: nowrap;
}

/* Stany pozycji. Obwódka niesie „to mój głos”, kolor napisu niesie werdykt —
   dwie różne informacje, więc dwa różne nośniki. */
.wba-galeria__os--moj .wba-galeria__os-tak[aria-pressed="true"],
.wba-galeria__os--moj .wba-galeria__os-nie[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.wba-galeria__os--glosy .wba-galeria__os-stan,
.wba-galeria__os--redaktor .wba-galeria__os-stan {
	color: #7BE0A8;
	font-weight: 700;
}

.wba-galeria__os--glosy .wba-galeria__os-nazwa,
.wba-galeria__os--redaktor .wba-galeria__os-nazwa {
	font-weight: 700;
}

.wba-galeria__os--odrzucone .wba-galeria__os-stan {
	color: #FFA8A8;
}

.wba-galeria__os--odrzucone .wba-galeria__os-nazwa {
	opacity: .65;
	text-decoration: line-through;
}

/* Zdjęcie oddaje panelowi swoją szerokość, zamiast chować się pod nim. */
@media (min-width: 64rem) {
	.wba-galeria__podglad--osoby .wba-galeria__duze {
		max-width: calc(100vw - 28rem);
	}
}

/* Poniżej 64rem panel nie mieści się obok zdjęcia, więc staje pod nim.
   Zdjęcie oddaje wtedy połowę wysokości — lista bez widocznej wysokości
   nie zaprasza do przewinięcia i wygląda na uciętą. */
@media (max-width: 63.999rem) {
	.wba-galeria__podglad--osoby {
		flex-direction: column;
		gap: .75rem;
		padding: 3.5rem .75rem 1rem;
	}

	.wba-galeria__podglad--osoby .wba-galeria__duze {
		max-width: calc(100vw - 1.5rem);
		max-height: 46vh;
	}

	.wba-galeria__osoby {
		width: min(100%, 32rem);
		max-height: 42vh;
	}

	/* Licznik wraca nad panel, bo na dole siedzi teraz lista. */
	.wba-galeria__podglad--osoby .wba-galeria__licznik {
		top: .75rem;
		bottom: auto;
	}
}

/* `display: flex` na przycisku bije domyślne `[hidden]` z arkusza przeglądarki,
   więc schowanie trzeba powtórzyć — ta sama pułapka, co przy
   `.wba-galeria__podglad[hidden]` wyżej. */
.wba-galeria__os-nie[hidden] {
	display: none;
}