/*
Theme Name: Stylowo z Telemarkiem
Theme URI: https://stylowoztelemarkiem.pl/
Author: Redakcja Stylowo z Telemarkiem
Description: Motyw blokowy pod huby terminarza, wynikow i cykli. Kierunek "rytownia i tabela" — szeryf niesie marke, grotesk niesie liczby.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 4.35.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: szt
Tags: blog, news, block-patterns, full-site-editing, editor-style
*/

/*
 * Ten plik NIE jest ladowany automatycznie — rdzen WordPressa nie kolejkuje
 * style.css w motywach blokowych. Kolejkuje go functions.php.
 *
 * Trzymamy tu wylacznie to, czego theme.json wyrazic nie potrafi:
 * pseudoelementy, cyfry tabelaryczne i stan focus. Kolory, odstepy
 * i typografia mieszkaja w theme.json i nigdzie indziej.
 */

/* Cyfry o stalej szerokosci wszedzie, gdzie liczby staja w kolumnie. */
.wp-block-table td,
.wp-block-table th,
.szt-liczba,
.szt-terminarz,
.szt-klasyfikacja {
	font-variant-numeric: tabular-nums;
}

/* Widoczny focus — theme.json nie opisuje stanu :focus-visible. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--granat);
	outline-offset: 2px;
}

/* Tresc pomocnicza dla czytnikow ekranu. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--snieg);
	clip-path: none;
	color: var(--wp--preset--color--granat);
	height: auto;
	left: 5px;
	padding: 0.8rem 1.2rem;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Marka w naglowku: szeryf i spacjowany podpis pod kreska. */
.szt-znak {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	text-decoration: none;
}

.szt-znak strong {
	font-family: var( --wp--preset--font-family--rytownia );
	font-size: var( --wp--preset--font-size--sredni );
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var( --wp--preset--color--atrament );
}

.szt-znak span {
	font-size: var( --wp--preset--font-size--drobny );
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --wp--preset--color--cichy );
	border-top: 1px solid var( --wp--preset--color--linia );
	padding-top: 0.35rem;
	margin-top: 0.35rem;
	width: 100%;
}

/* Szeroka tresc nigdy nie przewija calej strony w bok. */
.wp-block-table,
.szt-przewin {
	overflow-x: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Pasek nawigacji: drugi rzad naglowka --- */
/* Odstep robi padding odnosnika, nie blockGap: dzieki temu przestrzen miedzy
   pozycjami jest klikalna i podswietlenie hover nie ma dziur. */
.szt-pasek-nawigacji .wp-block-navigation-item__content {
	padding: 0.85rem 1.5rem;
	text-decoration: none;
}

/* Na waskim ekranie pozycje musza zmiescic sie w rzedzie, wiec padding maleje. */
@media ( max-width: 1100px ) {
	.szt-pasek-nawigacji .wp-block-navigation-item__content {
		padding-inline: 1rem;
	}
}

.szt-pasek-nawigacji .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.szt-pasek-nawigacji .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: rgb( 250 250 248 / 12% );
}

/* Pozycje sa wysrodkowane, wiec zaden element nie dostaje wyjatku na padding —
   skasowanie go przy pierwszej pozycji przesunelo by caly rzad w lewo o 1rem. */

/* Lista rozwijana: wlasne tlo, bo dziedziczy po pasku i bylaby przezroczysta. */
.szt-pasek-nawigacji .wp-block-navigation__submenu-container {
	background: var( --wp--preset--color--granat );
	border: 0;
	padding-block: 0.35rem;
	box-shadow: 0 10px 28px -14px rgb( 26 26 26 / 55% );
}

/* Szerokosc nalezy sie WYLACZNIE liscie otwartej. WordPress zwija zamknieta
   do width:0, ale min-width bije width, wiec globalna regula rozpychala
   niewidoczny element do 15rem. Przy 768 px, gdzie menu jest juz poziome,
   a hamburger jeszcze nie, panel wystawal poza prawa krawedz i dawal
   poziome przewijanie calej strony: 856 px dokumentu na 768 px okna.
   Ukryty element nie ma prawa decydowac o szerokosci dokumentu.
   Listy otwiera tylko klikniecie (submenuVisibility "click" w
   parts/header.html), wiec otwarta jest wylacznie lista za przyciskiem
   z aria-expanded="true". Regula na :hover dawalaby szerokosc liscie,
   ktora przy najechaniu zostaje ukryta. */
.szt-pasek-nawigacji .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 15rem;
}

.szt-pasek-nawigacji .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	font-size: var( --wp--preset--font-size--drobny );
	letter-spacing: 0.03em;
	text-transform: none;
	font-weight: 400;
}

/* Pozycja z lista jest przyciskiem na cala wysokosc paska. Wczesniej liste
   otwieral osobny przelacznik 7 x 7 px obok odnosnika: mysza trudno trafic,
   palcem na tablecie (menu poziome dziala od 600 px) prawie wcale.
   Strzalka lezy w prawym wypelnieniu przycisku, wiec jest czescia celu,
   a nie osobnym celem (pointer-events: none nadaje jej rdzen). */
@media ( min-width: 600px ) {
	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation-submenu__toggle {
		padding-inline: 1.5rem 2.4rem;
	}

	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation__submenu-icon {
		position: absolute;
		inset-inline-end: 1.2rem;
		top: 50%;
		width: 0.75em;
		height: 0.75em;
		margin: 0;
		transform: translateY( -50% );
		opacity: 0.8;
	}

	/* Otwarta lista ma podswietlona pozycje, zeby bylo widac, czyja jest. */
	.szt-pasek-nawigacji .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
		background: rgb( 250 250 248 / 12% );
	}
}

@media ( min-width: 600px ) and ( max-width: 1100px ) {
	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation-submenu__toggle {
		padding-inline: 1rem 1.9rem;
	}

	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation__submenu-icon {
		inset-inline-end: 0.8rem;
	}
}

/* Tablet w pionie (600-781 px): siedem pozycji miesci sie w jednym rzedzie
   dopiero przy ciasniejszym wypelnieniu. Przy 700 px ostatnia pozycja
   spadala do drugiego rzedu i dokladala 47 px wysokosci. */
@media ( min-width: 600px ) and ( max-width: 781px ) {
	.szt-pasek-nawigacji .wp-block-navigation__container > li > a.wp-block-navigation-item__content {
		padding-inline: 0.7rem;
	}

	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation-submenu__toggle {
		padding-inline: 0.7rem 1.5rem;
	}

	.szt-pasek-nawigacji .open-on-click > .wp-block-navigation__submenu-icon {
		inset-inline-end: 0.6rem;
	}
}

/* Focus musi byc widoczny na ciemnym tle: obrys w barwie tekstu, nie akcentu.
   Dotyczy takze przyciskow (pozycje z lista, menu, zamkniecie), bo globalny
   obrys jest granatowy, czyli na granatowym pasku niewidoczny. */
.szt-pasek-nawigacji :is( a, button ):focus-visible {
	outline: 2px solid var( --wp--preset--color--snieg );
	outline-offset: -2px;
}

/* W nakladce mobilnej rdzen zeruje wypelnienie pozycji, wiec obrys fokusu
   przylegal do liter pierwszej pozycji, na ktora nakladka od razu
   przenosi fokus. */
.szt-pasek-nawigacji .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding-inline: 0.75rem;
}

/* Wyszukiwarka w naglowku: waska, bez zaokraglen. Krawedz w kolorze
   cichym, bo linia (1,32:1 na bialym) nie spelniala progu 3:1 dla
   granic pol formularza i pole bylo niewidoczne. */
.wp-block-search__input {
	border: 1px solid var( --wp--preset--color--cichy );
	padding: 0.5rem 0.7rem;
	font-size: var( --wp--preset--font-size--maly );
}

@media ( max-width: 781px ) {
	.szt-pasek-nawigacji .wp-block-navigation__responsive-container-open {
		padding: 0.8rem 0;
	}
	.szt-pasek-nawigacji .wp-block-navigation__submenu-container {
		box-shadow: none;
	}
}

/* --- Znak marki --- */
.wp-block-site-logo img {
	display: block;
	height: auto;
}

/* Stopka i pasek nawigacji stoja na ciemnym tle — tam idzie jasny wariant znaku. */
.szt-znak-jasny {
	max-width: 220px;
	height: auto;
}

/* --- Gorny pas naglowka: znak posrodku, ikony i wyszukiwarka po prawej --- */
/* Siatka 1fr auto 1fr centruje srodkowa kolumne niezaleznie od szerokosci bokow,
   wiec znak stoi na osi strony bez zadnych sztuczek z pozycjonowaniem. */
.szt-gorny-pas {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
}

.szt-gorny-pas .szt-marka {
	grid-column: 2;
	align-items: center;
	text-align: center;
}

.szt-gorny-pas .szt-marka .wp-block-site-tagline {
	text-align: center;
}

.szt-gorny-pas .szt-spoleczne {
	grid-column: 3;
	justify-self: end;
}

/* Pas jest siatka, a WordPress dokleja drugiemu dziecku margines z blockGap
   (uklad "flow"). W siatce margines nie znika, tylko spycha ikony i lupe
   o 14 px ponizej osi znaku. Odstep miedzy kolumnami robi gap. */
.szt-naglowek .szt-gorny-pas > * {
	margin-block: 0;
}

/* --- Naglowek na telefonie i tablecie: jeden rzad --- */
/* Pomiar przy 390 x 844: znak 220 px, podpis w dwoch wierszach, ikony
   spolecznosciowe i granatowy pas z samym przyciskiem menu dawaly 326 px
   (39% ekranu), zanim pojawila sie tresc. Znak idzie w lewo i maleje do
   130 px, lupa zostaje po prawej, podpis znika (pod tak malym znakiem bylby
   nieczytelny). Ikony spolecznosciowe znikaja dopiero ponizej 600 px, gdzie
   ich miejsce zajmuje przycisk menu; te same cztery profile sa w stopce. */
@media ( max-width: 781px ) {
	.szt-gorny-pas {
		grid-template-columns: auto minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--30 );
	}

	.szt-gorny-pas .szt-marka {
		grid-column: 1;
		align-items: flex-start;
	}

	.szt-gorny-pas .szt-spoleczne {
		grid-column: 2;
		justify-self: end;
	}

	.szt-gorny-pas .wp-block-site-logo img {
		width: 130px;
	}

	.szt-gorny-pas .wp-block-site-tagline {
		display: none;
	}
}

/* Ponizej 600 px WordPress chowa menu za przyciskiem. Granatowy pas niosl
   wtedy tylko ten przycisk i dokladal 50 px wysokosci, wiec przycisk
   przechodzi do rzedu znaku jako granatowe pole z podpisem "Menu" (sama
   ikona kresek nie dla kazdego znaczy menu). Nakladka z menu ma
   position: fixed, wiec przeniesienie przycisku jej nie rusza. */
@media ( max-width: 599px ) {
	.szt-naglowek {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: center;
	}

	.szt-naglowek > .szt-pasek-nawigacji {
		padding-inline: 0;
		margin-inline-end: var( --wp--style--root--padding-right, 12px );
	}

	.szt-gorny-pas .wp-block-social-links {
		display: none;
	}

	/* Lupa i "Menu" stoja obok siebie, wiec maja te sama wysokosc 44 px. */
	.szt-gorny-pas .wp-block-search__button {
		padding: 0.625rem;
	}

	/* Rozwiniete pole wyszukiwania nachodzilo na znak. Na czas wpisywania
	   znak ustepuje mu miejsca i wraca, gdy pole straci fokus (rdzen zwija
	   je sam, jesli jest puste). min-height trzyma wysokosc rzedu, zeby
	   tresc pod naglowkiem nie podskakiwala. */
	.szt-gorny-pas:has( .wp-block-search:not( .wp-block-search__searchfield-hidden ) ) {
		grid-template-columns: minmax( 0, 1fr );
		min-height: 77px;
	}

	.szt-gorny-pas:has( .wp-block-search:not( .wp-block-search__searchfield-hidden ) ) .szt-marka {
		display: none;
	}

	.szt-gorny-pas:has( .wp-block-search:not( .wp-block-search__searchfield-hidden ) ) .szt-spoleczne {
		grid-column: 1;
		justify-self: stretch;
	}

	.szt-gorny-pas .wp-block-search:not( .wp-block-search__searchfield-hidden ) {
		flex: 1;
	}

	.szt-gorny-pas .wp-block-search:not( .wp-block-search__searchfield-hidden ) .wp-block-search__inside-wrapper {
		width: 100%;
	}

	.szt-pasek-nawigacji .wp-block-navigation__responsive-container-open {
		gap: 0.45rem;
		align-items: center;
		padding: 0 0.75rem;
	}

	.szt-pasek-nawigacji .wp-block-navigation__responsive-container-open::after {
		content: "Menu";
		font-family: var( --wp--preset--font-family--dane );
		font-size: var( --wp--preset--font-size--drobny );
		font-weight: 600;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}
}

/* --- Kadr karty: pigulka kategorii lezy na zdjeciu --- */
.szt-kadr {
	position: relative;
	overflow: hidden;
}

.szt-kadr .wp-block-post-featured-image {
	margin: 0;
}

.szt-kadr .szt-pigulka {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	margin: 0;
	z-index: 1;
}

/* Tlo pod sam tekst kategorii, nie pod caly blok — inaczej pasek ciagnie sie
   przez cala szerokosc zdjecia nawet przy jednym slowie. */
.szt-kadr .szt-pigulka a,
.szt-kadr .szt-pigulka .wp-block-post-terms__separator {
	background: var( --wp--preset--color--akcent );
	color: var( --wp--preset--color--snieg );
	padding: 0.22rem 0.5rem;
	text-decoration: none;
	display: inline-block;
}

.szt-kadr .szt-pigulka .wp-block-post-terms__separator {
	padding-inline: 0;
}

.szt-kadr .szt-pigulka a:hover {
	background: var( --wp--preset--color--czerwien );
}

/* --- Slot reklamowy w kolumnie bocznej --- */
/* Etykieta "Reklama" musi zostac widoczna nad kazda kreacja: tego wymaga
   prawo prasowe i wytyczne Google. Nie chowac jej do sr-only. */
.szt-etykieta-reklamy {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0;
}

/* Kreska przerywana odroznia pusty slot od tresci redakcyjnej. Po wstawieniu
   kreacji partnera podmien ja na ciagla albo usun ramke calkiem. */
.szt-slot-reklamowy .szt-kreacja {
	border: 1px dashed var( --wp--preset--color--linia );
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --wp--preset--spacing--30 );
}

.szt-slot-reklamowy .szt-kreacja img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- Kolumny wynikow i klasyfikacji rownaja wysokosc --- */
.szt-rowna-wysokosc {
	display: flex;
	flex-direction: column;
}

.szt-rowna-wysokosc > * {
	flex: 1;
}

.szt-karta-danych {
	height: 100%;
}

/* --- Znak w stopce --- */
.szt-znak-stopki {
	align-items: center;
	text-align: center;
}

.szt-znak-stopki .wp-block-site-logo {
	margin: 0;
}

/* Ikony spolecznosciowe w stopce stoja na osi razem ze znakiem. */
.szt-znak-stopki .wp-block-social-links {
	justify-content: center;
}

/* Kafle glownych dzialow: szesc w jednym wierszu, zawijanie dopiero na waskich ekranach. */
.szt-siatka-kafli.is-layout-grid {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
}

.szt-siatka-kafli > * {
	min-width: 0;
}

@media ( max-width: 1100px ) {
	.szt-siatka-kafli.is-layout-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.szt-siatka-kafli.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Ikony kafli w kolorze akcentu — kolor dziedziczy SVG przez currentColor. */
/* Domyslna barwa ikony to granat — ikona towarzyszy tresci i nie ma wolac
   o klikniecie. Czerwien dostaja tylko kafle hubow, ktore SA nawigacja
   (nadpisanie przy .szt-siatka-kafli nizej w tym pliku). */
.szt-ikona {
	display: block;
	color: var( --wp--preset--color--granat );
}

.szt-ikona svg {
	width: 2rem;
	height: 2rem;
}

/* Caly pas hubow idzie na pelna szerokosc okna: naglowek, zajawka i kafle
   stoja na tej samej osi co reszta strony, ale nie sciska ich contentSize.
   Padding siedzi na pasie, nie na siatce — inaczej naglowek zaczynalby sie
   w innym miejscu niz pierwszy kafel. */
.szt-pas-hubow {
	padding-inline: var( --wp--style--root--padding-left, 12px );
}

/* --- Kolumna boczna konczy sie rowno z kolumna glowna --- */
/* Kolumny sa flexem, wiec dziecko z flex:1 wchlania roznice wysokosci.
   Dziala tylko wtedy, gdy kolumna boczna jest KROTSZA — dlatego z jej tresci
   usunieto noty redakcyjne, ktore byly dwa razy dluzsze od kart, ktore opisywaly. */
.wp-block-columns:has( > .szt-rowna-wysokosc ) {
	align-items: stretch;
}

.szt-kolumna-boczna {
	display: flex;
	flex-direction: column;
}

.szt-kolumna-boczna > *:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* --- Karta produktu: miniatura obok tekstu --- */
/* Zdjecie 1:1 nad tekstem zajmowalo w waskiej kolumnie okolo 230 px na karte,
   czyli 700 px na trzy produkty. Uklad poziomy schodzi do 72 px. */
.szt-karta-produktu {
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	align-items: flex-start;
}

.szt-zdjecie-produktu {
	flex: none;
	margin: 0;
	inline-size: 112px;
	background: var( --wp--preset--color--snieg );
}

.szt-zdjecie-produktu img {
	inline-size: 112px;
	block-size: 112px;
	object-fit: contain;
	display: block;
}

/* Na waskim ekranie miniatura schodzi, zeby nie zjadala szerokosci tekstu. */
@media ( max-width: 520px ) {
	.szt-zdjecie-produktu,
	.szt-zdjecie-produktu img {
		inline-size: 84px;
	}

	.szt-zdjecie-produktu img {
		block-size: 84px;
	}
}

.szt-tresc-produktu {
	flex: 1;
	min-inline-size: 0;
}

.szt-tresc-produktu > * {
	margin-block: 0;
}

.szt-tresc-produktu > * + * {
	margin-block-start: 0.15rem;
}

/* --- Akcent marki --- */
/* Czerwien wystepuje w dwoch rolach i nie wolno ich pomylic:
     akcent  #D71C1E  marka: przyciski, chipy, ikony, aktywna kropka
     czerwien #B4121F znaczenie: Polak w tabeli, konkurs odwolany
   Roznia sie miedzy soba tylko 1,34:1, wiec KOLOR NIE MOZE byc jedynym nosnikiem
   znaczenia. Polak ma dodatkowo pogrubienie i kod kraju, odwolany przekreslenie. */
/* Kafle hubow SA nawigacja, wiec ich ikony dostaja akcent — inaczej niz ikony
   towarzyszace tresci, ktore stoja w granacie (regula bazowa wyzej). */
.szt-siatka-kafli .szt-ikona {
	color: var( --wp--preset--color--akcent );
	text-align: center;
}

/* SVG jest elementem inline, wiec text-align na rodzicu go centruje. */
.szt-siatka-kafli .szt-ikona svg {
	display: inline-block;
}

/* Kafel jest kolumna: ikona, nazwa, opis, przycisk. Opis rozpycha sie
   (flex-grow), wiec przycisk siada przy dolnej krawedzi niezaleznie od tego,
   czy opis ma jeden wiersz czy trzy. Bez tego przyciski stoja na roznych
   wysokosciach, co przy wysrodkowanym tekscie widac natychmiast. */
.szt-siatka-kafli > .szt-kafel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
}

.szt-kafel__opis {
	flex: 1;
	margin-block-end: var( --wp--preset--spacing--30 );
}

.szt-kafel__akcja {
	margin: 0;
}

/* Przycisk obrysowy: chrome, nie akcent. Czerwien nosi hero i pigulki
   kategorii; szesc czerwonych przyciskow obok siebie przebilo by je wszystkie. */
.szt-przycisk-obrys {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	border: 1px solid var( --wp--preset--color--linia );
	padding: 0.5rem 1rem;
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--drobny );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--atrament );
	background: transparent;
}

.szt-przycisk-obrys:hover,
.szt-przycisk-obrys:focus-visible {
	border-color: var( --wp--preset--color--akcent );
	color: var( --wp--preset--color--akcent );
}

/* Na telefonie szesc kafli z opisem i przyciskiem zajmowalo ok. 930 px, czyli
   ponad ekran samej nawigacji. Ponizej 640 px zostaje ikona i nazwa, a
   odnosnik "Zobacz" traci wyglad przycisku i przez ::after pokrywa caly
   kafel: klik w dowolne miejsce dziala, a czytnik slyszy nadal jeden
   odnosnik z pelna nazwa z aria-label. Na komputerze nic sie nie zmienia. */
@media ( max-width: 640px ) {
	/* Padding siedzi w atrybucie style bloku grupy, dlatego tylko !important
	   moze go tu zmniejszyc bez ruszania wygladu na komputerze. */
	.szt-siatka-kafli > .szt-kafel {
		position: relative;
		justify-content: center;
		padding-block: var( --wp--preset--spacing--50 ) !important;
	}

	/* Najdluzsza nazwa, KLASYFIKACJE, przy 320 px wychodzila poza ramke kafla.
	   Rozmiar idzie za szerokoscia okna; !important, bo klasa rozmiaru z
	   presetu rdzenia sama ma !important. */
	.szt-siatka-kafli > .szt-kafel {
		padding-inline: var( --wp--preset--spacing--30 ) !important;
	}

	.szt-siatka-kafli .szt-kafel__nazwa {
		font-size: min( var( --wp--preset--font-size--sredni ), 4.4vw ) !important;
	}

	.szt-siatka-kafli .szt-kafel__opis {
		display: none;
	}

	.szt-siatka-kafli .szt-kafel__akcja {
		margin: 0;
		block-size: 0;
	}

	.szt-siatka-kafli .szt-przycisk-obrys {
		position: static;
		display: block;
		border: 0;
		padding: 0;
		font-size: 0;
		line-height: 0;
	}

	.szt-siatka-kafli .szt-przycisk-obrys::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.szt-siatka-kafli .szt-przycisk-obrys:focus-visible {
		outline: none;
	}

	.szt-siatka-kafli .szt-przycisk-obrys:focus-visible::after {
		outline: 2px solid var( --wp--preset--color--akcent );
		outline-offset: -2px;
	}

	.szt-siatka-kafli > .szt-kafel:has( .szt-przycisk-obrys:hover ) {
		border-color: var( --wp--preset--color--akcent ) !important;
	}
}

/* --- Lista popularnych artykulow --- */
/* Numer niesie licznik CSS, a nie znacznik listy: dzieki temu da sie go
   ustawic w kolumnie o stalej szerokosci i dac mu wlasny kolor, czego
   natywny marker <ol> nie pozwala zrobic w zaden przenosny sposob.
   Lista zostaje <ol>, wiec czytnik ekranu dalej slyszy "1 z 5". */
.szt-popularne {
	list-style: none;
	counter-reset: szt-popularne;
	padding-inline-start: 0;
	margin: 0;
}

.szt-popularne li {
	counter-increment: szt-popularne;
	border-block-start: 1px solid var( --wp--preset--color--linia );
}

.szt-popularne li:first-child {
	border-block-start: 0;
}

.szt-popularne a {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.35rem;
	align-items: baseline;
	padding-block: 0.7rem;
	color: var( --wp--preset--color--atrament );
	text-decoration: none;
	line-height: 1.35;
}

.szt-popularne a::before {
	content: counter( szt-popularne );
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--sredni );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--linia );
	text-align: start;
}

/* Podkreslenie pojawia sie przy najechaniu, a nie stoi pod kazda pozycja:
   piec podkreslonych wierszy pod soba czyta sie jak plot, nie jak lista. */
.szt-popularne a:hover,
.szt-popularne a:focus-visible {
	color: var( --wp--preset--color--akcent );
}

/* Numer NIE zmienia sie przy najechaniu. Gdy czerwienial razem z tytulem,
   caly wiersz czytal sie jak jedno podkreslone pole i numer przestawal
   pelnic role porzadkujaca. Wyroznienie niesie wylacznie tytul. */

.szt-popularne a:hover span,
.szt-popularne a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Odnosnik "Zobacz wszystkie" przy naglowku sekcji. Stoi obok duzego naglowka,
   wiec zwykly maly tekst przy nim ginie. Wersaliki, pogrubienie i podkreslenie
   z odstepem dajac mu wage, nie robiac z niego drugiego naglowka. */
.szt-odnosnik-dzialu {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--drobny );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--atrament );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.szt-odnosnik-dzialu:hover,
.szt-odnosnik-dzialu:focus-visible {
	color: var( --wp--preset--color--akcent );
}

.szt-odnosnik-dzialu:hover .szt-strzalka {
	transform: translateX( 0.2em );
}

.szt-wiecej {
	margin: 0;
}

/* Strzalka odjezdza w prawo przy najechaniu — ruch tylko dla tych, ktorzy
   go nie wylaczyli (globalna regula prefers-reduced-motion wyzej). */
.szt-strzalka {
	transition: transform 0.15s ease;
}

.szt-przycisk-obrys:hover .szt-strzalka {
	transform: translateX( 0.2em );
}

/* --------------------------------------------------------------------------
   Biografia w profilu zawodnika

   Tekst ciagly na 980 px daje ponad 100 znakow w wierszu. Oko gubi poczatek
   nastepnej linii, wiec kolumna tekstu jest wezsza niz kolumna ukladu,
   a tabele, zdjecia i cytaty moga byc szersze.
   -------------------------------------------------------------------------- */
/* Szerokosc kolumny czytelnej. Na :root, bo korzysta z niej takze spis
   tresci i karty danych w profilach — wczesniej zmienna zyla tylko wewnatrz
   tresci, wiec reszta elementow wracala do 980 px i tekst rozjezdzal sie
   na dwie osie. */
:root {
	--szt-kolumna: 44rem;
}

/* Selektor z „main" ma wyzsza specyficznosc niz reguly ukladu generowane
   przez WordPressa (one uzywaja :where, czyli zerowej wagi). Bez tego
   max-width z bloku przegrywal z max-width kontenera. */
main .szt-spis,
main .szt-profil-obiektu,
main .szt-profil-zawodnika,
main .szt-pasek-wpisu,
main .szt-stopka-wpisu {
	max-width: var( --szt-kolumna );
	margin-inline: auto;
	box-sizing: border-box;
}

.szt-biografia > p,
.szt-biografia > ul,
.szt-biografia > ol,
.szt-biografia > h2,
.szt-biografia > h3,
.szt-biografia > blockquote {
	max-width: var( --szt-kolumna );
	margin-inline: auto;
}

.szt-biografia > p {
	line-height: 1.7;
	margin-block: 0 var( --wp--preset--spacing--40 );
}

/* Pierwszy akapit jest lidem: zapowiada tekst i konczy sie tam, gdzie
   czytelnik decyduje, czy czyta dalej. */
.szt-biografia > p:first-of-type {
	font-size: var( --wp--preset--font-size--sredni );
	line-height: 1.5;
}

.szt-biografia > h2 {
	font-family: var( --wp--preset--font-family--rytownia );
	font-size: var( --wp--preset--font-size--duzy );
	line-height: 1.2;
	margin-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--30 );
	padding-block-end: var( --wp--preset--spacing--20 );
	border-bottom: 1px solid var( --wp--preset--color--linia );
}

/* Naglowek nigdy nie zostaje sam na dole ekranu. */
.szt-biografia > h2 {
	break-after: avoid;
	page-break-after: avoid;
}

.szt-biografia > ul,
.szt-biografia > ol {
	line-height: 1.7;
	margin-block: 0 var( --wp--preset--spacing--40 );
	padding-inline-start: 1.4em;
}

.szt-biografia > ul li,
.szt-biografia > ol li {
	margin-block-end: var( --wp--preset--spacing--20 );
}

/* Zdjecie rowna sie do kolumny tekstu. Szersze zdjecie tworzy druga os,
   ktora oko lapie jako niechlujstwo, a nie jako rytm. Redakcja moze wyjsc
   poza kolumne swiadomie: wyrownanie „szerokie" albo „pelne" w edytorze. */
.szt-biografia figure {
	margin-block: var( --wp--preset--spacing--50 );
	margin-inline: auto;
	max-width: var( --szt-kolumna );
}

.szt-biografia figure.alignwide {
	max-width: min( 100%, 1100px );
}

.szt-biografia figure.alignfull {
	max-width: none;
}

.szt-biografia figure img {
	display: block;
	width: 100%;
	height: auto;
}

.szt-biografia figcaption {
	margin-block-start: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--drobny );
	color: var( --wp--preset--color--cichy );
	text-align: left;
}

/* „ZOBACZ TEŻ" w srodku tekstu to odsylacz redakcyjny, nie akapit ciagly:
   dostaje wciecie i pasek, zeby oko go omijalo przy czytaniu ciaglym. */
.szt-biografia > p:has( > strong:first-child ) {
	padding-inline-start: var( --wp--preset--spacing--30 );
	border-inline-start: 3px solid var( --wp--preset--color--lod );
	font-size: var( --wp--preset--font-size--maly );
}

/* --------------------------------------------------------------------------
   Tabele w treści profili i wpisów

   Tabele przychodzą z produkcji bez klas i bez stylów: kolumny zlewały się
   w jeden ciąg, bo przeglądarka nie ma czym ich rozdzielić. Wygląd jak
   w komponentach K1 i K3, żeby dane wszędzie czytało się tak samo.
   -------------------------------------------------------------------------- */
.szt-biografia .wp-block-table,
.szt-biografia > figure.wp-block-table {
	max-width: var( --szt-kolumna );
	margin-inline: auto;
	margin-block: var( --wp--preset--spacing--40 );
	overflow-x: auto;
}

.szt-biografia table {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--maly );
	font-variant-numeric: tabular-nums;
}

.szt-biografia table th {
	text-align: left;
	padding: 0.6rem 0.7rem;
	border-bottom: 2px solid currentColor;
	font-size: var( --wp--preset--font-size--drobny );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	white-space: nowrap;
}

.szt-biografia table td {
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var( --wp--preset--color--linia );
	vertical-align: top;
}

/* Pierwsza kolumna to zwykle data albo pozycja — nie ma powodu, zeby sie
   lamala na dwie linie, gdy obok jest miejsce. */
.szt-biografia table td:first-child {
	white-space: nowrap;
}

/* Wiersz bez naglowka tabeli (czesc tresci z produkcji nie ma thead):
   pierwszy wiersz dostaje wyroznienie, zeby dalo sie odczytac kolumny. */
.szt-biografia table tr:first-child td {
	font-weight: 600;
	border-bottom-width: 2px;
}

/* Model pudelka dla elementow kolumny: bez tego akapit z paskiem bocznym
   dolicza padding i obramowanie DO szerokosci i wychodzi poza wspolna os. */
.szt-biografia > *,
.szt-biografia figure {
	box-sizing: border-box;
}

/* Sekcja „Pozostałe wiadomości" na stronie głównej: lista, nie siatka.
   Zdjęcie po lewej, treść po prawej, wiersze oddzielone linią. Na wąskim
   ekranie kolumny i tak układają się jedna pod drugą. */
.szt-pozostale .wp-block-post-featured-image img {
	border-radius: 2px;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.szt-pozostale .wp-block-post-title {
	line-height: 1.25;
}

.szt-pozostale .wp-block-columns:last-child {
	border-bottom: 0 !important;
}

/* Stopka: linki bez stałego wyróżnienia. Kilkadziesiąt granatowych,
   podkreślonych odnośników obok siebie czyta się jak ostrzeżenie, a nie
   jak spis treści. Kolor i podkreślenie pojawiają się przy najechaniu
   i przy klawiaturze, więc nawigacja nadal jest widoczna, gdy jej szukasz. */
footer.wp-block-group a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

footer.wp-block-group a:where(:not(.wp-element-button)):hover,
footer.wp-block-group a:where(:not(.wp-element-button)):focus-visible {
	color: var( --wp--preset--color--granat, #1c3f60 );
	text-decoration: underline;
}

/* Kolumny stopki wysrodkowane: bez podkreslen kolumny straciły lewa
   krawedz, ktora je porzadkowala, a wysrodkowanie daje im wspolna os. */
footer.wp-block-group .wp-block-columns .wp-block-column {
	text-align: center;
}

/* Szesc grup menu jedna pod druga dawalo na telefonie ponad 1 100 px
   stopki. W dwoch kolumnach grupy staja parami (Terminarz i Wyniki,
   Cykle i Artykuly, Wiedza i Redakcja), a najdluzsza etykieta
   ("Turniej Czterech Skoczni") miesci sie w polowie ekranu 360 px. */
@media ( max-width: 781px ) {
	footer.wp-block-group .wp-block-columns {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Notatki redakcyjne. Akapity z klasa szt-do-uzupelnienia sa zadaniem dla
   redakcji, nie trescia dla czytelnika. Bez reguly czytaly sie jak zwykly
   tekst: na stronie "O nas" widnialo zdanie "Do uzupelnienia: kto zalozyl
   serwis", czyli strona budujaca zaufanie przyznawala sie do pustki.
   Zalogowany widzi je nadal, i to wyrazniej, wiec zadanie nie ginie. */
.szt-do-uzupelnienia {
	display: none;
}

.logged-in .szt-do-uzupelnienia {
	display: block;
	border-left: 3px solid var( --wp--preset--color--akcent, #c1272d );
	padding: 0.6rem 0 0.6rem 0.9rem;
	background: rgb( 193 39 45 / 4% );
	font-size: var( --wp--preset--font-size--drobny, 0.85rem );
	font-style: italic;
}

.logged-in .szt-do-uzupelnienia::before {
	content: "Widoczne tylko dla zalogowanych. ";
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78em;
}

/* --- Dotyk i czytelnosc na malych ekranach --- */

/* Pozycje menu mobilnego mialy 19 px wysokosci (podmenu 31 px), a przycisk
   zamykajacy 24x24. Kciuk trafia w takie cele na chybil trafil, wiec kazda
   pozycja dostaje wysokosc, przy ktorej pomylka przestaje byc regula.
   Wartosc 44 px to prog, ponizej ktorego bledne trafienia rosna gwaltownie. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	min-height: 44px;
	display: flex;
	align-items: center;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
}

/* Kolumna tekstu na tablecie siegala 732 px, czyli blisko stu znakow w linii.
   Oko gubi poczatek nastepnego wiersza gdzies powyzej osiemdziesieciu, wiec
   tekst ciagly wpisu dostaje wlasny sufit liczony w znakach, nie w pikselach:
   przy zmianie stopnia pisma miara zostaje ta sama. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > blockquote {
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Tresc wpisu: jedna os tekstu, srodtytuly, archiwum na telefonie

   We wpisie akapity mialy 68ch, a srodtytuly i zdjecia 980 px: na komputerze
   srodtytul stal 146 px na lewo od akapitu, ktory zapowiadal. Teraz tekst,
   srodtytuly, spis tresci, pasek wpisu i stopka stoja na jednej osi
   --szt-kolumna (44rem, tyle co dawne 68ch w kroju tekstu). Jednostka rem,
   a nie ch: ch liczy sie z kroju elementu, wiec srodtytul w Playfair
   dostawalby inna szerokosc niz akapit w Plex i znow rozjezdzal os.
   Tylko wpisy (.single-post) i zwykle strony (nizej): huby maja srodtytuly
   nad szerokimi tabelami i tam naglowek ma stac nad tabela, nie nad
   kolumna tekstu.
   -------------------------------------------------------------------------- */
.single-post .wp-block-post-content > p,
.single-post .wp-block-post-content > ul,
.single-post .wp-block-post-content > ol,
.single-post .wp-block-post-content > blockquote,
.single-post .wp-block-post-content > :is(h1, h2, h3, h4, h5, h6),
.single-post .wp-block-post-content > div:not([class]) {
	max-width: var( --szt-kolumna );
}

/* Zwykle strony (O nas, Kontakt: page.html, klasa page-template-default).
   Regula 68ch liczona w roznych stopniach pisma dawala na 1440 px piec
   krawedzi: tytul i srodtytuly 980 px, lid w wiekszym stopniu 959 px,
   spis 704 px, akapity 689 px, przypis w mniejszym stopniu 572 px. Strona
   nie ma zdjecia, ktore trzymaloby szeroka os pod tytulem, wiec cala,
   razem z okruszkami i tytulem, stoi w kolumnie tekstu. Huby maja wlasne
   szablony (page-template-hub-*) i tej reguly nie dostaja. Zdjecia, tabele
   i bloki pelnej szerokosci zostaja szersze. */
.page-template-default main > .wp-block-group:has( > .wp-block-post-title ),
.page-template-default .wp-block-post-content > :not( figure, table, .alignfull ) {
	max-width: var( --szt-kolumna );
}

/* Huby (page-template-hub-*): tytul, srodtytuly i tabele stoja na 980 px,
   a akapity (68ch) i spis (--szt-kolumna) byly srodkowane w tej szerokosci,
   wiec na komputerze zaczynaly sie 138-146 px na prawo od tytulu. Zwezenie
   calej kolumny scisneloby tabele, wiec waskie bloki zostaja waskie, ale
   startuja od lewej krawedzi tresci. Margines liczony od szerokosci
   kontenera: ponizej 980 px wynosi zero. !important, bo uklad
   „constrained" rdzenia ustawia margin auto z !important. */
[class*="page-template-hub-"] main .szt-spis,
[class*="page-template-hub-"] .wp-block-post-content > :is( p, ul, ol, blockquote ) {
	margin-inline-start: max( 0px, ( 100% - var( --wp--style--global--content-size, 980px ) ) / 2 ) !important;
	margin-inline-end: auto !important;
}

/* Okladka bez zdjecia w tle to w archiwum sekcja z trescia, nie obraz:
   w „Redakcji portalu" 18 sekcji osob stalo na 980 px od innej krawedzi
   niz spis tresci nad nimi. Okladka ze zdjeciem zostaje szeroka. */
.single-post .wp-block-post-content > .wp-block-cover:not( .alignwide, .alignfull, :has( > .wp-block-cover__image-background, > .wp-block-cover__video-background ) ) {
	max-width: var( --szt-kolumna );
}

/* Wyjatek dla ukladow, ktore z zalozenia biora cala szerokosc: zdjecia
   i tabele moga byc szersze niz tekst, bo nie czyta sie ich wierszami. */
.wp-block-post-content > .alignwide,
.wp-block-post-content > .alignfull,
.wp-block-post-content > figure,
.wp-block-post-content > table {
	max-width: none;
}

/* Srodtytuly. 79% wpisow zaczynalo tresc od h4 w stopniu tekstu, wiec
   „Seria probna" czytala sie jak pogrubiony akapit. Poziomy porzadkuje
   filtr (moduly/wpis.php: najwyzszy srodtytul tresci to h2), a tu kazdy
   poziom dostaje wyrazny wyglad: odstep nad, mniejszy pod, wlasny stopien. */
.single-post .wp-block-post-content > :is(h2, h3, h4, h5, h6) {
	margin-block: var( --wp--preset--spacing--70, 2.25rem ) var( --wp--preset--spacing--30, 0.75rem );
	line-height: 1.25;
	text-wrap: balance;
	break-after: avoid;
}

.single-post .wp-block-post-content > h2 {
	font-family: var( --wp--preset--font-family--rytownia );
	font-size: var( --wp--preset--font-size--sredni );
	font-weight: 700;
	letter-spacing: -0.005em;
}

.single-post .wp-block-post-content > h3 {
	font-family: var( --wp--preset--font-family--dane );
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: 0;
}

.single-post .wp-block-post-content > :is(h4, h5, h6) {
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--maly );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Srodtytuly z rozmiarem nadanym w edytorze produkcji (klasa
   has-medium-font-size w 27 wpisach, has-small-font-size w 3, rozmiar
   w stylu wbudowanym w 2). Klasa rdzenia ma !important i wygrywala
   z regulami wyzej: w sylwetce Fridy Westman „Poczatki kariery" miala
   na telefonie 14 px przy akapicie 16 px, a inny srodtytul tego samego
   tekstu 20 px. Kazdy poziom wraca do wlasnego stopnia. */
.single-post .wp-block-post-content > h2:is( [class*="-font-size"], [style*="font-size"] ) {
	font-size: var( --wp--preset--font-size--sredni ) !important;
}

.single-post .wp-block-post-content > h3:is( [class*="-font-size"], [style*="font-size"] ) {
	font-size: 1.1875rem !important;
}

.single-post .wp-block-post-content > :is(h4, h5, h6):is( [class*="-font-size"], [style*="font-size"] ) {
	font-size: var( --wp--preset--font-size--maly ) !important;
}

/* Wyjatek: naglowek wyrownany do prawej z rozmiarem w stylu to w archiwum
   dopisek o zrodlach (8 px), nie srodtytul. Dostaje stopien podpisu,
   zeby dalo sie go przeczytac i nie udawal naglowka. */
.single-post .wp-block-post-content > :is(h2, h3, h4, h5, h6).has-text-align-right[style*="font-size"] {
	font-family: var( --wp--preset--font-family--dane );
	font-size: var( --wp--preset--font-size--drobny ) !important;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wp--preset--color--cichy );
}

/* Wizytowka autora pod tekstem (szt/autor, pelna) miala 1010 px, bo
   ramka i wciecie dochodzily do 980 px tresci: wystawala poza tytul
   i zdjecie, a tekst, spis i stopka nad i pod nia stoja w kolumnie. */
.single-post main .szt-wizytowka:not( .szt-wizytowka--zwarta ) {
	max-width: var( --szt-kolumna );
	margin-inline: auto;
	box-sizing: border-box;
}

/* Srodtytul tuz pod poprzednim nie potrzebuje pelnego odstepu. */
.single-post .wp-block-post-content > :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) {
	margin-block-start: var( --wp--preset--spacing--30, 0.75rem );
}

/* Archiwum na telefonie. Stare wpisy z Bloggera i Soledad niosa obrazy
   z szerokoscia 564-1170 px w atrybutach i w stylu, bez klasy wp-image,
   wiec regula rdzenia ich nie obejmuje: wpis TCS 2020 mial 641 px przy
   ekranie 320 px, a razem z nim uciekal w bok caly tekst. */
.wp-block-post-content {
	overflow-wrap: break-word;
}

.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe,
.wp-block-post-content embed,
.wp-block-post-content object,
.wp-block-post-content table {
	max-width: 100%;
}

.wp-block-post-content img {
	height: auto;
}

/* Wysokosc w stylu wbudowanym (49 wpisow) przegrywa z samym height:auto,
   a bez tego zwezone zdjecie zostaje rozciagniete w pionie. Galerie
   z kadrowaniem maja wlasna wysokosc i zostaja przy niej. */
.wp-block-post-content img[style*="height"]:not( .wp-block-gallery img ) {
	height: auto !important;
}

/* Tabela z Bloggera trzyma zdjecie z podpisem. W ukladzie automatycznym
   komorka rosnie do szerokosci zdjecia (640 px) i wypycha strone w bok;
   uklad staly z szerokoscia kolumny pozwala zdjeciu sie zwezic. Tabele
   danych (figure.wp-block-table) przewijaja sie w poziomie i zostaja. */
.wp-block-post-content table:has( img ):not( .wp-block-table table ) {
	table-layout: fixed;
	width: 100%;
}

/* Odnosnik wokol obrazu z Bloggera ma wbudowane marginesy po 1em: obraz
   na cala szerokosc i tak wystawalby o nie poza ekran. */
.wp-block-post-content a:has( > img ) {
	margin-inline: 0 !important;
}

/* Wideo z YouTube ma w tresci 1170 x 658 px: szerokosc do kolumny,
   wysokosc z proporcji, zamiast sciesnionego kadru z czarnymi pasami. */
.wp-block-post-content iframe[src*="youtube"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Osadzenie Instagrama wymusza 326 px, czyli wiecej niz kolumna przy
   ekranie 320 px. */
.wp-block-post-content .instagram-media {
	min-width: 0 !important;
}

.wp-block-post-content pre {
	white-space: pre-wrap;
}

/* Podpis pod zdjeciem glownym wpisu (moduly/wpis.php). */
.wp-block-post-featured-image .szt-podpis-zdjecia {
	margin-block-start: var( --wp--preset--spacing--20, 0.5rem );
	line-height: 1.4;
	text-align: left;
}

/* Zdjecie glowne wpisu: kadr zalezny od proporcji pliku (moduly/wpis.php,
   sztsk_wpis_kadr_zdjecia). Pionowy portret w ramie 3:2 ciety od srodka
   tracil glowe zawodnika. Na telefonie kadr najwyzej 4:5, przesuniety ku
   gorze, bo twarz lezy zwykle w gornej czesci zdjecia. Na szerszym ekranie
   cale zdjecie w ramie 3:2, a boki wypelnia rozmyte to samo zdjecie, zeby
   rama nie wygladala na pusta. */
.szt-zdjecie-rama {
	display: block;
	position: relative;
	overflow: hidden;
	background: var( --wp--preset--color--lod, #eef3f6 );
}

.szt-zdjecie-glowne--pion .szt-zdjecie-rama img {
	display: block;
	position: relative;
	aspect-ratio: var( --szt-proporcja, 0.8 );
	object-fit: cover;
	object-position: 50% 30%;
}

@media ( min-width: 600px ) {
	.szt-zdjecie-glowne--pion .szt-zdjecie-rama::before {
		content: "";
		position: absolute;
		inset: -2rem;
		background: var( --szt-tlo, none ) center / cover no-repeat;
		filter: blur( 1.5rem );
		opacity: 0.7;
	}

	.szt-zdjecie-glowne--pion .szt-zdjecie-rama img {
		aspect-ratio: 3 / 2;
		object-fit: contain;
		object-position: 50% 50%;
	}
}

/* Podpis pod zdjeciem obiektu: autor, licencja, zrodlo. Licencje CC BY i
   CC BY-SA wymagaja tych trzech rzeczy, wiec podpis nie jest ozdoba, tylko
   warunkiem korzystania ze zdjecia. Drobny stopien pisma, bo to metryka
   obrazu, a nie tresc artykulu. */
.szt-atrybucja {
	margin-top: 0.4rem;
	font-size: var( --wp--preset--font-size--drobny, 0.78rem );
	color: var( --wp--preset--color--cichy, #6b6a66 );
	line-height: 1.4;
	text-align: right;
}

.szt-atrybucja a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}