/*
 * Tabele kodów USSD — wygląd z 2026.
 *
 * Wspólny język z kartkami pakietów i taryfą: włosowe linie zamiast ramek,
 * kody w plakietkach o stałej szerokości znaku, dezaktywacja odróżniona barwą,
 * nie samą treścią. Na wąskim ekranie tabela przewija się w poziomie zamiast
 * łamać kody.
 *
 * Tabele renderuje `Klucz_Uslugi::tabela()` i występują w dwóch miejscach:
 * na osobnej stronie „Kody USSD” (opakowane w `.kody` z treści strony) oraz
 * — do czasu Polylanga — w zakładce ofertowej stron UA i EN.
 *
 * `pages.css` styluje tabele selektorami elementów (`table`, `thead`, `th, td`),
 * które łapią KAŻDĄ tabelę niezależnie od klas. Stąd jawne zerowania niżej —
 * pojedyncza klasa wygrywa z selektorem elementu, ale każdą własność trzeba
 * nadpisać osobno.
 */

/* --------------------------------------------------------- strona „Kody USSD” */

/* Kremowa kartka jak pas taryfy. Strona nie renderuje tytułu z bazy (motyw
   nie wypisuje entry-title), więc nagłówek stoi w treści strony. */
.kody {
	max-width: 1160px;
	margin: 28px auto 72px;
	padding: clamp(24px, 5vw, 56px);
	border-radius: 28px;
	background: var(--pakiet-cream);
}

.kody-naglowek {
	margin: 0 0 10px;
	font-family: var(--klucz-font-ui);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--pakiet-ink);
}

.kody-wstep {
	margin: 0 0 34px;
	max-width: 46rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--pakiet-muted);
}

.kody-sekcja + .kody-sekcja {
	margin-top: 44px;
}

.kody-tytul {
	margin: 0 0 14px;
	font-family: var(--klucz-font-ui);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--pakiet-ink);
}

/* ------------------------------------------------------------------- tabela */

/* Przewijanie w poziomie, gdy tabela nie mieści się w kolumnie — zamiast
   łamania kodów albo wystawania poza kartkę. */
.kody-zwoj {
	overflow-x: auto;
}

.kody-tabela {
	width: 100%;
	max-width: none;
	table-layout: auto;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
	font-size: 1rem;
	font-weight: 400;
}

/* Trzy kolumny z kodami nie zejdą sensownie poniżej tej szerokości —
   od tego miejsca przejmuje przewijanie. */
.kody-tabela--ussd-uslugi {
	min-width: 460px;
}

/* Nagłówek bez ceglastego tła ze starego wyglądu. */
.kody-tabela thead {
	background: transparent;
	color: inherit;
}

.kody-tabela th,
.kody-tabela td {
	padding: 13px 14px 13px 0;
	border: 0;
	border-bottom: 1px solid var(--pakiet-line);
	text-align: left;
	vertical-align: middle;
}

.kody-tabela th {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.kody-tabela td {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--pakiet-ink);
}

/* ------------------------------------------------------------------ plakietki */

/* Ten sam wzór co `pakiet-chip`: font o stałej szerokości znaku, więc kody
   ustawiają się znak w znak. Tło białe, bo plakietka leży na kremie. */
.kody-kod {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pakiet-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Dezaktywacja odróżniona barwą. Czerwień marki na bieli daje 4,51:1 —
   tuż powyżej progu 4,5:1 dla tekstu tej wielkości. */
.kody-kod--wylacz {
	border-color: #e6c3c3;
	color: var(--pakiet-red);
}

/* ---------------------- zakładka ofertowa UA/EN (do czasu Polylanga) ------- */

/* Stary kontener `.tables-container` jest flexem — nowe opakowania tabel
   dostają w nim rozsądne szerokości, żeby dwie tabele stały obok siebie
   na szerokim ekranie i jedna pod drugą na wąskim. */
.tables-container .kody-zwoj {
	flex: 1 1 380px;
	min-width: 0;
}

@media screen and (max-width: 767px) {
	.kody {
		margin: 16px 12px 48px;
		border-radius: 22px;
	}

	.kody-tabela th,
	.kody-tabela td {
		padding: 11px 10px 11px 0;
	}
}

/* ------------------------------------------------------- wąski ekran: bloki */

/*
 * Poniżej 600 px tabela przestaje być tabelą i staje się listą.
 *
 * Trzy kolumny nie mieszczą się na telefonie: przy dopełnieniu kartki zostaje
 * ok. 310 px, a sama nazwa usługi („Wyłączenie SMS o czasie i kosztach
 * połączeń”) potrzebuje więcej niż połowa. Przewijanie w poziomie działało, ale
 * chowało nazwę usługi za krawędzią — czyli dokładnie tę kolumnę, od której
 * zaczyna się szukanie.
 *
 * Układ blokowy: nazwa u góry wiersza, pod nią kody z etykietami. Etykieta
 * bierze się z `data-etykieta` (wpisuje ją `Klucz_Uslugi`), więc jest w tym
 * samym języku co nagłówek kolumny i nie ma jej w arkuszu.
 *
 * Nagłówki są ukryte dla oka, ale zostają w drzewie dostępności — stąd
 * odsunięcie poza ekran zamiast `display: none`. Razem z rolami ARIA
 * w znacznikach czytnik ekranu nadal czyta to jak tabelę.
 */
@media screen and (max-width: 599px) {
	.kody-zwoj {
		overflow-x: visible;
	}

	.kody-tabela,
	.kody-tabela tbody,
	.kody-tabela tr,
	.kody-tabela td,
	.kody-tabela tbody th {
		display: block;
		width: auto;
	}

	.kody-tabela--ussd-uslugi {
		min-width: 0;
	}

	.kody-tabela thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.kody-tabela tr {
		padding: 14px 0;
		border-bottom: 1px solid var(--pakiet-line);
	}

	.kody-tabela tbody th,
	.kody-tabela td {
		padding: 0;
		border: 0;
		text-align: left;
	}

	.kody-tabela tbody th {
		margin-bottom: 10px;
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.35;
		color: var(--pakiet-ink);
	}

	/* Etykieta z lewej, kod z prawej — ten sam układ co pasek „aktywuj kodem”
	   w kartkach pakietów. */
	.kody-tabela td:not(:empty) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.kody-tabela td + td {
		margin-top: 8px;
	}

	.kody-tabela td::before {
		content: attr(data-etykieta);
		font-size: 0.6875rem;
		font-weight: 800;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--pakiet-muted);
	}
}