/*
 * SEE ME online - arkusz frontu.
 *
 * Język wizualny: jasne studio i montażownia. Białe plansze poradnika, turkus znaku #SEEME,
 * ramki wizjera przy kadrach, czas czytania jako timecode, kategorie jako kanały
 * (CH 01-13), linijka osi montażowej jako separator sekcji, poziom trudności
 * jak naklejka na kasecie z miernikiem wysterowania. Czerwień REC tylko dla
 * "na żywo" i głowicy odtwarzania.
 *
 * Kroje: Big Shoulders Display (nagłówki, kanały), Newsreader (tekst),
 * Martian Mono (metadane, timecode, etykiety). Deklaracje w fonts.css.
 */

/* ---------- Tokeny ---------- */

:root {
	color-scheme: light;

	/* Paleta z prezentacji poradnika #SEEME: czerń, biel, turkus znaku, czerwień Film&TV Kamera. */

	/* Tła warstw - od najgłębszego (białe plansze prezentacji) */
	--tlo-gleb: #e6e6e6;
	--tlo: #f3f3f3;
	--warstwa: #ffffff;
	--warstwa-2: #e8e8e8;
	--linia: #d6d6d6;
	--linia-mocna: #ababab;

	/* Tekst (kontrast na --tlo: min. 5.2:1 dla --tekst-3) */
	--tekst: #000000;
	--tekst-2: #3a3a3a;
	--tekst-3: #656565;

	/* Akcent - turkus znaku #SEEME: #55cad4 tylko jako wypełnienie (czarny tekst na nim 10.8:1),
	   tekst akcentowy w ciemniejszym turkusie --akcent-jasny (5.2:1 na --tlo). */
	--akcent: #55cad4;
	--akcent-jasny: #157079;
	--akcent-gleboki: #115e66;
	--akcent-tlo: #dff4f6;
	--na-akcencie: #000000;

	/* Ekran - osadzenia, belki na kadrach. Zawsze ciemny, niezależnie od palety. */
	--ekran: #050505;
	--na-ekranie: #ffffff;
	--akcent-na-ekranie: #55cad4;
	--siatka-ekranu: rgb(255 255 255 / 0.08);
	--belka: rgb(0 0 0 / 0.86);
	--belka-cien: rgb(0 0 0 / 0.75);
	--rog-foto: rgb(255 255 255 / 0.78);
	--rog-zastepnik: rgb(0 0 0 / 0.55);
	--cien: rgb(0 0 0 / 0.18);

	/* Atrament i papier - przyciski i pola na turkusowych pasach (te same w obu paletach) */
	--atrament: #000000;
	--atrament-2: #4d4d4d;
	--na-atramencie: #ffffff;
	--papier: #ffffff;
	--na-akcencie-linia: rgb(0 0 0 / 0.28);

	/* Pola formularzy i tło siatki */
	--pole: #ffffff;
	--siatka-tla: rgb(0 0 0 / 0.05);

	/* Grafika zastępcza (inc/grafika.php) */
	--z-tlo: #e6e6e6;
	--z-gleb: #d9d9d9;
	--z-m: #bdbdbd;
	--z-k: #ffffff;
	--z-szary: #7a7a7a;
	--z-ciemny: #cfcfcf;
	--z-siatka: rgb(0 0 0 / 0.08);
	--z-linia: #ababab;
	--z-tekst: #3a3a3a;
	--z-tekst-2: #656565;
	--z-na-k: #3a3a3a;

	/* Sygnały (REC w czerwieni znaku Film&TV Kamera) */
	--rec: #b92f34;
	--kremowy: #0c0c0c;
	--kremowy-tekst: #f3f3f3;
	--miernik: rgb(243 243 243 / 0.28);
	--miernik-on: #55cad4;
	--miernik-szczyt: #e0474c;
	--rec-poswiata: rgb(185 47 52 / 0.18);
	--uwaga: #8a5800;
	--ok: #17744a;
	--blad: #b3261e;
	--focus: #157079;

	/* Kroje */
	--f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
	--f-tekst: "Newsreader", Georgia, "Times New Roman", serif;
	--f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Układ */
	--wrap: 1320px;
	--gutter: clamp(16px, 4vw, 40px);
	--kolumna: 44rem;
	--odstep: clamp(3rem, 6vw, 5.5rem);
}

/* Konsola: pasek wydawcy i stopka zostają ciemne - wracają tokeny ciemnego studia. */
.pasek,
.stopka {
	color-scheme: dark;

	--tlo-gleb: #000000;
	--tlo: #0c0c0c;
	--warstwa: #151515;
	--warstwa-2: #1f1f1f;
	--linia: #2b2b2b;
	--linia-mocna: #4d4d4d;
	--tekst: #f3f3f3;
	--tekst-2: #bdbdbd;
	--tekst-3: #9a9a9a;
	--akcent-jasny: #55cad4;
	--akcent-gleboki: #2fa9b4;
	--rec: #e0474c;
	--ok: #5fe0a0;
	--blad: #ff7a70;
	--focus: #ffc94a;
	--pole: #000000;
	--z-tlo: #0c0c0c;
	--z-tekst: #bdbdbd;
}

.szukaj-pole::-webkit-search-cancel-button {
	filter: none;
}

/* Na jasnym tle zdjęcie w kadrze potrzebuje cienkiej krawędzi, żeby nie "rozlać się" w papier. */
.kadr:not(.kadr--zastepnik) {
	outline: 1px solid rgb(0 0 0 / 0.12);
	outline-offset: -1px;
}

/* ---------- Podstawy ---------- */

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

html {
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1.5rem;
}

body {
	margin: 0;
	background: var(--tlo);
	color: var(--tekst);
	font: 400 1.0625rem/1.6 var(--f-tekst);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--akcent-jasny);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--tekst);
}

b,
strong {
	font-weight: 600;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.005em;
	color: var(--tekst);
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

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

::selection {
	background: var(--akcent);
	color: var(--na-akcencie);
}

main:focus {
	outline: none;
}

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--uwaga);
	color: var(--kremowy-tekst);
	font: 500 0.75rem/1 var(--f-mono);
	text-transform: uppercase;
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: none;
}

/* Etykieta nad tytułem: mono, wersaliki, kwadracik w kolorze akcentu. */
.nadtytul {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 0.9rem;
	font: 500 0.66rem/1.3 var(--f-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-2);
}

.nadtytul::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--akcent);
}

.rec-kropka {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rec);
	box-shadow: 0 0 0 3px var(--rec-poswiata);
	vertical-align: middle;
}

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

.przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.7rem 1.35rem 0.62rem;
	border: 2px solid var(--akcent);
	border-radius: 2px;
	background: var(--akcent);
	color: var(--na-akcencie);
	font: 800 1.1rem/1 var(--f-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.przycisk::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid currentColor;
}

.przycisk:hover {
	background: var(--akcent-gleboki);
	border-color: var(--akcent-gleboki);
	color: var(--na-akcencie);
}

.przycisk--obrys {
	background: transparent;
	color: var(--tekst);
	border-color: var(--linia-mocna);
}

.przycisk--obrys:hover {
	background: var(--warstwa-2);
	border-color: var(--akcent-jasny);
}

/* ---------- Pasek wydawcy ---------- */

.pasek {
	background: var(--tlo-gleb);
	border-bottom: 1px solid var(--linia);
	font: 500 0.62rem/1.2 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.pasek-wnetrze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 34px;
}

.pasek p {
	margin: 0;
}

.pasek-prawa {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.pasek a {
	color: var(--tekst-2);
	text-decoration: none;
}

.pasek a:hover {
	color: var(--akcent-jasny);
}

.pasek-data {
	color: var(--tekst-3);
}

@media (max-width: 47.99em) {
	.pasek-opis {
		display: none;
	}

	.pasek-prawa {
		width: 100%;
		justify-content: space-between;
	}
}

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

.naglowek {
	position: relative;
	z-index: 20;
	background: var(--tlo);
	border-bottom: 1px solid var(--linia);
}

.naglowek-wnetrze {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 76px;
}

.logo {
	margin: 0;
	font-size: 1rem;
	line-height: 1;
}

.logo a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--tekst);
	text-decoration: none;
}

.znak {
	display: block;
	width: auto;
	height: 44px;
	color: var(--tekst);
}

.znak-see {
	fill: var(--akcent);
}

.znak-rogi {
	stroke: var(--akcent);
}

.logo a:hover .znak {
	color: var(--tekst);
}

.logo a:hover .znak-rogi {
	stroke: var(--akcent-jasny);
}

.logo-online {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.35em 0.55em 0.3em;
	border: 1px solid var(--linia-mocna);
	font: 500 0.66rem/1 var(--f-mono);
	letter-spacing: 0.04em;
	color: var(--tekst-2);
}

.logo-online::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rec);
}

.naglowek-haslo {
	margin: 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--linia);
	font: 400 1rem/1.25 var(--f-tekst);
	color: var(--tekst-2);
	max-width: 17em;
}

.naglowek-szukaj {
	margin-left: auto;
	width: min(320px, 28vw);
}

/* Wyszukiwarka */
.szukaj {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--linia-mocna);
	background: var(--tlo-gleb);
}

.szukaj:focus-within {
	border-color: var(--akcent-jasny);
}

.szukaj-pole {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	border: 0;
	background: transparent;
	color: var(--tekst);
	font: 400 1rem/1.3 var(--f-tekst);
}

.szukaj-pole::placeholder {
	color: var(--tekst-3);
	opacity: 1;
}

.szukaj-pole:focus {
	outline: none;
}

.szukaj-pole::-webkit-search-cancel-button {
	filter: invert(1);
}

.szukaj-przycisk {
	display: grid;
	place-items: center;
	width: 44px;
	border: 0;
	border-left: 1px solid var(--linia-mocna);
	background: transparent;
	color: var(--tekst-2);
	cursor: pointer;
}

.szukaj-przycisk:hover {
	background: var(--akcent);
	color: var(--na-akcencie);
}

/* Przycisk menu - ikonka siatki kanałów 3x3 */
.menu-przycisk {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin-left: auto;
	padding: 0 0.85rem;
	border: 1px solid var(--linia-mocna);
	background: transparent;
	color: var(--tekst);
	font: 500 0.7rem/1 var(--f-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.menu-przycisk-ikona {
	width: 14px;
	height: 14px;
	background:
		radial-gradient(circle, currentColor 1.6px, transparent 1.9px) 0 0 / 5px 5px;
}

.menu-przycisk[aria-expanded="true"] {
	background: var(--akcent);
	border-color: var(--akcent);
}

/* Pasek kanałów - macierz jak przełącznik programów */
.kanaly {
	border-top: 1px solid var(--linia);
	background: var(--tlo);
}

/* Liczba kolumn zależy od liczby kanałów w menu - rzędy zawsze pełne. */
.kanaly-menu {
	--kol: 6;
	display: grid;
	grid-template-columns: repeat(var(--kol), minmax(0, 1fr));
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--linia);
}

.kanaly-menu li {
	border-right: 1px solid var(--linia);
	border-bottom: 1px solid var(--linia);
}

.kanaly-menu:has(> li:nth-child(9):last-child),
.kanaly-menu:has(> li:nth-child(10):last-child) {
	--kol: 5;
}

.kanaly-menu:has(> li:nth-child(7):last-child),
.kanaly-menu:has(> li:nth-child(8):last-child) {
	--kol: 4;
}

.kanaly-menu a {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	height: 100%;
	padding: 0.62rem 0.75rem 0.55rem;
	color: var(--tekst-2);
	font: 800 0.98rem/1.05 var(--f-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.kanal-nr {
	flex: none;
	font: 500 0.6rem/1 var(--f-mono);
	letter-spacing: 0;
	color: var(--tekst-3);
}

.kanaly-menu a:hover {
	background: var(--warstwa);
	color: var(--tekst);
}

.kanaly-menu a:hover .kanal-nr,
.kanaly-menu .current-menu-item .kanal-nr,
.kanaly-menu .current-post-ancestor .kanal-nr {
	color: var(--akcent-jasny);
}

.kanaly-menu .current-menu-item > a,
.kanaly-menu .current-post-ancestor > a,
.kanaly-menu .current-menu-parent > a {
	color: var(--tekst);
	background: var(--akcent-tlo);
}

.kanaly-menu .current-menu-item > a::after,
.kanaly-menu .current-post-ancestor > a::after,
.kanaly-menu .current-menu-parent > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--akcent);
}

.kanaly-szukaj {
	display: none;
}

@media (max-width: 74.99em) and (min-width: 60em) {
	/* Średnie ekrany: jeden przewijany rząd kanałów. */
	.kanaly-menu {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.kanaly-menu::-webkit-scrollbar {
		display: none;
	}

	.kanaly-menu li {
		flex: none;
		border-bottom: 0;
	}

	.kanaly-menu a {
		white-space: nowrap;
	}

	.naglowek-haslo {
		display: none;
	}
}

@media (max-width: 59.99em) {
	.naglowek-wnetrze {
		min-height: 64px;
		gap: 1rem;
	}

	.znak {
		height: 34px;
	}

	.naglowek-haslo,
	.naglowek-szukaj {
		display: none;
	}

	.menu-przycisk {
		display: inline-flex;
	}

	.js .kanaly {
		display: none;
	}

	.js .kanaly.is-open {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
		background: var(--tlo-gleb);
		border-bottom: 1px solid var(--linia-mocna);
		box-shadow: 0 24px 40px var(--cien);
	}

	.kanaly-wnetrze {
		padding-block: 1rem 1.25rem;
	}

	.kanaly-menu {
		grid-template-columns: 1fr;
		border-left: 0;
		border-top: 1px solid var(--linia);
	}

	.kanaly-menu li {
		border-right: 0;
		border-bottom: 1px solid var(--linia);
	}

	.kanaly-menu a {
		padding: 0.85rem 0.25rem;
		font-size: 1.2rem;
	}

	.kanaly-menu a .kanal-nr {
		width: 2.2em;
	}

	.kanaly-szukaj {
		display: block;
		margin-top: 1rem;
	}
}

@media (max-width: 59.99em) and (min-width: 30em) {
	.kanaly-menu {
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}
}

/* ---------- Kadr: miniatura w ramce wizjera ---------- */

.kadr {
	--rog: var(--rog-foto);
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tlo-gleb);
}

.kadr--1x1 {
	aspect-ratio: 1;
}

.kadr--zastepnik {
	--rog: var(--rog-zastepnik);
}

.kadr img,
.kadr svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cztery narożniki wizjera rysowane gradientami - bez dodatkowych elementów. */
.kadr::before {
	content: "";
	position: absolute;
	inset: clamp(6px, 3.5%, 14px);
	z-index: 1;
	pointer-events: none;
	--r: clamp(8px, 7%, 18px);
	background:
		linear-gradient(var(--rog), var(--rog)) top left / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) top left / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) top right / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) top right / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) bottom left / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) bottom left / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) bottom right / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) bottom right / 2px var(--r);
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.15s;
}

.kadr--zastepnik::before,
.kadr--rec::before,
.pozycja:hover .kadr::before,
.pozycja:focus-within .kadr::before {
	opacity: 1;
}

.pozycja:hover .kadr,
.pozycja:focus-within .kadr {
	--rog: var(--akcent-jasny);
}

.kadr--1x1::before {
	inset: 5px;
	--r: 7px;
}

.kadr-czas {
	position: absolute;
	right: clamp(6px, 3.5%, 14px);
	bottom: clamp(6px, 3.5%, 14px);
	z-index: 2;
	padding: 0.35em 0.5em 0.3em;
	background: var(--belka);
	color: var(--na-ekranie);
	font: 500 0.62rem/1 var(--f-mono);
	letter-spacing: 0.02em;
}

/* Na kadrze czołówki i wpisu - znacznik nagrywania. */
.kadr--rec::after {
	content: "REC";
	position: absolute;
	top: clamp(10px, 4.5%, 24px);
	left: clamp(12px, 5%, 30px);
	z-index: 2;
	padding: 0.3em 0.55em 0.25em 1.6em;
	background:
		radial-gradient(circle at 0.7em 50%, var(--rec) 0.3em, transparent calc(0.3em + 1px)),
		var(--belka);
	color: var(--na-ekranie);
	font: 500 0.62rem/1 var(--f-mono);
	letter-spacing: 0.08em;
}

.kadr--zastepnik.kadr--rec::after {
	display: none;
}

/* ---------- Grafika zastępcza (klasy z inc/grafika.php) ---------- */

.z-tlo { fill: var(--z-tlo); }
.z-gleb { fill: var(--z-gleb); }
.z-siatka { fill: none; stroke: var(--z-siatka); stroke-width: 0.3; }
.z-a { fill: var(--akcent); }
.z-a2 { fill: var(--akcent-jasny); }
.z-a3 { fill: var(--akcent-gleboki); }
.z-m { fill: var(--z-m); }
.z-k { fill: var(--z-k); }
.z-szary { fill: var(--z-szary); }
.z-r { fill: var(--rec); }
.z-ciemny { fill: var(--z-ciemny); }
.z-brak { fill: none; }
.z-prze { opacity: 0.32; }
.z-l { fill: none; stroke: var(--z-linia); stroke-width: 0.5; }
.z-l-gruba { fill: none; stroke: var(--z-tekst-2); stroke-width: 1.2; }
.z-l-a { fill: none; stroke: var(--akcent-jasny); stroke-width: 0.8; }
.z-slad { fill: none; stroke: var(--akcent-jasny); stroke-width: 0.9; stroke-linejoin: round; }
.z-slad-a { fill: none; stroke: var(--akcent); stroke-width: 2.6; opacity: 0.4; stroke-linejoin: round; }
.z-etykieta text { font: 500 3.2px var(--f-mono); fill: var(--z-tekst); }
.z-skala { font: 500 2.6px var(--f-mono); fill: var(--z-tekst-2); }
.z-onair { font: 800 5.6px var(--f-display); fill: var(--na-akcencie); letter-spacing: 0.4px; }
.z-paragraf { font: 600 9px var(--f-tekst); fill: var(--z-na-k); }
.z-seeme { font-family: var(--f-display); font-weight: 800; fill: var(--z-tekst); letter-spacing: 0.02em; }
.kadr--1x1 .z-etykieta { display: none; }

/* ---------- Metki: kanał, poziom, sponsor ---------- */

.metka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.7rem;
	margin: 0 0 0.6rem;
}

.metka:empty {
	display: none;
}

.kanal {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	font: 500 0.64rem/1.3 var(--f-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tekst-2);
	text-decoration: none;
}

.kanal .kanal-nr {
	color: var(--akcent-jasny);
	font-size: 1em;
}

.kanal:hover {
	color: var(--tekst);
}

/* Naklejka poziomu - papier, mono, miernik trzech kresek */
.poziom {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.32em 0.55em 0.28em 0.45em;
	border-radius: 2px;
	background: var(--kremowy);
	color: var(--kremowy-tekst);
	font: 500 0.6rem/1 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.poziom-miernik {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 9px;
}

.poziom-miernik i {
	display: block;
	width: 3px;
	background: var(--miernik);
}

.poziom-miernik i:nth-child(1) { height: 4px; }
.poziom-miernik i:nth-child(2) { height: 6.5px; }
.poziom-miernik i:nth-child(3) { height: 9px; }

.poziom--poczatkujacy .poziom-miernik i:nth-child(1),
.poziom--zaawansowany .poziom-miernik i {
	background: var(--miernik-on);
}

.poziom--zaawansowany .poziom-miernik i:nth-child(3) {
	background: var(--miernik-szczyt);
}

.sponsor {
	display: inline-block;
	padding: 0.3em 0.5em 0.26em;
	border: 1px solid var(--uwaga);
	color: var(--uwaga);
	font: 500 0.6rem/1 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.data,
.tc {
	font: 500 0.64rem/1.3 var(--f-mono);
	letter-spacing: 0.02em;
	color: var(--tekst-3);
}

.tc [aria-hidden] {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.tc [aria-hidden]::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	border-left: 5.5px solid var(--akcent-jasny);
}

/* ---------- Nagłówek sekcji z linijką osi montażowej ---------- */

.sekcja-naglowek {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 0.4rem 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.1rem;
}

.sekcja-naglowek::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 11px;
	background:
		linear-gradient(var(--linia-mocna), var(--linia-mocna)) bottom / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, var(--tekst-3) 0 1px, transparent 1px 96px) bottom left / 100% 11px no-repeat,
		repeating-linear-gradient(90deg, var(--linia-mocna) 0 1px, transparent 1px 12px) bottom left / 100% 5px no-repeat;
}

/* Głowica na początku linijki */
.sekcja-naglowek::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 2px;
	height: 16px;
	background: var(--rec);
}

.sekcja-naglowek h2 {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sekcja-nr {
	flex: none;
	white-space: nowrap;
	font: 500 0.66rem/1 var(--f-mono);
	letter-spacing: 0.04em;
	color: var(--akcent-jasny);
	transform: translateY(-0.9em);
}

.sekcja-opis {
	grid-column: 1;
	margin: 0;
	max-width: 44em;
	color: var(--tekst-2);
	font-size: 1rem;
	line-height: 1.45;
}

.sekcja-link {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55rem 0;
	font: 500 0.66rem/1 var(--f-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tekst-2);
	text-decoration: none;
	white-space: nowrap;
}

.sekcja-link::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var(--akcent-jasny);
}

.sekcja-link:hover {
	color: var(--akcent-jasny);
}

@media (max-width: 39.99em) {
	.sekcja-naglowek {
		grid-template-columns: 1fr;
	}

	.sekcja-link {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
}

/* ---------- Pozycje list ---------- */

.pozycja {
	position: relative;
}

.pozycja-tytul {
	font-size: 1.4rem;
	line-height: 1.02;
	letter-spacing: 0.01em;
}

.pozycja-tytul a {
	color: var(--tekst);
	text-decoration: none;
}

.pozycja-tytul a:hover {
	color: var(--akcent-jasny);
}

/* Cała pozycja klikalna przez tytuł - kadr jest ukryty dla czytników. */
.pozycja-tytul a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pozycja .metka a,
.pozycja .kadr {
	position: relative;
	z-index: 2;
}

.pozycja .metka {
	position: relative;
	z-index: 2;
}

.pozycja-zajawka {
	margin: 0.55rem 0 0;
	color: var(--tekst-2);
	font-size: 1rem;
	line-height: 1.5;
}

.pozycja-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 0.7rem 0 0;
}

.pozycja--16x9 .kadr {
	margin-bottom: 0.95rem;
}

.pozycja--kwadrat {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1.1rem 0;
	border-top: 1px solid var(--linia);
}

.pozycja--kwadrat .pozycja-tytul {
	font-size: 1.3rem;
}

.pozycja--tekst .pozycja-tytul {
	font-size: 1.3rem;
}

@media (max-width: 29.99em) {
	.pozycja--kwadrat {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 0.9rem;
	}

	.pozycja--kwadrat .pozycja-zajawka {
		display: none;
	}
}

/* ---------- Moduły strony głównej ---------- */

.modul {
	padding-block: var(--odstep) 0;
}

/* Czołówka */
.czolowka {
	padding-top: clamp(1.25rem, 3vw, 2.5rem);
}

.czolowka-siatka {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.czolowka-glowny {
	position: relative;
}

.czolowka-opis {
	position: relative;
	z-index: 2;
	padding-top: 1.25rem;
}

.czolowka-tytul {
	font-size: clamp(2.3rem, 6.4vw, 4.4rem);
	line-height: 1;
	letter-spacing: 0.005em;
}

/* Długi tytuł (ponad 70 znaków) - mniejszy krój, żeby nie zajmował pięciu linii i nie nachodził na siebie. */
.czolowka-tytul--dlugi {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	line-height: 1.02;
}

.czolowka-tytul a {
	color: var(--tekst);
	text-decoration: none;
}

.czolowka-tytul a:hover {
	color: var(--akcent-jasny);
}

.czolowka-zajawka {
	margin: 1rem 0 0;
	max-width: 36em;
	font-size: clamp(1.08rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	color: var(--tekst-2);
}

.czolowka-dalej .nadtytul {
	margin-bottom: 0;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--linia-mocna);
}

.lista-numerowana {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dalej;
}

.lista-numerowana > li {
	position: relative;
	padding: 1.1rem 0 1.1rem 2.9rem;
	border-bottom: 1px solid var(--linia);
	counter-increment: dalej;
}

.lista-numerowana > li::before {
	content: counter(dalej, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.05rem;
	font: 800 1.9rem/1 var(--f-display);
	color: var(--linia-mocna);
}

.lista-numerowana > li:first-child::before {
	color: var(--akcent-jasny);
}

/* "Dalej w programie": od drugiej pozycji mała miniatura obok tekstu; odstępy i linie daje już <li>. */
.lista-numerowana .pozycja--kwadrat {
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0.85rem;
	padding: 0;
	border-top: 0;
}

.lista-numerowana .pozycja--kwadrat .pozycja-tytul {
	font-size: 1.15rem;
}

@media (min-width: 64em) {
	.czolowka-siatka {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 3rem;
	}

	/* Belka jak "lower third" w telewizji - opis wchodzi na kadr. */
	.czolowka-opis {
		margin: -7.5rem 12% 0 0;
		padding: 1.5rem 2rem 0 1.6rem;
		background: var(--tlo);
		border-left: 4px solid var(--akcent);
	}
}

@media (min-width: 80em) {
	.czolowka-siatka {
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 4rem;
	}
}

/* Pas "Na żywo" - multiview realizacji */
.na-zywo {
	margin-top: var(--odstep);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	background: var(--tlo-gleb);
	border-block: 1px solid var(--linia);
}

.sekcja-naglowek--na-zywo h2 {
	align-items: center;
}

.on-air {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0.6em 0.4em;
	border: 1px solid var(--rec);
	color: var(--rec);
	font: 500 0.62rem/1 var(--f-mono);
	letter-spacing: 0.1em;
}

.on-air .rec-kropka {
	width: 7px;
	height: 7px;
	animation: rec 2.4s ease-in-out infinite;
}

@keyframes rec {
	50% { opacity: 0.25; }
}

/* Multiview realizacji na żywo: podglądy scen w siatce, pierwsza scena "na programie" (tally). */
.multiview {
	margin-top: 0.5rem;
	padding-block: 1.25rem 2.5rem;
	counter-reset: scena;
}

.multiview-sceny {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(80vw, 330px);
	margin: 0 var(--gutter);
	padding: 0;
	list-style: none;
	/* Kreski multiview rysują krawędzie scen, nie tło listy - pusta komórka siatki nie robi szarej plamy. */
	border-top: 1px solid var(--linia-mocna);
	border-left: 1px solid var(--linia-mocna);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--linia-mocna) transparent;
}

.multiview-sceny > li {
	position: relative;
	counter-increment: scena;
	scroll-snap-align: start;
	padding: 2.1rem 12px 16px;
	background: var(--tlo);
	border-right: 1px solid var(--linia-mocna);
	border-bottom: 1px solid var(--linia-mocna);
}

/* Etykieta sceny jak w oknie multiview. */
.multiview-sceny > li::before {
	content: "SCENA " counter(scena, decimal-leading-zero);
	position: absolute;
	top: 0.7rem;
	left: 12px;
	font: 500 0.58rem/1 var(--f-mono);
	letter-spacing: 0.1em;
	color: var(--tekst-3);
}

/* Scena na programie - czerwona ramka tally. */
.multiview-sceny > li:first-child {
	box-shadow: inset 0 0 0 2px var(--rec);
}

.multiview-sceny > li:first-child::before {
	content: "PROGRAM";
	color: var(--rec);
}

.multiview-sceny .pozycja-tytul {
	font-size: 1.25rem;
}

@media (min-width: 64em) {
	.multiview-sceny {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
	}

	/* 2-3 sceny: równe kolumny na całą szerokość; 5-6 scen: dwa rzędy po trzy. */
	.multiview-sceny:has(> li:nth-child(2)):not(:has(> li:nth-child(4))) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.multiview-sceny:has(> li:nth-child(5)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 90em) {
	.multiview-sceny {
		margin-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
	}
}

/* Warsztat: duży materiał i lista */
.duzy-i-lista {
	display: grid;
	gap: 2rem;
}

.duzy-i-lista > .pozycja--16x9 .pozycja-tytul {
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	line-height: 0.98;
}

.lista-z-osia > .pozycja--kwadrat:first-child {
	padding-top: 0;
	border-top: 0;
}

@media (min-width: 56em) {
	.duzy-i-lista {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

/* Sprzęt w progach cenowych - kolumny z miernikiem ceny */
.progi {
	display: grid;
	gap: 2rem;
}

/* Kolumna progu ma stałą minimalną szerokość - jeden próg nie rozciąga się na cały ekran. */
@media (min-width: 48em) {
	.progi {
		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
		column-gap: 2.5rem;
	}
}

/* Jeden próg: kwota z miernikiem po lewej, materiały obok w kolumnach - bez pustej połowy ekranu. */
@media (min-width: 48em) {
	.progi--jeden {
		grid-template-columns: minmax(0, 1fr);
	}

	.progi--jeden .prog {
		display: grid;
		grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.progi--jeden .prog-lista {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		column-gap: 2.5rem;
		border-top: 1px solid var(--linia);
	}

	.progi--jeden .prog-lista > li,
	.progi--jeden .prog-lista > li:first-child {
		padding-top: 0.9rem;
	}
}

.prog-kwota {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.9rem;
	padding-bottom: 1.1rem;
}

.prog-do,
.prog-waluta {
	font: 500 0.7rem/1 var(--f-mono);
	text-transform: uppercase;
	color: var(--tekst-2);
}

.prog-liczba {
	font: 800 clamp(3.4rem, 6vw, 4.6rem)/0.85 var(--f-display);
	color: var(--tekst);
	letter-spacing: 0.01em;
}

/* Miernik: im wyższy próg, tym dłuższy pasek - segmenty jak na wskaźniku wysterowania */
.prog-kwota::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background:
		repeating-linear-gradient(90deg, transparent 0 7px, var(--tlo) 7px 9px),
		linear-gradient(90deg, var(--akcent) 0 var(--poziom, 25%), var(--warstwa-2) var(--poziom, 25%));
}

.prog-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prog-lista > li {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--linia);
}

.prog-lista > li:first-child {
	padding-top: 0.2rem;
}

.sprzet-testy {
	margin-top: 2.5rem;
}

.siatka-kwadratow {
	display: grid;
	column-gap: 2.5rem;
}

@media (min-width: 56em) {
	.siatka-kwadratow {
		grid-template-columns: 1fr 1fr;
	}
}

/* Moduł poradnika - pełny pas w turkusie znaku */
.modul-poradnik {
	margin-top: var(--odstep);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--akcent);
	color: var(--na-akcencie);
}

.modul-poradnik-siatka {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

.modul-poradnik-okladka {
	max-width: 300px;
}

.modul-poradnik .nadtytul {
	color: var(--na-akcencie);
}

.modul-poradnik .nadtytul::before {
	background: var(--atrament);
}

.modul-poradnik-tytul {
	font-size: clamp(2.3rem, 5.4vw, 4rem);
	line-height: 0.94;
	text-transform: uppercase;
	color: var(--na-akcencie);
}

.modul-poradnik-lead {
	margin: 1.1rem 0 1.5rem;
	max-width: 36em;
	font-size: 1.12rem;
	line-height: 1.5;
}

.modul-poradnik .przycisk {
	background: var(--atrament);
	border-color: var(--atrament);
	color: var(--na-atramencie);
}

.modul-poradnik .przycisk:hover {
	background: var(--papier);
	border-color: var(--papier);
	color: var(--atrament);
}

.modul-poradnik-wpisy {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--na-akcencie-linia);
}

.modul-poradnik-wpisy .pozycja {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--na-akcencie-linia);
}

.modul-poradnik .pozycja-tytul a,
.modul-poradnik .kanal,
.modul-poradnik .data,
.modul-poradnik .tc {
	color: var(--na-akcencie);
}

.modul-poradnik .kanal .kanal-nr,
.modul-poradnik .tc [aria-hidden]::before {
	color: var(--na-akcencie);
	border-left-color: var(--na-akcencie);
}

.modul-poradnik .pozycja-tytul a:hover {
	color: var(--atrament);
}

@media (min-width: 56em) {
	.modul-poradnik-siatka {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: clamp(3rem, 7vw, 6rem);
	}
}

/* Okładka poradnika (SVG) */
.okladka {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 14px 14px 0 var(--cien);
}

.ok-papier { fill: var(--tlo); }
.ok-pas { fill: var(--akcent); }
.ok-mala { font: 500 6px var(--f-mono); fill: var(--tekst-2); letter-spacing: 0.2px; }
.ok-pas + .ok-mala,
.ok-pas + .ok-mala + .ok-mala { fill: var(--na-akcencie); }
.ok-hash { font: 800 78px var(--f-display); fill: var(--tekst); letter-spacing: 1px; }
.ok-rec { fill: var(--rec); }
.ok-podtytul { font: 400 12.5px var(--f-tekst); fill: var(--tekst); }
.ok-fala { fill: var(--akcent-jasny); }
.ok-glowica { fill: var(--rec); }
.ok-tc { font-size: 5.2px; fill: var(--tekst-3); }
.ok-rogi { fill: none; stroke: var(--akcent-jasny); stroke-width: 1.4; }

/* Najnowsze - dwie kolumny listy */
.najnowsze-lista,
.archiwum-lista {
	display: grid;
	column-gap: 3rem;
}

@media (min-width: 60em) {
	.najnowsze-lista,
	.archiwum-lista {
		grid-template-columns: 1fr 1fr;
	}
}

/* Ramówka - lista kanałów jak przewodnik programowy */
.ramowka {
	padding-bottom: var(--odstep);
}

.ramowka-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linia-mocna);
}

.ramowka-kanal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.35rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--linia);
}

.ramowka-nazwa {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font: 800 1.2rem/1.05 var(--f-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst);
	text-decoration: none;
}

.ramowka-nazwa .kanal-nr {
	width: 3.6rem;
	color: var(--akcent-jasny);
}

.ramowka-nazwa:hover {
	color: var(--akcent-jasny);
}

.ramowka-emisja {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.ramowka-emisja a {
	color: var(--tekst-2);
	text-decoration: none;
}

.ramowka-emisja a:hover {
	color: var(--tekst);
	text-decoration: underline;
}

.ramowka-emisja .data {
	flex: none;
	width: 6.2rem;
}

.ramowka-wkrotce {
	color: var(--tekst-3);
	font-style: normal;
}

.ramowka-kanal--pusty .ramowka-nazwa {
	color: var(--tekst-2);
}

@media (min-width: 56em) {
	.ramowka-kanal {
		grid-template-columns: 22rem minmax(0, 1fr);
		align-items: baseline;
		padding: 0.7rem 0.75rem;
	}

	.ramowka-kanal:nth-child(odd) {
		background: var(--warstwa);
	}
}

/* ---------- Nagłówek kanału (archiwum) ---------- */

.kanal-naglowek {
	position: relative;
	overflow: hidden;
	background: var(--tlo-gleb);
	border-bottom: 1px solid var(--linia);
}

/* Grafika kanału nie może wchodzić pod tytuł: na telefonie to pas u dołu nagłówka,
   od 48em kolumna przy prawej krawędzi, a treść dostaje tyle prawego marginesu, ile grafika zajmuje. */
.kanal-naglowek {
	--grafika-szer: clamp(14rem, 36vw, 620px);
	--grafika-pas: 4.5rem;
}

.kanal-naglowek-grafika {
	position: absolute;
	inset: auto 0 0 0;
	height: var(--grafika-pas);
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
	mask-image: linear-gradient(0deg, #000 40%, transparent);
}

@media (min-width: 48em) {
	.kanal-naglowek-grafika {
		inset: 0 0 0 auto;
		width: var(--grafika-szer);
		height: auto;
		opacity: 0.55;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
		mask-image: linear-gradient(90deg, transparent, #000 45%);
	}
}

.kanal-naglowek-grafika svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kanal-naglowek-grafika .z-etykieta {
	display: none;
}

.kanal-naglowek-wnetrze {
	position: relative;
	padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}

.kanal-naglowek-nr {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 1.5rem 0 0.4rem;
	font: 800 clamp(3rem, 8vw, 5.5rem)/0.8 var(--f-display);
	color: var(--akcent-jasny);
}

.kanal-naglowek-nr span {
	font: 500 0.75rem/1 var(--f-mono);
	color: var(--tekst-2);
}

.kanal-naglowek-nr--tekst {
	font: 500 0.7rem/1 var(--f-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--akcent-jasny);
}

.kanal-naglowek-tytul {
	max-width: 14em;
	font-size: clamp(2.6rem, 7.5vw, 6rem);
	line-height: 0.9;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.kanal-naglowek-tytul .szukana {
	color: var(--akcent-jasny);
}

.kanal-naglowek-opis {
	margin: 1.1rem 0 0;
	max-width: 34em;
	font-size: clamp(1.08rem, 1.8vw, 1.3rem);
	line-height: 1.45;
	color: var(--tekst-2);
}

.kanal-naglowek-licznik {
	display: flex;
	gap: 1.25rem;
	margin: 1.4rem 0 0;
	font: 500 0.66rem/1 var(--f-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.kanal-naglowek-licznik span {
	color: var(--tekst);
}

.kanal-naglowek--prosty .kanal-naglowek-nr--tekst {
	margin-top: 1.5rem;
}

.szukaj-duze {
	max-width: 36rem;
	margin-top: 1.5rem;
}

.szukaj-duze .szukaj-pole {
	padding: 0.9rem 1rem;
	font-size: 1.15rem;
}

.szukaj-duze .szukaj-przycisk {
	width: 56px;
}

@media (max-width: 47.99em) {
	.kanal-naglowek:has(.kanal-naglowek-grafika svg) .kanal-naglowek-wnetrze {
		padding-bottom: calc(var(--grafika-pas) + 1rem);
	}
}

@media (min-width: 48em) {
	.kanal-naglowek:has(.kanal-naglowek-grafika svg) .kanal-naglowek-wnetrze {
		padding-right: max(var(--gutter), calc(var(--grafika-szer) + 1.5rem - max(0px, (100vw - var(--wrap) - 2 * var(--gutter)) / 2)));
	}
}

/* Archiwum */
.archiwum {
	padding-block: clamp(2rem, 4vw, 3rem) var(--odstep);
}

.archiwum-otwarcie {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
}

.archiwum-otwarcie .pozycja-tytul {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 0.96;
}

.archiwum-otwarcie .pozycja-zajawka {
	font-size: 1.12rem;
}

@media (min-width: 56em) {
	.archiwum-otwarcie .pozycja--16x9 {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 2.5rem;
		align-items: end;
	}

	.archiwum-otwarcie .pozycja--16x9 .kadr {
		margin-bottom: 0;
	}
}

.pusto {
	max-width: 40rem;
	padding: 2rem 0;
	font-size: 1.12rem;
	color: var(--tekst-2);
}

.pusto-kanaly {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linia);
}

.pusto-kanaly a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--linia);
	font: 800 1.05rem/1.1 var(--f-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst);
	text-decoration: none;
}

.pusto-kanaly a:hover {
	color: var(--akcent-jasny);
}

/* Paginacja */
.paginacja {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linia-mocna);
}

.paginacja .page-numbers,
.paginacja--wpis a,
.paginacja--wpis > span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.8rem;
	border: 1px solid var(--linia-mocna);
	font: 500 0.72rem/1 var(--f-mono);
	color: var(--tekst);
	text-decoration: none;
}

.paginacja a:hover {
	border-color: var(--akcent-jasny);
	color: var(--akcent-jasny);
}

.paginacja .current {
	background: var(--akcent);
	border-color: var(--akcent);
	color: var(--na-akcencie);
}

.paginacja .dots {
	border-color: transparent;
}

/* Okruszki */
.okruszki {
	margin: 0 0 1rem;
	font: 500 0.6rem/1.5 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.okruszki ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.okruszki li + li::before {
	content: "/";
	margin: 0 0.6em;
	color: var(--linia-mocna);
}

.okruszki li[aria-current] {
	overflow: hidden;
	max-width: 32ch;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.okruszki a {
	color: var(--tekst-2);
	text-decoration: none;
}

.okruszki a:hover {
	color: var(--akcent-jasny);
}

/* Yoast: <span><span><a>…</a></span> » …</span> */
.okruszki > span {
	display: block;
}

/* ---------- Wpis ---------- */

.wrap--wpis,
.wrap--kadr {
	max-width: calc(1180px + 2 * var(--gutter));
}

.wpis-naglowek {
	padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
}

.wpis-naglowek .metka {
	margin-bottom: 1rem;
}

.wpis-tytul {
	max-width: 17em;
	font-size: clamp(2.5rem, 6.8vw, 5.2rem);
	line-height: 0.92;
	letter-spacing: 0.005em;
}

.wpis-lead {
	max-width: 36em;
	margin: 1.4rem 0 0;
	padding-left: 1.1rem;
	border-left: 3px solid var(--akcent);
	font-size: clamp(1.2rem, 2.1vw, 1.45rem);
	line-height: 1.45;
	color: var(--tekst);
}

/* Metryczka jak ekran ustawień kamery: pola oddzielone pionowymi kreskami */
.wpis-meta {
	display: flex;
	flex-wrap: wrap;
	margin: 1.6rem 0 0;
	padding: 0;
	border-block: 1px solid var(--linia);
}

.wpis-meta > div {
	padding: 0.7rem 1.4rem 0.65rem 0;
	margin-right: 1.4rem;
	border-right: 1px solid var(--linia);
}

.wpis-meta > div:last-child {
	border-right: 0;
	margin-right: 0;
}

.wpis-meta dt {
	margin-bottom: 0.35rem;
	font: 500 0.56rem/1 var(--f-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.wpis-meta dd {
	margin: 0;
	font: 500 0.78rem/1.2 var(--f-mono);
	color: var(--tekst);
}

.wpis-meta dd .data,
.wpis-meta dd .tc {
	font-size: 0.78rem;
	color: var(--tekst);
}

.wpis-meta-tc dd .tc {
	color: var(--akcent-jasny);
}

@media (max-width: 29.99em) {
	.wpis-meta > div {
		padding-right: 0.9rem;
		margin-right: 0.9rem;
	}
}

.wpis-kadr {
	margin: 0;
}

.wpis-kadr figcaption {
	margin-top: 0.6rem;
	font: 500 0.62rem/1.5 var(--f-mono);
	color: var(--tekst-3);
}

.wpis-kadr--zastepnik .kadr {
	aspect-ratio: 32 / 9;
}

@media (max-width: 47.99em) {
	.wpis-kadr--zastepnik .kadr {
		aspect-ratio: 2 / 1;
	}

	.wpis-kadr .wrap--kadr {
		padding-inline: 0;
	}

	.wpis-kadr figcaption {
		padding-inline: var(--gutter);
	}
}

.wpis-uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	max-width: calc(1180px + 2 * var(--gutter));
	padding-block: clamp(2rem, 4vw, 3rem) 0;
}

.wpis-uklad > .tresc {
	min-width: 0;
	max-width: var(--kolumna);
}

@media (min-width: 70em) {
	.wpis-uklad {
		grid-template-columns: 250px minmax(0, var(--kolumna));
		column-gap: clamp(3rem, 5vw, 5rem);
	}

	.wpis-uklad > .tresc {
		grid-column: 2;
	}

	.rozdzialy {
		position: sticky;
		top: 1.5rem;
		align-self: start;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

/* Rozdziały - znaczniki na pionowej osi */
.rozdzialy {
	font-size: 0.98rem;
}

.rozdzialy-tytul {
	margin-bottom: 0.75rem;
	font: 500 0.62rem/1 var(--f-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.rozdzialy ol {
	margin: 0;
	padding: 0 0 0 0.9rem;
	list-style: none;
	border-left: 1px solid var(--linia-mocna);
}

.rozdzialy li {
	position: relative;
}

.rozdzialy li::before {
	content: "";
	position: absolute;
	left: -0.9rem;
	top: 0.95rem;
	width: 0.55rem;
	height: 1px;
	background: var(--linia-mocna);
}

.rozdzialy a {
	display: grid;
	grid-template-columns: 1.9rem minmax(0, 1fr);
	padding: 0.45rem 0;
	line-height: 1.3;
	color: var(--tekst-2);
	text-decoration: none;
}

.rozdzialy a:hover {
	color: var(--tekst);
}

.rozdzialy-nr {
	padding-top: 0.2rem;
	font: 500 0.62rem/1 var(--f-mono);
	color: var(--akcent-jasny);
}

@media (max-width: 69.99em) {
	.rozdzialy {
		max-width: var(--kolumna);
		padding: 1.1rem 1.25rem 0.8rem;
		background: var(--warstwa);
	}
}

/* ---------- Treść ---------- */

.tresc {
	font-size: 1.1875rem;
	line-height: 1.66;
	counter-reset: rozdzial;
	overflow-wrap: break-word;
}

.tresc > * + * {
	margin-top: 0;
}

.tresc p,
.tresc ul,
.tresc ol,
.tresc blockquote,
.tresc figure,
.tresc .smo-tabela,
.tresc details {
	margin: 0 0 1.3rem;
}

/* Lead - pierwszy akapit, gdy wpis nie ma osobnej zajawki */
.tresc--lead > p:first-child,
.tresc--lead > .sponsor-informacja + p {
	font-size: clamp(1.25rem, 2.1vw, 1.45rem);
	line-height: 1.5;
	color: var(--tekst);
	margin-bottom: 1.8rem;
}

.tresc h2 {
	position: relative;
	margin: 3rem 0 1.1rem;
	padding-top: 1.1rem;
	font-size: clamp(1.85rem, 3.4vw, 2.4rem);
	line-height: 1;
	scroll-margin-top: 1.5rem;
	counter-increment: rozdzial;
}

/* Numer rozdziału jak znacznik na osi - odpowiada numeracji w spisie */
.wpis .tresc h2::before {
	content: counter(rozdzial, decimal-leading-zero);
	position: absolute;
	top: -0.2rem;
	left: 0;
	padding-right: 0.6rem;
	background: var(--tlo);
	font: 500 0.62rem/1 var(--f-mono);
	color: var(--akcent-jasny);
}

/* Autor numeruje rozdziały sam ("1. Rode…") - bez drugiego licznika (klasa z smo_spis_tresci). */
.wpis .tresc h2.bez-licznika::before {
	content: none;
}

.wpis .tresc h2::after {
	content: "";
	position: absolute;
	top: 0.1rem;
	left: 0;
	right: 0;
	z-index: -1;
	height: 1px;
	background: var(--linia);
}

.tresc h3 {
	margin: 2.2rem 0 0.8rem;
	font-size: 1.55rem;
	line-height: 1.05;
	scroll-margin-top: 1.5rem;
}

.tresc h4 {
	margin: 1.8rem 0 0.6rem;
	font: 500 0.78rem/1.3 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst-2);
}

.tresc a {
	color: var(--akcent-jasny);
}

.tresc a:hover {
	color: var(--tekst);
	text-decoration-color: var(--akcent-jasny);
}

.tresc ul {
	padding-left: 1.4rem;
	list-style: none;
}

.tresc ul > li {
	position: relative;
	margin-bottom: 0.45rem;
}

.tresc ul > li::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	top: 0.68em;
	width: 7px;
	height: 7px;
	background: var(--akcent);
}

.tresc ol {
	padding-left: 1.6rem;
}

.tresc ol > li {
	margin-bottom: 0.45rem;
}

.tresc ol > li::marker {
	font: 500 0.8em var(--f-mono);
	color: var(--akcent-jasny);
}

/* Kroki instrukcji: lista numerowana najwyższego poziomu */
.tresc > ol {
	padding: 0;
	list-style: none;
	counter-reset: krok;
}

.tresc > ol > li {
	position: relative;
	min-height: 3.2rem;
	margin: 0;
	padding: 0 0 1.5rem 4.2rem;
	counter-increment: krok;
}

.tresc > ol > li::before {
	content: counter(krok, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 3rem;
	padding: 0.35rem 0 0.25rem;
	border: 1px solid var(--akcent);
	background: var(--akcent-tlo);
	font: 800 1.55rem/1 var(--f-display);
	text-align: center;
	color: var(--tekst);
}

/* Łącznik między krokami - odcinek osi */
.tresc > ol > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	top: 2.55rem;
	bottom: 0.2rem;
	width: 1px;
	background: repeating-linear-gradient(180deg, var(--linia-mocna) 0 4px, transparent 4px 7px);
}

.tresc > ol > li > strong:first-child,
.tresc > ol > li > b:first-child {
	display: block;
	margin-bottom: 0.2rem;
	font: 800 1.3rem/1.1 var(--f-display);
	letter-spacing: 0.01em;
}

@media (max-width: 29.99em) {
	.tresc > ol > li {
		padding-left: 3.3rem;
	}

	.tresc > ol > li::before {
		width: 2.4rem;
		font-size: 1.3rem;
	}

	.tresc > ol > li:not(:last-child)::after {
		left: 1.2rem;
	}
}

.tresc blockquote {
	margin-inline: 0;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: 3px solid var(--akcent);
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--tekst);
}

.tresc blockquote p:last-child {
	margin-bottom: 0;
}

.tresc blockquote cite {
	display: block;
	margin-top: 0.6rem;
	font: 500 0.64rem/1.3 var(--f-mono);
	font-style: normal;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.tresc hr {
	height: 11px;
	margin: 2.5rem 0;
	border: 0;
	background:
		linear-gradient(var(--linia-mocna), var(--linia-mocna)) bottom / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, var(--linia-mocna) 0 1px, transparent 1px 12px) bottom left / 100% 5px no-repeat;
}

.tresc img {
	display: block;
}

.tresc figure {
	margin-inline: 0;
}

.tresc figcaption,
.tresc .wp-caption-text,
.tresc .wp-element-caption {
	margin-top: 0.55rem;
	font: 500 0.62rem/1.5 var(--f-mono);
	color: var(--tekst-3);
}

.tresc .wp-caption {
	max-width: 100%;
}

.tresc .alignleft,
.tresc .alignright {
	max-width: 50%;
}

@media (min-width: 40em) {
	.tresc .alignleft {
		float: left;
		margin: 0.3rem 1.5rem 1rem 0;
	}

	.tresc .alignright {
		float: right;
		margin: 0.3rem 0 1rem 1.5rem;
	}
}

.tresc .aligncenter {
	margin-inline: auto;
}

.tresc code,
.tresc kbd {
	padding: 0.1em 0.35em;
	background: var(--warstwa-2);
	font: 500 0.78em/1 var(--f-mono);
	color: var(--tekst);
}

.tresc pre {
	overflow-x: auto;
	padding: 1rem;
	background: var(--tlo-gleb);
	border: 1px solid var(--linia);
	font: 500 0.8rem/1.6 var(--f-mono);
}

.tresc pre code {
	padding: 0;
	background: none;
}

.tresc mark {
	background: var(--akcent-tlo);
	color: var(--tekst);
	box-shadow: inset 0 -2px 0 var(--akcent);
}

.tresc iframe {
	display: block;
	border: 0;
}

.tresc iframe[src*="youtube"],
.tresc iframe[src*="youtu.be"],
.tresc iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.tresc .wp-block-embed__wrapper,
.tresc .wp-block-embed {
	margin: 0 0 1.5rem;
}

/* Tabele - przewijane w poziomie, ceny w kroju mono */
.smo-tabela {
	overflow-x: auto;
	border: 1px solid var(--linia);
	background: var(--tlo-gleb);
	scrollbar-width: thin;
	scrollbar-color: var(--linia-mocna) transparent;
}

.smo-tabela:focus-visible {
	outline-offset: 2px;
}

.tresc table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.4;
}

.tresc th,
.tresc td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--linia);
	text-align: left;
	vertical-align: top;
}

.tresc th {
	background: var(--warstwa-2);
	font: 500 0.6rem/1.3 var(--f-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tekst-2);
}

.tresc tbody tr:nth-child(even) {
	background: var(--warstwa);
}

.tresc tbody tr:last-child td {
	border-bottom: 0;
}

.tresc td.smo-cena {
	font: 500 0.8rem/1.4 var(--f-mono);
	color: var(--akcent-jasny);
	white-space: nowrap;
}

.tresc caption {
	padding: 0.6rem 0.9rem;
	caption-side: top;
	font: 500 0.62rem/1.4 var(--f-mono);
	text-align: left;
	text-transform: uppercase;
	color: var(--tekst-3);
}

/* FAQ - czytelne bloki pytanie / odpowiedź */
.smo-faq {
	margin: 3rem 0 1.5rem;
	padding: 0.25rem clamp(1rem, 3vw, 1.75rem) 0.75rem;
	background: var(--warstwa);
	border-top: 3px solid var(--akcent);
}

.smo-faq > h2 {
	margin-top: 1.5rem;
}

.wpis .smo-faq > h2::before,
.wpis .smo-faq > h2::after {
	display: none;
}

.smo-faq h3 {
	position: relative;
	margin: 1.6rem 0 0.5rem;
	padding-left: 2.2rem;
	font-size: 1.35rem;
}

.smo-faq h3::before {
	content: "P";
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.5rem;
	padding: 0.25rem 0 0.2rem;
	background: var(--akcent);
	font: 500 0.66rem/1 var(--f-mono);
	text-align: center;
	color: var(--na-akcencie);
}

.smo-faq h3 + p,
.smo-faq h3 + p + p {
	padding-left: 2.2rem;
	color: var(--tekst-2);
}

.smo-faq p:last-child {
	margin-bottom: 0.5rem;
}

.tresc details {
	border-top: 1px solid var(--linia-mocna);
}

.tresc details:last-of-type {
	border-bottom: 1px solid var(--linia-mocna);
}

.tresc summary {
	position: relative;
	padding: 0.9rem 2.5rem 0.9rem 0;
	font: 800 1.3rem/1.1 var(--f-display);
	cursor: pointer;
	list-style: none;
}

.tresc summary::-webkit-details-marker {
	display: none;
}

.tresc summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 0.8rem;
	font: 500 1.1rem/1 var(--f-mono);
	color: var(--akcent-jasny);
}

.tresc details[open] summary::after {
	content: "–";
}

.tresc details > :not(summary) {
	color: var(--tekst-2);
}

/* Materiał sponsorowany */
.sponsor-informacja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.8rem;
	padding: 0.8rem 1rem;
	border: 1px dashed var(--uwaga);
	font-size: 0.98rem !important;
	line-height: 1.4 !important;
	color: var(--tekst-2);
}

.sponsor-informacja a {
	font: 500 0.64rem/1.3 var(--f-mono);
	text-transform: uppercase;
	color: var(--uwaga);
}

/* Stopka wpisu */
.wpis-stopka {
	padding-top: 2.5rem;
}

@media (min-width: 70em) {
	.wpis-stopka {
		padding-left: calc(var(--gutter) + 250px + clamp(3rem, 5vw, 5rem));
	}

	.wpis-stopka > * {
		max-width: var(--kolumna);
	}
}

.tagi ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tagi a {
	display: inline-block;
	padding: 0.45rem 0.65rem 0.4rem;
	border: 1px solid var(--linia-mocna);
	font: 500 0.64rem/1 var(--f-mono);
	text-transform: lowercase;
	color: var(--tekst-2);
	text-decoration: none;
}

.tagi a::before {
	content: "#";
	color: var(--akcent-jasny);
}

.tagi a:hover {
	border-color: var(--akcent-jasny);
	color: var(--tekst);
}

.redakcja {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: 2rem;
	padding: 1.25rem 0;
	border-block: 1px solid var(--linia);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tekst-2);
}

.redakcja p {
	margin: 0;
}

.redakcja strong {
	display: block;
	color: var(--tekst);
	font: 800 1.15rem/1.2 var(--f-display);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.znak--maly {
	flex: none;
	height: 30px;
}

.siatka-trzy {
	display: grid;
	gap: 2rem;
}

@media (min-width: 48em) {
	.siatka-trzy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.siatka-trzy {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

.powiazane {
	padding-bottom: var(--odstep);
}

/* Strona statyczna */
.strona .tresc {
	max-width: var(--kolumna);
	padding-bottom: var(--odstep);
}

.strona-naglowek {
	border-bottom: 1px solid var(--linia);
	margin-bottom: 2rem;
}

/* ---------- Osadzenia (fasady z inc/embeds.php) ---------- */

/*
 * Osadzenie to monitor podglądu: zawsze ciemny ekran (niezależnie od palety),
 * narożniki wizjera, źródło sygnału w rogu i przycisk transportu "▶ Odtwórz".
 */
.smo-embed {
	margin: 2rem 0;
}

.smo-embed__media {
	position: relative;
	aspect-ratio: var(--smo-embed-ratio, 16 / 9);
	overflow: hidden;
	background: var(--ekran);
	color: var(--na-ekranie);
}

.smo-embed__media > * {
	position: absolute;
	inset: 0;
}

.smo-embed__miniatura {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.78) saturate(0.9);
	transition: filter 0.2s;
}

.smo-embed__frame {
	display: block;
	width: 100%;
	border: 0;
}

/* Spotify ma wysokość z atrybutu height - tam jej nie nadpisujemy */
.smo-embed:not(.smo-embed--spotify) .smo-embed__frame {
	height: 100%;
}

/* Narożniki wizjera - te same co przy kadrach, znikają po włączeniu odtwarzacza */
.smo-embed--fasada .smo-embed__media::before {
	content: "";
	position: absolute;
	inset: clamp(8px, 3%, 16px);
	z-index: 2;
	pointer-events: none;
	--r: clamp(10px, 6%, 20px);
	--rog: var(--rog-foto);
	background:
		linear-gradient(var(--rog), var(--rog)) top left / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) top left / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) top right / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) top right / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) bottom left / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) bottom left / 2px var(--r),
		linear-gradient(var(--rog), var(--rog)) bottom right / var(--r) 2px,
		linear-gradient(var(--rog), var(--rog)) bottom right / 2px var(--r);
	background-repeat: no-repeat;
	transition: inset 0.2s;
}

.smo-embed--fasada:hover .smo-embed__media::before,
.smo-embed--fasada:focus-within .smo-embed__media::before {
	--rog: var(--akcent-na-ekranie);
	inset: clamp(5px, 2%, 10px);
}

.smo-embed--aktywny .smo-embed__media::before {
	display: none;
}

/* Bez miniatury: plansza z siatką kadrowania zamiast czarnej dziury */
.smo-embed--bez-miniatury .smo-embed__media {
	background:
		linear-gradient(90deg, transparent calc(33.33% - 0.5px), var(--siatka-ekranu) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), var(--siatka-ekranu) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
		linear-gradient(transparent calc(33.33% - 0.5px), var(--siatka-ekranu) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), var(--siatka-ekranu) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
		var(--ekran);
}

/* Przycisk: cały ekran klikalny, w środku płytka transportu */
.smo-embed__play {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: linear-gradient(0deg, var(--belka-cien) 0, transparent 55%);
	color: var(--na-akcencie);
	cursor: pointer;
}

.smo-embed__ikona {
	flex: none;
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	padding: 15px 17px 15px 19px;
	background: var(--akcent);
	transition: background-color 0.15s;
}

.smo-embed__etykieta {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 1.1rem 0 0.95rem;
	background: var(--belka);
	color: var(--na-ekranie);
	font: 500 0.66rem/1 var(--f-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s;
}

.smo-embed__play:hover .smo-embed__ikona,
.smo-embed__play:focus-visible .smo-embed__ikona {
	background: var(--akcent-gleboki);
}

.smo-embed__play:hover .smo-embed__etykieta,
.smo-embed__play:focus-visible .smo-embed__etykieta {
	background: var(--na-ekranie);
	color: var(--ekran);
}

.smo-embed--fasada:hover .smo-embed__miniatura,
.smo-embed--fasada:focus-within .smo-embed__miniatura {
	filter: none;
}

.smo-embed__play:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

/* Źródło sygnału - link do serwisu w prawym górnym rogu */
.smo-embed a.smo-embed__zrodlo {
	inset: clamp(14px, 4.5%, 26px) clamp(14px, 4.5%, 26px) auto auto;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0.6em 0.4em;
	background: var(--belka);
	color: var(--na-ekranie);
	font: 500 0.6rem/1 var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.smo-embed__zrodlo::before {
	content: "SRC";
	color: var(--akcent-na-ekranie);
}

.smo-embed a.smo-embed__zrodlo:hover,
.smo-embed a.smo-embed__zrodlo:focus-visible {
	background: var(--akcent);
	color: var(--na-akcencie);
}

.smo-embed__zrodlo:hover::before,
.smo-embed__zrodlo:focus-visible::before {
	color: inherit;
}

/* Tytuł filmu - belka u dołu kadru, jak podpis na podglądzie */
.smo-embed__tytul {
	inset: auto 0 0 0;
	z-index: 2;
	padding: 0 clamp(1rem, 4%, 1.6rem) clamp(0.9rem, 3.5%, 1.4rem);
	color: var(--na-ekranie);
	font: 800 clamp(1.05rem, 2.2vw, 1.4rem)/1.05 var(--f-display);
	letter-spacing: 0.01em;
	text-wrap: balance;
	pointer-events: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Tytuł i przycisk nie mogą na siebie wchodzić - przycisk idzie wyżej */
.smo-embed:has(.smo-embed__tytul) .smo-embed__play {
	padding-bottom: 2.6rem;
}

.smo-embed__podpis {
	display: flex;
	gap: 0.6em;
	margin-top: 0.65rem;
	font: 500 0.64rem/1.5 var(--f-mono);
	color: var(--tekst-3);
}

.smo-embed__podpis::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.45em;
	background: var(--akcent);
}

.smo-embed .smo-embed__podpis a {
	color: var(--tekst-2);
}

/* Pionowe (Shorts, rolki) - węższe i wyśrodkowane, jak ekran telefonu */
.smo-embed--pion,
.tresc .smo-embed--pion {
	max-width: 22rem;
	margin-inline: auto;
}

.smo-embed--pion .smo-embed__media {
	outline: 1px solid var(--linia-mocna);
	outline-offset: 6px;
}

.smo-embed--pion .smo-embed__tytul {
	padding: 0 2.2rem 2rem;
	font-size: 1.1rem;
	-webkit-line-clamp: 3;
}

.smo-embed--pion .smo-embed__etykieta {
	display: none;
}

/* Spotify i issuu: odtwarzacz od razu, bez fasady. Nad nim etykieta kanału. */
.smo-embed--spotify,
.smo-embed--issuu {
	padding-top: 0.2rem;
}

.smo-embed--spotify::before,
.smo-embed--issuu::before {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.55rem;
	font: 500 0.6rem/1 var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.smo-embed--spotify::before {
	content: "Audio · Spotify";
}

.smo-embed--issuu::before {
	content: "Publikacja · issuu";
}

.smo-embed--spotify .smo-embed__media {
	aspect-ratio: auto;
	min-height: 152px;
	border-radius: 12px;
	background: var(--warstwa);
}

.smo-embed--spotify .smo-embed__media > * {
	position: static;
}

.smo-embed--spotify .smo-embed__frame {
	border-radius: 12px;
}

.smo-embed--spotify-episode .smo-embed__frame,
.smo-embed--spotify-track .smo-embed__frame {
	min-height: 152px;
}

.smo-embed--issuu .smo-embed__media {
	border: 1px solid var(--linia);
}

/* Osadzenie rozciągnięte na szerokość kadru (blok "wide") */
.tresc .smo-embed.alignwide,
.tresc .smo-embed.alignfull {
	max-width: none;
}

@media (min-width: 70em) {
	.tresc .smo-embed.alignwide:not(.smo-embed--pion) {
		margin-inline: -4rem;
	}
}

@media (max-width: 29.99em) {
	.smo-embed__ikona {
		padding: 12px 13px 12px 15px;
		width: 22px;
		height: 22px;
	}

	.smo-embed__etykieta {
		height: 46px;
	}

	/* Na telefonie osadzenie wychodzi na całą szerokość ekranu */
	.tresc .smo-embed:not(.smo-embed--pion):not(.smo-embed--spotify) {
		margin-inline: calc(-1 * var(--gutter));
	}

	.tresc .smo-embed:not(.smo-embed--pion):not(.smo-embed--spotify) .smo-embed__podpis,
	.tresc .smo-embed--issuu::before {
		padding-inline: var(--gutter);
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- 404 - brak sygnału ---------- */

.brak {
	padding-block: clamp(2rem, 5vw, 4rem) var(--odstep);
}

.brak-siatka {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

.brak-ekran {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--linia-mocna);
}

.brak-sygnalu {
	display: block;
	width: 100%;
	height: 100%;
}

.brak-napis {
	position: absolute;
	left: 50%;
	top: 36%;
	margin: 0;
	padding: 0.6rem 1rem 0.5rem;
	background: var(--ekran);
	font: 500 clamp(0.8rem, 2vw, 1.1rem)/1 var(--f-mono);
	letter-spacing: 0.12em;
	color: var(--na-ekranie);
	transform: translate(-50%, -50%);
}

.brak-tytul {
	font-size: clamp(2.4rem, 5.5vw, 4.2rem);
	line-height: 0.94;
	margin-bottom: 1.1rem;
}

.brak-tresc > p {
	font-size: 1.12rem;
	color: var(--tekst-2);
}

@media (min-width: 60em) {
	.brak-siatka {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 4rem;
	}
}

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

.stopka {
	margin-top: var(--odstep);
	background: var(--tlo-gleb);
	border-top: 1px solid var(--linia);
	font-size: 1rem;
	color: var(--tekst-2);
}

.ramowka + .stopka,
.powiazane + .stopka,
.archiwum + .stopka,
.brak + .stopka,
.strona + .stopka {
	margin-top: 0;
}

.stopka-siatka {
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 48em) {
	.stopka-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 70em) {
	.stopka-siatka {
		grid-template-columns: 1.3fr 1.6fr 0.9fr 1fr;
		gap: 3rem;
	}
}

.stopka-znak {
	display: inline-block;
	margin-bottom: 1rem;
}

.stopka-o-nas p {
	max-width: 24em;
	line-height: 1.5;
}

.stopka-tytul {
	margin: 0 0 0.9rem;
	font: 500 0.62rem/1 var(--f-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.stopka-tytul:not(:first-child) {
	margin-top: 1.6rem;
}

.stopka ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stopka a {
	color: var(--tekst-2);
	text-decoration: none;
}

.stopka a:hover {
	color: var(--akcent-jasny);
	text-decoration: underline;
}

.stopka-kanaly ul {
	columns: 2;
	column-gap: 1.5rem;
}

.stopka-kanaly li,
.stopka-strony li {
	break-inside: avoid;
	padding: 0.28rem 0;
	line-height: 1.3;
}

.stopka-kanaly a {
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
}

.stopka-kanaly .kanal-nr {
	color: var(--tekst-3);
}

.stopka-wydawca address {
	margin: 0 0 1em;
	font-style: normal;
	line-height: 1.55;
}

.stopka-wydawca strong {
	color: var(--tekst);
	font: 800 1.1rem/1.2 var(--f-display);
	letter-spacing: 0.04em;
}

.stopka-dol {
	border-top: 1px solid var(--linia);
	font: 500 0.6rem/1.4 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tekst-3);
}

.stopka-dol-wnetrze {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 2rem;
	padding-block: 1.1rem;
}

.stopka-dol p {
	margin: 0;
}

.stopka-prawne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
}

.stopka-dol a {
	color: var(--tekst-2);
}

.stopka-koniec {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.stopka-koniec .rec-kropka {
	width: 6px;
	height: 6px;
	background: var(--tekst-3);
	box-shadow: none;
}

/* ---------- Obszary dotyku na telefonie (min. 44 px) ---------- */

@media (max-width: 47.99em) {
	/* Drobne linki w tekście: większe pole kliknięcia bez zmiany układu (padding + ujemny margines). */
	.okruszki a {
		padding-block: 15px;
		margin-block: -15px;
	}

	.logo a {
		padding-block: 5px;
		margin-block: -5px;
	}

	.stopka-znak {
		padding-block: 5px;
		margin-block: -5px calc(1rem - 5px);
	}

	.metka .kanal {
		padding-block: 15px;
		margin-block: -15px;
	}

	.ramowka-nazwa {
		padding-block: 12px;
		margin-block: -12px;
	}

	.smo-embed a.smo-embed__zrodlo::after {
		content: "";
		position: absolute;
		inset: -13px -6px;
	}

	/* Listy linków: pełna wysokość wiersza 44 px. */
	.tagi a,
	.sekcja-link,
	.stopka-wydawca a,
	.stopka-prawne a,
	.stopka-gora {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.tagi a {
		padding-block: 0;
	}

	.sekcja-link {
		padding-block: 0;
	}

	.pusto-kanaly a {
		align-items: center;
		min-height: 44px;
		padding-block: 0.4rem;
	}

	.rozdzialy a {
		min-height: 44px;
		align-content: center;
		padding-block: 0.3rem;
	}

	.rozdzialy li::before {
		top: 50%;
	}

	.rozdzialy-nr {
		padding-top: 0;
		align-self: center;
	}

	.stopka-kanaly li,
	.stopka-strony li {
		padding: 0;
	}

	.stopka-kanaly a,
	.stopka-strony a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0.3rem;
	}

	.stopka-dol-wnetrze {
		row-gap: 0.2rem;
	}
}

/* ---------- Ruch ---------- */

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

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

@media print {
	.pasek,
	.kanaly,
	.menu-przycisk,
	.naglowek-szukaj,
	.stopka,
	.rozdzialy,
	.powiazane,
	.kadr--zastepnik {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.tresc,
	.wpis-tytul,
	.tresc h2,
	.tresc h3 {
		color: #000;
	}
}

/* ---------- Przycisk do góry ---------- */

.do-gory {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	/* --do-gory-podniesienie ustawia do-gory.js, gdy przy dole leży baner cookies. */
	bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--do-gory-podniesienie, 0px));
	z-index: 80;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--atrament);
	background: var(--akcent);
	color: var(--na-akcencie);
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--atrament);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s, bottom 0.2s;
}

.do-gory-etykieta {
	font: 500 0.5rem/1 var(--f-mono);
	letter-spacing: 0.1em;
}

.do-gory.is-widoczny,
.do-gory:focus-visible,
html:not(.js) .do-gory {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Okno zgody na cookies ma pierwszeństwo - przycisk nie wystaje spod niego. */
.do-gory.is-pod-banerem {
	opacity: 0;
	visibility: hidden;
}

.do-gory:hover {
	background: var(--atrament);
	color: var(--akcent);
}

.do-gory:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.do-gory {
		transition: none;
	}
}

@media print {
	.do-gory {
		display: none;
	}
}

/* ---------- Galerie w treści (blok wp-block-gallery z Publikatora i klasyczny [gallery]) ----------
 * WordPress sam dokłada arkusze bloków image i gallery (flex, szerokość zdjęcia = 1/3 rzędu,
 * podpis z gradientem). Selektory poniżej mają wyższą specyficzność, żeby wygrać z nimi
 * niezależnie od kolejności arkuszy - stąd podwójne :not(#x):not(#y) (WordPress używa jednego). */

.tresc .wp-block-gallery.wp-block-gallery,
.tresc .gallery.gallery {
	--kolumny: 3;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: 2rem 0;
	padding: 0;
}

.tresc .wp-block-gallery.columns-2,
.tresc .gallery-columns-2 { --kolumny: 2; }
.tresc .wp-block-gallery.columns-4,
.tresc .gallery-columns-4 { --kolumny: 4; }

@media (min-width: 40em) {
	.tresc .wp-block-gallery.wp-block-gallery,
	.tresc .gallery.gallery {
		grid-template-columns: repeat(var(--kolumny), minmax(0, 1fr));
	}
}

.tresc .wp-block-gallery figure.wp-block-image:not(#x):not(#y),
.tresc .gallery .gallery-item:not(#x):not(#y) {
	position: relative;
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	overflow: hidden;
	background: var(--ekran);
}

.tresc .wp-block-gallery figure.wp-block-image:not(#x):not(#y) > a {
	display: block;
	height: 100%;
	margin: 0;
}

.tresc .wp-block-gallery figure.wp-block-image:not(#x):not(#y) img,
.tresc .gallery .gallery-item:not(#x):not(#y) img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Podpis w galerii - belka na dole kadru, jedna linia z wielokropkiem (pełny podpis jest w popupie). */
.tresc .wp-block-gallery figure.wp-block-image:not(#x):not(#y) figcaption {
	position: absolute;
	inset: auto 0 0;
	max-height: none;
	margin: 0;
	padding: 0.4rem 0.55rem;
	overflow: hidden;
	background: var(--belka);
	color: var(--na-ekranie);
	font: 500 0.56rem/1.4 var(--f-mono);
	text-align: left;
	text-shadow: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tresc .wp-block-gallery > figcaption {
	grid-column: 1 / -1;
}

/* ---------- Popup zdjęć (assets/js/popup.js) ---------- */

.popup-cel {
	cursor: zoom-in;
}

.popup-cel:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.popup {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(0 0 0 / 0.97);
	color: var(--na-ekranie);
}

.popup::backdrop {
	background: rgb(0 0 0 / 0.6);
}

.popup-kadr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	margin: 0;
	padding: 3.5rem 1rem 1.5rem;
	cursor: zoom-out;
}

.popup-obraz {
	max-width: 100%;
	max-height: calc(100% - 3rem);
	object-fit: contain;
	cursor: default;
}

.popup-podpis {
	max-width: 60rem;
	text-align: center;
	font: 500 0.66rem/1.5 var(--f-mono);
	color: #cfcfcf;
	cursor: default;
}

.popup-licznik {
	position: absolute;
	top: 1.1rem;
	left: 1rem;
	margin: 0;
	font: 500 0.7rem/1 var(--f-mono);
	letter-spacing: 0.1em;
	color: #cfcfcf;
}

.popup-zamknij,
.popup-strzalka {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgb(255 255 255 / 0.35);
	background: rgb(0 0 0 / 0.55);
	color: #ffffff;
	font: 400 1.6rem/1 var(--f-mono);
	cursor: pointer;
}

.popup-zamknij {
	top: 0.5rem;
	right: 0.5rem;
}

.popup-strzalka {
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
}

.popup-strzalka--wstecz { left: 0.5rem; }
.popup-strzalka--dalej { right: 0.5rem; }

.popup-zamknij:hover,
.popup-strzalka:hover {
	border-color: var(--akcent);
	background: var(--akcent);
	color: var(--na-akcencie);
}

.popup-zamknij:focus-visible,
.popup-strzalka:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.popup [hidden] {
	display: none;
}

html.popup-otwarty {
	overflow: hidden;
}

@media (min-width: 48em) {
	.popup-kadr {
		padding-inline: 4.5rem;
	}

	.popup-strzalka--wstecz { left: 1rem; }
	.popup-strzalka--dalej { right: 1rem; }
}