/*
 * Motyw Fundacji 2036. Wymiary, kolory i zachowanie według planszy S6 (kierunek 3).
 * Kolory i fonty jako zmienne z theme.json (--wp--preset--color--*, --wp--preset--font-family--*).
 * Telefon: do 760 px.
 */

/* ---------- fonty zastępcze ----------
   Zanim wczytają się fonty marki (na wolnej sieci komórkowej nawet 3 do 4 s), przeglądarka pisze fontem systemowym.
   Bez dopasowania jest on szerszy, więc napisy łamały się inaczej, a po wczytaniu fontu strona podskakiwała.
   Te kroje to fonty systemowe (bez pobierania) przeskalowane do szerokości fontów marki: Arial (iPhone, Mac, Windows),
   Roboto (Android), Impact. Proporcje policzone 22.10 z plików fontów: Anton i Barlow Condensed dla wielkich liter
   (tak stoją w nagłówkach), Barlow dla zwykłego tekstu. */
@font-face {
	font-family: "f36 Barlow zapas";
	src: local("Arial"), local("ArialMT");
	font-weight: 100 500;
	size-adjust: 94.3%;
	ascent-override: 106.0%;
	descent-override: 21.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Barlow zapas";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 92.5%;
	ascent-override: 108.1%;
	descent-override: 21.6%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Barlow zapas R";
	src: local("Roboto"), local("Roboto-Regular");
	font-weight: 100 500;
	size-adjust: 97.7%;
	ascent-override: 102.4%;
	descent-override: 20.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Barlow zapas R";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 600 900;
	size-adjust: 95%;
	ascent-override: 105.3%;
	descent-override: 21.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 waski zapas";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 100 900;
	size-adjust: 72%;
	ascent-override: 138.9%;
	descent-override: 27.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 waski zapas R";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 100 900;
	size-adjust: 74%;
	ascent-override: 135.1%;
	descent-override: 27.0%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Anton zapas";
	src: local("Impact");
	size-adjust: 94.5%;
	ascent-override: 124.4%;
	descent-override: 34.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Anton zapas A";
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 71%;
	ascent-override: 165.6%;
	descent-override: 46.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "f36 Anton zapas R";
	src: local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 73%;
	ascent-override: 161.1%;
	descent-override: 45.1%;
	line-gap-override: 0%;
}

/* ---------- podstawy ---------- */
:root {
	--f36-czarny: #000;
	--f36-bialy: #fff;
	--f36-szary: #5f5f5f;
	--f36-linia: #e0e0e0;
	--f36-tlo: #f4f5f7;
	--f36-paczka: #ddd;
	--f36-malina: #be0e4e;
	--f36-fiolet: #521161;
	--f36-limonka: #c1ff72;
	--f36-grafit: #0b0c0a;
	--f36-magenta: #e6007e;
	--f36-roz-napis: #ff3d7f;
	--f36-zolty: #fdd503;
	--f36-akcent: var(--f36-malina);
	--f36-anton: var(--wp--preset--font-family--naglowek, Anton, "f36 Anton zapas", "f36 Anton zapas A", "f36 Anton zapas R", Impact, sans-serif);
	--f36-waski: var(--wp--preset--font-family--waski, "Barlow Condensed", "f36 waski zapas", "f36 waski zapas R", "Arial Narrow", sans-serif);
	--f36-pismo: var(--wp--preset--font-family--pismo, Caveat, cursive);
	--f36-margines: clamp(16px, 3.4vw, 48px); /* to samo co margines strony w theme.json */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--f36-fokus, var(--f36-akcent));
	outline-offset: 3px;
}

/* Obrys zaznaczenia z klawiatury musi odcinać się od tła (3:1). Pasek informacji i pas newslettera mają tło w kolorze
   akcentu, a nagłówek, pierwszy ekran i droga na stronie O nas są ciemne, więc tam obrys jest biały. */
.f36-pasek,
.f36-naglowek,
.f36-newsletter,
.f36-bohater,
.f36-droga {
	--f36-fokus: var(--f36-bialy);
}

/* Pasek ma 40 px i ucina wszystko poza sobą, więc obrys rysujemy do środka. */
.f36-pasek :focus-visible {
	outline-offset: -3px;
}

.wp-site-blocks {
	position: relative;
}

/* Części szablonu (nagłówek, treść, stopka) stykają się bez odstępu. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

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

/* Akapity bez pojedynczego słowa w ostatnim wierszu (np. „mistrzów.” sam w linii). Właściwość text-wrap-style, nie skrót
   text-wrap: skrót przywracał zawijanie i psuł „white-space: nowrap” (np. naklejka na kafelku Pumptrack Days). */
.wp-site-blocks p,
.wp-site-blocks li {
	text-wrap-style: pretty;
}

/* Bloki ułożone przez motyw nie potrzebują domyślnych odstępów między sobą. */
.f36-glowna > .wp-block-post-content > *,
.f36-strona-pelna > .wp-block-post-content > * {
	margin-block: 0;
}

/* Strony z własnym kodem (Liga, Pumptrack Days, GP): jak w poprzednim motywie przycinamy to, co wystaje w poziomie
   (np. podsumowanie sezonu Ligi na telefonie). „clip” nie psuje przyklejonych menu, w przeciwieństwie do „hidden”. */
.f36-strona-kod {
	overflow-x: clip;
}

/* Strona chroniona hasłem (np. Profile zawodników Ligi). */
.post-password-form {
	box-sizing: content-box;
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(48px, 8vw, 96px) var(--f36-margines); /* odstęp w padding, bo margin-block zeruje reguła .f36-strona-pelna */
}

.post-password-form p {
	margin: 0 0 16px;
}

.post-password-form label {
	display: block;
	font-weight: 600;
}

.post-password-form input[type="password"] {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--f36-czarny);
	border-radius: 0;
	font: inherit;
}

.post-password-form input[type="submit"] {
	padding: 14px 24px;
	border: 0;
	border-radius: 0;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:focus-visible {
	background: var(--f36-akcent);
}

.screen-reader-text,
.f36-ukryte {
	position: absolute !important;
	width: 1px !important; /* !important: np. WooCommerce daje listom wariantów width: 100% */
	min-width: 0 !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- typografia wspólna ---------- */
.is-style-pismo {
	display: block;
	margin: 0;
	font-family: var(--f36-pismo);
	font-weight: 700;
	font-size: 52px;
	line-height: 1;
	color: var(--f36-akcent);
	transform: rotate(-4deg);
	transform-origin: left bottom;
	text-transform: none;
}

.is-style-etykieta,
.f36-etykieta {
	display: inline-block;
	margin: 0;
	padding: 3px 8px; /* 24 px wysokości: minimum dla elementu do kliknięcia (WCAG 2.5.8) */
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	background: var(--f36-fiolet);
	color: var(--f36-bialy);
}

.f36-etykieta--sprint { background: var(--f36-magenta); }
.f36-etykieta--pumptrack { background: var(--f36-limonka); color: var(--f36-grafit); }
.f36-etykieta--zawody { background: #312877; }
.f36-etykieta--liga { background: var(--f36-grafit); color: var(--f36-limonka); }
.f36-etykieta--team { background: var(--f36-czarny); }

.f36-tytul-sekcji.wp-block-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--sekcja);
	line-height: 1;
	text-wrap-style: balance;
}

/* ---------- przyciski ---------- */
.wp-element-button,
.wp-block-button__link,
.f36-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	white-space: nowrap;
	border-radius: 0;
}

.f36-przycisk {
	padding: 0 26px;
	border: 2px solid var(--f36-czarny);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
}

.f36-przycisk:hover {
	background: var(--f36-malina);
	border-color: var(--f36-malina);
}

.is-style-bialy .wp-block-button__link {
	background: var(--f36-bialy);
	border-color: var(--f36-bialy);
	color: var(--f36-czarny);
}

.is-style-bialy .wp-block-button__link:hover {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.is-style-limonka .wp-block-button__link,
.f36-przycisk--limonka {
	background: var(--f36-limonka);
	border-color: var(--f36-limonka);
	color: var(--f36-grafit);
}

.is-style-limonka .wp-block-button__link:hover,
.f36-przycisk--limonka:hover {
	background: var(--f36-bialy);
	border-color: var(--f36-bialy);
	color: var(--f36-grafit);
}

.is-style-obrys .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* ---------- nagłówek ---------- */
.f36-naglowek {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	position: relative;
	z-index: 20;
}

.f36-naglowek-w {
	max-width: 1440px;
	margin: 0 auto;
	padding: 22px var(--f36-margines);
	gap: 32px;
}

.f36-logo {
	margin: 0;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	flex: none;
}

.f36-logo a {
	display: inline-flex;
}

.f36-logo img {
	display: block;
	height: 30px;
	width: auto;
}

.f36-menu.wp-block-navigation {
	margin: 0 auto;
	font-weight: 600;
	font-size: 16px;
	gap: 28px;
}

.f36-menu .wp-block-navigation__container {
	gap: 28px;
}

.f36-menu .wp-block-navigation-item__content {
	padding: 8px 0;
	text-decoration: none;
}

.f36-menu .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* Rozwijane „Projekty”: czarny panel pod pozycją menu, otwiera się po najechaniu, kliknięciu strzałki albo z klawiatury. */
.f36-menu .wp-block-navigation__submenu-container {
	min-width: 300px;
	padding: 10px 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--f36-czarny) !important; /* WordPress daje panelowi kolor tła ze strony (biały) */
	color: var(--f36-bialy) !important;
	font-size: 15px;
	z-index: 30;
}

.f36-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 20px;
	white-space: nowrap;
}

.f36-menu .f36-menu-projekty .wp-block-navigation__submenu-icon {
	width: 10px;
	height: 10px;
	margin-left: 6px;
}

.f36-menu .wp-block-navigation__responsive-container-open {
	align-items: center;
	line-height: 1;
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid currentColor;
	font-weight: 700;
	font-size: 15px;
}

.f36-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 16px;
}

.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
	margin-left: 0;
	margin-right: 0;
}

.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 8px;
	font-family: var(--f36-anton);
	font-size: 40px;
	text-transform: uppercase;
	line-height: 1;
	font-weight: 400;
}

/* Menu na telefonie: wszystko do lewej (WordPress wyśrodkowywał pozycję z podmenu). */
.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}

/* Menu na telefonie: projekty pod „Projekty” mniejszym pismem, bez ramki panelu. */
.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 6px 0 10px 4px !important;
	border: 0;
	font-family: var(--wp--preset--font-family--tekst, "Barlow", sans-serif);
	font-size: 18px;
	font-weight: 600;
	text-transform: none;
	line-height: 1.3;
	gap: 2px;
}

.f36-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 0 !important;
}

.f36-koszyk {
	flex: none;
}

.f36-koszyk .wc-block-mini-cart__button {
	min-height: 44px;
	padding: 0 14px;
	border: 2px solid currentColor;
	color: inherit;
	font-weight: 700;
	gap: 8px;
}

.f36-koszyk .wc-block-mini-cart__badge {
	background: var(--f36-akcent);
	color: var(--f36-bialy);
	border: 0;
}

/* Na stronie głównej nagłówek leży na zdjęciu, pod paskiem z informacjami (40 px). */
.f36-naglowek-zdjecie {
	position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	z-index: 20;
	margin: 0;
}

.f36-naglowek-zdjecie .f36-naglowek {
	background: transparent;
}

/* ---------- pasek z informacjami ---------- */
.f36-pasek {
	background: var(--f36-akcent);
	color: var(--f36-bialy);
	overflow: hidden;
	font-weight: 600;
	font-size: 14px;
	height: 40px;
	margin: 0;
}

.f36-pasek-tor {
	display: flex;
	width: max-content;
	animation: f36-pasek 48s linear infinite;
}

.f36-pasek:hover .f36-pasek-tor,
.f36-pasek:focus-within .f36-pasek-tor {
	animation-play-state: paused;
}

.f36-pasek-lista.wp-block-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.f36-pasek-lista li {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 40px;
	padding: 0 28px;
	white-space: nowrap;
	margin: 0;
}

.f36-pasek-lista li::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--f36-bialy);
	flex: none;
}

@keyframes f36-pasek {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- pierwszy ekran: pokaz projektów ---------- */
.f36-bohater.wp-block-group {
	position: relative;
	min-height: 860px;
	display: flex;
	flex-direction: column;
	background: #1b1d18;
	color: var(--f36-bialy);
	overflow: hidden;
	margin: 0;
}

.f36-pokaz {
	position: absolute;
	inset: 0;
	margin: 0;
}

.f36-slajd.wp-block-cover {
	position: absolute;
	inset: 0;
	min-height: 0;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.f36-slajd.wp-block-cover:first-child,
.f36-bohater.is-js .f36-slajd.wp-block-cover:first-child:not(.is-on) {
	opacity: 1;
}

.f36-bohater.is-js .f36-slajd.wp-block-cover {
	opacity: 0;
}

.f36-bohater.is-js .f36-slajd.wp-block-cover.is-on {
	opacity: 1;
}

.f36-slajd .wp-block-cover__image-background {
	object-position: 50% 60%;
}

.f36-bohater.is-js .f36-slajd.is-on .wp-block-cover__image-background {
	animation: f36-przyblizenie 7s ease-out both;
}

@keyframes f36-przyblizenie {
	from { transform: scale(1.03); }
	to { transform: scale(1); }
}

.f36-slajd .wp-block-cover__inner-container {
	display: none;
}

.f36-bohater::before,
.f36-bohater::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 1;
}

.f36-bohater::before {
	top: 0;
	bottom: 0;
	background:
		linear-gradient(180deg, rgba(8, 10, 8, 0.55) 0%, rgba(8, 10, 8, 0) 22%),
		linear-gradient(90deg, rgba(8, 10, 8, 0.8) 0%, rgba(8, 10, 8, 0.5) 36%, rgba(8, 10, 8, 0) 62%);
}

.f36-bohater::after {
	bottom: 0;
	height: 260px;
	background: linear-gradient(0deg, rgba(8, 10, 8, 0.85) 0%, rgba(8, 10, 8, 0) 100%);
}

.f36-bohater-tresc {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 112px var(--f36-margines) 220px;
}

.f36-bohater-pismo.is-style-pismo {
	position: relative;
	left: 290px;
	top: -50px;
	height: 0;
	z-index: 3;
	font-size: 80px;
	color: var(--f36-roz-napis);
	white-space: nowrap;
}

/* Szerokość najdłuższego słowa: każde słowo w osobnym wierszu, bez cięcia w środku (7ch było węższe niż „SPORTOWCÓW”). */
.f36-bohater-tytul.wp-block-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--bohater);
	line-height: 0.92;
	width: min-content;
	max-width: 100%;
	color: var(--f36-bialy);
}

.f36-bohater-tresc .wp-block-buttons {
	margin-top: 28px;
}

.f36-szeroki .wp-block-button__link {
	width: 360px;
}

.f36-teraz {
	margin: 18px 0 0;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
}

.f36-teraz b {
	color: var(--f36-bialy);
}

.f36-sterowanie {
	position: absolute;
	z-index: 4;
	left: var(--f36-margines);
	right: var(--f36-margines);
	bottom: 36px;
	display: grid;
	/* Tyle kolumn, ile slajdów (od 12.11 pięć). */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 16px;
	max-width: 1344px;
	margin: 0 auto;
}

.f36-pokaz-przycisk {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: var(--f36-bialy);
	opacity: 0.62;
	font: inherit;
	cursor: pointer;
	min-height: 44px;
}

.f36-pokaz-przycisk.is-on,
.f36-pokaz-przycisk:hover {
	opacity: 1;
}

.f36-pokaz-przycisk .f36-linia {
	display: block;
	height: 3px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.f36-pokaz-przycisk .f36-linia i,
.f36-kreska i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--f36-bialy);
}

.f36-pokaz-przycisk.is-zrobiony .f36-linia i {
	width: 100%;
}

.f36-pokaz-przycisk.is-teraz .f36-linia i {
	animation: f36-wypelnij 6s linear forwards;
}

.f36-pokaz-przycisk b {
	font-weight: 700;
	font-size: 17px;
}

/* Krótka nazwa projektu tylko na telefonie (np. „GP of Poland” zamiast pełnej nazwy zawodów). */
.f36-pokaz-przycisk .f36-krotka {
	display: none;
}

.f36-pokaz-przycisk .f36-pokaz-opis {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}

@keyframes f36-wypelnij {
	from { width: 0; }
	to { width: 100%; }
}

/* ---------- partnerzy: jasny, przewijany pas ---------- */
.f36-partnerzy.wp-block-group {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 20px 0 20px var(--f36-margines);
	background: var(--f36-bialy);
	border-bottom: 1px solid var(--f36-linia);
	overflow: hidden;
}

.f36-partnerzy-tytul.wp-block-heading {
	flex: none;
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: var(--f36-szary);
	white-space: nowrap;
}

.f36-loga.wp-block-group {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 64px;
	margin: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.f36-loga-tor {
	display: flex;
	width: max-content;
	animation: f36-pasek 50s linear infinite;
}

.f36-loga-zestaw {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
}

.f36-loga .wp-block-image {
	flex: none;
	margin: 0;
}

.f36-loga img {
	display: block;
	height: 36px;
	width: auto;
	max-width: none;
}

/* Wysokości logotypów dobrane tak, by każde miało podobną powierzchnię (wyrównanie optyczne). */
.f36-loga img[src*="/bike-rs."] { height: 28px; }
.f36-loga img[src*="/centrum-rowerowe."] { height: 54px; }
.f36-loga img[src*="/fundacja-lotto."] { height: 54px; }
.f36-loga img[src*="/garmin."] { height: 28px; }
.f36-loga img[src*="/kross."] { height: 32px; }
.f36-loga img[src*="/lazer."] { height: 42px; }
.f36-loga img[src*="/lotto."] { height: 54px; }
.f36-loga img[src*="/mirjan24."] { height: 36px; }
.f36-loga img[src*="/pzu."] { height: 54px; }
.f36-loga img[src*="/sfd."] { height: 38px; }
.f36-loga img[src*="/shimano."] { height: 28px; }
.f36-loga img[src*="/technogym."] { height: 40px; }

@media (max-width: 760px) {
	.f36-loga img[src*="/bike-rs."] { height: 20px; }
	.f36-loga img[src*="/centrum-rowerowe."] { height: 39px; }
	.f36-loga img[src*="/fundacja-lotto."] { height: 39px; }
	.f36-loga img[src*="/garmin."] { height: 20px; }
	.f36-loga img[src*="/kross."] { height: 23px; }
	.f36-loga img[src*="/lazer."] { height: 30px; }
	.f36-loga img[src*="/lotto."] { height: 39px; }
	.f36-loga img[src*="/mirjan24."] { height: 26px; }
	.f36-loga img[src*="/pzu."] { height: 39px; }
	.f36-loga img[src*="/sfd."] { height: 27px; }
	.f36-loga img[src*="/shimano."] { height: 20px; }
	.f36-loga img[src*="/technogym."] { height: 29px; }
}

/* ---------- sekcje ---------- */
.f36-sekcja.wp-block-group {
	padding-top: 88px;
	padding-bottom: 88px;
	margin: 0;
}

.f36-glowa.wp-block-group {
	gap: 8px 32px;
	margin-bottom: 32px;
}

.f36-glowa-tytul > * {
	margin: 0;
}

.f36-wiecej {
	margin: 0;
}

.f36-wiecej a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	white-space: nowrap;
}

/* ---------- Fundacja w ruchu: kafelki w barwach projektów, ułożone tak, by te same kolory się nie stykały ---------- */
.f36-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: 228px 228px auto;
	gap: 14px;
	grid-template-areas:
		"liga liga sprint fundacja"
		"liga liga pump pump"
		"cup cup zawody zawody";
	margin: 0;
}

.f36-bento > * {
	margin: 0 !important;
}

/* Tablet i mały laptop (761 do 1199 px): kafelki w dwóch kolumnach jak na telefonie. W czterech kolumnach kafelek
   Pumptrack Days był za wąski: ucięty przycisk „Zgłoś gminę” i liczba 388 poza kafelkiem. */
@media (min-width: 761px) and (max-width: 1199px) {
	.f36-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"liga liga"
			"sprint fundacja"
			"pump pump"
			"cup cup"
			"zawody zawody";
	}

	.f36-bento > .f36-kafel--liga {
		min-height: 300px;
	}

	.f36-bento > .f36-kafel--sprint,
	.f36-bento > .f36-kafel--fundacja,
	.f36-bento > .f36-kafel--pumptrack {
		min-height: 228px;
	}
}

.f36-kafel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 24px;
	color: var(--f36-bialy);
}

.f36-kafel > *,
.f36-kafel .wp-block-group > * {
	margin: 0;
}

.f36-kafel:focus-within {
	outline: 3px solid currentColor;
	outline-offset: -6px;
}

.f36-kafel a {
	color: inherit;
}

.f36-kafel .f36-przycisk--limonka {
	color: var(--f36-grafit);
	text-decoration: none;
}

.f36-kafel-cel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.f36-kafel-cel:focus-visible {
	outline: none;
}

.f36-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 10px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.f36-chip a {
	text-decoration: none;
}

/* Na magencie jasna nakładka obniżała kontrast białego napisu poniżej 4,5:1, więc tu nakładka jest ciemna. */
.f36-kafel--sprint .f36-chip {
	background: rgba(0, 0, 0, 0.18);
}

.f36-kropka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--f36-limonka);
	animation: f36-puls 1.6s ease-in-out infinite;
}

@keyframes f36-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(193, 255, 114, 0.6); }
	50% { box-shadow: 0 0 0 6px rgba(193, 255, 114, 0); }
}

.f36-kafel-tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	max-width: 32em;
}

.f36-kafel-link {
	margin: 10px 0 0;
	font-weight: 700;
	font-size: 15px;
}

.f36-kafel-link a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.f36-waski {
	font-family: var(--f36-waski);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.92;
}

/* Liga: grafit i limonka jak na stronie Ligi */
.f36-kafel--liga {
	grid-area: liga;
	background:
		linear-gradient(90deg, rgba(11, 12, 10, 0.94) 0%, rgba(11, 12, 10, 0.82) 42%, rgba(11, 12, 10, 0.25) 78%, rgba(11, 12, 10, 0.1) 100%),
		linear-gradient(0deg, rgba(11, 12, 10, 0.7) 0%, rgba(11, 12, 10, 0) 45%),
		var(--f36-grafit) url("../img/kafle/liga-dsc06121.webp") 70% 30% / cover no-repeat;
	border-top: 4px solid var(--f36-limonka);
}

.f36-liga-glowa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.f36-liga-logo {
	display: block;
	width: min(330px, 62%);
	height: auto;
	margin: -4px 0 0 -6px;
}

.f36-kafel--liga .f36-kafel-tytul {
	margin: 0 0 4px;
	font-size: 34px;
	letter-spacing: 0;
	color: var(--f36-bialy);
}

.f36-licznik {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 14px 0 0;
	border: 1px solid #2f332a;
	max-width: 460px;
}

.f36-licznik div {
	padding: 10px 8px 9px;
	text-align: center;
	border-left: 1px solid #2f332a;
}

.f36-licznik div:first-child {
	border-left: 0;
}

.f36-licznik b {
	display: block;
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 44px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--f36-bialy);
}

.f36-licznik span {
	display: block;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--f36-limonka);
	margin-top: 4px;
}

.f36-kafel--liga.is-po-sezonie .f36-licznik {
	display: none;
}

.f36-liga-stopka {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-top: 18px;
}

.f36-liga-kiedy {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: #dfe3d6;
}

.f36-liga-kiedy b {
	display: block;
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	color: var(--f36-bialy);
	margin-bottom: 4px;
}

/* Sprint Rewolucja: magenta, duże „6 s” i rysunek uczestniczki na trenażerze (rama roweru biała, bo magenta zlałaby się z tłem).
   Rysunek na środku kafelka nad tekstem (Kewin 21.10: „bardziej w centrum, a nie z boku”). */
.f36-kafel--sprint {
	grid-area: sprint;
	background: var(--f36-magenta);
	isolation: isolate;
	container-type: inline-size;
	padding: 20px;
}

.f36-kafel--sprint > .f36-chip,
.f36-kafel-sprint-tekst {
	position: relative;
	z-index: 2;
}

.f36-kafel-sprint-tekst .f36-kafel-tekst {
	font-size: 14px;
	line-height: 1.4;
}

.f36-kafel-sprint-tekst .f36-stat {
	font-size: 18px;
}

.f36-kafel-postac.wp-block-image {
	position: absolute;
	top: 11%;
	left: 50%;
	z-index: 0;
	height: 56%;
	margin: 0;
	transform: translateX(-36%);
	pointer-events: none;
}

/* Węższy kafelek (laptop ok. 1250 do 1340 px): rysunek pod ramką z nazwą, bliżej środka (obok „6 s”, nie przy krawędzi). */
@container (max-width: 259px) {
	.f36-kafel-postac.wp-block-image {
		top: 52px;
		left: 55%;
		height: 47%;
		transform: translateX(-50%);
	}
}

/* Jeszcze węższy (tablet w poziomie i mały laptop, ok. 1024 do 1250 px): zdanie pod „6 s” zawija się do dwóch wierszy,
   więc rysunek jest mniejszy i częściowo za krawędzią, żeby nie wchodził pod tekst. */
@container (max-width: 239px) {
	.f36-kafel-postac.wp-block-image {
		top: 46px;
		left: 62%;
		height: 38%;
	}
}

/* Tablet w pionie: kafelek ma stałe 228 px wysokości i poniżej 180 px treści nie pomieści rysunku obok tekstu. */
@media (min-width: 761px) {
	@container (max-width: 179px) {
		.f36-kafel-postac.wp-block-image {
			display: none;
		}
	}
}

.f36-kafel-postac.wp-block-image {
	width: max-content;
}

/* Bez max-width: przy rysunku przesuniętym do środka obrazek nie może się ścisnąć do miejsca od środka do krawędzi. */
.f36-kafel-postac img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	filter: drop-shadow(0 10px 16px rgba(60, 0, 34, 0.35));
}

/* „6” duże, „s” małe: pierwsza litera akapitu, bez dodatkowych znaczników w treści. */
.f36-szesc {
	margin: 0;
	font-family: var(--f36-anton);
	font-size: 28px;
	line-height: 1;
	text-transform: uppercase;
}

.f36-szesc::first-letter {
	font-size: 2.2em;
	line-height: 0.85;
}

.f36-kafel--sprint .f36-kafel-tekst {
	color: var(--f36-bialy);
}

@property --f36-postep {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

.f36-pierscien {
	position: relative;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: 0;
	font-family: var(--f36-anton);
	font-size: 26px;
	line-height: 1;
}

.f36-pierscien::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(var(--f36-bialy) calc(var(--f36-postep) * 1%), rgba(255, 255, 255, 0.3) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
	animation: f36-pierscien 6s linear infinite;
}

@keyframes f36-pierscien {
	from { --f36-postep: 0; }
	to { --f36-postep: 100; }
}

.f36-stat {
	display: block;
	margin: 4px 0 0;
	font-family: var(--f36-anton);
	font-size: 21px;
	line-height: 1.05;
	text-transform: uppercase;
}

/* Fundacja: zdjęcie uczestników Pumptrack Days w koszulkach 2036., tekst na przyciemnionym dole */
.f36-kafel--fundacja {
	grid-area: fundacja;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	/* Ten sam odstęp co w kafelku Sprint obok, żeby znaczki stały w jednej linii (Kewin 12.11). */
	padding: 20px;
	background:
		linear-gradient(0deg, rgba(24, 6, 30, 0.94) 0%, rgba(24, 6, 30, 0.72) 42%, rgba(24, 6, 30, 0.08) 78%),
		#2a0f33 url("../img/kafle/fundacja.webp") 50% 35% / cover no-repeat;
}

/* Strona główna: tła kafelków Ligi i Fundacji czekają, aż wczyta się zdjęcie pokazu na pierwszym ekranie (klasę
   f36-dalej dodaje motyw.js, najpóźniej po 4 s). Na wolnej sieci dzieliły z nim łącze i opóźniały je o kilka sekund.
   Bez JavaScriptu (brak klasy f36-js) tła wczytują się od razu. */
html.f36-js:not(.f36-dalej) .f36-kafel--liga {
	background-image:
		linear-gradient(90deg, rgba(11, 12, 10, 0.94) 0%, rgba(11, 12, 10, 0.82) 42%, rgba(11, 12, 10, 0.25) 78%, rgba(11, 12, 10, 0.1) 100%),
		linear-gradient(0deg, rgba(11, 12, 10, 0.7) 0%, rgba(11, 12, 10, 0) 45%),
		none;
}

html.f36-js:not(.f36-dalej) .f36-kafel--fundacja {
	background-image: linear-gradient(0deg, rgba(24, 6, 30, 0.94) 0%, rgba(24, 6, 30, 0.72) 42%, rgba(24, 6, 30, 0.08) 78%), none;
}

/* Znaczek kafla Fundacji na górze, jak w pozostałych kafelkach (Kewin 12.11); liczba i opis zostają na dole. */
.f36-kafel--fundacja > .f36-chip {
	margin-bottom: auto;
	/* Na górze kafla zdjęcie jest jasne, więc ciemna nakładka trzyma kontrast białego napisu. */
	background: rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.35);
}

.f36-kafel--fundacja .f36-kafel-tekst {
	color: rgba(255, 255, 255, 0.9);
}

.f36-liczba-duza {
	margin: 0;
	font-family: var(--f36-anton);
	font-size: 64px;
	line-height: 0.85;
	white-space: nowrap;
}

.f36-kafel-bok {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 22em;
}

/* Pumptrack Days: limonka z grafitem (barwy strony Pumptrack Days w odwrotnej kolejności) */
.f36-kafel--pumptrack {
	grid-area: pump;
	background: var(--f36-limonka);
	color: var(--f36-grafit);
	flex-direction: row;
	align-items: center;
	gap: 28px;
}

.f36-kafel--pumptrack .f36-kafel-tekst {
	color: rgba(11, 12, 10, 0.82);
}

.f36-pump-slowo {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 30px;
}

.f36-pump-wyraz {
	margin: 0;
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 54px;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--f36-grafit);
}

.f36-pump-wyraz--obrys {
	color: transparent;
	-webkit-text-stroke: 2px var(--f36-grafit);
}

.f36-pump-wyraz--limonka {
	color: var(--f36-bialy);
	-webkit-text-stroke: 2px var(--f36-grafit);
}

.f36-pump-naklejka {
	position: absolute;
	left: -4px;
	top: 0;
	z-index: 2;
	margin: 0;
	transform: rotate(-4deg);
	background: var(--f36-grafit);
	color: var(--f36-limonka);
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	white-space: nowrap;
}

.f36-pump-srodek {
	flex: 1;
	padding-left: 16px; /* naklejka „Zgłoszenia na 2027 otwarte” jest szersza niż słowo PUMP */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.f36-pump-przycisk {
	margin: 0;
}

.f36-pump-przycisk a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	background: var(--f36-grafit);
	color: var(--f36-limonka);
	font-weight: 700;
	text-decoration: none;
}

.f36-pump-liczba {
	text-align: right;
}

.f36-pump-liczba p {
	margin: 0;
	font-size: 14px;
	color: rgba(11, 12, 10, 0.82);
}

.f36-pump-liczba .f36-pump-388 {
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 84px;
	line-height: 0.85;
	color: var(--f36-grafit);
}

/* Zawody na torze: gradient GP. Od 12.11 pół dolnego rzędu (obok 2036.CUP): znaczek, opis i odnośnik po lewej,
   duże liczby po prawej, żeby kafel był niski i kafel 2036.CUP obok nie miał pustego miejsca (Kewin 12.11). */
.f36-kafel--zawody {
	grid-area: zawody;
	background: linear-gradient(110deg, #2a2270 0%, #5e2677 55%, #cc0776 100%);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"chip liczby"
		"tekst liczby"
		"link liczby";
	column-gap: 32px;
	row-gap: 10px;
	padding: 20px 24px;
}

.f36-kafel--zawody > .wp-block-group {
	display: contents;
}

.f36-kafel--zawody > .f36-chip {
	grid-area: chip;
	justify-self: start;
}

.f36-kafel--zawody .f36-liczby-gp {
	grid-area: liczby;
	align-self: center;
	justify-self: end;
}

/* 2036.CUP (12.11): barwy strony zawodów, czerń z żółtą belką i duża data jak liczby w innych kafelkach. */
.f36-kafel--cup {
	grid-area: cup;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: var(--f36-czarny);
	/* Żółta belka jako cień wewnętrzny, nie ramka: nie przesuwa treści, więc znaczek stoi w linii ze znaczkiem GP obok. */
	box-shadow: inset 0 4px 0 var(--f36-zolty);
	color: var(--f36-bialy);
}

.f36-cup-wiersz {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin: 0;
}

.f36-cup-data {
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 84px;
	line-height: 0.85;
	color: var(--f36-zolty);
	white-space: nowrap;
}

.f36-cup-opis {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.f36-kafel--cup .f36-kafel-tekst {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
}

.f36-kafel--cup .f36-kafel-tekst strong {
	color: var(--f36-bialy);
}

.f36-kafel--cup .f36-kafel-link {
	margin: 0;
}

.f36-liczby-gp {
	display: flex;
	gap: 32px;
	margin: 0;
}

.f36-liczby-gp p {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
}

/* Wielkość jak data „12.12” w kaflu 2036.CUP obok (Kewin 12.11: „liczby powinny być większe”). */
.f36-liczby-gp strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 84px;
	line-height: 0.85;
	color: var(--f36-zolty);
}

.f36-kafel--zawody .f36-kafel-tekst {
	grid-area: tekst;
	align-self: end;
	margin: 0;
}

.f36-kafel--zawody .f36-kafel-link {
	grid-area: link;
	justify-self: start;
	margin: 0;
	white-space: nowrap;
}

/* ---------- Sprint Rewolucja w Twojej szkole: ekran pomiaru między prowadzącymi ---------- */
.f36-szkoly.wp-block-group {
	position: relative;
	margin: 0;
	padding-top: 24px;
	background: var(--f36-bialy);
}

.f36-szkoly-w {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: end;
	border-top: 1px solid var(--f36-linia);
	padding-top: 24px;
}

.f36-szkoly-tekst {
	padding: 56px 0 80px;
}

.f36-szkoly-tekst .f36-tytul-sekcji {
	margin-bottom: 20px;
}

.f36-szkoly-opis {
	margin: 0 0 26px;
	font-size: 19px;
	max-width: 30em;
}

.f36-szkoly-grafika {
	position: relative;
	height: 540px;
}

.f36-szkoly-grafika > .wp-block-image {
	margin: 0;
}

.f36-szkoly-grafika .f36-ekran {
	position: absolute;
	left: 50%;
	top: 24px;
	width: 74%;
	transform: translateX(-50%);
}

.f36-postac {
	position: absolute;
	bottom: 0;
	z-index: 2;
	height: 420px;
}

.f36-postac img {
	height: 100%;
	width: auto;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22));
}

.f36-postac--a {
	left: 0;
}

.f36-postac--b {
	right: 0;
	height: 440px;
}

/* Uczestniczka na trenażerze stoi przed ekranem, jak na scenie w czasie pomiaru. */
.f36-postac--trenazer {
	left: 50%;
	z-index: 3;
	height: 270px;
	transform: translateX(-50%);
}

/* Tablet i małe laptopy: kolumna z grafiką jest węższa, więc postacie maleją, żeby nie zachodziły na siebie. */
@media (min-width: 761px) and (max-width: 1100px) {
	.f36-szkoly-grafika {
		height: 460px;
	}

	.f36-postac--a {
		height: 310px;
	}

	.f36-postac--b {
		height: 325px;
	}

	.f36-postac--trenazer {
		height: 205px;
	}
}

/* Ekran sceniczny (wzór: aplikacja Sprint Rewolucji). Rozmiary w cqw, czyli w procentach szerokości ekranu. */
.f36-ekran {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 14px;
	background: #0a0a0b;
	color: #f5f5f5;
	box-shadow: 0 0 0 6px #17171c, 0 28px 60px -18px rgba(0, 0, 0, 0.5);
	font-family: var(--wp--preset--font-family--tekst);
}

.f36-ekran-poswiata {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 55% at 32% 40%, rgba(245, 39, 126, 0.2), transparent 70%),
		radial-gradient(55% 55% at 70% 60%, rgba(0, 171, 231, 0.16), transparent 70%);
	opacity: 0.35;
	transition: opacity 0.6s ease;
}

.f36-ekran.is-pomiar .f36-ekran-poswiata {
	opacity: 1;
}

.f36-ekran-gora {
	position: absolute;
	left: 4cqw;
	top: 4cqw;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2cqw;
	font-weight: 700;
	font-size: 2.2cqw;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.f36-ekran-gora img {
	height: 3.2cqw;
	width: auto;
}

.f36-ekran-scena {
	position: absolute;
	inset: 0;
}

.f36-ekran-scena > * {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.f36-ekran.is-przygotuj .f36-ekran-napis,
.f36-ekran.is-odliczanie .f36-ekran-odliczanie,
.f36-ekran.is-pomiar .f36-ekran-pomiar,
.f36-ekran.is-wynik .f36-ekran-wynik {
	opacity: 1;
}

.f36-ekran-napis {
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 4cqw;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.f36-ekran-odliczanie {
	display: grid;
	place-items: center;
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 34cqw;
	line-height: 1;
	color: #f5277e;
}

.f36-ekran-odliczanie.is-start {
	font-size: 17cqw;
}

.f36-ekran-odliczanie.is-wejscie {
	animation: f36-wejscie 0.4s ease-out;
}

@keyframes f36-wejscie {
	from { transform: scale(0.4); }
	to { transform: scale(1); }
}

.f36-ekran-pomiar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.6cqw;
	padding: 9cqw 18cqw 6cqw;
}

.f36-ekran-licznik {
	position: relative;
	width: 30cqw;
	aspect-ratio: 1;
	flex: none;
}

.f36-ekran-luk {
	width: 100%;
	height: 100%;
	display: block;
}

.f36-luk-tlo,
.f36-luk-wartosc {
	fill: none;
	stroke-width: 28;
	stroke-linecap: round;
}

.f36-luk-tlo {
	stroke: rgba(255, 255, 255, 0.08);
}

.f36-luk-wartosc {
	stroke: url(#f36-luk-grad);
	stroke-dasharray: 100;
	transition: stroke-dashoffset 0.25s ease-out;
}

.f36-ekran-waty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.f36-ekran-waty b {
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 8.5cqw;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.f36-ekran-waty span {
	font-size: 1.7cqw;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 0.6cqw;
}

.f36-ekran-krzywa {
	width: 100%;
	height: 9cqw;
	flex: none;
}

.f36-ekran-krzywa line {
	stroke: rgba(255, 255, 255, 0.07);
	vector-effect: non-scaling-stroke;
}

.f36-krzywa-linia {
	fill: none;
	stroke: #f5277e;
	stroke-width: 3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.f36-krzywa-pole {
	fill: url(#f36-krzywa-grad);
}

.f36-ekran-czas {
	width: 100%;
	flex: none;
	height: 1.1cqw;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.f36-ekran-czas i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: #f5277e;
}

.f36-ekran-wynik {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: scale(0.6);
}

.f36-ekran.is-wynik .f36-ekran-wynik {
	transform: scale(1);
}

.f36-ekran-wynik b {
	font-family: var(--f36-waski);
	font-weight: 900;
	font-size: 26cqw;
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
	color: #f5277e;
}

.f36-ekran-wynik span {
	margin-top: 1.5cqw;
	font-weight: 700;
	font-size: 2.6cqw;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- aktualności jako relacje ---------- */
.f36-aktualnosci.wp-block-group {
	background: var(--f36-tlo);
}

.f36-relacje {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.f36-relacja {
	position: relative;
	height: 540px;
	overflow: hidden;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	text-decoration: none;
}

.f36-relacja-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.f36-cien {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.f36-paski {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 16px;
	z-index: 2;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 6px;
}

.f36-paski .f36-kreska {
	height: 4px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
	font-size: 0;
}

.f36-paski .f36-kreska.is-zrobiony i {
	width: 100%;
}

.f36-paski .f36-kreska.is-teraz i {
	animation: f36-wypelnij 6s linear forwards;
}

.f36-relacje.is-bez-ruchu .f36-paski .f36-kreska.is-teraz i {
	animation: none;
	width: 100%;
}

.f36-relacja-tresc {
	position: relative;
	z-index: 2;
}

.f36-relacja-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 14px;
	margin-bottom: 10px;
}

.f36-relacja-tytul {
	display: block;
	margin: 0 0 14px;
	font-family: var(--f36-anton);
	text-transform: uppercase;
	font-size: 34px;
	line-height: 0.98;
}

.f36-relacja-link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.f36-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	height: 540px;
	grid-template-rows: repeat(4, minmax(0, 1fr));
}

.f36-lista li {
	display: flex;
	min-height: 0;
	margin: 0;
}

.f36-pozycja {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	border: 1px solid var(--f36-linia);
	background: var(--f36-bialy);
	text-decoration: none;
	color: var(--f36-czarny);
}

.f36-pozycja img,
.f36-pozycja-pusta {
	display: block;
	width: 160px;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	background: var(--f36-paczka);
}

.f36-pozycja.is-on {
	border-color: var(--f36-czarny);
	box-shadow: inset 4px 0 0 var(--f36-akcent);
}

.f36-pozycja-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: center;
	font-size: 13px;
	color: var(--f36-szary);
	margin-bottom: 4px;
}

/* Etykiety kategorii w liście jednakowej szerokości (Kewin 21.10), żeby daty i tytuły zaczynały się w jednej linii. */
.f36-pozycja-meta .f36-etykieta {
	min-width: 9.75em;
	text-align: center;
	white-space: nowrap;
}

.f36-pozycja-tytul {
	display: block;
	font-family: var(--f36-anton);
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.04;
}

/* Tablet: obok dużej karty zostaje ok. 290 px, więc miniatury jak na telefonie, żeby tytuły nie rozpadały się na sylaby. */
@media (min-width: 761px) and (max-width: 960px) {
	.f36-pozycja {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 12px;
		padding: 8px;
	}

	.f36-pozycja img,
	.f36-pozycja-pusta {
		width: 88px;
	}

	.f36-pozycja-tytul {
		font-size: 18px;
	}
}

/* ---------- Instagram: sześć zdjęć z wydarzeń, każde prowadzi do profilu ---------- */
.f36-ig-siatka {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

.f36-ig-siatka > * {
	margin: 0;
}

.f36-ig-foto.wp-block-image a {
	display: block;
	overflow: hidden;
	background: var(--f36-paczka);
}

.f36-ig-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.2s ease;
}

.f36-ig-foto a:hover img,
.f36-ig-foto a:focus-visible img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.f36-ig-foto img {
		transition: none;
	}
}

@media (max-width: 960px) {
	.f36-ig-siatka {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- nasz merch: naklejki wycinane po kształcie, przyklejone na róg zdjęcia ---------- */
.f36-merch {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.f36-merch li {
	position: relative;
	margin: 0;
}

.f36-karta {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--f36-linia);
	text-decoration: none;
	color: var(--f36-czarny);
}

.f36-karta:hover {
	border-color: var(--f36-czarny);
}

.f36-karta-glowa {
	padding: 16px 16px 12px;
	flex: 1;
}

.f36-karta-nazwa {
	display: block;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
}

.f36-karta-podpis {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-karta-foto {
	display: block;
	background: var(--f36-paczka);
}

.f36-karta-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.f36-karta-pasek {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font-weight: 700;
}

.f36-karta-pasek b {
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 22px;
}

/* Naklejki z nadruków zebrane obok tytułu „Nasz merch”, jakby przyklejone na ścianie. */
.f36-glowa--merch.wp-block-group {
	align-items: center;
}

.f36-merch-naklejki.wp-block-group {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 24px;
	min-height: 150px;
}

.f36-merch-naklejki .wp-block-image {
	margin: 0 clamp(4px, 1vw, 14px);
	flex: none;
}

/* Cień jest w pliku naklejki (margines 12% po bokach, 8% u góry i 16% u dołu szerokości naklejki), a nie w filtrze CSS:
   filtr cienia przy wczytywaniu zdjęcia potrafił narysować szary prostokąt. --w to szerokość samej naklejki,
   ujemne marginesy zdejmują margines cienia, więc naklejki zajmują tyle miejsca co wcześniej. */
.f36-merch-naklejki img {
	display: block;
	height: auto;
	width: calc(var(--w) * 1.24);
	max-width: none;
	margin: calc(var(--w) * -0.08) calc(var(--w) * -0.12) calc(var(--w) * -0.16);
}

.f36-nakl:nth-child(1) img { --w: 124px; transform: rotate(-9deg) translateY(8px); }
.f36-nakl:nth-child(2) img { --w: 184px; transform: rotate(4deg) translateY(-14px); }
.f36-nakl:nth-child(3) img { --w: 118px; transform: rotate(-5deg) translateY(12px); }
.f36-nakl:nth-child(4) img { --w: 112px; transform: rotate(8deg) translateY(-8px); }

/* Węższe ekrany: naklejki schodzą do osobnego rzędu pod tytułem, żeby nie ściskać nagłówka. */
@media (max-width: 1140px) {
	.f36-glowa--merch.wp-block-group {
		flex-wrap: wrap;
	}

	.f36-merch-naklejki.wp-block-group {
		order: 3;
		flex-basis: 100%;
		margin: 10px 0 6px;
		min-height: 0;
		justify-content: flex-start;
		padding-left: 8px;
	}
}

/* ---------- telefon: sekcje strony głównej ---------- */
@media (max-width: 760px) {
	.f36-partnerzy.wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px 0 18px var(--f36-margines);
	}

	.f36-loga.wp-block-group {
		width: 100%;
	}

	.f36-loga-zestaw {
		gap: 40px;
		padding-right: 40px;
	}

	.f36-sekcja.wp-block-group {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.f36-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 10px;
		grid-template-areas:
			"liga liga"
			"sprint fundacja"
			"pump pump"
			"cup cup"
			"zawody zawody";
	}

	.f36-kafel {
		padding: 16px;
	}

	.f36-kafel--liga .f36-kafel-tytul {
		font-size: 28px;
	}

	.f36-liga-logo {
		width: 70%;
	}

	.f36-licznik b {
		font-size: 30px;
	}

	.f36-licznik span {
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	.f36-licznik div {
		padding: 8px 4px 7px;
	}

	.f36-liga-stopka {
		flex-direction: column;
		align-items: stretch;
	}

	.f36-kafel--sprint,
	.f36-kafel--fundacja {
		min-height: 220px;
	}

	/* Telefon: kafelek ma ok. 167 px szerokości; wyższy, żeby rysunek nad tekstem miał miejsce. Rysunek na środku. */
	.f36-kafel--sprint {
		min-height: 330px;
		padding: 16px;
	}

	.f36-kafel--sprint .f36-kafel-postac.wp-block-image {
		top: 52px;
		left: 50%;
		right: auto;
		height: 34%;
		transform: translateX(-50%);
	}

	.f36-pierscien {
		width: 68px;
		height: 68px;
		font-size: 22px;
	}

	.f36-stat {
		font-size: 18px;
	}

	.f36-liczba-duza {
		font-size: 56px;
	}

	.f36-kafel--pumptrack {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.f36-pump-srodek {
		padding-left: 0;
	}

	.f36-pump-wyraz {
		font-size: 46px;
	}

	.f36-pump-naklejka {
		font-size: 12px;
		white-space: normal;
		max-width: 150px;
	}

	/* Naklejka „Zgłoszenia na 2027 otwarte” zawija się na telefonie do dwóch wierszy, więc napis PUMP schodzi niżej. */
	.f36-pump-slowo {
		padding-top: 48px;
	}

	.f36-pump-liczba {
		text-align: left;
	}

	.f36-pump-liczba .f36-pump-388 {
		font-size: 64px;
	}

	.f36-kafel--zawody,
	.f36-kafel--zawody > .wp-block-group {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.f36-kafel--zawody .f36-liczby-gp {
		align-self: flex-start;
		justify-self: auto;
	}

	/* W pionie bez zawijania: opis z flex-basis 100% przeskakiwał do drugiej kolumny poza kafel. */
	.f36-kafel--zawody > .wp-block-group {
		flex-wrap: nowrap;
	}

	.f36-kafel--zawody .f36-kafel-tekst {
		flex: none;
	}

	.f36-liczby-gp {
		gap: 24px;
	}

	.f36-liczby-gp strong {
		font-size: 56px;
	}

	.f36-cup-wiersz {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.f36-cup-data {
		font-size: 64px;
	}

	.f36-szkoly-w {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.f36-szkoly-tekst {
		padding: 24px 0 8px;
	}

	.f36-szkoly-opis {
		font-size: 17px;
	}

	.f36-szkoly-grafika {
		height: 420px;
		margin-top: 16px;
	}

	.f36-szkoly-grafika .f36-ekran {
		top: 0;
		width: 100%;
	}

	.f36-postac {
		height: 230px;
	}

	.f36-postac--b {
		height: 240px;
	}

	.f36-postac--trenazer {
		height: 168px;
	}

	.f36-relacje {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.f36-relacja {
		height: 460px;
	}

	.f36-relacja-tytul {
		font-size: 28px;
	}

	.f36-lista {
		height: auto;
		grid-template-rows: none;
	}

	.f36-pozycja {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 12px;
		padding: 8px;
	}

	.f36-pozycja img,
	.f36-pozycja-pusta {
		width: 88px;
		height: 72px;
		min-height: 72px;
	}

	.f36-pozycja-tytul {
		font-size: 18px;
	}

	.f36-merch {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	/* Nagłówek stoi tu w kolumnie: rząd naklejek na całą szerokość, inaczej miał szerokość samych naklejek i stał przy lewej krawędzi. */
	.f36-merch-naklejki.wp-block-group {
		align-self: stretch;
		width: 100%;
		justify-content: center;
		padding-left: 0;
	}

	.f36-merch-naklejki .wp-block-image {
		margin: 0 3px;
	}

	.f36-nakl:nth-child(1) img { --w: 66px; }
	.f36-nakl:nth-child(2) img { --w: 100px; }
	.f36-nakl:nth-child(3) img { --w: 64px; }
	.f36-nakl:nth-child(4) img { --w: 60px; }

	.f36-karta-nazwa {
		font-size: 15px;
	}

	.f36-karta-podpis {
		display: none;
	}

	.f36-karta-pasek {
		padding: 0 10px;
		font-size: 14px;
	}

	.f36-karta-pasek b {
		font-size: 18px;
	}
}

/* Najwęższe telefony (ok. 320 px): naklejki przy „Nasz merch” mniejsze, żeby zmieściły się w jednym rzędzie bez wystawania. */
@media (max-width: 359px) {
	.f36-nakl:nth-child(1) img { --w: 56px; }
	.f36-nakl:nth-child(2) img { --w: 86px; }
	.f36-nakl:nth-child(3) img { --w: 54px; }
	.f36-nakl:nth-child(4) img { --w: 52px; }
}

/* Węższe telefony (do ok. 380 px): zdanie i liczby łamią się do kilku wierszy (przy 320 px także nazwa projektu),
   więc kafelek jest wyższy, a rysunek mniejszy i niżej, między nazwą a „6 s”. */
@media (max-width: 379px) {
	.f36-kafel--sprint {
		min-height: 400px;
	}

	.f36-kafel--sprint .f36-kafel-postac.wp-block-image {
		top: 74px;
		height: 26%;
	}
}

/* ---------- newsletter ---------- */
.f36-newsletter.wp-block-group {
	background: var(--f36-akcent);
	color: var(--f36-bialy);
	padding-top: 80px;
	padding-bottom: 80px;
	margin: 0;
}

.f36-newsletter-w {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.f36-newsletter-w > * {
	margin: 0;
}

.f36-newsletter p {
	margin: 16px 0 0;
	font-size: 18px;
	max-width: 30em;
}

.f36-zapis-etykieta {
	display: block;
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 8px;
}

.f36-zapis-wiersz {
	display: flex;
}

.f36-zapis-wiersz input {
	flex: 1;
	min-width: 0;
	min-height: 56px;
	border: 2px solid var(--f36-bialy);
	border-right: 0;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-size: 17px;
	padding: 0 16px;
	border-radius: 0;
}

.f36-zapis-wiersz .f36-przycisk {
	min-height: 56px;
}

.f36-zapis-wiersz .f36-przycisk:hover {
	background: var(--f36-bialy);
	border-color: var(--f36-bialy);
	color: var(--f36-czarny);
}

/* Komunikat po zapisie i informacja o zgodzie pod przyciskiem (inc/newsletter.php, blok fundacja2036/newsletter). */
.f36-newsletter .f36-zapis-komunikat {
	margin: 14px 0 0;
	max-width: none;
	font-weight: 700;
	font-size: 17px;
}

.f36-newsletter .f36-zapis-info {
	margin: 14px 0 0;
	max-width: none;
	font-size: 14px;
	line-height: 1.45;
}

.f36-zapis-info a {
	color: inherit;
}

/* ---------- stopka ---------- */
.f36-stopka.wp-block-group {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	border-top: 1px solid var(--f36-szary);
	padding-top: 72px;
	padding-bottom: 40px;
	font-size: 16px;
	margin: 0;
}

.f36-stopka a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.78);
}

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

.f36-stopka-siatka {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.f36-stopka-siatka > * {
	margin: 0;
}

.f36-stopka .f36-logo img {
	height: 34px;
}

.f36-stopka-firma p {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, 0.78);
}

.f36-stopka-firma .f36-logo {
	margin-bottom: 14px;
}

.f36-stopka-tytul.wp-block-heading {
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0 0 14px;
}

.f36-stopka-lista.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.f36-stopka-dol {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--f36-szary);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.f36-stopka-dol p {
	margin: 0;
}

.f36-spolecznosc {
	display: flex;
	gap: 24px;
}

/* ---------- podstrony, wpisy, listy ---------- */
.f36-strona.wp-block-group,
.f36-lista-wpisow.wp-block-group,
.f36-404.wp-block-group {
	padding-top: 64px;
	padding-bottom: 104px;
	margin: 0;
}

.f36-strona-tytul {
	margin: 0 0 40px;
	font-size: var(--wp--preset--font-size--sekcja);
	line-height: 0.92;
}

/* Sklep 2.0 (Kewin 3.11): strona trybu „Wkrótce” WooCommerce zamiast sklepu. Układ strony błędu: w miejscu numeru błędu
   wielkie „2.0” w obrysie, obok tytuł, jedno zdanie i dwa przyciski; pod spodem pas newslettera (#newsletter). */
.f36-sklep-przerwa.wp-block-group {
	margin: 0;
	padding-block: clamp(48px, 7vw, 104px);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-sklep-przerwa-w.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
}

.f36-sklep-przerwa-w > *,
.f36-sklep-przerwa-tekst > * {
	margin-block: 0;
}

.f36-sklep-przerwa-numer {
	font-family: var(--f36-anton);
	font-size: clamp(150px, 42vw, 460px);
	line-height: 0.8;
	letter-spacing: -0.01em;
	color: transparent;
	-webkit-text-stroke: clamp(1.5px, 0.3vw, 3px) var(--f36-bialy);
	user-select: none;
}

.f36-sklep-przerwa-tekst .f36-podstrona-tytul.wp-block-heading {
	max-width: none;
	margin-top: 8px;
	font-size: clamp(44px, 5vw, 80px);
	overflow-wrap: normal;
}

.f36-sklep-przerwa-tekst .wp-block-buttons {
	margin-top: 32px;
}

.f36-sklep-przerwa-kontakt {
	max-width: 36em;
	margin-top: 28px !important;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.75);
}

.f36-sklep-przerwa-kontakt a {
	color: var(--f36-bialy);
}

@media (min-width: 960px) {
	.f36-sklep-przerwa-w.wp-block-group {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		min-height: min(62vh, 560px);
	}

	.f36-sklep-przerwa-numer {
		font-size: clamp(260px, 30vw, 460px);
	}
}

.f36-wpis.wp-block-group {
	padding-top: 56px;
	padding-bottom: 0;
	margin: 0;
}

.f36-wpis-glowa {
	margin-bottom: 32px;
}

.f36-wpis-meta {
	gap: 12px;
	align-items: center;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-wpis-tytul.wp-block-post-title {
	margin: 16px 0 0;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.95;
}

/* Zdjęcie wyróżniające we wpisie (Kewin 21.10: za duże): najwyżej 960 px szerokości i 640 px wysokości, w całości,
   bez kadrowania, bo bywa plakatem z napisami. */
.f36-wpis-foto.wp-block-post-featured-image {
	max-width: 960px;
	margin-inline: auto !important;
	text-align: center;
}

.f36-wpis-foto img {
	width: auto;
	max-width: 100%;
	max-height: min(640px, 80vh);
	margin-inline: auto;
	object-fit: contain;
}

.f36-wpis-tresc {
	font-size: 18px;
	line-height: 1.65;
	padding-bottom: 64px;
}

.f36-wpis-tresc > * {
	max-width: 760px;
}

/* Wpis jak w serwisach sportowych (21.10): pierwszy nagłówek to podtytuł, pierwszy akapit to pogrubiony wstęp,
   śródtytuły zwykłą wielkością liter węższym krojem, wyniki w tabelach z wyróżnionym podium. */
.f36-wpis-tresc :where(h2, h3) {
	margin-top: 1.8em;
	margin-bottom: 0.45em;
	font-family: var(--f36-waski);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	text-wrap-style: balance;
}

.f36-wpis-tresc h2 {
	font-size: clamp(1.625rem, 2.6vw, 2rem);
}

.f36-wpis-tresc h3 {
	font-size: clamp(1.3rem, 2vw, 1.5rem);
}

.f36-wpis-tresc :where(h2, h3) + p {
	margin-top: 0;
}

.f36-wpis-tresc > h2:first-child {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--tekst);
	font-weight: 600;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.35;
	color: #2b2b2b;
	/* Podtytuł: pierwszy wiersz na pełną szerokość (balance łamał go w połowie, Kewin 12.11), bez sieroty na końcu. */
	text-wrap-style: pretty;
}

.f36-wpis-tresc > h2:first-child + p,
.f36-wpis-tresc > p:first-child {
	font-weight: 600;
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);
	line-height: 1.6;
}

.f36-wpis-tresc p a,
.f36-wpis-tresc li a {
	text-decoration-color: var(--f36-akcent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.f36-wpis-tresc ul.wp-block-list li::marker {
	color: var(--f36-akcent);
}

.f36-wpis-tresc .wp-block-list li + li {
	margin-top: 6px;
}

.f36-wpis-tresc > .wp-block-buttons {
	margin-block: 24px 28px;
}

.f36-zrodlo-zdjec,
.is-style-zrodlo-zdjec {
	font-size: 14px;
	color: var(--f36-szary);
}

/* Tabela wyników (styl bloku „Wyniki zawodów” albo klasa f36-wyniki): stałe kolumny, żeby kolejne tabele we wpisie
   miały je w tych samych miejscach; wąska kolumna miejsca, podium z kolorowym paskiem (złoto, srebro, brąz). */
.f36-wpis-tresc :is(.f36-wyniki, .is-style-wyniki).wp-block-table {
	margin-block: 8px 28px;
}

:is(.f36-wyniki, .is-style-wyniki) table {
	table-layout: fixed;
}

:is(.f36-wyniki, .is-style-wyniki) :is(td, th):first-child {
	width: 5.5em;
	text-align: center;
	font-weight: 800;
}

:is(.f36-wyniki, .is-style-wyniki) :is(td, th):nth-child(2) {
	width: 45%;
}

:is(.f36-wyniki, .is-style-wyniki) tbody tr:nth-child(-n + 3) td:first-child {
	box-shadow: inset 4px 0 0 var(--f36-miejsce);
}

:is(.f36-wyniki, .is-style-wyniki) tbody tr:nth-child(1) { --f36-miejsce: #d4a017; }
:is(.f36-wyniki, .is-style-wyniki) tbody tr:nth-child(2) { --f36-miejsce: #a7a9ac; }
:is(.f36-wyniki, .is-style-wyniki) tbody tr:nth-child(3) { --f36-miejsce: #b0703c; }

:is(.f36-wyniki, .is-style-wyniki) td:nth-child(2) {
	font-weight: 700;
}

@media (max-width: 599px) {
	:is(.f36-wyniki, .is-style-wyniki) :is(td, th):first-child {
		width: 3.2em;
	}

	:is(.f36-wyniki, .is-style-wyniki) :is(td, th):nth-child(2) {
		width: 42%;
	}
}

/* Galerie, belki partnerów i galeria z Dysku na szerokość zdjęcia wyróżniającego. */
.f36-wpis-tresc > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-block: 48px;
}

.f36-wpis-tresc .wp-block-gallery.has-nested-images {
	--wp--style--gallery-gap-default: 8px;
	gap: 8px;
}

.f36-wpis-tresc .wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.f36-wpis-tresc .wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	opacity: 0.86;
}

.f36-wpis-tresc .wp-block-embed {
	margin-block: 40px;
}

/* Powiększenie zdjęć z galerii WordPressa w tych samych barwach co powiększenie zdjęć z Dysku. */
.wp-lightbox-overlay .scrim {
	background-color: #000 !important;
	opacity: 0.94 !important;
}

.wp-lightbox-overlay button {
	color: var(--f36-bialy) !important;
	background: transparent !important;
}

.wp-lightbox-overlay button svg {
	fill: currentColor !important;
}

/* Tabele w treściach wpisów i zwykłych stron (listy startowe, harmonogramy, dokumenty): czarny wiersz nagłówka, cienkie
   linie, cyfry w kolumnie. */
:is(.f36-wpis-tresc, .f36-strona) .wp-block-table {
	margin-block: 32px;
}

:is(.f36-wpis-tresc, .f36-strona) .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

:is(.f36-wpis-tresc, .f36-strona) .wp-block-table :where(th, td) {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--f36-linia);
	text-align: left;
	vertical-align: top;
}

:is(.f36-wpis-tresc, .f36-strona) .wp-block-table thead {
	border: 0;
}

:is(.f36-wpis-tresc, .f36-strona) .wp-block-table thead th {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font-weight: 700;
	white-space: nowrap;
}

:is(.f36-wpis-tresc, .f36-strona) .wp-block-table tbody tr:nth-child(even) {
	background: var(--f36-tlo);
}

/* Zwykłe strony (np. informacja o danych osobowych Sprint Rewolucji): na telefonie tabela z długim tekstem nie ściska
   kolumn do kilku liter, tylko przewija się w poziomie we własnej ramce (rdzeń WordPressa daje ramce overflow-x: auto). */
@media (max-width: 640px) {
	.f36-strona .wp-block-table table {
		min-width: 560px;
	}

	.f36-strona .wp-block-table :where(th, td) {
		overflow-wrap: normal;
		word-break: normal;
	}
}

@media (max-width: 599px) {
	:is(.f36-wpis-tresc, .f36-strona) .wp-block-table table {
		font-size: 14px;
	}

	:is(.f36-wpis-tresc, .f36-strona) .wp-block-table :where(th, td) {
		padding: 8px;
	}
}

.f36-wpis-wiecej.wp-block-group {
	border-top: 1px solid var(--f36-linia);
	padding: 64px 0 104px;
}

.f36-wpis-wiecej .f36-tytul-sekcji {
	margin-bottom: 32px;
	font-size: clamp(2.5rem, 5vw, 4rem);
}

.f36-etykiety a {
	display: inline-block;
	padding: 3px 8px; /* 24 px wysokości jak .f36-etykieta */
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	background: var(--f36-fiolet);
	color: var(--f36-bialy);
	text-decoration: none;
}

.f36-etykiety a[href*="/sprint-rewolucja/"] { background: var(--f36-magenta); }
.f36-etykiety a[href*="/2036-cup/"],
.f36-etykiety a[href*="/gp-of-poland/"] { background: #312877; }
.f36-etykiety a[href*="/pumptrack-days/"] { background: var(--f36-limonka); color: var(--f36-grafit); }
.f36-etykiety a[href*="/team-2036/"] { background: var(--f36-czarny); }
.f36-etykiety a[href*="/liga-endurance/"],
.f36-etykiety a[href*="/ustawki/"] { background: var(--f36-grafit); color: var(--f36-limonka); }

.f36-etykiety .wp-block-post-terms__separator {
	display: none;
}

.f36-etykiety {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.f36-karty-wpisow.wp-block-post-template {
	gap: 40px 24px;
}

.f36-karta-wpisu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}

.f36-karta-wpisu > * {
	margin: 0;
}

.f36-karta-wpisu .wp-block-post-featured-image {
	background: var(--f36-paczka);
}

.f36-karta-wpisu-tytul.wp-block-post-title {
	font-size: 26px;
	line-height: 1.02;
}

.f36-karta-wpisu-tytul a {
	text-decoration: none;
}

.f36-karta-wpisu-tytul a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.f36-stronicowanie {
	margin-top: 56px;
	font-weight: 700;
}

.f36-szukaj .wp-block-search__input {
	min-height: 52px;
	border: 2px solid var(--f36-czarny);
	border-radius: 0;
	padding: 0 16px;
	font: inherit;
}

.f36-szukaj .wp-block-search__button {
	margin-left: 0;
}

/* Tabele w treściach przewijają się we własnym pojemniku. */
.wp-block-table {
	overflow-x: auto;
}

/* ---------- sklep (WooCommerce): wspólne kształty ---------- */
.woocommerce .wp-element-button,
.wc-block-components-button:not(.is-link) {
	border-radius: 0;
	font-weight: 700;
}

.wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-weight: 700;
}

.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
	font-weight: 700;
}

/* ---------- Zwykłe strony z tekstem (Regulamin, RODO, Standardy, Dostawa i zwroty) ---------- */
.f36-strona .wp-block-post-content h2.wp-block-heading {
	margin: 40px 0 12px;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.05;
}

.f36-strona .wp-block-post-content h3.wp-block-heading {
	margin: 28px 0 8px;
	font-size: clamp(22px, 2.4vw, 26px);
}

/* Pliki do pobrania (np. Standardy Ochrony Małoletnich) */
.f36-dokumenty.wp-block-list {
	display: grid;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.f36-dokumenty li {
	margin: 0;
}

.f36-dokumenty a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 0 18px;
	border: 1px solid var(--f36-czarny);
	color: var(--f36-czarny);
	font-weight: 700;
	text-decoration: none;
}

.f36-dokumenty a::after {
	content: "PDF";
	flex: none;
	padding: 4px 8px;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.f36-dokumenty a:hover,
.f36-dokumenty a:focus-visible {
	background: var(--f36-tlo);
}

/* ---------- Podstrony z nowym projektem (O nas, Projekty, Wsparcie, Kontakt, Sprint Rewolucja) ---------- */
/* Czarny pas tytułowy: na każdej stronie te same odstępy (jak na Aktualnościach, zaakceptowane 30.10) i ta sama
   wysokość najmniejsza, a treść stoi przy dolnej krawędzi. Kewin 3.11: „jeśli robisz czarne tło w hero to jego wielkość
   musi być spójna na stronach”. Pas jest wyższy tylko wtedy, gdy wstęp ma więcej wierszy (głównie na telefonie). */
.f36-podstrona-glowa.wp-block-group {
	padding-block: clamp(40px, 4.5vw, 64px);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-podstrona-glowa-w.wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(220px, 14vw + 140px, 252px);
}

.f36-podstrona-glowa .is-style-pismo,
.f36-podstrona-bohater .is-style-pismo {
	color: var(--f36-roz-napis);
	margin: 0;
}

/* Aktualności miały od 30.10 niższy pas (klasa is-niska); od 3.11 taki sam mają wszystkie strony, klasa zostaje bez skutku. */

/* Strony z czarnym pasem nagłówka (listy wpisów, kategorie, wyszukiwarka, zwykłe strony): pas styka się z treścią. */
.f36-strona-z-pasem > * {
	margin-block: 0;
}

.f36-strona-z-pasem .f36-lista-wpisow.wp-block-group,
.f36-strona-z-pasem .f36-strona.wp-block-group {
	padding-top: clamp(40px, 5vw, 64px);
}

.f36-podstrona-glowa .f36-podstrona-wstep p {
	margin: 0;
}

/* Dokumenty (Regulamin, RODO, Polityka prywatności): ten sam pas, mniejszy tytuł, wyrównany do kolumny tekstu. */
.f36-podstrona-glowa.is-dokument .f36-podstrona-glowa-w {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

.f36-podstrona-glowa.is-dokument .f36-podstrona-tytul,
.f36-podstrona-glowa.is-dlugi-tytul .f36-podstrona-tytul {
	max-width: 22ch;
	font-size: clamp(40px, 5vw, 72px);
}

.f36-podstrona-glowa .f36-podstrona-tytul,
.f36-podstrona-tytul.wp-block-heading {
	max-width: 16ch;
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(52px, 7.2vw, 112px);
	line-height: 1;
	text-transform: uppercase;
	text-wrap-style: balance;
}

.f36-podstrona-wstep {
	max-width: 36em;
	text-wrap-style: pretty;
	margin: 20px 0 0;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.f36-podstrona-bohater.wp-block-cover {
	min-height: clamp(480px, 72vh, 720px);
	padding: 0;
	align-items: flex-end;
}

.f36-podstrona-bohater.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background:
		linear-gradient(0deg, rgba(10, 12, 8, 0.85) 0%, rgba(10, 12, 8, 0.2) 60%, rgba(10, 12, 8, 0.1) 100%),
		linear-gradient(90deg, rgba(10, 12, 8, 0.55) 0%, rgba(10, 12, 8, 0) 60%);
}

.f36-podstrona-bohater .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1344px;
	margin: 0 auto;
	padding: 120px var(--f36-margines) clamp(40px, 6vw, 72px);
}

/* Zdjęcie otwierające z pasem liczb tuż pod spodem (Sprint Rewolucja, od 4.11 także O nas): dół zdjęcia przechodzi
   w czerń pasa, więc zdjęcie i liczby czytają się jak jedna całość, a pas zaczyna się bliżej tekstu. */
.f36-podstrona-bohater.wp-block-cover:has(+ .f36-liczby-pas) .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background:
		linear-gradient(0deg, var(--f36-czarny) 0%, rgba(0, 0, 0, 0.8) 22%, rgba(10, 12, 8, 0.2) 65%, rgba(10, 12, 8, 0.1) 100%),
		linear-gradient(90deg, rgba(10, 12, 8, 0.55) 0%, rgba(10, 12, 8, 0) 60%);
}

.f36-podstrona-bohater + .f36-liczby-pas.wp-block-group {
	padding-top: clamp(8px, 1.5vw, 24px);
}

.f36-podstrona-bohater .wp-block-buttons {
	margin-top: 28px;
}

/* Odstępy sekcji podstron zmniejszone z 112 do 88 px (Kewin 10.11.2026: „duże przerwy między blokami”, „zmniejsz odstępy”). */
.f36-sekcja-podstrony.wp-block-group {
	padding-block: clamp(48px, 6vw, 88px);
}

.f36-sekcja-podstrony.is-szara {
	background: var(--f36-tlo);
}

.f36-sekcja-podstrony.is-czarna {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-sekcja-podstrony .f36-glowa-podstrony {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.f36-glowa-podstrony .is-style-pismo {
	margin: 0;
}

.f36-glowa-podstrony .f36-tytul-sekcji {
	margin: 0;
}

.f36-glowa-podstrony p:not(.is-style-pismo) {
	max-width: 40em;
	margin: 16px 0 0;
	font-size: 19px;
}

.f36-maly-tytul.wp-block-heading {
	margin: 0 0 8px;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	text-transform: none;
}

/* Kontakt */
.f36-kontakt-uklad.wp-block-columns {
	gap: clamp(32px, 5vw, 72px);
	margin: 0;
}

.f36-kontakt-blok + .f36-kontakt-blok {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--f36-linia);
}

.f36-kontakt-blok p {
	margin: 0 0 6px;
}

.f36-kontakt-adres {
	font-weight: 700;
	font-size: clamp(20px, 2vw, 26px);
	overflow-wrap: anywhere;
}

.f36-kontakt-adres a {
	color: var(--f36-czarny);
}

.f36-kontakt-linki.wp-block-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-kontakt-linki a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--f36-czarny);
	color: var(--f36-czarny);
	font-weight: 700;
	text-decoration: none;
}

.f36-kontakt-linki a:hover,
.f36-kontakt-linki a:focus-visible {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-kontakt-formularz.wp-block-column {
	padding: clamp(24px, 3vw, 40px);
	background: var(--f36-tlo);
}

.f36-skroty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(40px, 6vw, 72px);
}

.f36-skrot {
	margin: 0;
}

.f36-skrot a {
	display: block;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid var(--f36-czarny);
	color: var(--f36-czarny);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	text-decoration: none;
}

.f36-skrot a span {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-skrot a:hover,
.f36-skrot a:focus-visible {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-skrot a:hover span,
.f36-skrot a:focus-visible span {
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 760px) {
	.f36-skroty {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-podstrona-bohater .wp-block-cover__inner-container {
		padding: 104px var(--f36-margines) 32px;
	}
}

/* Pas z liczbami (np. Sprint Rewolucja) */
.f36-liczby-pas.wp-block-group {
	padding-block: clamp(40px, 5vw, 64px);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-liczby {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* Liczby jak tablica wyników: każda w swojej przegródce z linią z lewej, podpis pod liczbą, wyśrodkowane
   (Kewin 29.10, jak na stronie Pumptrack Days). */
.f36-liczba {
	margin: 0;
	padding: 4px clamp(16px, 2vw, 28px);
	text-align: center;
	border-left: 2px solid rgba(255, 255, 255, 0.22);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.8);
}

.f36-liczba strong {
	display: block;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(56px, 7vw, 104px);
	line-height: 1;
	color: var(--f36-limonka);
}

.f36-liczby-pas.is-sprint .f36-liczba strong {
	color: var(--f36-magenta);
}

/* O nas (Kewin 4.11: „neon nie pasuje przy liczbach” pod zdjęciem): liczby w kolorze Fundacji, jak napis „o nas”. */
.f36-liczby-pas.is-fundacja .f36-liczba strong {
	color: var(--f36-roz-napis);
}

.f36-liczby-stan {
	margin: 20px 0 0;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

/* Punkty z pogrubionym początkiem */
.f36-punkty p {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--f36-linia);
	font-size: 18px;
}

.f36-punkty p:last-child {
	border-bottom: 1px solid var(--f36-linia);
}

.f36-punkty strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--f36-waski);
	font-size: 22px;
}

.f36-sprint-przebieg.wp-block-columns,
.f36-dwie-kolumny.wp-block-columns,
.f36-zgloszenie.wp-block-columns {
	gap: clamp(32px, 5vw, 72px);
	margin: 0;
}

.f36-foto-podstrony.wp-block-image {
	margin: 28px 0 0;
}

.f36-foto-podstrony img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Zdjęcie obok listy: tej samej wysokości co lista po prawej (zdjęcie nie wydłuża kolumny, tylko ją wypełnia). */
.f36-dwie-kolumny .f36-foto-wypelnij.wp-block-image {
	position: relative;
	height: 100%;
	min-height: 320px;
	margin: 0;
}

.f36-dwie-kolumny .f36-foto-wypelnij img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

@media (max-width: 781px) {
	.f36-dwie-kolumny .f36-foto-wypelnij.wp-block-image {
		height: auto;
		aspect-ratio: 3 / 2;
		min-height: 0;
	}
}

/* Kroki (prawdziwa kolejność, np. zgłoszenie szkoły) */
.f36-kroki.wp-block-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: f36-krok;
}

.f36-kroki li {
	position: relative;
	margin: 0;
	padding: 22px 22px 22px 88px;
	background: var(--f36-bialy);
	border: 1px solid var(--f36-linia);
	font-size: 17px;
	counter-increment: f36-krok;
}

.f36-kroki li::before {
	content: counter(f36-krok);
	position: absolute;
	left: 22px;
	top: 14px;
	font-family: var(--f36-anton);
	font-size: 48px;
	line-height: 1;
	color: var(--f36-magenta);
}

.f36-kroki strong {
	display: block;
	margin-bottom: 2px;
	font-size: 19px;
}

.f36-sprint-dalej {
	margin: 24px 0 0;
	padding-left: 18px;
	border-left: 4px solid var(--f36-magenta);
	font-size: 17px;
}

.f36-glowa-z-linkiem.wp-block-group {
	gap: 16px;
}

/* Sekcja na czarnym tle z formularzem */
.is-czarna .f36-tytul-sekcji,
.is-czarna p {
	color: var(--f36-bialy);
}

.is-czarna .is-style-pismo {
	color: var(--f36-roz-napis);
}

.is-czarna .f36-formularz label,
.is-czarna .f36-formularz label a {
	color: var(--f36-bialy);
}

.is-czarna .f36-formularz-wyslij button {
	background: var(--f36-bialy);
	color: var(--f36-czarny);
}

.is-czarna .f36-formularz-wyslij button:hover,
.is-czarna .f36-formularz-wyslij button:focus-visible {
	background: var(--f36-magenta);
	color: var(--f36-bialy);
}

.is-czarna .f36-formularz-info,
.is-czarna .f36-formularz-info a {
	color: var(--f36-bialy);
}

.is-czarna .f36-formularz-komunikat {
	color: var(--f36-czarny);
}

@media (max-width: 760px) {
	.f36-liczby {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Jedna pod drugą: linia między liczbami zamiast linii z lewej. */
	.f36-liczba {
		padding: 16px 0 0;
		border-left: 0;
		border-top: 2px solid rgba(255, 255, 255, 0.22);
	}

	.f36-liczba:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.f36-kroki li {
		padding: 18px 18px 18px 72px;
	}

	.f36-kroki li::before {
		left: 18px;
		font-size: 40px;
	}
}

/* Siatki z kart: elementy w jednym rzędzie bez odstępu dodawanego przez układ bloków */
.f36-droga > *,
.f36-osoby > *,
.f36-programy > *,
.f36-sposoby > *,
.f36-liczby > *,
.f36-projekty-lista > *,
.f36-skroty > * {
	margin-block: 0;
}

/* Większy tekst w sekcjach podstron */
.f36-tekst-duzy {
	margin: 0 0 20px;
	text-wrap-style: pretty;
	font-size: clamp(19px, 1.7vw, 22px);
	line-height: 1.5;
}

/* O nas: droga od szkoły do toru */
.f36-droga {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.f36-droga-etap {
	position: relative;
	padding: 28px;
	border-top: 6px solid;
	background: #121212;
}

.f36-droga-etap.is-sprint { border-color: var(--f36-magenta); }
.f36-droga-etap.is-fundacja { border-color: var(--f36-roz-napis); }
.f36-droga-etap.is-zawody { border-color: var(--f36-zolty); }

.f36-droga-etap:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -14px;
	z-index: 1;
	width: 12px;
	height: 12px;
	border-top: 3px solid var(--f36-bialy);
	border-right: 3px solid var(--f36-bialy);
	transform: translateY(-50%) rotate(45deg);
}

.f36-droga-gdzie {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
}

.f36-droga-etap h3 {
	margin: 0 0 10px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1;
	text-transform: uppercase;
}

.f36-droga-etap h3 a {
	color: var(--f36-bialy);
	text-decoration: none;
}

.f36-droga-etap h3 a:hover,
.f36-droga-etap h3 a:focus-visible {
	text-decoration: underline;
}

.f36-droga-etap p:not(.f36-droga-gdzie) {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.f36-droga-dopisek {
	max-width: 46em;
	margin: 28px 0 0;
	font-size: 18px;
}

.is-czarna .f36-droga-dopisek a {
	color: var(--f36-limonka);
}

/* O nas: zarząd */
.f36-osoby {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.f36-osoba {
	padding: 28px;
	border: 1px solid var(--f36-linia);
}

.f36-osoba h3 {
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(30px, 3vw, 40px);
	text-transform: uppercase;
}

.f36-osoba-rola {
	margin: 4px 0 14px;
	font-weight: 700;
	color: var(--f36-malina);
}

.f36-osoba p:not(.f36-osoba-rola) {
	margin: 0;
	font-size: 17px;
}

/* O nas, sekcja „nasz początek” (Kewin 4.11: tekst obok zdjęcia wyglądał „jak trzy oddzielne rzeczy”): Krzysztof
   w takim samym profilu jak osoby na stronie Team 2036 (zdjęcie 4:5, etykieta, nazwisko, rola, opis, lista z linią
   u góry). Tytuły nie mają roku w osobnej kolumnie, więc pozycja listy to zwykły wiersz. */
.f36-profil-wyniki.f36-profil-tytuly li {
	display: block;
}

/* Opis w dwóch akapitach: odstęp między nimi (dzieci profilu mają zerowe marginesy). */
.f36-profil .f36-osoba-tekst > .f36-osoba-rola ~ p + p {
	margin-top: 1em;
}

/* Team 2036 (Kewin 2.11; 2.11 wieczorem po uwadze „biedna i pusta”): każda osoba to duży profil na całą szerokość:
   zdjęcie 4:5 obok tekstu (na zmianę z lewej i z prawej), etykieta z dyscypliną, nazwisko dużym krojem, klub, opis,
   najważniejsze wyniki z rokiem i odnośnik do wpisu. Osoba bez zdjęcia ma w jego miejscu czarne pole z logo 2036.
   Na telefonie zdjęcie nad tekstem. Pusta siatka (ambasadorzy) się nie pokazuje, a jej sekcja jest niższa. */
.f36-osoby--team {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(48px, 7vw, 112px);
}

.f36-osoby--team:empty {
	display: none;
}

.f36-sekcja-podstrony.wp-block-group:has(.f36-osoby--team:empty) {
	padding-block: clamp(40px, 5vw, 64px);
}

.f36-sekcja-podstrony:has(.f36-osoby--team:empty) .f36-glowa-podstrony {
	margin-bottom: 0;
}

/* Tylko w edytorze (klasa bloku edytora): pusta siatka jako ramka z podpowiedzią, żeby było widać, gdzie dodać osobę. */
.f36-osoby--team.block-editor-block-list__block:not(:has(.f36-osoba)) {
	display: block;
	min-height: 64px;
	padding: 16px;
	border: 2px dashed var(--f36-linia);
}

.f36-osoby--team.block-editor-block-list__block:not(:has(.f36-osoba))::before {
	content: "Tu dodasz osoby: kliknij w tę ramkę, potem „+”, wpisz „Osoba” i wybierz wzorzec „Osoba w Teamie 2036”.";
	display: block;
	font-size: 15px;
	opacity: 0.75;
}

.f36-profil.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 0 clamp(28px, 5vw, 80px);
	align-items: center;
	padding: 0;
	border: 0;
}

.f36-profil > *,
.f36-osoba-tekst > * {
	margin-block: 0;
}

/* Miejsce na zdjęcie, gdy go jeszcze nie ma: czarne pole 4:5 z logo, żeby profil nie wyglądał na pusty. */
.f36-profil:not(:has(> .f36-osoba-zdjecie))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--f36-czarny) url("../img/logo-2036-biale.png") center / 38% auto no-repeat;
}

/* Co drugi profil ze zdjęciem po prawej: kolumny w odwrotnej proporcji, żeby zdjęcie zostało tej samej wielkości. */
.f36-profil.wp-block-group:nth-child(even) {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.f36-profil:nth-child(even) > .f36-osoba-zdjecie,
.f36-profil:nth-child(even)::before {
	order: 2;
}

.f36-osoba-zdjecie.wp-block-image {
	margin: 0;
}

.f36-osoba-zdjecie.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.f36-profil .f36-osoba-tekst > .is-style-etykieta {
	display: table;
	margin-bottom: 18px;
	font-size: 13px;
	padding: 4px 10px;
}

.f36-profil h3 {
	font-size: clamp(42px, 5.4vw, 80px);
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.f36-profil .f36-osoba-tekst .f36-osoba-rola {
	margin: 12px 0 20px;
	font-size: 17px;
}

/* Opis osoby (WordPress dodaje każdemu akapitowi klasę wp-block-paragraph, więc nie „p bez klasy”). */
.f36-profil .f36-osoba-tekst > p:not(.is-style-etykieta, .f36-osoba-rola, .f36-profil-link) {
	max-width: 38em;
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.6;
}

/* Najważniejsze wyniki: rok w pierwszej kolumnie (pogrubiony początek pozycji listy), opis obok. */
.f36-profil-wyniki.wp-block-list {
	max-width: 40em;
	margin-top: 24px;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--f36-czarny);
}

.f36-profil-wyniki li {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--f36-linia);
	font-size: 16px;
	line-height: 1.45;
}

.f36-profil-wyniki li > strong:first-child {
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	padding-top: 1px;
}

.f36-profil .f36-osoba-tekst > .f36-profil-link {
	margin-top: 20px;
	font-weight: 700;
}

@media (max-width: 760px) {
	.f36-profil.wp-block-group,
	.f36-profil.wp-block-group:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.f36-profil:nth-child(even) > .f36-osoba-zdjecie,
	.f36-profil:nth-child(even)::before {
		order: 0;
	}
}

/* O nas: droga od szkoły do toru. Trzy etapy po kolei (numer = kolejność), w każdym projekty z jednym zdaniem,
   pod spodem projekty dla dorosłych. */
.f36-sciezka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.f36-sciezka > *,
.f36-sciezka-etap > *,
.f36-sciezka-dorosli > *,
.f36-sciezka-projekt > * {
	margin-block: 0;
}

.f36-sciezka-etap.wp-block-group {
	position: relative;
	padding: 28px;
	border-top: 6px solid var(--f36-kolor-etapu, var(--f36-bialy));
	background: #121212;
}

.f36-sciezka-etap.is-sprint { --f36-kolor-etapu: var(--f36-magenta); }
.f36-sciezka-etap.is-fundacja { --f36-kolor-etapu: var(--f36-roz-napis); }
.f36-sciezka-etap.is-zawody { --f36-kolor-etapu: var(--f36-zolty); }

.f36-sciezka-etap:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 46px;
	right: -14px;
	z-index: 1;
	width: 12px;
	height: 12px;
	border-top: 3px solid var(--f36-bialy);
	border-right: 3px solid var(--f36-bialy);
	transform: rotate(45deg);
}

.f36-sciezka-numer {
	font-family: var(--f36-anton);
	font-size: 56px;
	line-height: 1;
	color: var(--f36-kolor-etapu);
}

.f36-sciezka-etap h3,
.f36-sciezka-dorosli h3 {
	margin-top: 10px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(28px, 2.6vw, 36px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--f36-bialy);
}

.f36-sciezka-kto {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
}

.f36-sciezka-projekt.wp-block-group {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.f36-sciezka-projekt h4 {
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
}

.f36-sciezka-projekt h4 a {
	color: var(--f36-bialy);
	text-decoration: underline;
	text-decoration-color: var(--f36-kolor-etapu, var(--f36-limonka));
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.f36-sciezka-projekt h4 a:hover {
	text-decoration-color: currentColor;
}

.f36-sciezka-projekt p {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.f36-sciezka-dorosli.wp-block-group {
	--f36-kolor-etapu: var(--f36-limonka);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 16px;
	align-items: start;
	margin-top: 16px;
	padding: 28px;
	border-top: 6px solid var(--f36-limonka);
	background: #121212;
}

.f36-sciezka-dorosli h3 {
	margin-top: 0;
}

.f36-sciezka-dorosli .f36-sciezka-projekt.wp-block-group {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* O nas: z czego się utrzymujemy, trzy źródła obok siebie, odnośniki zawsze na dole karty */
.f36-zrodla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.f36-zrodlo.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 28px;
	background: var(--f36-bialy);
}

.f36-zrodlo > * {
	margin-block: 0;
}

.f36-zrodlo p {
	font-size: 17px;
	line-height: 1.55;
}

.f36-zrodlo .f36-zrodlo-link {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
}

.f36-zrodlo-link a {
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.f36-zrodla-przyciski.wp-block-buttons {
	margin-top: 32px;
}

.is-czarna .f36-zrodlo.wp-block-group {
	background: #121212;
	border-top: 4px solid var(--f36-magenta);
}

.is-czarna .f36-zrodlo .f36-maly-tytul {
	color: var(--f36-bialy);
}

.is-czarna .f36-zrodlo p {
	color: rgba(255, 255, 255, 0.85);
}

.f36-partner-kontakt.wp-block-group {
	gap: 16px 24px;
	margin-top: 32px;
}

.f36-partner-kontakt p {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
}

.f36-partner-kontakt p a {
	color: var(--f36-bialy);
	text-underline-offset: 5px;
}

/* O nas: dane i dokumenty w dwóch takich samych kolumnach */
.f36-dane {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px clamp(32px, 5vw, 72px);
}

.f36-dane > *,
.f36-dane-blok > * {
	margin-block: 0;
}

.f36-dane-lista.wp-block-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 1.5;
}

.f36-dane-lista li + li {
	margin-top: 6px;
}

.f36-dane-lista a {
	color: var(--f36-czarny);
	text-underline-offset: 4px;
}

@media (max-width: 960px) {
	.f36-sciezka,
	.f36-zrodla {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-sciezka-etap:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -14px;
		left: 34px;
		transform: rotate(135deg);
	}

	.f36-sciezka-dorosli.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

@media (max-width: 760px) {
	.f36-dane {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Projekty: karty projektów w barwach projektu */
.f36-projekty-lista {
	display: grid;
	gap: 24px;
}

.f36-projekt {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	min-height: 420px;
	background: var(--f36-grafit);
	color: var(--f36-bialy);
}

.f36-projekt:nth-child(even) .f36-projekt-foto {
	order: 2;
}

.f36-projekt-foto.wp-block-image {
	position: relative;
	min-height: 300px;
	margin: 0;
	overflow: hidden;
}

.f36-projekt-foto a,
.f36-projekt-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.f36-projekt-foto img {
	transition: transform 0.4s ease;
}

.f36-projekt:hover .f36-projekt-foto img {
	transform: scale(1.03);
}

.f36-projekt-tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 4vw, 56px);
}

.f36-projekt-gdzie {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 14px;
	color: var(--f36-akcent-projektu, var(--f36-limonka));
}

.f36-projekt h2 {
	margin: 0 0 16px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(34px, 4vw, 56px);
	line-height: 0.95;
	text-transform: uppercase;
}

.f36-projekt-tekst > p:not(.f36-projekt-gdzie):not(.f36-projekt-dla) {
	max-width: 34em;
	margin: 0 0 12px;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.88);
}

.f36-projekt-dla {
	margin: 0 0 24px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.65);
}

.f36-projekt .wp-block-button__link {
	background: var(--f36-akcent-projektu, var(--f36-limonka));
	color: var(--f36-tekst-przycisku, var(--f36-czarny));
}

.f36-projekt.is-sprint { --f36-akcent-projektu: var(--f36-magenta); --f36-tekst-przycisku: var(--f36-bialy); background: #160a12; }
/* Mały napis w magencie na ciemnym tle miał kontrast 4,3:1, jaśniejszy odcień ma 6,3:1. */
.f36-projekt.is-sprint .f36-projekt-gdzie { color: #ff4da6; }
.f36-projekt.is-zawody { --f36-akcent-projektu: var(--f36-zolty); background: linear-gradient(110deg, #2a2270 0%, #5e2677 55%, #cc0776 100%); }
.f36-projekt.is-liga { --f36-akcent-projektu: var(--f36-limonka); background: var(--f36-grafit); }
.f36-projekt.is-pumptrack { --f36-akcent-projektu: var(--f36-limonka); background: var(--f36-czarny); }

/* Projekty: programy dla zawodników */
.f36-programy {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.f36-program {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.f36-program h3 {
	margin: 0 0 10px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 30px;
	text-transform: uppercase;
	color: var(--f36-bialy);
}

.f36-program p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.f36-program {
	display: flex;
	flex-direction: column;
}

.f36-program .f36-program-status {
	align-self: flex-start;
}

.f36-program .f36-program-link {
	margin-top: auto;
	padding-top: 20px;
}

.f36-program .f36-program-link a {
	color: var(--f36-limonka);
	font-weight: 700;
	text-underline-offset: 4px;
}

.f36-program .f36-program-link a:hover {
	color: var(--f36-bialy);
}

/* Projekty: etykieta stanu programu (np. „W przygotowaniu”) */
.f36-program .f36-program-status {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 10px;
	background: var(--f36-limonka);
	color: var(--f36-czarny);
	font-weight: 700;
	font-size: 13px;
}

/* Etykieta stanu w rogu karty, żeby tytuły kart w jednym rzędzie stały na tej samej wysokości. */
.f36-program {
	position: relative;
}

.f36-program .f36-program-status {
	position: absolute;
	top: -1px;
	right: -1px;
	margin: 0;
}

/* Zawody: najbliższa edycja (blok fundacja2036/edycja) */
.f36-edycja {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 6px solid var(--f36-zolty);
	background: #121212;
	color: var(--f36-bialy);
}

.f36-edycja p {
	color: rgba(255, 255, 255, 0.85);
}

.f36-edycja .f36-edycja-znacznik {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 14px;
	color: var(--f36-zolty);
}

.f36-edycja .f36-edycja-data {
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--f36-bialy);
}

.f36-edycja-miejsce,
.f36-edycja-opis {
	margin: 12px 0 0;
}

.f36-edycja-licznik {
	margin-top: 20px;
}

.f36-edycja .f36-licznik span {
	color: var(--f36-zolty);
}

.f36-edycja-przyciski {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 24px 0 0;
}

.f36-edycja-link {
	color: var(--f36-bialy);
	font-weight: 700;
}

.is-czarna.is-zawody .is-style-pismo {
	color: var(--f36-zolty);
}

/* 2036.CUP, tegoroczna edycja (Kewin 10.11.2026, druga wersja po uwagach „słabo, pusto, duże przerwy”):
   pas faktów pod zdjęciem, partnerzy, kroki udziału, wyścigi przy zdjęciu, limit miejsc, komunikaty tej edycji i archiwum. */
.f36-podstrona-bohater.wp-block-cover:has(+ .f36-fakty-pas) .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background:
		linear-gradient(0deg, var(--f36-czarny) 0%, rgba(0, 0, 0, 0.8) 22%, rgba(10, 12, 8, 0.2) 65%, rgba(10, 12, 8, 0.1) 100%),
		linear-gradient(90deg, rgba(10, 12, 8, 0.55) 0%, rgba(10, 12, 8, 0) 60%);
}

.f36-fakty-pas.wp-block-group {
	padding-block: clamp(8px, 1.5vw, 20px) clamp(32px, 4vw, 48px);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-fakty.wp-block-group {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.f36-fakty .f36-fakt {
	margin: 0;
	padding: 18px clamp(12px, 1.6vw, 24px) 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
}

.f36-fakt strong {
	display: block;
	margin-top: 4px;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: clamp(19px, 1.6vw, 23px);
	line-height: 1.15;
	color: var(--f36-bialy);
}

.f36-partnerzy-edycji.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px clamp(32px, 4vw, 56px);
	margin: 0;
	padding: 24px max(var(--f36-margines), (100% - 1344px) / 2);
	background: var(--f36-bialy);
	border-bottom: 1px solid var(--f36-linia);
}

.f36-partnerzy-edycji .f36-partnerzy-tytul.wp-block-heading {
	font-size: 16px;
	color: var(--f36-czarny);
}

.f36-loga-edycji.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px clamp(36px, 5vw, 64px);
	margin: 0;
}

.f36-logo-edycji.wp-block-image {
	flex: none;
	margin: 0;
}

.f36-logo-edycji img {
	display: block;
	width: auto;
	max-width: none;
	height: 40px;
}

/* Te same proporcje co w pasie „Zaufali nam” (wyrównanie optyczne), trochę większe. */
.f36-logo-edycji img[src*="/garmin."] { height: 31px; }
.f36-logo-edycji img[src*="/sfd."] { height: 42px; }
.f36-logo-edycji img[src*="/mirjan24."] { height: 40px; }

.f36-udzial.wp-block-columns {
	align-items: flex-start;
}

.f36-udzial .f36-edycja {
	margin-top: clamp(24px, 3vw, 36px);
}

.f36-udzial-tytul.wp-block-heading,
.f36-komunikaty-tytul.wp-block-heading,
.f36-panel-cup-tytul.wp-block-heading {
	margin: 0 0 16px;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.15;
	text-transform: none;
}

.f36-kroki-cup.wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: f36-krok-cup;
}

.f36-kroki-cup li {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 64px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	counter-increment: f36-krok-cup;
}

.f36-kroki-cup li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.f36-kroki-cup li::before {
	content: counter(f36-krok-cup);
	position: absolute;
	left: 0;
	top: 14px;
	width: 44px;
	font-family: var(--f36-anton);
	font-size: 40px;
	line-height: 1;
	color: var(--f36-zolty);
}

.f36-kroki-cup strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--f36-waski);
	font-size: 22px;
	line-height: 1.15;
	color: var(--f36-bialy);
}

.f36-formula.wp-block-columns {
	align-items: stretch;
}

.f36-wyscigi.wp-block-group {
	margin: 0;
}

.f36-wyscig.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 4px 24px;
	align-items: baseline;
	margin: 0;
	padding: 22px 0;
	background: linear-gradient(90deg, #2a2270 0%, #5e2677 55%, #cc0776 100%) top left / 100% 4px no-repeat;
}

.f36-wyscig-nazwa.wp-block-heading {
	grid-row: span 2;
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1;
	text-transform: uppercase;
}

.f36-wyscig p {
	margin: 0;
	font-size: 17px;
}

.f36-wyscig .f36-wyscig-haslo {
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.15;
	color: #5e2677;
}

.f36-miejsca.wp-block-group {
	background: linear-gradient(110deg, #2a2270 0%, #5e2677 55%, #cc0776 100%);
}

.f36-miejsca-uklad.wp-block-columns {
	align-items: center;
}

.f36-miejsca .f36-miejsca-liczba {
	margin: 0;
	max-width: 13em;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.15;
	color: var(--f36-bialy);
}

.f36-miejsca-liczba strong {
	display: block;
	margin-bottom: 12px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(160px, 22vw, 320px);
	line-height: 0.82;
	letter-spacing: -0.01em;
	color: var(--f36-zolty);
}

.f36-miejsca-podtytul.wp-block-heading {
	margin: 0 0 14px;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	text-transform: none;
	color: var(--f36-bialy);
}

.f36-kategorie.wp-block-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-kategorie li {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	color: var(--f36-bialy);
}

.f36-miejsca .f36-miejsca-zapisy {
	margin: 28px 0 0;
	padding-left: 16px;
	border-left: 4px solid var(--f36-zolty);
	font-weight: 600;
	font-size: 18px;
}

.f36-komunikaty.wp-block-columns {
	align-items: flex-start;
}

.f36-panel-cup.wp-block-group {
	margin: 0;
	padding: clamp(22px, 2.4vw, 32px);
	background: var(--f36-czarny);
	border-top: 6px solid var(--f36-zolty);
	color: var(--f36-bialy);
}

.f36-panel-cup p {
	margin: 0;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.85);
}

/* Dokumenty zawodów (blok fundacja2036/dokumenty) w czarnym panelu. */
.f36-panel-cup .f36-panel-cup-tytul.wp-block-heading {
	color: var(--f36-bialy);
}

.f36-dokumenty {
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-dokument {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 13px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.f36-dokument-nazwa {
	font-weight: 600;
	font-size: 17px;
	color: var(--f36-bialy);
}

.f36-dokument-stan {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
}

.f36-dokument-link {
	font-weight: 700;
	font-size: 15px;
	color: var(--f36-zolty);
	text-underline-offset: 4px;
}

.f36-dokument-link:hover,
.f36-dokument-link:focus-visible {
	color: var(--f36-bialy);
}

.f36-wpisy-edycji-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-kolumny-2 .f36-wpisy-edycji-lista {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.f36-wpisy-edycji .f36-karta-wpisu-tytul.wp-block-post-title {
	margin: 0;
	font-size: 24px;
}

.f36-wpisy-edycji .f36-wpis-meta {
	margin: 0;
}

.f36-wpisy-edycji-pusty {
	margin: 0;
	padding: clamp(22px, 2.4vw, 32px);
	border: 2px dashed var(--f36-linia);
	font-size: 18px;
	color: var(--f36-szary);
}

.f36-archiwum.wp-block-group {
	border-top: 6px solid var(--f36-czarny);
}

.f36-archiwum .f36-archiwum-relacje.wp-block-group {
	margin-top: clamp(40px, 5vw, 64px);
}

.f36-przyciski-2025.wp-block-buttons {
	margin-top: 28px;
}

/* Wpis 2036.CUP z poprzedniej edycji: informacja na górze treści (inc/edycje.php). */
.f36-stara-edycja {
	margin: 0 0 28px;
	padding: 14px 18px;
	background: var(--f36-tlo);
	border-left: 4px solid #312877;
	font-weight: 600;
	font-size: 17px;
}

.f36-stara-edycja p {
	margin: 0;
}

.f36-stara-edycja a {
	color: inherit;
}

/* Strona zapisów 2036.CUP: wiersz tekstu nie dłuższy niż ok. 80 znaków. */
.f36-zapisy-tekst p {
	max-width: 46em;
}

@media (max-width: 781px) {
	.f36-miejsca-liczba strong {
		font-size: clamp(132px, 40vw, 180px);
	}

	.f36-wyscig.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-wyscig-nazwa.wp-block-heading {
		grid-row: auto;
	}

	.f36-wpisy-edycji-lista,
	.is-kolumny-2 .f36-wpisy-edycji-lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.f36-fakty.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.f36-partnerzy-edycji.wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding-block: 18px;
	}

	.f36-logo-edycji img { height: 32px; }
	.f36-logo-edycji img[src*="/garmin."] { height: 24px; }
	.f36-logo-edycji img[src*="/sfd."] { height: 34px; }
	.f36-logo-edycji img[src*="/mirjan24."] { height: 32px; }
}

.f36-belka-partnerow.wp-block-image {
	margin: 40px 0 0;
	padding: 16px;
	background: var(--f36-bialy);
}

.f36-belka-partnerow img {
	display: block;
	width: 100%;
	height: auto;
}

.f36-dopisek-dotacja {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--f36-szary);
}

/* Galeria zdjęć z Dysku Google (blok fundacja2036/galeria-dysk) */
.f36-galeria-licznik {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--f36-szary);
}

.f36-galeria-siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-galeria-siatka li {
	margin: 0;
}

.f36-galeria-siatka a {
	display: block;
	overflow: hidden;
	background: var(--f36-paczka);
}

.f36-galeria-siatka img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.f36-galeria-siatka a:hover img,
.f36-galeria-siatka a:focus-visible img {
	transform: scale(1.04);
}

.f36-galeria-siatka a:focus-visible {
	outline: 3px solid var(--f36-malina);
	outline-offset: 2px;
}

.f36-galeria-wiecej {
	margin: 24px 0 0;
	text-align: center;
}

.f36-galeria-wiecej button {
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid var(--f36-czarny);
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.f36-galeria-wiecej button:hover,
.f36-galeria-wiecej button:focus-visible {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 56px 72px 72px;
	border: 0;
	background: rgba(0, 0, 0, 0.94);
	color: var(--f36-bialy);
}

.f36-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.f36-lightbox[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.f36-lightbox img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.f36-lightbox-pasek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
	margin: 16px 0 0;
	font-size: 15px;
}

.f36-lightbox-pasek a {
	color: var(--f36-bialy);
	font-weight: 700;
}

.f36-lightbox button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.5);
	color: var(--f36-bialy);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.f36-lightbox button:hover,
.f36-lightbox button:focus-visible {
	background: var(--f36-bialy);
	color: var(--f36-czarny);
}

.f36-lightbox-wstecz { left: 12px; top: 50%; transform: translateY(-50%); }
.f36-lightbox-dalej { right: 12px; top: 50%; transform: translateY(-50%); }
.f36-lightbox-zamknij { right: 12px; top: 12px; }

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

@media (max-width: 760px) {
	.f36-galeria-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.f36-lightbox {
		padding: 64px 8px 88px;
	}

	.f36-lightbox-wstecz,
	.f36-lightbox-dalej {
		top: auto;
		bottom: 16px;
		transform: none;
	}
}

/* Wsparcie: przelew i darowizna */
.f36-przelew {
	margin-top: 32px;
	padding: 24px;
	background: var(--f36-tlo);
}

.f36-przelew p {
	margin: 0 0 12px;
	font-weight: 600;
}

.f36-przelew p span {
	display: block;
	font-weight: 500;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-przelew-konto {
	font-size: clamp(18px, 2vw, 22px);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.f36-darowizna-kolumna.wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3vw, 40px);
	border: 2px solid var(--f36-czarny);
	align-self: stretch;
}

.f36-darowizna {
	display: grid;
	gap: 18px;
	margin: 0;
}

.f36-darowizna fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.f36-darowizna legend {
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 15px;
}

.f36-kwoty {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.f36-kwoty label {
	position: relative;
	display: block;
}

.f36-kwoty input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.f36-kwoty span {
	display: grid;
	place-items: center;
	min-height: 56px;
	border: 1px solid var(--f36-czarny);
	font-family: var(--f36-anton);
	font-size: 22px;
}

.f36-kwoty input:checked + span {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-kwoty input:focus-visible + span {
	outline: 3px solid var(--f36-malina);
	outline-offset: 2px;
}

.f36-darowizna .f36-formularz-wyslij button {
	width: 100%;
}

.f36-darowizna-uwaga {
	margin: 0;
	font-size: 14px;
	color: var(--f36-szary);
}

/* Wsparcie: pozostałe sposoby */
.f36-sposoby {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.f36-sposob.wp-block-group {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(24px, 3vw, 40px);
	background: var(--f36-bialy);
}

/* Przyciski w kartach zawsze na dole, na tej samej wysokości (Kewin 21.10). */
.f36-sposob .wp-block-buttons {
	margin-top: auto;
}

.f36-sposob .is-style-pismo {
	margin: 0;
}

.f36-sposob p:not(.is-style-pismo) {
	margin: 0 0 20px;
}

@media (max-width: 1100px) {
	.f36-programy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.f36-droga {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-droga-etap:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -14px;
		left: 32px;
		transform: rotate(135deg);
	}

	.f36-projekt {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.f36-projekt:nth-child(even) .f36-projekt-foto {
		order: 0;
	}

	.f36-projekt-foto.wp-block-image {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 760px) {
	.f36-osoby:not(.f36-osoby--team), /* karty Teamu 2036 układają się same (auto-fill) */
	.f36-sposoby,
	.f36-programy {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-kwoty {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Formularz kontaktowy (blok fundacja2036/formularz) ---------- */
.f36-formularz {
	scroll-margin-top: 24px;
}

.f36-formularz form {
	display: grid;
	gap: 16px;
	margin: 0;
}

.f36-pole-pulapka {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.f36-formularz-rzad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

.f36-pole {
	display: grid;
	gap: 6px;
	margin: 0;
}

.f36-pole label {
	font-weight: 700;
	font-size: 15px;
}

.f36-pole input[type="text"],
.f36-pole input[type="email"],
.f36-pole textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--f36-czarny);
	border-radius: 0;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-size: 17px;
}

.f36-pole textarea {
	min-height: 160px;
	resize: vertical;
}

.f36-pole input:focus-visible,
.f36-pole textarea:focus-visible {
	outline: 3px solid var(--f36-malina);
	outline-offset: 1px;
}

/* Informacja o danych osobowych pod przyciskiem (polityka prywatności, § 3 i § 4). */
.f36-formularz-info {
	max-width: 60ch;
	margin: 0;
	color: var(--f36-szary);
	font-size: 14px;
	line-height: 1.45;
}

.f36-formularz-info a {
	color: inherit;
}

.f36-formularz-wyslij {
	margin: 4px 0 0;
}

.f36-formularz-wyslij button {
	min-height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font: inherit;
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
}

.f36-formularz-wyslij button:hover,
.f36-formularz-wyslij button:focus-visible {
	background: var(--f36-malina);
}

.f36-formularz-komunikat {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-left: 6px solid;
	font-weight: 600;
}

.f36-formularz-komunikat.is-ok {
	border-color: #1f8a4c;
	background: #e9f6ee;
}

.f36-formularz-komunikat.is-blad {
	border-color: var(--f36-malina);
	background: #fbeaf0;
}

/* ---------- Regulamin sklepu (treść z prawne/REGULAMIN_sklepu_v2.md, narzędzie prawne/narzedzia/regulamin.py) ---------- */
.f36-regulamin-wersja {
	color: var(--f36-szary);
}

.wp-block-list.f36-regulamin-punkty {
	padding-left: 1.6em;
	list-style: none;
}

.f36-regulamin-punkty li + li {
	margin-top: 4px;
}

.f36-regulamin-wciecie {
	padding-left: 1.6em;
}

/* Nazwy plików cookies w polityce prywatności (prawne/POLITYKA_prywatnosci_v1.md). */
.entry-content code,
.wp-block-post-content code {
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

/* ---------- Odstąpienie od umowy (blok fundacja2036/odstapienie) ---------- */
.f36-odstapienie {
	max-width: 640px;
}

.f36-odstapienie-krok {
	margin: 0 0 12px;
	color: var(--f36-szary);
	font-weight: 700;
	font-size: 15px;
}

.f36-odstapienie-podpowiedz {
	margin: 0;
	color: var(--f36-szary);
	font-size: 15px;
}

.f36-odstapienie-dane {
	display: grid;
	gap: 12px;
	margin: 0 0 8px;
	padding: 20px;
	background: var(--f36-tlo);
}

.f36-odstapienie-dane div {
	display: grid;
	gap: 2px;
}

.f36-odstapienie-dane dt {
	color: var(--f36-szary);
	font-size: 14px;
}

.f36-odstapienie-dane dd {
	margin: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.f36-odstapienie-pozycje {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.f36-odstapienie-pozycje legend {
	margin: 0 0 4px;
	padding: 0;
	font-weight: 700;
	font-size: 17px;
}

.f36-odstapienie-pozycja {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--f36-linia);
}

.f36-odstapienie-pozycja input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--f36-czarny);
}

.f36-odstapienie-sztuki {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--f36-szary);
	font-size: 15px;
	white-space: nowrap;
}

.f36-odstapienie-sztuki select {
	min-height: 40px;
	padding: 0 8px;
	border: 1px solid var(--f36-czarny);
	border-radius: 0;
	background: var(--f36-bialy);
	font: inherit;
}

.f36-odstapienie-uwaga {
	margin: 0;
	padding: 16px 18px;
	border-left: 6px solid var(--f36-czarny);
	background: var(--f36-tlo);
}

.f36-odstapienie-tytul {
	margin: 32px 0 12px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.f36-odstapienie-tabela {
	width: 100%;
	border-collapse: collapse;
}

.f36-odstapienie-tabela th {
	width: 1%;
	font-weight: 700;
}

@media (max-width: 760px) {
	.f36-odstapienie-tabela th {
		white-space: normal !important;
		width: 40%;
	}

	.f36-odstapienie-pozycja {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.f36-odstapienie-sztuki {
		grid-column: 2;
	}
}

@media (max-width: 760px) {
	.f36-formularz-rzad {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-formularz-wyslij button {
		width: 100%;
	}
}

/* ---------- Sklep: pierwszy ekran, kategorie, karty, dobór rozmiaru, karta produktu (kierunek 3, wzór: Endurox) ---------- */
/* Pierwszy ekran: menu leży na zdjęciu (część header-glowna), tytuł u góry po lewej, karta produktu po prawej, opis na dole. */
.f36-sklep > * {
	margin-block: 0; /* pasek, zdjęcie i sekcje stykają się bez odstępów */
}

.f36-sklep-bohater.wp-block-cover {
	min-height: clamp(600px, 92vh, 860px);
	padding: 0;
	align-items: stretch;
}

.f36-sklep-bohater .wp-block-cover__image-background {
	object-position: 55% 50%;
}

.f36-sklep-bohater.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0 { /* mocniej niż reguła WordPressa dla dim-0 */
	opacity: 1;
	background:
		linear-gradient(180deg, rgba(10, 12, 8, 0.6) 0%, rgba(10, 12, 8, 0) 28%),
		linear-gradient(0deg, rgba(10, 12, 8, 0.72) 0%, rgba(10, 12, 8, 0) 42%),
		linear-gradient(90deg, rgba(10, 12, 8, 0.55) 0%, rgba(10, 12, 8, 0) 58%);
}

.f36-sklep-bohater .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: 1344px;
	margin: 0 auto;
	padding: 124px var(--f36-margines) clamp(32px, 5vw, 56px); /* 124 px: miejsce na menu leżące na zdjęciu */
}

.f36-sklep-tytul.wp-block-heading {
	max-width: 7ch;
	margin: 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(64px, 8.5vw, 132px);
	line-height: 0.95;
	text-transform: uppercase;
}

/* Tytuł, opis, przycisk i odnośnik jednym blokiem na dole po lewej (Kewin 21.10: dolny napis był oderwany od reszty). */
.f36-sklep-bohater-gora > * {
	margin-block: 0;
}

.f36-sklep-akcje.wp-block-group {
	gap: 16px 28px;
	margin-top: 28px;
}

.f36-sklep-akcje .wp-block-buttons {
	margin: 0;
}

.f36-sklep-cta .wp-block-button__link {
	min-width: 320px;
}

.f36-sklep-bohater .f36-sklep-wstep {
	max-width: 30em;
	margin-top: 20px;
	font-size: 19px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}

.f36-sklep-link {
	margin: 0;
}

.f36-sklep-link a {
	color: var(--f36-bialy);
	font-weight: 700;
}

.f36-mini {
	position: absolute;
	z-index: 3;
	top: 124px;
	right: var(--f36-margines);
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 236px;
	padding: 14px;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	text-decoration: none;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}

.f36-mini:hover,
.f36-mini:focus-visible {
	outline: 3px solid var(--f36-limonka);
	outline-offset: 0;
}

.f36-mini-znacznik {
	font-size: 13px;
	font-weight: 700;
	color: var(--f36-malina);
}

.f36-mini-foto {
	background: var(--f36-paczka);
}

.f36-mini-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.f36-mini-nazwa {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.f36-mini-cena {
	font-family: var(--f36-anton);
	font-size: 24px;
	line-height: 1;
}

/* Lista produktów: wyśrodkowany tytuł z napisem odręcznym, kategorie z lewej, karty z prawej */
.f36-sklep-lista.wp-block-group {
	padding-block: clamp(64px, 8vw, 112px);
	scroll-margin-top: 16px;
}

.f36-sklep-lista-glowa {
	margin-bottom: clamp(32px, 4vw, 56px);
	text-align: left; /* nagłówki sekcji na całej stronie do lewej (decyzja 21.10) */
}

.f36-sklep-lista-glowa .is-style-pismo {
	position: relative;
	z-index: 1;
	margin: 0 0 -0.3em;
}

.f36-sklep-lista-glowa .wp-block-heading {
	margin: 0;
}

.f36-sklep-kategoria .f36-sklep-lista-glowa {
	text-align: left;
}

.f36-produkty.ma-kategorie {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.f36-kategorie {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 1px solid var(--f36-linia);
}

.f36-kategorie-tytul {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-kategoria {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	color: var(--f36-czarny);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
}

.f36-kategoria span {
	color: var(--f36-szary);
	font-weight: 500;
	font-size: 14px;
}

.f36-kategoria:hover {
	background: var(--f36-tlo);
}

.f36-kategoria.is-on {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-kategoria.is-on span {
	color: rgba(255, 255, 255, 0.7);
}

.f36-siatka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-produkty--podobne .f36-siatka {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.f36-produkt {
	display: flex;
	margin: 0;
	border: 1px solid var(--f36-linia);
	background: var(--f36-bialy);
	scroll-margin-top: 24px;
	transition: border-color 0.2s ease;
}

.f36-produkt:hover,
.f36-produkt:focus-within {
	border-color: var(--f36-czarny);
}

.f36-produkt-formularz {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 20px;
}

.f36-produkt-glowa {
	display: block;
	padding: 0 0 16px;
	color: var(--f36-czarny);
	text-align: center;
	text-decoration: none;
}

.f36-produkt-nazwa {
	display: block;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
}

.f36-produkt-podpis {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--f36-szary);
}

.f36-produkt-foto {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--f36-paczka);
}

.f36-produkt-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.f36-produkt-foto .f36-produkt-drugie {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.f36-produkt:hover .f36-produkt-drugie {
		opacity: 1;
	}
}

/* Rozmiary w jednej linii */
.f36-rozmiary {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
}

.f36-rozmiar {
	position: relative;
	display: inline-flex;
	flex: 0 1 auto;
	min-width: 0;
}

.f36-rozmiar input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.f36-rozmiar > span {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid #c9c9c9;
	background: var(--f36-bialy);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.f36-rozmiar:hover > span {
	border-color: var(--f36-czarny);
}

.f36-rozmiar input:checked + span {
	background: var(--f36-czarny);
	border-color: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-rozmiar input:focus-visible + span {
	outline: 3px solid var(--f36-malina);
	outline-offset: 2px;
}

.f36-rozmiar.is-brak > span {
	color: #9a9a9a;
	text-decoration: line-through;
}

.f36-rozmiar.is-brak input {
	cursor: not-allowed;
}

.f36-produkt-uwaga {
	margin: 0;
	padding: 16px 0 0;
	font-size: 14px;
	text-align: center;
	color: var(--f36-szary);
}

/* Przycisk z ceną: obrys, a na karcie pod kursorem wypełniony (jak w Endurox) */
.f36-produkt-kup {
	margin-top: auto;
	padding-top: 16px;
}

/* Karty w jednym rzędzie mają nazwę, zdjęcie, rozmiary i przycisk na tych samych wysokościach, także gdy nazwa zawija
   się do dwóch wierszy albo produkt nie ma podpisu: karta i formularz dzielą wiersze siatki sklepu (subgrid). */
@supports (grid-template-rows: subgrid) {
	.f36-siatka > .f36-produkt {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.f36-siatka > .f36-produkt > .f36-produkt-formularz {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		width: auto;
		min-width: 0;
	}

	.f36-produkt-formularz > .f36-produkt-glowa {
		grid-row: 1;
	}

	.f36-produkt-formularz > .f36-produkt-foto {
		grid-row: 2;
	}

	.f36-produkt-formularz > .f36-rozmiary,
	.f36-produkt-formularz > .f36-produkt-uwaga {
		grid-row: 3;
	}

	.f36-produkt-formularz > .f36-produkt-kup {
		grid-row: 4;
		align-self: end;
	}
}

.f36-produkt-kup button,
.f36-produkt-kup a,
.f36-produkt-brak {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--f36-czarny);
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.f36-produkt:hover .f36-produkt-kup button,
.f36-produkt:focus-within .f36-produkt-kup button,
.f36-produkt:hover .f36-produkt-kup a,
.f36-produkt:focus-within .f36-produkt-kup a {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-produkt .f36-produkt-kup button:hover,
.f36-produkt .f36-produkt-kup button:focus-visible,
.f36-produkt .f36-produkt-kup a:hover,
.f36-produkt .f36-produkt-kup a:focus-visible {
	background: var(--f36-malina);
	border-color: var(--f36-malina);
	color: var(--f36-bialy);
}

.f36-produkt-kup b {
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0;
	white-space: nowrap;
}

.f36-produkt-brak {
	border-color: var(--f36-linia);
	background: var(--f36-tlo);
	color: var(--f36-szary);
	cursor: default;
}

.f36-produkty-pusto {
	padding: 32px 0;
}

.f36-stronicowanie {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.f36-stronicowanie .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--f36-czarny);
	color: var(--f36-czarny);
	text-decoration: none;
	font-weight: 600;
}

.f36-stronicowanie .current {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

/* Dlaczego to ważne: zdjęcie po lewej, tekst po prawej (jak „Train again sooner” w Endurox) */
.f36-sklep-dlaczego.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 600px;
	padding: 0;
	background: var(--f36-tlo);
}

.f36-sklep-dlaczego > * {
	margin: 0;
}

.f36-sklep-dlaczego-foto.wp-block-image {
	position: relative;
	min-height: 420px;
	margin: 0;
}

.f36-sklep-dlaczego-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.f36-sklep-dlaczego-tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 680px;
	padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
}

.f36-sklep-dlaczego .is-style-pismo {
	margin: 0;
}

.f36-sklep-dlaczego .f36-tytul-sekcji {
	margin: 0 0 20px;
	font-size: clamp(40px, 3.8vw, 58px);
}

.f36-sklep-dlaczego-tekst p:not(.is-style-pismo) {
	max-width: 32em;
	margin: 0 0 20px;
	font-size: 19px;
}

.f36-odhaczone {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.f36-odhaczone li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
	font-size: 18px;
}

.f36-odhaczone li::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: var(--f36-malina) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Rysunek do tabeli rozmiarów: kreska w kolorze tekstu, cienkie malinowe strzałki, etykiety jako małe ramki
   (litera malinowa, wymiar w kolorze tekstu, tło jak tło rysunku). */
.f36-rys {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.f36-rys-pomiar {
	stroke: var(--f36-magenta);
	stroke-width: 1.6;
}

.f36-rys-pomoc {
	stroke: var(--f36-magenta);
	stroke-width: 1.2;
	stroke-dasharray: 3 3;
}

.f36-rys-etykieta rect {
	fill: var(--f36-rys-tlo, var(--f36-bialy));
	stroke: var(--f36-magenta);
	stroke-width: 1.2;
}

.f36-rys-etykieta text {
	fill: currentColor;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.f36-rys-litera {
	fill: var(--f36-magenta);
}

.f36-rys-podpis {
	fill: var(--f36-szary);
	font-family: var(--f36-waski);
	font-weight: 600;
}

/* Przód i tył obok siebie, na wąskim telefonie jeden pod drugim. */
.f36-rys-para {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 28px;
	align-items: start;
}

@media (max-width: 480px) {
	.f36-rys-para {
		grid-template-columns: minmax(0, 320px);
		justify-content: center;
	}
}

/* Tabela rozmiarów na karcie produktu: rysunek obok tabeli, żeby po kliknięciu rozmiaru było widać zmianę. */
.f36-tabela-rozmiarow {
	margin-block: clamp(24px, 4vw, 40px);
	scroll-margin-top: 24px;
}

.f36-tabela-rozwin > summary {
	scroll-margin-top: 24px;
}

/* Zwinięta tabela: wyraźny pasek (szare tło, malinowy akcent, miarka, czarny przycisk z plusem),
   po kliknięciu rozwija rysunek i tabelę. */
.f36-tabela-rozwin > summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--f36-linia);
	border-left: 4px solid var(--f36-magenta);
	background: var(--f36-tlo);
	list-style: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.f36-tabela-rozwin > summary::-webkit-details-marker {
	display: none;
}

.f36-tabela-rozwin > summary:hover {
	background: #e9ebef;
}

.f36-tabela-rozwin > summary:focus-visible {
	outline: 2px solid var(--f36-magenta);
	outline-offset: 3px;
}

.f36-tabela-miarka {
	grid-row: 1 / span 2;
	width: 32px;
	height: 32px;
	color: var(--f36-magenta);
}

.f36-tabela-rozwin > summary h2 {
	grid-column: 2;
	margin: 0;
	font-family: var(--f36-waski);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

.f36-tabela-podpowiedz {
	grid-column: 2;
	color: var(--f36-szary);
	font-size: 14px;
	line-height: 1.35;
}

.f36-tabela-ikona {
	position: relative;
	grid-column: 3;
	grid-row: 1 / span 2;
	width: 40px;
	height: 40px;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	transition: background-color 0.15s ease;
}

.f36-tabela-ikona::before,
.f36-tabela-ikona::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.f36-tabela-ikona::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.f36-tabela-rozwin[open] .f36-tabela-ikona::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.f36-tabela-rozwin > summary:hover .f36-tabela-ikona {
	background: var(--f36-magenta);
}

.f36-tabela-tresc {
	padding: 24px 0 8px;
}

.f36-tabela-wstep {
	max-width: 62ch;
	margin: 0 0 24px;
	color: var(--f36-szary);
	font-size: 16px;
}

@media (max-width: 600px) {
	.f36-tabela-rozwin > summary {
		padding: 14px;
		column-gap: 12px;
	}

	.f36-tabela-miarka {
		width: 26px;
		height: 26px;
	}

	.f36-tabela-rozwin > summary h2 {
		font-size: 1.3rem;
	}

	.f36-tabela-podpowiedz {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.f36-tabela-rozwin > summary,
	.f36-tabela-ikona,
	.f36-tabela-ikona::before,
	.f36-tabela-ikona::after {
		transition: none;
	}
}

.f36-tabela-w {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 28px clamp(28px, 5vw, 64px);
	align-items: center;
}

.f36-tabela-rysunek {
	margin: 0;
}

.f36-tabela-rysunek > .f36-rys {
	max-width: 400px;
	margin-inline: auto;
}

.f36-tabela-rysunek figcaption {
	display: grid;
	gap: 3px;
	width: fit-content;
	max-width: 100%;
	margin: 14px auto 0;
	color: var(--f36-szary);
	font-size: 14px;
	line-height: 1.45;
}

.f36-tabela-rysunek figcaption b {
	margin-right: 4px;
	color: var(--f36-magenta);
	font-family: var(--f36-waski);
	font-size: 15px;
}

.f36-tabela-dane {
	overflow-x: auto;
}

.f36-tabela-dane table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.f36-tabela-dane thead th {
	padding: 0 8px 10px;
	border-bottom: 1px solid var(--f36-czarny);
	color: var(--f36-szary);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	vertical-align: bottom;
}

.f36-tabela-dane thead th:first-child {
	text-align: left;
}

.f36-tabela-dane thead abbr {
	display: block;
	color: var(--f36-magenta);
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}

.f36-tabela-dane thead th span {
	display: block;
}

.f36-tabela-dane tbody tr {
	cursor: pointer;
}

.f36-tabela-dane tbody :is(th, td) {
	padding: 3px 8px;
	border-bottom: 1px solid var(--f36-linia);
	font-size: 17px;
	text-align: center;
}

.f36-tabela-dane tbody th {
	text-align: left;
}

.f36-tabela-dane tbody button {
	min-width: 52px;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}

.f36-tabela-dane tbody tr:hover {
	background: var(--f36-tlo);
}

.f36-tabela-dane tbody tr.is-wybrany {
	background: #fdf1f7;
}

.f36-tabela-dane tbody tr.is-wybrany td {
	font-weight: 700;
}

.f36-tabela-dane tbody button[aria-pressed="true"] {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-tabela-dane tbody button:focus-visible {
	outline: 2px solid var(--f36-magenta);
	outline-offset: 1px;
}

@media (max-width: 760px) {
	.f36-tabela-w {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-tabela-rysunek > .f36-rys {
		max-width: 320px;
	}
}

/* Panel w sklepie: biały rysunek na czarnym tle. */
.f36-dobor-rysunek {
	--f36-rys-tlo: var(--f36-czarny);
	margin-top: 22px;
	color: var(--f36-bialy);
}

/* Na tablecie panel zajmuje cały wiersz: rysunek nie rośnie ponad 380 px. */
.f36-dobor-rysunek .f36-rys {
	max-width: 380px;
	margin-inline: auto;
}

/* Dobór rozmiaru Oversize */
.f36-sklep-rozmiary.wp-block-group {
	padding-block: clamp(56px, 8vw, 104px);
}

.f36-dobor-glowa {
	margin-bottom: 40px;
	text-align: left;
}

.f36-dobor-pismo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--f36-pismo);
	font-weight: 700;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1;
	color: var(--f36-malina);
	transform: rotate(-4deg);
	transform-origin: left bottom;
}

.f36-dobor-tytul {
	margin: 0 0 14px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sekcja);
	line-height: 0.95;
	text-transform: uppercase;
}

.f36-dobor-wstep {
	max-width: 36em;
	margin: 0;
	color: var(--f36-szary);
}

.f36-dobor-w {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
	gap: 24px;
	align-items: stretch;
}

.f36-dobor-koszulka {
	display: flex;
	flex-direction: column;
	color: var(--f36-czarny);
	text-decoration: none;
}

.f36-dobor-foto {
	display: block;
	background: var(--f36-paczka);
}

.f36-dobor-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.f36-dobor-wiersz {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-top: 14px;
}

.f36-dobor-wiersz b {
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
}

.f36-dobor-wiersz span {
	font-size: 15px;
	color: var(--f36-szary);
	text-align: right;
}

.f36-dobor-tabela {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-dobor-tabela h3 {
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 18px;
}

/* Sześć rozmiarów zawsze w jednym rzędzie (XXL nie przeskakuje do drugiego wiersza). */
.f36-dobor-przyciski {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
}

.f36-dobor-przyciski button {
	min-width: 0;
	min-height: 44px;
	padding: 0 2px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	color: var(--f36-bialy);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.f36-dobor-przyciski button[aria-pressed="true"] {
	background: var(--f36-bialy);
	border-color: var(--f36-bialy);
	color: var(--f36-czarny);
}

.f36-dobor-przyciski button:focus-visible {
	outline: 3px solid var(--f36-limonka);
	outline-offset: 2px;
}

.f36-dobor-tabela small {
	display: block;
	margin-top: 18px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}

/* Karta produktu */
.f36-produkt-strona.wp-block-group {
	padding-block: 24px clamp(56px, 8vw, 104px);
}

.f36-produkt-strona .wp-block-woocommerce-breadcrumbs {
	margin-bottom: 20px;
	font-size: 14px;
}

.f36-produkt-uklad.wp-block-columns {
	gap: clamp(24px, 5vw, 64px);
	margin: 0;
}

.f36-produkt-strona .wp-block-woocommerce-product-image-gallery {
	max-width: none; /* WooCommerce ogranicza galerię do 512 px */
}

.f36-produkt-strona .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	width: 100%;
	max-width: none;
	float: none;
}

.f36-produkt-strona .woocommerce-product-gallery__wrapper,
.f36-produkt-strona .woocommerce-product-gallery__image {
	background: var(--f36-paczka);
}

/* Skrypt pokazu zdjęć WooCommerce (flexslider) przez ok. 100 ms po starcie rozciąga pierwsze zdjęcie na szerokość
   wszystkich slajdów naraz (galeria miała wtedy ok. 1800 px), a opis z przyciskami podskakiwał w dół i z powrotem.
   Okno pokazu jest od początku kwadratowe, jak zdjęcia produktów; po starcie skrypt i tak wpisuje wysokość zdjęcia. */
.f36-produkt-strona .woocommerce-product-gallery .flex-viewport {
	aspect-ratio: 1 / 1;
}

/* Przycisk powiększenia galerii: rysowana lupa, kwadrat 44 px jak inne przyciski. Klasa powtórzona trzy razy,
   bo reguła WooCommerce („.woocommerce div.product div.images …”) ma większą wagę. */
.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	text-indent: 0;
	border: 1px solid var(--f36-linia);
	border-radius: 0;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	text-decoration: none;
}

.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger > span {
	display: none;
}

.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger::after {
	display: none;
}

.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger::before {
	content: "";
	position: static;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.8 4.8-1.4 1.4-4.8-4.8A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.8 4.8-1.4 1.4-4.8-4.8A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger:hover {
	color: var(--f36-magenta);
}

.f36-produkt-strona .woocommerce-product-gallery .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--f36-magenta);
	outline-offset: 2px;
}

.f36-produkt-strona .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.f36-produkt-strona .flex-control-thumbs li {
	width: auto !important; /* WooCommerce: li 25% szerokości (selektor o dużej wadze) */
	margin: 0 !important;
	float: none !important;
}

.f36-produkt-strona .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--f36-paczka);
	opacity: 0.6;
	cursor: pointer;
}

.f36-produkt-strona .flex-control-thumbs img.flex-active,
.f36-produkt-strona .flex-control-thumbs img:hover {
	opacity: 1;
}

.f36-produkt-kategoria {
	margin: 0 0 8px;
	font-family: var(--f36-pismo);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: var(--f36-malina);
}

.f36-produkt-kategoria a {
	color: inherit;
	text-decoration: none;
}

.f36-produkt-strona .wp-block-post-title {
	margin: 0 0 16px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.95;
	text-transform: uppercase;
}

.f36-produkt-strona .wp-block-woocommerce-product-price {
	margin: 0 0 20px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
}

.f36-produkt-strona .wp-block-post-excerpt {
	margin: 0 0 24px;
	max-width: 36em;
}

.f36-produkt-strona .variations {
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
}

/* Tabela wariantów jako zwykłe bloki na całą szerokość formularza (inaczej wiersz kurczy się do treści
   i na telefonie przyciski rozmiarów zawijają się do drugiego rzędu). */
.f36-produkt-strona .variations,
.f36-produkt-strona .variations tbody,
.f36-produkt-strona .variations tr {
	display: block;
	width: 100%;
}

.f36-produkt-strona .variations th,
.f36-produkt-strona .variations td {
	display: block;
	padding: 0;
	text-align: left;
}

.f36-produkt-strona .variations th label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

/* Odnośnik „Tabela rozmiarów” obok etykiety „Rozmiar” (dodaje go skrypt tabeli rozmiarów). */
.f36-produkt-strona .variations th.f36-z-tabela {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	margin-bottom: 8px;
}

.f36-produkt-strona .variations th.f36-z-tabela label {
	margin-bottom: 0;
}

.f36-do-tabeli {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	color: var(--f36-czarny);
	font-weight: 600;
	font-size: 15px;
	text-decoration: underline;
	text-decoration-color: var(--f36-magenta);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.f36-do-tabeli svg {
	width: 22px;
	height: 22px;
	color: var(--f36-magenta);
}

.f36-do-tabeli:hover {
	color: var(--f36-magenta);
}

.f36-do-tabeli:focus-visible {
	outline: 2px solid var(--f36-magenta);
	outline-offset: 3px;
}

.f36-rozmiary.f36-rozmiary--karta {
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0;
}

.f36-rozmiar-btn {
	min-width: 52px;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid #b9b9b9;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.f36-rozmiar-btn[aria-pressed="true"] {
	background: var(--f36-czarny);
	border-color: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-rozmiar-btn:disabled {
	color: #9a9a9a;
	text-decoration: line-through;
	cursor: not-allowed;
}

.f36-rozmiar-btn:focus-visible {
	outline: 3px solid var(--f36-malina);
	outline-offset: 2px;
}

.f36-produkt-strona .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-produkt-strona .woocommerce-variation-price {
	margin: 8px 0 12px;
	font-family: var(--f36-anton);
	font-size: 28px;
}

.f36-produkt-strona form.cart:not(.variations_form),
.f36-produkt-strona .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.f36-produkt-strona .quantity .qty {
	width: 72px;
	min-height: 56px;
	border: 1px solid var(--f36-czarny);
	border-radius: 0;
	font: inherit;
	text-align: center;
}

.f36-produkt-strona .single_add_to_cart_button {
	flex: 1;
	min-height: 56px;
	border: 0;
	border-radius: 0;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
}

.f36-produkt-strona .single_add_to_cart_button:hover {
	background: var(--f36-malina);
}

/* Przed wyborem rozmiaru przycisk jest szary, ale napis dalej czytelny (półprzezroczystość dawała kontrast 3,9:1). */
.f36-produkt-strona .single_add_to_cart_button.disabled,
.f36-produkt-strona .single_add_to_cart_button.disabled:hover {
	opacity: 1 !important; /* WooCommerce wymusza 0,5 regułą o wyższej wadze */
	background: var(--f36-szary);
	border-color: var(--f36-szary);
	cursor: not-allowed;
}

.f36-produkt-strona .wp-block-woocommerce-product-meta {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--f36-linia);
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-produkt-strona .wp-block-woocommerce-product-details {
	margin-top: 56px;
}

.f36-produkty--podobne {
	margin-top: 72px;
}

.f36-produkty-tytul {
	margin: 0 0 24px;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 52px);
	text-transform: uppercase;
}

/* Nagłówek strony zamówienia */
.f36-naglowek-zamowienia {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px var(--f36-margines);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-naglowek-zamowienia a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.f36-naglowek-zamowienia img {
	display: block;
	width: auto;
	height: 30px;
}

.f36-naglowek-zamowienia a:not(.f36-logo) {
	color: var(--f36-bialy);
	font-weight: 600;
	font-size: 15px;
}

@media (max-width: 1100px) {
	.f36-produkty.ma-kategorie {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.f36-siatka,
	.f36-produkty--podobne .f36-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.f36-dobor-w {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.f36-dobor-tabela {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.f36-sklep-bohater.wp-block-cover {
		min-height: 640px;
	}

	.f36-sklep-bohater .wp-block-cover__image-background {
		object-position: 62% 50%;
	}

	.f36-sklep-bohater .wp-block-cover__inner-container {
		padding: 112px var(--f36-margines) 28px;
	}

	.f36-sklep-cta .wp-block-button__link {
		min-width: 0;
		width: 100%;
	}

	.f36-sklep-cta {
		width: 100%;
	}

	.f36-sklep-bohater .f36-sklep-wstep {
		font-size: 17px;
	}

	.f36-mini {
		display: none;
	}

	.f36-sklep-lista-glowa {
		text-align: left;
	}

	.f36-produkty.ma-kategorie {
		display: block;
	}

	.f36-kategorie {
		position: static;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		margin: 0 calc(var(--f36-margines) * -1) 20px;
		padding: 0 var(--f36-margines) 4px;
		border: 0;
		scrollbar-width: none;
	}

	.f36-kategorie-tytul {
		display: none;
	}

	.f36-kategoria {
		flex: none;
		border: 1px solid var(--f36-czarny);
	}

	.f36-siatka,
	.f36-produkty--podobne .f36-siatka {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.f36-produkt-formularz {
		padding: 16px;
	}

	.f36-rozmiar > span {
		min-width: 44px;
		height: 44px;
	}

	/* Wszystkie rozmiary w jednym rzędzie także na telefonie (XXL nie przeskakuje do drugiego wiersza). */
	.f36-rozmiary.f36-rozmiary--karta {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
		gap: 5px;
		padding: 0;
	}

	.f36-rozmiary--karta .f36-rozmiar-btn {
		min-width: 0;
		padding: 0 4px;
	}

	.f36-sklep-dlaczego.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.f36-sklep-dlaczego-foto.wp-block-image {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.f36-sklep-dlaczego-tekst {
		padding: 40px var(--f36-margines) 48px;
	}

	.f36-dobor-w {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.f36-dobor-koszulka:nth-child(3) {
		display: none;
	}

	.f36-dobor-wiersz b {
		font-size: 28px;
	}

	.f36-dobor-wiersz span {
		display: none;
	}
}

/* ---------- ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
	.f36-loga-tor,
	.f36-pasek-tor,
	.f36-kropka,
	.f36-pierscien::before {
		animation: none;
	}

	.f36-pierscien::before {
		--f36-postep: 100;
	}

	.f36-slajd.wp-block-cover {
		transition: none;
	}

	.f36-bohater.is-js .f36-slajd.is-on .wp-block-cover__image-background {
		animation: none;
	}

	.f36-produkt-foto .f36-produkt-drugie,
	.f36-projekt-foto img,
	.f36-galeria-siatka img {
		transition: none;
	}

	.f36-pokaz-przycisk.is-teraz .f36-linia i,
	.f36-paski .f36-kreska.is-teraz i {
		animation: none;
		width: 100%;
	}
}

/* Pas partnerów bez ruchu: logotypy w kilku rzędach. */
.f36-loga.is-statyczne {
	flex-wrap: wrap;
	gap: 24px 48px;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---------- wąski tablet: menu w jednej linii, ciaśniej ---------- */
@media (min-width: 600px) and (max-width: 900px) {
	.f36-naglowek-w {
		gap: 8px;
	}

	.f36-menu.wp-block-navigation,
	.f36-menu .wp-block-navigation__container {
		gap: 12px;
		font-size: 14px;
	}

	.f36-logo img {
		height: 24px;
	}
}

/* Osiem pozycji menu (od 2.11 także „Strona główna” i „Team 2036”) nie mieści się w jednej linii poniżej ok. 760 px,
   więc do 779 px menu zwija się w przycisk jak na telefonie (WordPress robi to sam tylko poniżej 600 px). */
@media (min-width: 600px) and (max-width: 779px) {
	.f36-menu .wp-block-navigation__responsive-container-open:not(.always-shown),
	.f36-menu .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: flex;
	}

	.f36-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------- telefon ---------- */
@media (max-width: 760px) {
	.is-style-pismo {
		font-size: 40px;
	}

	.f36-glowa.wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24px;
	}

	.f36-naglowek-w {
		padding: 14px var(--f36-margines);
		gap: 8px;
	}

	.f36-logo img {
		height: 24px;
	}

	.f36-menu.wp-block-navigation {
		margin-left: auto;
		margin-right: 0;
	}

	.f36-koszyk .wc-block-mini-cart__button {
		padding: 0 10px;
	}

	.f36-bohater.wp-block-group {
		min-height: 0;
	}

	.f36-slajd .wp-block-cover__image-background {
		object-position: 66% 50%;
	}

	.f36-bohater::before {
		background: linear-gradient(0deg, rgba(8, 10, 8, 0.88) 0%, rgba(8, 10, 8, 0.5) 55%, rgba(8, 10, 8, 0.2) 100%);
	}

	.f36-bohater-tresc {
		padding: 240px var(--f36-margines) 110px;
	}

	.f36-bohater-pismo.is-style-pismo {
		left: auto;
		align-self: flex-end;
		top: -40px;
		font-size: 42px;
	}

	.f36-szeroki,
	.f36-szeroki .wp-block-button__link {
		width: 100%;
	}

	.f36-bohater-tresc .wp-block-buttons {
		width: 100%;
	}

	.f36-teraz {
		font-size: 16px;
	}

	.f36-sterowanie {
		bottom: 16px;
		gap: 8px;
	}

	.f36-pokaz-przycisk .f36-pokaz-opis {
		display: none;
	}

	.f36-pokaz-przycisk b {
		font-size: 12px;
		line-height: 1.25;
	}

	.f36-pokaz-przycisk.ma-krotka .f36-pelna {
		display: none;
	}

	.f36-pokaz-przycisk.ma-krotka .f36-krotka {
		display: inline;
	}

	.f36-newsletter.wp-block-group {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.f36-newsletter-w {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.f36-zapis-wiersz {
		flex-direction: column;
		gap: 10px;
	}

	.f36-zapis-wiersz input {
		border-right: 2px solid var(--f36-bialy);
	}

	.f36-stopka-siatka {
		grid-template-columns: 1fr 1fr;
		gap: 32px 16px;
	}

	.f36-stopka-firma {
		grid-column: 1 / -1;
	}

	.f36-stopka-dol {
		flex-direction: column;
		gap: 8px;
	}

	.f36-karty-wpisow.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* Zamknięta szuflada mini‑koszyka WooCommerce: niewidoczna także dla klawiatury (wcześniej Tab trafiał w jej ukryte przyciski). */
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s linear 0.3s;
}

/* Koszyk i Moje konto: tytuł i treść na jednej krawędzi (WooCommerce zawęża tytuł do 1000 px). */
.f36-strona-sklepowa .wp-block-post-title.f36-strona-tytul,
.f36-strona-sklepowa.wp-block-group .woocommerce {
	max-width: 1100px;
}

/* Logowanie i rejestracja w Moim koncie: kanciaste pola jak w reszcie strony, formularz nie na całą szerokość. */
.f36-strona-sklepowa .woocommerce :is(form.login, form.register, form.lost_reset_password) {
	max-width: 560px;
	margin-inline: 0;
	padding: 28px;
	border: 1px solid var(--f36-linia);
	border-radius: 0;
}

.f36-strona-sklepowa .woocommerce :is(.input-text, input[type="email"], input[type="password"], input[type="text"]) {
	min-height: 48px;
	padding: 0 14px;
	border: 2px solid var(--f36-czarny);
	border-radius: 0;
}

/* Moje konto: nagłówek formularza („Logowanie”) mniejszy od tytułu strony, a pola, przycisk i odnośnik
   „Nie pamiętasz hasła?” na jednej krawędzi (WooCommerce daje polom 3 px wcięcia, a odnośnikowi nie). */
.f36-strona-sklepowa .woocommerce h2 {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.f36-strona-sklepowa .woocommerce :is(form.login, form.register, form.lost_reset_password) .form-row {
	padding-inline: 0;
}

/* Strona „Zamówienie otrzymane” (szablon WooCommerce): odstęp od stopki jak na pozostałych stronach. */
.woocommerce-order-received .wp-site-blocks > main {
	padding-bottom: clamp(48px, 6vw, 96px);
}

/* Opłacenie zamówienia (przycisk „Zapłać ponownie” z maila): tło płatności w szarości strony zamiast
   fioletowawej WooCommerce i kanciaste rogi jak w reszcie strony. */
.woocommerce-order-pay #payment {
	background: var(--f36-tlo);
	border-radius: 0;
}

/* Pusty koszyk bez smutnej buźki WooCommerce. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wc-block-cart__empty-cart__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* Pusty koszyk: karty „Nasz merch” i przycisk do sklepu z odstępem od nagłówka. */
.wp-block-woocommerce-empty-cart-block > .wp-block-fundacja2036-merch {
	margin-top: 32px;
}

.wp-block-woocommerce-empty-cart-block .f36-pusty-koszyk-przycisk {
	margin-top: 32px;
}

/* Długie adresy (np. w Regulaminie) łamią się zamiast rozpychać stronę na telefonie. */
.wp-site-blocks {
	overflow-wrap: break-word;
}

/* Wąska karta produktu (tablet z kolumną kategorii): rozmiary dalej w jednej linii, ale dzielą szerokość karty
   zamiast rozpychać ją o kilkanaście pikseli. Kontenerem jest rząd rozmiarów, nie karta: karta z „container-type”
   nie może dzielić wierszy siatki sklepu (subgrid wyżej). */
.f36-siatka > li {
	min-width: 0;
}

.f36-siatka .f36-rozmiary {
	container-type: inline-size;
}

@container (max-width: 268px) {
	.f36-rozmiary .f36-rozmiar {
		flex: 1 1 0;
	}

	.f36-rozmiary .f36-rozmiar > span {
		width: 100%;
		min-width: 0;
		padding: 0 2px;
		font-size: 12px;
	}
}

/* ---------- pasek kategorii nad aktualnościami ---------- */
.f36-kategorie-wpisow {
	margin: -12px 0 40px;
}

.f36-kategorie-wpisow ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-kat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--f36-linia);
	color: var(--f36-czarny);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

/* Kwadrat w kolorze projektu, ten sam co na etykietach wpisów. */
.f36-kat::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--f36-kolor-kat, transparent);
}

.f36-kat:not([class*="f36-kat--"])::before {
	display: none;
}

.f36-kat--sprint { --f36-kolor-kat: var(--f36-magenta); }
.f36-kat--zawody { --f36-kolor-kat: #312877; }
.f36-kat--liga { --f36-kolor-kat: var(--f36-grafit); }
.f36-kat--pumptrack { --f36-kolor-kat: var(--f36-limonka); }
.f36-kat--pumptrack::before { outline: 1px solid var(--f36-grafit); outline-offset: -1px; }
.f36-kat--team { --f36-kolor-kat: var(--f36-czarny); }
.f36-kat--fundacja { --f36-kolor-kat: var(--f36-fiolet); }

.f36-kat-ile {
	font-weight: 500;
	color: var(--f36-szary);
}

.f36-kat:hover {
	border-color: var(--f36-czarny);
}

.f36-kat.is-on {
	border-color: var(--f36-czarny);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-kat.is-on .f36-kat-ile {
	color: rgba(255, 255, 255, 0.72);
}

.f36-kat.is-on::before {
	outline: 1px solid var(--f36-bialy);
}

@media (max-width: 1000px) {
	/* Na telefonie i tablecie jeden rząd przewijany palcem, bez rozpychania strony. */
	.f36-kategorie-wpisow {
		margin: -16px 0 28px;
	}

	/* Lista sięga krawędzi ekranu (układ WordPressa nie pozwala na ujemny margines samego paska). */
	.f36-kategorie-wpisow ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 calc(var(--f36-margines) * -1);
		padding: 0 var(--f36-margines) 4px;
		scrollbar-width: none;
	}

	.f36-kategorie-wpisow ul::-webkit-scrollbar {
		display: none;
	}
}

/* Zamówienie: tytuł strony nad formularzem (wcześniej strona nie miała nagłówka głównego). */
.f36-zamowienie-tytul.wp-block-post-title {
	margin: 40px 0 8px;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 0.95;
}

/* W wynikach wyszukiwania strona bez zdjęcia ma znak 2036. na czarnym tle, a zamiast kategorii etykietę „Strona”
   (f36_zdjecie_strony_w_wynikach, f36_etykieta_strony_w_wynikach). */
.f36-zdjecie-zastepcze {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--f36-czarny);
}

.f36-zdjecie-zastepcze img {
	width: 34%;
	height: auto;
}

.f36-etykiety .f36-etykieta-strony {
	display: inline-block;
	padding: 3px 8px;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

/* W wynikach wyszukiwania strony i produkty bez daty (data utworzenia strony nic nie mówi odwiedzającemu). */
.f36-karty-wpisow :is(.type-page, .type-product) .wp-block-post-date {
	display: none;
}

/* ---------- Wpis z paskiem bocznym (decyzja Kewina 21.10): tekst po lewej, po prawej udostępnianie,
   więcej wpisów z kategorii i pole projektu. Na telefonie pasek jest pod wpisem. ---------- */
.f36-wpis-uklad.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px clamp(40px, 5vw, 72px);
	align-items: start;
	margin-bottom: 72px;
}

.f36-wpis-uklad > *,
.f36-wpis-glowna > *,
.f36-wpis-pasek > * {
	margin-block: 0;
}

.f36-wpis--pasek .f36-wpis-glowa {
	margin-bottom: 28px;
}

.f36-wpis--pasek .f36-wpis-foto.wp-block-post-featured-image {
	max-width: none;
	margin: 0 0 32px !important;
}

.f36-wpis--pasek .f36-wpis-foto img {
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}

.f36-wpis--pasek .f36-wpis-tresc {
	padding-bottom: 32px;
}

.f36-wpis--pasek .f36-wpis-tresc > * {
	max-width: none;
}

/* Pasek ma wysokość całego wpisu; przy przewijaniu zostaje na widoku tylko pole projektu na dole paska. */
.f36-wpis-pasek.wp-block-group {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.f36-wpis-pasek .f36-co-dalej.is-w-pasku {
	position: sticky;
	top: 24px;
}

.f36-wpis-pasek .f36-udostepnij {
	margin: 0;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--f36-linia);
}

.f36-powiazane-tytul {
	margin: 0 0 14px;
	font-family: var(--f36-waski);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
}

.f36-powiazane ul {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.f36-powiazane li a {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	color: var(--f36-czarny);
	text-decoration: none;
}

.f36-powiazane img,
.f36-powiazane-pusta {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
	background: var(--f36-paczka);
}

.f36-powiazane-data {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	color: var(--f36-szary);
}

.f36-powiazane-nazwa {
	display: block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.f36-powiazane li a:hover .f36-powiazane-nazwa,
.f36-powiazane li a:focus-visible .f36-powiazane-nazwa {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.f36-powiazane-wiecej {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 15px;
}

.f36-co-dalej.is-w-pasku {
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 26px;
}

.f36-co-dalej.is-w-pasku .f36-co-dalej-tytul {
	font-size: 28px;
}

.f36-co-dalej.is-w-pasku .f36-co-dalej-tekst p:last-child {
	font-size: 15px;
}

.f36-co-dalej.is-w-pasku .f36-co-dalej-przycisk {
	width: 100%;
	white-space: normal;
	text-align: center;
}

/* Wpisy justowane (decyzja Kewina 21.10). Wyrazy dzieli assets/js/dzielenie.js według polskich wzorców (miękkie łączniki),
   a przeglądarka łamie tylko w tych miejscach: wbudowane dzielenie Chrome myli się po polsku („rowerowy-ch”).
   Na telefonie tekst do lewej, bo w wąskiej kolumnie justowanie robi dziury między wyrazami. */
@media (min-width: 600px) {
	.f36-wpis-tresc :is(p, li):not(.f36-zrodlo-zdjec) {
		text-align: justify;
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}

@media (max-width: 1024px) {
	.f36-wpis-uklad.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.f36-wpis-pasek .f36-co-dalej.is-w-pasku {
		position: static;
	}
}

/* ---------- „Co dalej” pod wpisem: jedno działanie w barwach projektu ---------- */
.f36-co-dalej {
	--f36-cd-tlo: var(--f36-fiolet);
	--f36-cd-akcent: var(--f36-limonka);
	--f36-cd-przycisk: var(--f36-bialy);
	--f36-cd-przycisk-tekst: var(--f36-czarny);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: end;
	margin-block: 8px 72px;
	padding: clamp(28px, 4.5vw, 56px);
	background: var(--f36-cd-tlo);
	color: var(--f36-bialy);
}

.f36-co-dalej.is-sprint { --f36-cd-tlo: #160a12; --f36-cd-akcent: #ff4da6; --f36-cd-przycisk: var(--f36-magenta); --f36-cd-przycisk-tekst: var(--f36-bialy); }
.f36-co-dalej.is-zawody { --f36-cd-tlo: linear-gradient(110deg, #2a2270 0%, #5e2677 55%, #cc0776 100%); --f36-cd-akcent: var(--f36-zolty); --f36-cd-przycisk: var(--f36-zolty); --f36-cd-przycisk-tekst: var(--f36-grafit); }
.f36-co-dalej.is-liga { --f36-cd-tlo: var(--f36-grafit); --f36-cd-przycisk: var(--f36-limonka); --f36-cd-przycisk-tekst: var(--f36-grafit); }
.f36-co-dalej.is-pumptrack { --f36-cd-tlo: var(--f36-czarny); --f36-cd-przycisk: var(--f36-limonka); --f36-cd-przycisk-tekst: var(--f36-grafit); }
.f36-co-dalej.is-team { --f36-cd-tlo: var(--f36-czarny); }

.f36-co-dalej > * {
	margin: 0;
}

.f36-co-dalej-tekst > * {
	margin: 0;
}

.f36-co-dalej .f36-co-dalej-pismo {
	margin-bottom: 4px;
	color: var(--f36-cd-akcent);
}

.f36-co-dalej-tytul {
	margin-bottom: 14px;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--f36-bialy);
}

.f36-co-dalej-tekst p:last-child {
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
	line-height: 1.55;
}

.f36-co-dalej-przycisk {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	background: var(--f36-cd-przycisk);
	color: var(--f36-cd-przycisk-tekst);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease;
}

.f36-co-dalej-przycisk:hover {
	transform: translateY(-2px);
}

.f36-co-dalej-przycisk:focus-visible {
	outline: 3px solid var(--f36-bialy);
	outline-offset: 3px;
}

@media (max-width: 760px) {
	.f36-co-dalej {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.f36-co-dalej-przycisk {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.f36-co-dalej-przycisk {
		transition: none;
	}
}

/* Pasek informacji i pas partnerów jako punkt odniesienia dla elementów w środku. */
.f36-pasek,
.f36-loga {
	position: relative;
}

/* ---------- udostępnij wpis ---------- */
.f36-udostepnij {
	margin-block: 8px 40px;
}

.f36-udostepnij .f36-udostepnij-etykieta {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 15px;
}

/* Przyciski równej szerokości w jednym rzędzie (Kewin 21.10: „uporządkuj przyciski”). */
.f36-udostepnij-przyciski {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 8px;
	max-width: 420px;
}

.f36-udostepnij-przycisk {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--f36-czarny);
	border-radius: 0;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.f36-udostepnij-przycisk svg {
	flex: none;
}

.f36-udostepnij-przycisk:hover {
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-udostepnij-przycisk[hidden] {
	display: none;
}

/* Telefon: trzy przyciski (z systemowym „Udostępnij”) w jednym rzędzie. */
@media (max-width: 600px) {
	.f36-udostepnij-przyciski {
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
		gap: 6px;
	}

	.f36-udostepnij-przycisk {
		gap: 6px;
		padding: 0 6px;
		font-size: 13px;
	}

	.f36-udostepnij-przycisk svg {
		width: 16px;
		height: 16px;
	}
}

.f36-udostepnij-komunikat {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--f36-szary);
}

.f36-udostepnij-komunikat:empty {
	display: none;
}

/* Opis kategorii pod tytułem (Wpisy > Kategorie > Opis). */
.f36-kategoria-opis.wp-block-term-description {
	margin-top: -20px;
	margin-bottom: 36px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--f36-szary);
}

/* Szerokość ogranicza akapit, a nie blok: blok węższy od kolumny WordPress ustawiłby na środku. */
.f36-kategoria-opis.wp-block-term-description p {
	max-width: 62ch;
	margin: 0;
}

/* ---------- strona Pumptrack Days (własny kod projektu) ---------- */
/* Liczby i podpisy w pasie „Pumptrack Days w liczbach” wyśrodkowane w swoich ramkach (Kewin 29.10). Reguła w motywie,
   bo kod strony przy przełączeniu bierzemy z żywej strony. */
.f36-projekt-pumptrack .nums li {
	text-align: center;
}

/* Opis produktu i informacje dodatkowe w szerokości wygodnej do czytania (bez tego wiersz miał ok. 170 znaków). */
.woocommerce-Tabs-panel {
	max-width: 760px;
}

/* ---------- Zgody na pliki cookies (inc/zgody.php, assets/js/zgody.js) ----------
   Karta na dole strony, nie zasłania całej treści. „Akceptuję” i „Odrzucam” wyglądają tak samo (odmowa ma być równie
   łatwa jak zgoda), „Ustawienia” jest drugorzędne. */
.f36-zgody {
	position: fixed;
	z-index: 100000;
	left: 16px;
	bottom: 16px;
	box-sizing: border-box;
	width: min(560px, calc(100% - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 24px;
	border-top: 4px solid var(--f36-magenta);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	font-size: 15px;
	line-height: 1.5;
}

.f36-zgody[hidden] {
	display: none;
}

.f36-zgody-tytul {
	margin: 0 0 8px;
	color: var(--f36-bialy);
	font-family: var(--f36-anton);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.f36-zgody-tekst {
	margin: 0 0 16px;
}

.f36-zgody a {
	color: var(--f36-bialy);
	text-decoration: underline;
}

.f36-zgody-wybor {
	display: grid;
	gap: 10px;
	margin: 0 0 16px;
}

.f36-zgody-wybor[hidden] {
	display: none;
}

.f36-zgody-opcja {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	cursor: pointer;
}

.f36-zgody-opcja input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--f36-magenta);
}

.f36-zgody-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.f36-zgody-przycisk {
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--f36-bialy);
	border-radius: 0;
	background: var(--f36-bialy);
	color: var(--f36-czarny);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.f36-zgody-przycisk[hidden] {
	display: none;
}

.f36-zgody-przycisk.is-drugorzedny {
	background: transparent;
	color: var(--f36-bialy);
}

.f36-zgody-przycisk:hover {
	border-color: var(--f36-magenta);
	background: var(--f36-magenta);
	color: var(--f36-bialy);
}

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

@media (max-width: 600px) {
	.f36-zgody {
		left: 0;
		bottom: 0;
		width: 100%;
		max-height: 85vh;
		padding: 20px 16px;
	}

	.f36-zgody-przyciski .f36-zgody-przycisk:not(.is-drugorzedny) {
		flex: 1 1 40%;
	}
}

/* Zaślepka ramki Instagrama do kliknięcia (wczytuje się po zgodzie). */
.f36-zgoda-ramka {
	box-sizing: border-box;
	max-width: 540px;
	padding: 20px;
	border: 1px solid var(--f36-linia);
	background: var(--f36-tlo);
	color: var(--f36-czarny);
	text-align: left;
}

.f36-zgoda-ramka a {
	color: var(--f36-czarny);
	text-decoration: underline;
}

.f36-zgoda-ramka p {
	margin: 0 0 12px;
}

.f36-zgoda-ramka p:last-child {
	margin-bottom: 0;
}

.f36-zgoda-ramka .f36-zgody-przycisk {
	border-color: var(--f36-czarny);
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-zgoda-ramka-wczytana {
	width: 100%;
	max-width: 540px;
	min-height: 560px;
	border: 0;
}

/* ---------- Filmy (Kewin 3.11.2026: podstrona w stylu VOD z produkcjami z YouTube, oglądanie za darmo) ---------- */
/* Kafelek: miniatura 16:9 z czasem trwania i znakiem odtwarzania, pod nią etykieta i tytuł. Film otwiera się
   w okienku po kliknięciu (blocks/film/view.js). Na telefonie rząd zamienia się w listę odcinków: miniatura obok tytułu. */
.f36-filmy-siatka.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
}

/* Rząd z 4 albo 8 filmami (np. „Warto zobaczyć”, Kewin 3.11) ma cztery kolumny, żeby nie zostawał pojedynczy kafelek. */
.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(4):last-child),
.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(8):last-child) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 960px) {
	.f36-filmy-siatka:has(> .f36-film:nth-child(4):last-child) .f36-film-tytul,
	.f36-filmy-siatka:has(> .f36-film:nth-child(8):last-child) .f36-film-tytul {
		font-size: 18px;
	}
}

.f36-film {
	margin: 0;
}

.f36-film-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.f36-film-kadr {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--f36-czarny) url("../img/logo-2036-biale.png") center / 34% auto no-repeat;
}

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

.f36-film-play {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--f36-czarny);
	color: var(--f36-bialy);
}

.f36-film-play svg {
	width: 22px;
	height: 22px;
}

.f36-film-czas {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	background: rgba(0, 0, 0, 0.85);
	color: var(--f36-bialy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.f36-film-podpis {
	padding-top: 14px;
}

.f36-film-etykieta {
	margin: 0 0 4px;
	font-family: var(--f36-waski);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--f36-szary);
}

.f36-film-tytul {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	text-transform: none;
	text-wrap-style: pretty;
}

.f36-film-link:hover .f36-film-play,
.f36-film-link:focus-visible .f36-film-play,
.f36-film.is-wyrozniony .f36-film-kadr:hover .f36-film-play {
	background: var(--f36-malina);
}

.f36-film-link:hover .f36-film-tytul {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.f36-film-link:focus-visible {
	outline: 3px solid var(--f36-malina);
	outline-offset: 4px;
}

/* Film wyróżniony: duży kadr obok wielkiego tytułu, na tablecie i telefonie kadr nad tekstem. */
.f36-filmy-wyrozniony.wp-block-group {
	padding-block: clamp(40px, 6vw, 88px);
}

.f36-film.is-wyrozniony {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
}

.f36-film.is-wyrozniony .f36-film-play {
	left: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	width: clamp(56px, 6vw, 80px);
	height: clamp(56px, 6vw, 80px);
}

.f36-film.is-wyrozniony .f36-film-play svg {
	width: 46%;
	height: 46%;
}

.f36-film.is-wyrozniony .f36-film-tytul {
	margin: 16px 0 0;
	font-family: var(--f36-anton);
	font-weight: 400;
	font-size: clamp(56px, 7vw, 112px);
	line-height: 0.95;
	text-transform: uppercase;
	text-wrap-style: balance;
}

.f36-film-tekst {
	max-width: 34em;
	margin: 20px 0 0;
	font-size: 19px;
	line-height: 1.55;
}

.f36-film-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 18px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--f36-szary);
}

.f36-film-przycisk {
	margin: 28px 0 0;
}

.f36-film-przycisk .f36-przycisk {
	gap: 10px;
}

.f36-film-przycisk svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 959px) {
	.f36-filmy-siatka.wp-block-group,
	.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(4):last-child),
	.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(8):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.f36-film.is-wyrozniony {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 599px) {
	.f36-filmy-siatka.wp-block-group,
	.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(4):last-child),
	.f36-filmy-siatka.wp-block-group:has(> .f36-film:nth-child(8):last-child) {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.f36-film-link {
		display: grid;
		grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.f36-film-podpis {
		padding-top: 0;
	}

	.f36-film-link .f36-film-play {
		left: 6px;
		bottom: 6px;
		width: 32px;
		height: 32px;
	}

	.f36-film-link .f36-film-play svg {
		width: 18px;
		height: 18px;
	}

	.f36-film-link .f36-film-czas {
		right: 4px;
		bottom: 4px;
		padding: 0 5px;
		font-size: 12px;
	}

	.f36-film-etykieta {
		font-size: 14px;
	}

	.f36-film-tytul {
		font-size: 16px;
	}

	.f36-film-przycisk .f36-przycisk {
		box-sizing: border-box;
		width: 100%;
	}
}

/* Okienko z filmem: ciemne tło, film 16:9 na całą szerokość okna (najwyżej 1280 px), tytuł i „Zamknij” nad nim. */
.f36-odtwarzacz {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(16px, 4vw, 48px);
	border: 0;
	background: transparent;
	color: var(--f36-bialy);
}

.f36-odtwarzacz[open] {
	display: grid;
	place-items: center;
}

.f36-odtwarzacz::backdrop {
	background: rgba(0, 0, 0, 0.92);
}

.f36-odtwarzacz-w {
	width: min(100%, 1280px, calc((100dvh - 2 * clamp(16px, 4vw, 48px) - 72px) * 16 / 9));
}

.f36-odtwarzacz-gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.f36-odtwarzacz-tytul {
	margin: 0;
	font-weight: 700;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.3;
}

.f36-odtwarzacz-zamknij {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--f36-bialy);
	background: transparent;
	color: var(--f36-bialy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.f36-odtwarzacz-zamknij:hover,
.f36-odtwarzacz-zamknij:focus-visible {
	background: var(--f36-bialy);
	color: var(--f36-czarny);
}

.f36-odtwarzacz-zamknij svg {
	width: 18px;
	height: 18px;
}

.f36-odtwarzacz-ekran {
	aspect-ratio: 16 / 9;
	background: var(--f36-czarny);
}

.f36-odtwarzacz-ekran iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.f36-film-otwarty {
	overflow: hidden;
}