/* ==========================================================================
   MON PLAISIR — WARSTWA WZORCÓW (klasy mp-*)
   Zawiera to, czego edytor bloków nie umie: nadtytuł, kreska pod nagłówkiem,
   oś czasu, księga mecenasów, pasek postępu, kadry archiwalne, sekcja nocna,
   formularze. Kolory, kroje, rozmiary i odstępy pochodzą z theme.json i tokens.css
   — nie wpisuj tu wartości, tylko zmienne.
   ========================================================================== */

/* ——————————————————————————————————————————————————————————
   1. BAZA — tylko to, czego nie ustawia theme.json
   —————————————————————————————————————————————————————————— */
/* Reset z `styles/base.css` design systemu — zgubił się przy scalaniu do motywu.
   WordPress ustawia `border-box` większości bloków, ale nie wszystkim: wrapper
   bloku okruszków z klasą `.mp-container` liczył 100% szerokości PLUS rynnę,
   czyli 407 px przy ekranie 390 px, i strona przewijała się w poziomie. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { text-wrap: pretty; -webkit-font-smoothing: antialiased; }

:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }

/* Miara 68 znaków dla realnej kolumny tekstu (nie dla akapitów w kartach) */
.mp-prose > p,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol { max-width: var(--mp-measure); }

/* Odnośnik w treści: podkreślenie mosiądzem wyrastające z dołu wiersza.
   Wyjątki jak przy przyciskach — zachęta do przewinięcia w hero nie jest
   odnośnikiem w zdaniu, tylko elementem sterującym, i kreska pod nią
   wyglądała jak przypadkowa linia obok strzałki. */
.mp-prose a:not(.mp-scroll-cue),
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):not(.mp-scroll-cue),
.mp-link-inline {
	border-bottom: 1px solid var(--mp-accent-bold);
	padding-bottom: 1px;
	transition: var(--mp-transition-hover);
}
.mp-prose a:not(.mp-scroll-cue):hover,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):not(.mp-scroll-cue):hover {
	color: var(--mp-accent-hover);
	border-bottom-color: var(--mp-accent-hover);
}

/* Fokus klawiatury — nigdy domyślna niebieska obwódka */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--mp-focus);
	outline-offset: 2px;
	border-radius: var(--mp-radius-sm);
}
::selection { background: var(--mp-accent-soft); color: var(--mp-text); }

.mp-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--mp-space-3) var(--mp-space-5);
	background: var(--mp-surface);
	color: var(--mp-text);
	border: var(--mp-border-hairline) solid var(--mp-accent-bold);
}
.mp-skip-link:focus { left: var(--mp-space-5); top: var(--mp-space-5); }

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

/* ——————————————————————————————————————————————————————————
   2. TYPOGRAFIA MARKI
   —————————————————————————————————————————————————————————— */
.mp-kicker {
	display: block;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-kicker);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-accent);
	margin-bottom: var(--mp-space-3);
}
.mp-display {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-display);
	font-weight: var(--mp-weight-medium);
	line-height: var(--mp-leading-tight);
	letter-spacing: var(--mp-tracking-display);
	text-transform: uppercase;
}
.mp-lead {
	font-size: var(--mp-text-lead);
	line-height: var(--mp-leading-loose);
	color: var(--mp-text-secondary);
	max-width: var(--mp-measure);
}
.mp-caption { font-size: var(--mp-text-caption); color: var(--mp-text-muted); }
.mp-muted { color: var(--mp-text-muted); }
.mp-tabular { font-variant-numeric: tabular-nums; }

/* Kreska sekcji: 48 × 2 px mosiądzu. „Ownable visual effect" systemu. */
.mp-rule::after,
.mp-section-heading::after {
	content: "";
	display: block;
	width: 48px;
	height: var(--mp-border-rule);
	background: var(--mp-accent-bold);
	margin-top: var(--mp-space-5);
}
.mp-section-heading { max-width: var(--mp-measure); }

/* ——————————————————————————————————————————————————————————
   3. UKŁAD
   —————————————————————————————————————————————————————————— */
.mp-container {
	width: 100%;
	max-width: var(--mp-container);
	margin-inline: auto;
	padding-inline: var(--mp-gutter);
}
/* Klasy `mp-container-narrow` i `-wide` zostały wycofane — cały serwis trzyma
   jedną szerokość. Zostawione jako pusty alias, żeby stara treść zapisana
   w bazie nie rozjechała się przed odświeżeniem z wzorców. */
.mp-container-narrow,
.mp-container-wide { max-width: var(--mp-container); }

.mp-section {
	padding-block: var(--mp-section-y);
	background-color: var(--mp-bg);
	color: var(--mp-text);
}
.mp-section-tight { padding-block: var(--mp-section-y-sm); }
.mp-section-flush-top { padding-top: 0; }
.mp-section-subtle { background-color: var(--mp-bg-subtle); }

/* Sekcja nocna — jeden delikatny radial z lewego górnego narożnika.
   Reguła musi być PO .mp-section, żeby wygrać na wspólnym elemencie. */
.mp-night,
.is-style-nocna {
	background-image: radial-gradient(120% 90% at 15% 0%, var(--mp-night-700) 0%, var(--mp-night-900) 70%);
	background-color: var(--mp-night-800);
}
.mp-night .mp-lead,
.is-style-nocna .mp-lead { color: var(--mp-text-secondary); }

/* ——— Sygnet wieży w nagłówku podstrony ———
   Pierwsza sekcja każdej podstrony dostaje logotyp wtopiony w tło: duży,
   przy prawej krawędzi, ledwie widoczny. To ten sam gest, co papier w archiwum —
   znak własności, nie ilustracja. Na stronie głównej go nie ma, bo tam rolę
   tła pełni film. Sekcje nocne też zostają czyste: znak zginąłby w gradiencie.
   Plik bierzemy wprost z motywu, więc nie zależy od biblioteki mediów. */
.mp-sygnet {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Jedno miejsce na krycie znaku: korzysta z niego reguła bazowa i klatki
	   animacji wejścia, więc zakres mobilny nie musi duplikować `@keyframes`. */
	--mp-sygnet-krycie: 0.05;
}
.mp-sygnet:not(.mp-night)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: var(--mp-sygnet-krycie);
	pointer-events: none;
	background-image: url("../img/logo-mon-plaisir-transparent.png");
	background-repeat: no-repeat;
	/* `fixed` kotwiczy znak w widoku, nie w sekcji: przy przewijaniu stoi
	   w miejscu, a sekcja przesuwa się po nim jak okno. Pozycja liczy się
	   wtedy względem okna, stąd `right` zamiast wyliczania od krawędzi sekcji. */
	background-attachment: fixed;
	background-position: right calc(-1 * var(--mp-space-7)) center;
	background-size: clamp(180px, 24vw, 340px);
	/* Znak jest zakotwiczony w środku okna, a nie sekcji, więc kiedy krawędź
	   sekcji przechodzi przez środek ekranu, `overflow: hidden` ucina go prostą
	   poziomą linią. Maska wygasza go przy górnej i dolnej krawędzi, dzięki czemu
	   nie widać cięcia, tylko rozpłynięcie. Procenty, a nie piksele: krótka sekcja
	   ma gasnąć proporcjonalnie do swojej wysokości, nie stałym pasem. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

/* iOS ignoruje `background-attachment: fixed` albo renderuje je kosztownie,
   a przy zredukowanym ruchu przyklejony znak jest po prostu ruchem. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.mp-sygnet:not(.mp-night)::before {
		background-attachment: scroll;
	}
}

@media (max-width: 900px) {
	/* Na telefonie sygnet schodzi za tekst i jeszcze bardziej gaśnie —
	   ma być wyczuwalny, nie czytelny. Rozmiarem steruje tło, bo pseudo-element
	   rozpina się teraz na całą sekcję (`inset: 0`). */
	.mp-sygnet { --mp-sygnet-krycie: 0.04; }

	.mp-sygnet:not(.mp-night)::before {
		background-size: clamp(160px, 46vw, 240px);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.mp-sygnet:not(.mp-night)::before {
		transition: opacity var(--mp-duration-reveal) var(--mp-ease-out);
	}
}

.mp-split { display: grid; gap: var(--mp-space-8); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.mp-split-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mp-split-top { align-items: start; }
.mp-stack { display: flex; flex-direction: column; gap: var(--mp-space-4); }
.mp-row { display: flex; flex-wrap: wrap; gap: var(--mp-space-3); align-items: center; }

@media (max-width: 900px) {
	.mp-split, .mp-split-reverse { grid-template-columns: minmax(0, 1fr); gap: var(--mp-space-5); }
}
@media (max-width: 560px) {
	:root { --mp-section-y: var(--mp-space-7); }
}

/* ——— Wejście treści: hero i nagłówki podstron ———
   Rytm przeniesiony z serwisu teraro (ten sam autor, ta sama rodzina rozwiązań):
   tekst nie tyle pojawia się, co wyjeżdża spod maski. `clip-path` odsłania wiersz
   od góry, a `translateY` dokłada ruch — razem czyta się to jak skład wchodzący
   na stronę, a nie jak przygaszony obrazek. Wolno (800 ms) i z wyraźnym opóźnieniem
   między elementami, bo to jest pierwsze, co widzi odwiedzający.

   Tytuł dostaje dłuższy czas niż reszta: jest największy, więc przy tym samym
   czasie wyglądałby na szybszy od kickera nad nim.

   Zero JavaScriptu. Przy `prefers-reduced-motion` całość stoi. */
@keyframes mp-wjazd {
	from {
		opacity: 0;
		transform: translateY(28px);
		clip-path: inset(0 0 100% 0);
	}

	to {
		opacity: 1;
		transform: none;
		/* Ujemne wciecia ze wszystkich stron: `animation-fill-mode: both` zostawia
		   `clip-path` na elemencie na stale, a maska przyciete do krawedzi pudelka
		   ucinalaby obwodke fokusu przyciskow w hero. */
		clip-path: inset(-12% -12% -12% -12%);
	}
}

@keyframes mp-kreska {
	from { width: 0; }
	to { width: 48px; }
}

@keyframes mp-znak {
	from { opacity: 0; }
	to { opacity: var(--mp-sygnet-krycie); }
}

@media (prefers-reduced-motion: no-preference) {
	.mp-hero .mp-container > *,
	.mp-sygnet .mp-section-heading > * {
		animation: mp-wjazd 800ms cubic-bezier(0.2, 0, 0.2, 1) both;
	}

	.mp-hero .mp-container > :nth-child(1),
	.mp-sygnet .mp-section-heading > :nth-child(1) { animation-delay: 80ms; }

	.mp-hero .mp-container > :nth-child(2),
	.mp-sygnet .mp-section-heading > :nth-child(2) {
		animation-delay: 180ms;
		animation-duration: 950ms;
	}

	.mp-hero .mp-container > :nth-child(3),
	.mp-sygnet .mp-section-heading > :nth-child(3) { animation-delay: 380ms; }

	.mp-hero .mp-container > :nth-child(4) { animation-delay: 500ms; }
	.mp-hero .mp-container > :nth-child(5) { animation-delay: 620ms; }
	/* Zachęta do przewinięcia wchodzi na końcu sekwencji: najpierw ma być co
	   czytać, dopiero potem podpowiedź, że niżej jest więcej. */
	.mp-hero .mp-container > :nth-child(6) { animation-delay: 900ms; }

	/* Mosiężna kreska pod nagłówkiem dorysowuje się na końcu sekwencji.
	   To znak rozpoznawczy sekcji w tym systemie, więc zamyka wejście,
	   zamiast je otwierać. */
	.mp-sygnet .mp-section-heading::after {
		animation: mp-kreska 620ms cubic-bezier(0.2, 0, 0.2, 1) 560ms both;
	}

	.mp-sygnet:not(.mp-night)::before {
		animation: mp-znak 1200ms cubic-bezier(0.2, 0, 0.2, 1) 240ms both;
	}
}

/* ——————————————————————————————————————————————————————————
   4. PRZYCISKI — mapowanie na bloki core/button
   —————————————————————————————————————————————————————————— */
.wp-block-button__link,
.mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mp-space-2);
	min-height: 44px;
	border-radius: var(--mp-radius-sm);
	text-decoration: none;
	transition: var(--mp-transition-hover), transform var(--mp-duration-instant) var(--mp-ease-out);
}
.wp-block-button__link:active,
.mp-btn:active { transform: translateY(1px); }
.wp-block-button__link:disabled,
.mp-btn:disabled,
.mp-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Wariant „kontur" (core outline) = mp-btn-secondary */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: none;
	border-color: var(--mp-border-strong);
	color: var(--mp-text);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--mp-accent-bold);
	background-color: var(--mp-accent-soft);
	color: var(--mp-accent);
}

/* Wariant „tekst" = mp-btn-ghost */
.wp-block-button.is-style-mp-ghost > .wp-block-button__link {
	background: none;
	border-color: transparent;
	color: var(--mp-text);
	padding-inline: var(--mp-space-2);
}
.wp-block-button.is-style-mp-ghost > .wp-block-button__link:hover { color: var(--mp-accent); }

/* Ten sam zestaw dla przycisków poza blokiem (formularze) */
.mp-btn {
	padding: var(--mp-space-3) var(--mp-space-5);
	border: var(--mp-border-hairline) solid transparent;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-kicker);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	cursor: pointer;
	background: none;
	color: var(--mp-text);
}
.mp-btn-primary { background: var(--mp-accent-fill); border-color: var(--mp-accent-fill); color: var(--mp-on-accent); }
.mp-btn-primary:hover { background: var(--mp-accent); border-color: var(--mp-accent); }
.mp-btn-secondary { border-color: var(--mp-border-strong); }
.mp-btn-secondary:hover { border-color: var(--mp-accent-bold); color: var(--mp-accent); background: var(--mp-accent-soft); }
.mp-btn-ghost { padding-inline: var(--mp-space-2); }
.mp-btn-ghost:hover { color: var(--mp-accent); }
/* ——— Akcent: romb mosiądzu przed etykietą ———
   Ten sam kształt, co dzióbek pod rozwijanym menu — jeden motyw zamiast dwóch
   różnych ozdób. Leży w środku przycisku jako element flex, więc `gap` sam robi
   odstęp, a `justify-content: center` trzyma parę romb + etykieta na osi.
   Ghost i przyciski ikonowe go nie dostają: tam nie ma czego akcentować. */
.wp-block-button:not(.is-style-mp-ghost) > .wp-block-button__link::before,
.mp-btn:not(.mp-btn-ghost):not(.mp-btn-icon)::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	background-color: currentColor;
	transform: rotate(45deg);
	opacity: 0.4;
	transition: opacity var(--mp-duration-fast) var(--mp-ease-out),
		transform var(--mp-duration-fast) var(--mp-ease-out);
}

/* Na przycisku obrysowym romb jest mosiężny — na wypełnionym bierze kolor
   etykiety, bo mosiądz na mosiądzu byłby niewidoczny. */
.wp-block-button.is-style-outline > .wp-block-button__link::before,
.mp-btn-secondary::before {
	background-color: var(--mp-accent-bold);
	opacity: 0.75;
}

.wp-block-button:not(.is-style-mp-ghost) > .wp-block-button__link:hover::before,
.mp-btn:not(.mp-btn-ghost):not(.mp-btn-icon):hover::before {
	opacity: 1;
	transform: rotate(45deg) scale(1.25);
}

/* Nagłówek: przycisk jest tam mały i stoi obok menu — romb tylko by go zagęścił. */
.mp-header .wp-block-button:not(.is-style-mp-ghost) > .wp-block-button__link::before { content: none; }

/* UWAGA na anatomię bloku przycisku: klasa z pola „Dodatkowe klasy CSS" ląduje
   na OPAKOWANIU (`div.wp-block-button`), a nie na odnośniku. Wcześniej ta reguła
   dokładała 48 px wypełnienia właśnie opakowaniu — przez to przycisk w hero
   stał 48 px na prawo od kolumny tekstu i wyglądał jak przypadkowo wcięty.
   Wymiary należą do odnośnika; opakowanie ma zostać przezroczystym pudełkiem. */
.mp-btn-lg { padding: 0; }
.wp-block-button.mp-btn-lg > .wp-block-button__link,
a.mp-btn-lg {
	min-height: 52px;
	padding: var(--mp-space-4) var(--mp-space-7);
	font-size: var(--mp-text-small);
}

/* Wariant obrysowy dostaje z rdzenia 2 px ramki, wypełniony nie ma żadnej -
   przy tej samej treści dawało to 54 px kontra 52 px i przyciski obok siebie
   stały nierówno. Przezroczysta ramka tej samej grubości zrównuje pudełka,
   ale tylko tam, gdzie nie ma własnego koloru ramki do nadpisania. */
.wp-block-button.mp-btn-lg:not(.is-style-outline) > .wp-block-button__link,
a.mp-btn-lg:not(.mp-btn-secondary) {
	border: var(--mp-border-rule) solid transparent;
}
.mp-btn-block { width: 100%; }

/* Odnośnik ze strzałką — „Czytaj →" */
.mp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-2);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-kicker);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.mp-link-arrow:hover { color: var(--mp-accent-hover); border-bottom-color: var(--mp-accent-hover); }

/* ——————————————————————————————————————————————————————————
   5. ZNACZNIKI, KARTY, STATYSTYKI
   —————————————————————————————————————————————————————————— */
.mp-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-1);
	padding: 2px var(--mp-space-2);
	border-radius: var(--mp-radius-sm);
	border: var(--mp-border-hairline) solid transparent;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.mp-tag-brass { background: var(--mp-accent-soft); color: var(--mp-accent); }
.mp-tag-neutral { background: var(--mp-bg-subtle); color: var(--mp-text-secondary); }
.mp-tag-outline { border-color: var(--mp-border-strong); color: var(--mp-text-secondary); }

.mp-card {
	display: flex;
	flex-direction: column;
	background-color: var(--mp-surface);
	border: var(--mp-border-hairline) solid var(--mp-border);
	border-radius: var(--mp-radius-md);
	padding: var(--mp-space-5);
	height: 100%;
	transition: var(--mp-transition-hover), box-shadow var(--mp-duration-base) var(--mp-ease-out);
}
.mp-card-interactive:hover { border-color: var(--mp-accent-bold); box-shadow: var(--mp-shadow-md); }
.mp-card-flush { padding: 0; overflow: hidden; }
/* Lista wyliczeniowa w karcie: bez punktorów (żadnych kropek w tym systemie),
   pozycje rozdzielone włoskiem, lewa krawędź równa z nagłówkiem karty. */
.mp-lista-rzeczowa {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.mp-lista-rzeczowa > li {
	padding-block: var(--mp-space-2);
	border-bottom: var(--mp-border-hairline) solid var(--mp-border);
}

.mp-lista-rzeczowa > li:last-child { border-bottom: 0; padding-bottom: 0; }

.mp-card-meta {
	margin-top: auto;
	padding-top: var(--mp-space-3);
	border-top: var(--mp-border-hairline) solid var(--mp-border);
	font-size: var(--mp-text-caption);
	color: var(--mp-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mp-elev-sm { box-shadow: var(--mp-shadow-sm); }
.mp-elev-md { box-shadow: var(--mp-shadow-md); }
.mp-elev-lg { box-shadow: var(--mp-shadow-lg); }

.mp-stat { display: flex; flex-direction: column; gap: var(--mp-space-1); }
.mp-stat-value {
	display: block;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-h1);
	font-weight: var(--mp-weight-medium);
	line-height: 1;
	letter-spacing: var(--mp-tracking-display);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.mp-stat-label {
	display: block;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
	margin: 0;
}

/* Pasek postępu zbiórki — jedyne miejsce z promieniem pill */
.mp-progress-block { display: flex; flex-direction: column; gap: var(--mp-space-3); }
.mp-progress {
	position: relative;
	height: 6px;
	width: 100%;
	background: var(--mp-bg-subtle);
	border-radius: var(--mp-radius-pill);
	overflow: hidden;
}
.mp-night .mp-progress,
.is-style-nocna .mp-progress { background: var(--mp-night-500); }
.mp-progress-fill {
	height: 100%;
	background: var(--mp-accent-bold);
	border-radius: var(--mp-radius-pill);
	transition: width var(--mp-duration-slow) var(--mp-ease-out);
}
.mp-progress-label {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
}

/* ——————————————————————————————————————————————————————————
   6. FORMULARZE
   —————————————————————————————————————————————————————————— */
.mp-form { display: flex; flex-direction: column; gap: var(--mp-space-4); max-width: 520px; }
.mp-field { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.mp-label {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-secondary);
}
.mp-input, .mp-textarea, .mp-select {
	width: 100%;
	min-height: 44px;
	padding: var(--mp-space-3);
	background: var(--mp-surface);
	color: var(--mp-text);
	border: var(--mp-border-hairline) solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm);
	font-family: var(--mp-font-body);
	font-size: var(--mp-text-body);
	transition: var(--mp-transition-hover);
}
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-text-muted); }
.mp-input:hover, .mp-textarea:hover, .mp-select:hover { border-color: var(--mp-accent-bold); }
.mp-input:focus-visible, .mp-textarea:focus-visible, .mp-select:focus-visible { border-color: var(--mp-accent-bold); }
.mp-textarea { min-height: 128px; resize: vertical; line-height: var(--mp-leading-body); }
.mp-select {
	appearance: none;
	padding-right: var(--mp-space-7);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.mp-hint { font-size: var(--mp-text-caption); color: var(--mp-text-muted); }
.mp-error { font-size: var(--mp-text-caption); color: var(--mp-danger-500); }
.mp-input-invalid, .mp-textarea-invalid { border-color: var(--mp-danger-500); }
.mp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mp-choice { display: flex; align-items: flex-start; gap: var(--mp-space-3); cursor: pointer; font-size: var(--mp-text-small); color: var(--mp-text-secondary); }
.mp-choice input { accent-color: var(--mp-accent-bold); width: 18px; height: 18px; margin-top: 3px; flex: none; }

.mp-notice {
	padding: var(--mp-space-4) var(--mp-space-5);
	border-left: var(--mp-border-rule) solid var(--mp-success-500);
	background: var(--mp-surface);
	color: var(--mp-text-secondary);
}
.mp-notice-error { border-left-color: var(--mp-danger-500); }
.mp-notice strong { color: var(--mp-text); }

/* Wybór kwoty darowizny */

/* ——————————————————————————————————————————————————————————
   7. NAGŁÓWEK, NAWIGACJA, STOPKA
   —————————————————————————————————————————————————————————— */
/* Nagłówek jest przyklejony na całej witrynie. `fixed`, a nie `sticky`, bo tylko
   wtedy da się go położyć NA hero — sticky zawsze zajmuje miejsce w przepływie. */
.mp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	border-bottom: var(--mp-border-hairline) solid var(--mp-border);
	transition: border-color var(--mp-duration-base) var(--mp-ease-out);
}
/* Tło i rozmycie leżą na osobnej warstwie, NIE na samym nagłówku.
   Powód: `backdrop-filter` tworzy blok zawierający dla potomków `position: fixed`,
   przez co nakładka menu mobilnego zamiast przykryć ekran przyjmowała rozmiar
   nagłówka i wylewała się poza widok. Pseudo-element tego problemu nie ma. */
.mp-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--mp-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	transition: opacity var(--mp-duration-base) var(--mp-ease-out);
}
.mp-header-inner { min-height: var(--mp-header-h); }

/* Treść startuje pod nagłówkiem — poza stroną z hero, które ma pod niego wejść. */
body { padding-top: var(--mp-header-h); }

/* Pasek administratora WordPressa jest nad wszystkim; nagłówek musi go ominąć. */
body.admin-bar .mp-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .mp-header { top: 46px; }

	/* Na telefonie pasek administratora nie jest przyklejony — WordPress ustawia
	   mu `position: absolute`, więc po przewinięciu odjeżdża razem z treścią.
	   Gdyby nagłówek trzymał to odsunięcie dalej, po scrollu zostawałaby nad nim
	   46-pikselowa szpara. Klasę `jest-przewiniete` dokłada `menu.js` po 48 px
	   przewinięcia, czyli wtedy, gdy paska nie ma już na ekranie. */
	body.admin-bar .mp-header.jest-przewiniete { top: 0; }
}

/* WordPress dokłada `margin-block-start` każdemu dziecku `.wp-site-blocks`
   poza pierwszym — a pierwszy jest nagłówek, więc `main` dostaje 24 px odstępu.
   Pod nieprzezroczystym nagłówkiem tego nie było widać; pod przezroczystym
   jest to pasek papieru nad kadrem. Na widoku z hero zerujemy go. */
body.mp-hero-pod-naglowkiem .wp-site-blocks > main { margin-block-start: 0; }

/* To samo dotyczy wszystkich pasow najwyzszego poziomu. Kazda sekcja niesie
   wlasny `padding-block`, wiec 24 px odstepu miedzy nimi nie jest oddechem,
   tylko szwem - a przy przejsciu z jasnego pasa w ciemna stopke widac go
   jako papierowy pasek. Zamiast zamieniac margines na padding kasujemy go:
   wysokosc kazdego pasa ma wynikac z jego wlasnego swiatla, nie z odstepu miedzy. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Stan przezroczysty obowiązuje na KAŻDEJ szerokości — na telefonie hero też
   jest filmem/kadrem i nagłówek ma na nim leżeć, nie stać nad nim. */
	/* Strona z hero: nagłówek leży na kadrze, więc treść nie dostaje odsunięcia. */
	body.mp-hero-pod-naglowkiem { padding-top: 0; }

	/* Zamiast malować elementy po kolei, podmieniamy aliasy semantyczne:
	   wszystko, co ich używa (nazwa, odnośniki, obramowania), przełącza się samo. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) {
		--mp-text: var(--mp-paper-200);
		--mp-text-secondary: var(--mp-paper-200);
		--mp-text-muted: var(--mp-paper-300);
		--mp-accent: var(--mp-brass-300);
		--mp-accent-bold: var(--mp-brass-300);
		--mp-border: transparent;
		--mp-border-strong: color-mix(in srgb, var(--mp-paper-200) 45%, transparent);
		border-bottom-color: transparent;
	}
	/* Warstwa z papierowym tłem i rozmyciem gaśnie — zostaje sam film. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete)::after { opacity: 0; }

	/* Gradient ochronny pod samym nagłówkiem — kadr filmu bywa u góry jasny,
	   a bez tego napisy siadają na niebie. To ta sama zasada, co w hero:
	   gradient, nie przygaszenie całości. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--mp-night-900) 62%, transparent) 0%,
			color-mix(in srgb, var(--mp-night-900) 38%, transparent) 55%,
			transparent 100%
		);
	}

	/* Logotyp to czarna sylweta — na filmie musi być w negatywie. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .custom-logo {
		filter: invert(1);
	}

	/* Hamburger i krzyżyk zamknięcia biorą kolor z rdzenia WordPressa (atrament),
	   nie z naszych aliasów — na ciemnym kadrze były czarne na czarnym, czyli
	   niewidoczne. Kolorujemy je wprost, razem z wypełnieniem SVG. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__responsive-container-open,
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__responsive-container-open svg {
		color: var(--mp-paper-200);
		fill: currentColor;
	}

	/* Pozycje rozwijane („Historia", „Odwiedź", „Wsparcie") mają własną regułę
	   koloru z rdzenia WordPressa, mocniejszą od naszej opartej na aliasach —
	   dlatego rozjaśniamy je wprost. Selektor obejmuje TYLKO pierwszy poziom:
	   panele rozwijane mają jasne tło i muszą zostać przy ciemnym tekście. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation > ul > li > .wp-block-navigation-item__content,
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__container > li > .wp-block-navigation-item__content {
		color: var(--mp-paper-200);
	}

	/* Przełącznik języków nad kadrem hero: ten sam problem co z pozycjami menu —
	   atramentowy tekst na ciemnym zdjęciu. Nieaktywne kody rozjaśniamy, bieżący
	   zostaje w mosiądzu, bo `brass-300` na tym tle trzyma próg kontrastu. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .mp-jezyk-link {
		color: color-mix(in srgb, var(--mp-paper-200) 78%, transparent);
	}
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .mp-jezyk-link:hover,
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .mp-jezyk-link:focus-visible {
		color: var(--mp-brass-100);
	}
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .mp-jezyk + .mp-jezyk .mp-jezyk-link {
		border-left-color: color-mix(in srgb, var(--mp-paper-200) 30%, transparent);
	}

	/* Panel rozwijany ma papierowe tło, więc MUSI wrócić do jasnych aliasów.
	   Bez tego dziedziczy jasny tekst z przezroczystego nagłówka i pozycje
	   znikają na białym tle. Przywracamy komplet wartości z `:root`. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__submenu-container {
		--mp-text: var(--mp-ink-900);
		--mp-text-secondary: var(--mp-ink-600);
		--mp-text-muted: var(--mp-ink-400);
		--mp-accent: var(--mp-brass-700);
		--mp-accent-bold: var(--mp-brass-500);
		--mp-border: var(--mp-paper-400);
		--mp-border-strong: var(--mp-ink-400);
	}
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--mp-text-secondary);
	}
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--mp-text);
	}

/* ——— Nagłówek na wąskim ekranie ———
   Domyślnie blok kolumn zawijał grupę „nawigacja + przycisk" do drugiego wiersza,
   przez co hamburger i CTA lądowały pod logotypem i nic nie trzymało pionu.
   Na mobile ma być jeden rząd: marka z lewej, hamburger i CTA z prawej. */
@media (max-width: 899px) {
	:root { --mp-header-h: 64px; }

	.mp-header-inner {
		flex-wrap: nowrap;
		gap: var(--mp-space-3);
	}
	/* Grupa po prawej: bez zawijania i bez rozpychania się na całą szerokość. */
	.mp-header-inner > .wp-block-group:last-child {
		flex-wrap: nowrap;
		flex: 0 0 auto;
		gap: var(--mp-space-3);
	}
	/* Kolejność na dotyku: najpierw wezwanie, hamburger przy samej krawędzi —
	   tam trafia kciuk. W kodzie nawigacja stoi przed przyciskiem, bo taka
	   kolejność jest sensowna dla czytnika ekranu; przestawiamy tylko obraz. */
	.mp-header .wp-block-navigation { order: 2; }
	.mp-header .wp-block-buttons { order: 1; }
	/* Na telefonie zostaje sam logotyp — sylweta w okręgu ma wpisane w rysunek
	   „Mon Plaisir / POBIEDNA", więc napis obok był powtórzeniem, które zjadało
	   miejsce potrzebne przyciskowi i hamburgerowi. Nazwa serwisu pozostaje
	   dostępna dla czytnika ekranu w `alt` logotypu.
	   Prefiks `.mp-header` jest tu konieczny: reguły bazowe `.mp-brand*` stoją
	   w pliku NIŻEJ, więc przy równej swoistości wygrywałyby z tym blokiem. */
	.mp-header .mp-brand { flex: 0 0 auto; gap: 0; }
	.mp-header .mp-brand img { height: 40px; }
	.mp-header .mp-brand-name,
	.mp-header .mp-brand-place { display: none; }

	/* CTA w nagłówku skraca się do samego czasownika — pełne „Wspieram odbudowę"
	   stoi w hero, więc powtórzenie nie jest potrzebne, a miejsca jest mało. */
	.mp-header .wp-block-button__link {
		padding-inline: var(--mp-space-4);
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
	}
	.mp-header .wp-block-navigation__responsive-container-open { padding: 0; }

	/* Mobilny kadr hero jest u góry jaśniejszy niż desktopowy (inne wycinanie
	   po bokach), przez co hamburger na tle nieba miał 2,1:1 — poniżej progu
	   3:1 dla elementów sterujących. Gradient ochronny musi tu być mocniejszy. */
	.mp-hero-pod-naglowkiem .mp-header:not(.jest-przewiniete)::before {
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--mp-night-900) 82%, transparent) 0%,
			color-mix(in srgb, var(--mp-night-900) 64%, transparent) 60%,
			transparent 100%
		);
	}
}

.mp-brand { display: flex; align-items: center; gap: var(--mp-space-3); text-decoration: none; border: 0; }
.mp-brand img { height: 44px; width: auto; }
.mp-brand-name {
	display: block;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-h4);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-heading);
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
	/* Bez tego nazwa dziedziczy atrament z `body` i nie reaguje na sekcję nocną
	   ani na przezroczysty nagłówek — jedyny element marki, który tego nie robił. */
	color: var(--mp-text);
}
.mp-brand-place {
	display: block;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
	margin: 0;
}

/* Nawigacja: podkreślenie wyrasta z dołu wiersza, kolor przechodzi w mosiądz */
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--mp-text-secondary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: var(--mp-transition-hover);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--mp-text);
	border-bottom-color: var(--mp-accent-bold);
}
.wp-block-navigation .wp-block-navigation-submenu__toggle { color: var(--mp-text-secondary); }

/* Strzałka rozwijania: SVG stoi domyślnie na linii pisma (`vertical-align: baseline`),
   przez co wypada niżej niż środek etykiety. Do tego sama etykieta ma 2 px odstępu
   i 1 px kreski pod spodem, więc jej tekst siedzi wyżej niż środek własnego pudełka.
   Ustawiamy więc oś ikony na środek i kompensujemy te 3 px. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg { display: block; }
.wp-block-navigation__submenu-container {
	background-color: var(--mp-surface) !important;
	border: var(--mp-border-hairline) solid var(--mp-border) !important;
	border-radius: var(--mp-radius-md);
	box-shadow: var(--mp-shadow-md);
	padding: var(--mp-space-2) 0;
}

/* ——— Rozwijane menu na desktopie ———
   Wcześniej pozycje dziedziczyły wersaliki i rozstrzelenie z górnego poziomu,
   przez co „Adolph Traugott von Gersdorf" krzyczał głośniej niż „HISTORIA"
   i łamał się na dwa wiersze. Panel czyta się teraz jak karta indeksu:
   mosiężna kreska u góry (ten sam gest, co pod nagłówkiem sekcji), pozycje
   składem tekstowym, wskaźnik wjeżdżający od lewej zamiast zalewania tłem. */
@media (min-width: 901px) {
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		min-width: 20rem !important;
		max-width: 24rem;
		margin-top: var(--mp-space-2);
		padding: var(--mp-space-3) 0;
		border-top: var(--mp-border-rule) solid var(--mp-accent-bold) !important;
		border-radius: 0 0 var(--mp-radius-md) var(--mp-radius-md);
	}

	/* Mostek nad panelem: między pozycją a kartą jest 8 px przerwy i bez tego
	   kursor „wypada" z menu w połowie drogi, a lista zamyka się przed kliknięciem. */
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-1 * var(--mp-space-3));
		height: var(--mp-space-3);
	}

	/* Dzióbek wskazujący pozycję, z której panel wyrasta — w kolorze kreski,
	   więc czyta się jak jej przedłużenie, a nie jak osobna ozdoba.
	   Menu jest wyrównane do prawej, więc panel podwiesza się prawą krawędzią
	   pod pozycją nadrzędną — dzióbek idzie za tym i wypada pod strzałką. */
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -5px;
		right: var(--mp-space-5);
		width: 8px;
		height: 8px;
		background-color: var(--mp-accent-bold);
		transform: rotate(45deg);
		border-radius: 1px;
	}

	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
	}

	/* Skład tekstowy: Lato, bez wersalików, bez rozstrzelenia — poziom niżej
	   w hierarchii niż etykiety główne, więc i ciszej. */
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		padding: var(--mp-space-3) var(--mp-space-5);
		border-bottom: 0;
		font-family: var(--mp-font-body);
		font-size: var(--mp-text-small);
		font-weight: var(--mp-weight-regular);
		letter-spacing: 0;
		text-transform: none;
		color: var(--mp-text-secondary);
		transition: color var(--mp-duration-fast) var(--mp-ease-out),
			box-shadow var(--mp-duration-fast) var(--mp-ease-out),
			padding-left var(--mp-duration-fast) var(--mp-ease-out);
	}

	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
		color: var(--mp-accent);
		padding-left: calc(var(--mp-space-5) + 4px);
		box-shadow: inset var(--mp-border-rule) 0 0 var(--mp-accent-bold);
	}

	/* Bieżąca pozycja: trwały włos po lewej. Wcześniej dostawała podkreślenie
	   na całą szerokość, które czytało się jak separator, a nie jak stan. */
	.mp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content {
		color: var(--mp-text);
		border-bottom: 0;
		box-shadow: inset var(--mp-border-rule) 0 0 var(--mp-accent-bold);
	}

	/* Wejście: krótkie i jednokierunkowe. Design system zabrania parallaksy
	   i autoplaya, ale nie 160 ms na pojawienie się panelu. */
	.mp-header .has-child > .wp-block-navigation__submenu-container {
		transform: translateY(-4px);
		transition: opacity var(--mp-duration-base) var(--mp-ease-out),
			transform var(--mp-duration-base) var(--mp-ease-out);
	}

	.mp-header .has-child:hover > .wp-block-navigation__submenu-container,
	.mp-header .has-child:focus-within > .wp-block-navigation__submenu-container,
	.mp-header .has-child.is-menu-open > .wp-block-navigation__submenu-container,
	.mp-header .has-child .wp-block-navigation__submenu-container:hover {
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.mp-header .has-child > .wp-block-navigation__submenu-container {
			transform: none;
			transition: none;
		}
	}

	/* Rodzic w stanie otwartym ma wyglądać na otwarty. */
	.mp-header .has-child:hover > .wp-block-navigation-item__content,
	.mp-header .has-child:focus-within > .wp-block-navigation-item__content,
	.mp-header .has-child.is-menu-open > .wp-block-navigation-item__content {
		color: var(--mp-text);
		border-bottom-color: var(--mp-accent-bold);
	}
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mp-bg) !important;
	/* Górne światło robi miejsce na krzyżyk zamknięcia, dolne — na kciuk. */
	padding: var(--mp-space-8) 0 var(--mp-space-8);
}
/* Krzyżyk zamknięcia: pole 44 px, wyrównany do rynny, wyciszony —
   ma być łatwy do trafienia, nie ma dominować nad listą. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--mp-space-3);
	right: var(--mp-space-3);
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	color: var(--mp-text-muted);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--mp-accent); }
/* Wewnątrz nakładki obowiązują jasne aliasy — tło jest papierowe niezależnie
   od tego, czy nagłówek nad hero był przezroczysty. */
.wp-block-navigation__responsive-container.is-menu-open {
	--mp-text: var(--mp-ink-900);
	--mp-text-secondary: var(--mp-ink-600);
	--mp-text-muted: var(--mp-ink-400);
	--mp-accent: var(--mp-brass-700);
	--mp-accent-bold: var(--mp-brass-500);
	--mp-border: var(--mp-paper-400);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--mp-text-secondary); }

/* Nagłówek ustawia nawigację do prawej krawędzi (`justifyContent: right`),
   co ma sens w jednym rzędzie na desktopie. W nakładce ta sama reguła
   dosuwała pozycje do prawej i wypychała je poza ekran — tu ma być kolumna
   wyrównana do lewej, jak każda inna treść w tym projekcie. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
/* WordPress zeruje boczne wypełnienie zawartości nakładki, więc rynnę
   dokładamy na liście — menu ma trzymać tę samą krawędź co treść strony. */
/* Rynnę przenosimy z listy na sam wiersz. Dzięki temu kreski rozdzielające
   biegną od krawędzi do krawędzi, a znacznik bieżącej strony ma się o co oprzeć. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	padding-inline: 0;
}

/* Wiersz pierwszego poziomu. Rytm robi jednakowa wysokość wiersza i kreska
   włosowa, nie odstępy — lista ma się czytać jak spis treści. Wysokość
   nie schodzi poniżej 44 px, bo to cel dotykowy. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
	border-top: var(--mp-border-hairline) solid var(--mp-border);
	padding: var(--mp-space-2) var(--mp-gutter);
	min-height: 44px;
	justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	border-top: 0;
}

/* Pierwszy poziom: krój nagłówkowy w wersalikach, ale w rozmiarze tekstu.
   Wcześniej było 20 px z trackingiem nadtytułu (0,18em) — przy wersalikach
   rozpychało się to na pół ekranu i wyglądało krzykliwie. Tu ma być spokojnie:
   mniejszy stopień, ciasne światło międzyliterowe, mocny kolor.
   Prefiks `.mp-header` jest konieczny — reguła rozjaśniająca nawigację nad hero
   ma tę samą swoistość, a nakładka leży wewnątrz nagłówka. */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--mp-text-small);
	letter-spacing: 0.06em;
	color: var(--mp-text);
	border-bottom: 0;
	padding-bottom: 0;
	line-height: 1.25;
}

/* Bieżąca strona: mosiężna kreska wzdłuż lewej krawędzi wiersza — linia,
   nie plama, zgodnie z zasadą systemu. Cień wewnętrzny zamiast obramowania,
   żeby tekst nie przeskoczył o 2 px. To jedyny akcent koloru w całym menu. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
	box-shadow: inset var(--mp-border-rule) 0 0 var(--mp-accent-bold);
}
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--mp-accent);
}

/* Poziom drugi celowo zmienia krój i przestaje krzyczeć: Lato, bez wersalików,
   wyciszony kolor. Kontrast „wersaliki Archivo / zwykły Lato" to ta sama para,
   co nadtytuł i lead w treści — dzięki temu widać dwa poziomy bez wcięć,
   ramek i kresek. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--mp-font-body);
	font-size: var(--mp-text-small);
	font-weight: var(--mp-weight-regular);
	letter-spacing: 0;
	text-transform: none;
	/* `--mp-text-muted` dawał tu 4,62:1 — przechodzi próg 4,5, ale z zapasem 0,12,
	   czyli tyle, co nic. Hierarchię niosą krój i wielkość liter (Archivo
	   wersalikami kontra Lato tekstem), więc kolor może być czytelniejszy. */
	color: var(--mp-text-secondary);
	border-bottom: 0;
	padding-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	min-height: 32px;
	padding-block: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--mp-accent);
}
/* Strzałka rozwijania nie ma być tak wyrazista jak sama pozycja. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--mp-text-muted);
	margin-left: var(--mp-space-2);
}
/* To `<li>` dosuwało odnośnik do prawej (`align-items: flex-end` od WordPressa),
   nie kontener — dlatego prostowanie samych kontenerów nic nie dawało.
   `!important`, bo reguła rdzenia dla otwartej nakładki też go używa. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	align-self: flex-start;
}
/* Bez ramki, cienia i mosiężnej belki — poziomy rozróżnia typografia, nie ozdoby.
   Zostaje samo wcięcie, i to niewielkie. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	border: 0 !important;
	background-color: transparent !important;
	margin-top: var(--mp-space-2);
	padding: 0 0 0 var(--mp-space-4);
}

/* ——— Marka i wezwanie w nakładce menu ———
   Oba elementy wstawia `inc/nawigacja.php` do zawartości nakładki. Poza
   otwartą nakładką nie mają się pokazywać: na desktopie ten sam kontener
   trzyma poziomy pasek menu, więc bez tego ukrycia logotyp wylądowałby
   drugi raz obok pozycji nawigacji. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .mp-menu-marka,
.wp-block-navigation__responsive-container:not(.is-menu-open) .mp-menu-stopka {
	display: none;
}
/* Zawartość nakładki musi być kolumną flexa, żeby `order` w ogóle działało —
   rdzeń zostawia tu układ blokowy, przez co wstawki układałyby się w kolejności
   z dokumentu (marka, wezwanie, lista), a wezwanie ma stać pod listą. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
}
/* Kolejność w kolumnie: marka nad listą, wezwanie pod listą. Uwaga na wartości:
   rdzeń ustawia liście pozycji `order: 2` (zmierzone), więc otoczenie musi być
   1 i 3. Przy „naturalnych" -1 i 1 oba bloki lądowały nad listą. */
.wp-block-navigation__responsive-container.is-menu-open .mp-menu-marka {
	order: 1;
	width: 100%;
	padding: 0 var(--mp-gutter) var(--mp-space-6);
}
/* Wezwanie jest przypięte do dolnej krawędzi nakładki. Sama pozycja „pod listą"
   nie wystarcza: menu ma dziesięć pozycji z podmenu i na telefonie nie mieści
   się na jednym ekranie, więc przycisk wypadał poniżej zgięcia — czyli dokładnie
   tam, gdzie nikt go nie zobaczy. `sticky` trzyma go w polu widzenia przez cały
   czas przewijania listy, a gdy menu się mieści, leży po prostu na swoim
   miejscu pod ostatnią pozycją. */
.wp-block-navigation__responsive-container.is-menu-open .mp-menu-stopka {
	order: 3;
	width: 100%;
	padding: var(--mp-space-4) var(--mp-gutter);
	position: sticky;
	bottom: 0;
	background-color: var(--mp-bg);
	/* Wiersze menu też są pozycjonowane (`position: relative` pod znacznik
	   bieżącej strony) i leżą w dokumencie PO wstawce, więc bez własnej
	   warstwy malowałyby się na przypiętym przycisku — spod tła przebijały
	   ostatnie pozycje listy. */
	z-index: 2;
}
.mp-menu-marka-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-3);
	text-decoration: none;
	border: 0;
	color: var(--mp-text);
}
.mp-menu-logo {
	width: 56px;
	height: auto;
	/* Krzyżyk zamknięcia stoi w prawym górnym rogu; logotyp nie może pod niego
	   podjechać, dlatego marka trzyma się lewej i ma własne światło. */
	flex: none;
}
.mp-menu-marka-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mp-menu-nazwa {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mp-text);
}
.mp-menu-miejsce {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mp-accent);
}
/* Wezwanie oddziela od ostatniej pozycji ta sama kreska włosowa, co wiersze
   menu — kontynuacja rytmu listy, nie nowy element dekoracyjny. */
.mp-menu-stopka {
	border-top: var(--mp-border-hairline) solid var(--mp-border);
}

/* Klasa rdzenia WordPressa, drukowana dziś w stylach inline. Definiujemy ją
   u siebie, żeby ukrycie tekstu dla czytników nie zależało od cudzego arkusza:
   gdyby zniknęła, opisy „…- strona główna" wyskoczyłyby na wierzch nagłówka. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ——————————————————————————————————————————————————————————
   PRZEŁĄCZNIK JĘZYKÓW
   Cztery dwuliterowe kody w rzędzie, bez flag i bez rozwijania. Flaga oznacza
   kraj, nie język, a poza tym cztery kolorowe prostokąty byłyby jedynym
   nasyconym kolorem w całym serwisie. Kody czyta się od razu i zgadzają się
   z tym, co widać w pasku adresu (/de/, /cz/, /en/).
   —————————————————————————————————————————————————————————— */
.mp-jezyki-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.mp-jezyk { margin: 0; }
.mp-jezyk-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Cel dotykowy 44 px liczy się także na desktopie — to samo pole klikalne
	   co w pozostałych elementach sterujących nagłówka. */
	min-width: 40px;
	min-height: 44px;
	padding-inline: var(--mp-space-2);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mp-text-muted);
	border: 0;
	transition: color var(--mp-duration-fast) var(--mp-ease-out);
}
.mp-jezyk-link:hover,
.mp-jezyk-link:focus-visible { color: var(--mp-accent); }
/* Bieżącego języka nie ma na liście — przełącznik pokazuje wyłącznie wyjścia
   z języka, w którym się jest. Stąd brak stanu „aktywny”: nie ma czego
   podświetlać. Informację o bieżącym języku niesie `aria-label` całej grupy. */
/* Rozdzielenie kodów kreską włosową zamiast kropką czy pionową krechą w tekście
   — separator jest elementem rysunku, nie treści, więc nie trafia do czytnika. */
.mp-jezyk + .mp-jezyk .mp-jezyk-link {
	border-left: var(--mp-border-hairline) solid var(--mp-border);
}

/* ——— Druga instancja: pasek nagłówka ———
   Przełącznik w nawigacji jest niewidoczny na telefonie, dopóki ktoś nie otworzy
   hamburgera — a osoba, która nie zna polskiego, nie ma powodu tam zaglądać.
   Dlatego `parts/header.html` renderuje drugi egzemplarz w samym pasku. Każdy
   z nich jest widoczny w dokładnie jednym kontekście, więc nigdy nie widać dwóch
   naraz. Selektor `> .wp-block-group >` trafia tylko w ten z paska: ten z menu
   siedzi w kontenerze nakładki, nie w grupie nagłówka. */
.mp-header-inner > .wp-block-group > .mp-jezyki { display: none; }

@media (max-width: 899px) {
	.mp-header-inner > .wp-block-group > .mp-jezyki {
		display: block;
		/* Przed przyciskiem wsparcia i hamburgerem — czyta się od lewej. */
		order: 0;
	}
	/* Kody w pasku są węższe niż w nakładce: na 390 px trzeba zmieścić logotyp,
	   trzy kody, przycisk „Wspieram" i hamburger. Wysokość celu dotykowego
	   zostaje pełna, skraca się tylko szerokość. */
	.mp-header-inner > .wp-block-group > .mp-jezyki .mp-jezyk-link {
		min-width: 32px;
		padding-inline: 4px;
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}
}

/* ——— Umiejscowienie: desktop ———
   Przełącznik siedzi w tym samym kontenerze co pozycje menu (wstawia go
   `inc/nawigacja.php`), więc na desktopie ląduje w rzędzie nagłówka za menu,
   a przed przyciskiem „Wspieram". `order` musi być wyższy niż to, które rdzeń
   nadaje liście pozycji. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .mp-jezyki {
	order: 9;
	margin-left: var(--mp-space-4);
}

/* ——— Umiejscowienie: nakładka na telefonie ———
   Pod marką, nad listą pozycji. Cztery kody dzielą szerokość po równo, więc
   każdy dostaje pole znacznie większe niż wymagane 44 px. */
.wp-block-navigation__responsive-container.is-menu-open .mp-jezyki {
	order: 2;
	width: 100%;
	padding: 0 var(--mp-gutter) var(--mp-space-4);
}
.wp-block-navigation__responsive-container.is-menu-open .mp-jezyki-lista {
	width: 100%;
	border: var(--mp-border-hairline) solid var(--mp-border);
}
.wp-block-navigation__responsive-container.is-menu-open .mp-jezyk {
	flex: 1 1 0;
	display: flex;
}
.wp-block-navigation__responsive-container.is-menu-open .mp-jezyk-link {
	flex: 1;
	min-height: 48px;
	font-size: var(--mp-text-small);
}

.mp-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	align-items: center;
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	color: var(--mp-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mp-breadcrumbs a { color: var(--mp-text-muted); text-decoration: none; border: 0; }
.mp-breadcrumbs a:hover { color: var(--mp-accent); }
.mp-breadcrumbs [aria-hidden] { color: var(--mp-border-strong); }
/* Okruszki siedzą nad pierwszą sekcją — rytm z prototypu: 24 px góra i dół. */
.mp-breadcrumbs-wrap { padding-block: var(--mp-space-5); }
.mp-breadcrumbs-wrap + .mp-section { padding-top: var(--mp-space-5); }

/* ——————————————————————————————————————————————————————————
   STOPKA
   —————————————————————————————————————————————————————————— */
.mp-footer-logo { filter: invert(1); height: 72px; width: auto; }

/* Listy w stopce to nawigacja, nie wyliczenie — punktory tylko dodają szumu
   i wcięcie, przez które kolumny przestają się do siebie równać. */
.mp-footer-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.mp-footer-list li { margin: 0; }

/* Podkreślenie wyrastające z dołu wiersza — ten sam gest, co w odnośnikach
   treści, tylko wygaszony do czasu najechania. */
.mp-footer a {
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: var(--mp-transition-hover);
}
.mp-footer a:hover { color: var(--mp-accent); border-bottom-color: var(--mp-accent); }

.mp-footer-nota {
	color: var(--mp-text-secondary);
	max-width: 34ch;
}
.mp-footer-adres strong {
	display: block;
	margin-bottom: var(--mp-space-2);
	font-family: var(--mp-font-heading);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-heading);
	text-transform: uppercase;
	color: var(--mp-text);
}
.mp-footer-adres,
.mp-footer-kontakt { color: var(--mp-text-secondary); }

/* Social jako rząd, nie zdanie z kropką pośrodku. */
.mp-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-5);
}

/* Kreska nad metryczką — jedyna linia w stopce, oddziela treść od danych
   rejestrowych. Mosiądz byłby tu za mocny, więc krawędź nocna. */
.mp-footer-stopka { border-top: var(--mp-border-hairline) solid var(--mp-border); }
.mp-footer-rejestr {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2) var(--mp-space-5);
	font-variant-numeric: tabular-nums;
}
/* Separator rysowany kropką przed elementem — bez sztucznych znaków w treści,
   więc czytnik ekranu nie odczytuje „kropka" między numerami. */
.mp-footer-rejestr span + span::before {
	content: "·";
	margin-right: var(--mp-space-2);
	color: var(--mp-text-muted);
}

@media (max-width: 780px) {
	.mp-footer-nota { max-width: none; }
	.mp-footer-rejestr { gap: var(--mp-space-2); flex-direction: column; }
	.mp-footer-rejestr span + span::before { content: none; }
}

/* Sticky CTA na mobile — pojawia się po przewinięciu hero */
.mp-sticky-cta {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 45;
	align-items: center;
	justify-content: space-between;
	gap: var(--mp-space-3);
	padding: var(--mp-space-3) var(--mp-space-4);
	background-color: var(--mp-night-800);
	border-top: var(--mp-border-hairline) solid var(--mp-night-500);
	transform: translateY(100%);
	transition: transform var(--mp-duration-base) var(--mp-ease-out);
}
.mp-sticky-cta[data-visible="true"] { transform: none; }
.mp-sticky-cta .mp-btn-primary { flex: 1; }
.mp-sticky-cta-close {
	min-height: 44px;
	width: 44px;
	flex: none;
	background: none;
	border: 0;
	color: var(--mp-paper-300);
	font-size: var(--mp-text-h4);
	line-height: 1;
	cursor: pointer;
}
@media (max-width: 720px) {
	.mp-sticky-cta:not([hidden]) { display: flex; }
}

/* ——————————————————————————————————————————————————————————
   8. OBRAZ
   —————————————————————————————————————————————————————————— */
.mp-figure { position: relative; overflow: hidden; border-radius: var(--mp-radius-md); background-color: var(--mp-bg-subtle); }
.mp-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--mp-duration-slow) var(--mp-ease-out); }
.mp-figure-zoom:hover img { transform: scale(1.03); }
.mp-figure-4x3 img { aspect-ratio: 4 / 3; }
.mp-figure-3x4 img { aspect-ratio: 3 / 4; }
.mp-figure-16x9 img { aspect-ratio: 16 / 9; }
.mp-figure-square img { aspect-ratio: 1 / 1; }
.mp-figure-archive img { filter: grayscale(1) sepia(0.18) contrast(1.05); }

/* ——— Strona wsparcia ———
   Blok kolumn domyślnie rozciąga obie kolumny do wspólnej wysokości, więc karta
   z formularzem ciągnęła się przez pół ekranu pustym tłem, żeby dogonić kolumnę
   boczną. Karty mają mieć wysokość swojej treści. */
.mp-wsparcie-kolumny { align-items: flex-start; }
.mp-wsparcie-kolumny > .wp-block-column { align-self: flex-start; }
/* Rysunek elewacji to grafika kreskowa na bieli — bez krawędzi wyglądał jak
   dziura w układzie. Dostaje tę samą oprawę, co karty obok. */
/* Rysunek techniczny na białym tle potrzebuje ramy — inaczej biały prostokąt
   odcina się od papieru sekcji jak dziura. */
.mp-plansza .mp-figure {
	border: var(--mp-border-hairline) solid var(--mp-border);
	background-color: var(--mp-surface);
}

.mp-wsparcie-kolumny .mp-figure {
	border: var(--mp-border-hairline) solid var(--mp-border);
	background-color: var(--mp-surface);
}
.mp-form-rejestr { color: var(--mp-text-muted); }

/* ——— Galeria z powiększeniem ——— */
/* W siatce kafle domyślnie rozciągają się do wysokości wiersza, a `height: 100%`
   na obrazie wypycha podpis poza kadr, gdzie ucina go `overflow: hidden`.
   Dlatego tutaj kafel ma wysokość własnej treści, a obraz trzyma proporcje. */
.mp-galeria-siatka > .mp-figure { align-self: start; }
.mp-galeria-siatka > .mp-figure img { height: auto; }
.mp-galeria-siatka > .mp-figure figcaption {
	padding: var(--mp-space-3) var(--mp-space-1) 0;
	color: var(--mp-text-muted);
	/* Nad przyciskiem powiększenia, żeby podpis dało się zaznaczyć i skopiować —
	   przy materiale archiwalnym to często jedyne źródło datowania. */
	position: relative;
	z-index: 3;
}

.mp-figure-klikalna { position: relative; }
/* Przycisk leży na całym kadrze: obraz sam w sobie nie jest osiągalny
   z klawiatury, a cały kafel ma być jednym celem — także na dotyku. */
.mp-figure-lupa {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: zoom-in;
}
.mp-figure-lupa:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: -3px; }

.mp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	grid-template-rows: 1fr;
	place-items: center;
	padding: var(--mp-space-7) var(--mp-space-5);
	background: color-mix(in srgb, var(--mp-night-900) 94%, transparent);
	animation: mp-lightbox-wejscie var(--mp-duration-base) var(--mp-ease-out);
}
.mp-lightbox[hidden] { display: none; }
@keyframes mp-lightbox-wejscie { from { opacity: 0; } to { opacity: 1; } }
.mp-bez-ruchu .mp-lightbox { animation: none; }
body.mp-lightbox-otwarty { overflow: hidden; }

.mp-lightbox-kadr {
	margin: 0;
	max-width: min(1180px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-4);
}
.mp-lightbox-kadr img {
	max-width: 100%;
	max-height: calc(100vh - 12rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--mp-radius-md);
	background: var(--mp-night-800);
}
.mp-lightbox.jest-archiwalne .mp-lightbox-kadr img { filter: grayscale(1) sepia(0.18) contrast(1.05); }
.mp-lightbox-kadr figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-4);
	justify-content: space-between;
	align-items: baseline;
	color: var(--mp-ink-200);
	font-size: var(--mp-text-caption);
	max-width: var(--mp-measure);
}
.mp-lightbox-licznik {
	font-family: var(--mp-font-heading);
	letter-spacing: var(--mp-tracking-kicker);
	color: var(--mp-brass-300);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mp-lightbox button {
	position: absolute;
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	border: var(--mp-border-hairline) solid color-mix(in srgb, var(--mp-paper-200) 40%, transparent);
	border-radius: var(--mp-radius-sm);
	background: color-mix(in srgb, var(--mp-night-900) 60%, transparent);
	color: var(--mp-paper-200);
	font-size: var(--mp-text-h4);
	line-height: 1;
	cursor: pointer;
	transition: var(--mp-transition-hover);
}
.mp-lightbox button:hover { border-color: var(--mp-brass-300); color: var(--mp-brass-300); }
.mp-lightbox button:focus-visible { outline: 2px solid var(--mp-brass-300); outline-offset: 2px; }
.mp-lightbox-zamknij { top: var(--mp-space-5); right: var(--mp-space-5); }
.mp-lightbox-poprzednie { left: var(--mp-space-5); top: 50%; transform: translateY(-50%); }
.mp-lightbox-nastepne { right: var(--mp-space-5); top: 50%; transform: translateY(-50%); }

@media (max-width: 720px) {
	/* Na wąskim ekranie strzałki schodzą pod kadr — palcem i tak przesuwa się
	   szybciej, a nad zdjęciem zabierały połowę jego szerokości. */
	.mp-lightbox { padding-inline: var(--mp-space-4); }
	.mp-lightbox-poprzednie,
	.mp-lightbox-nastepne { top: auto; bottom: var(--mp-space-5); transform: none; }
	.mp-lightbox-poprzednie { left: var(--mp-space-4); }
	.mp-lightbox-nastepne { right: var(--mp-space-4); }
	.mp-lightbox-kadr img { max-height: calc(100vh - 16rem); }
}
.mp-figure-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, color-mix(in srgb, var(--mp-night-900) 82%, transparent) 0%, transparent 62%);
}
.wp-block-image.mp-figure figcaption { padding-inline: var(--mp-space-1); }

/* Zakreskowany placeholder — TYLKO do czasu dostarczenia zdjęć przez Fundację */
.mp-placeholder {
	display: grid;
	place-items: center;
	text-align: center;
	min-height: 220px;
	background-image: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--mp-ink-300) 12%, transparent) 10px 11px);
	background-color: var(--mp-bg-subtle);
	color: var(--mp-text-muted);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	padding: var(--mp-space-4);
	border-radius: var(--mp-radius-md);
}
.mp-placeholder-4x3 { aspect-ratio: 4 / 3; }
.mp-placeholder-3x4 { aspect-ratio: 3 / 4; }
.mp-placeholder-16x9 { aspect-ratio: 16 / 9; }
.mp-placeholder-square { aspect-ratio: 1 / 1; }
.mp-placeholder p { margin: 0; max-width: 24ch; }

/* Hero — zdjęcie z gradientem ochronnym, tekst przy dolnej krawędzi */
.mp-hero { position: relative; display: grid; align-items: end; min-height: min(78vh, 620px); }
.mp-hero > .wp-block-group__inner-container,
.mp-hero > * { position: relative; z-index: 1; }
.mp-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-image: linear-gradient(180deg, var(--mp-night-700), var(--mp-night-900));
}
/* Gradient ochronny hero jest KIERUNKOWY, nie równomierny.
   Powód: tekst stoi w lewej kolumnie, a wieża — jedyny bohater kadru — po prawej.
   Gradient wyłącznie pionowy (jak domyślny z systemu) albo nie domykał kontrastu
   na tekście, albo gasił wieżę do czarnej plamy. Zmierzone przy pionowym:
   1,98:1 na nadtytule i 3,11:1 na haśle — oba poniżej progu.
   Dlatego dwie warstwy: mocna od lewej pod kolumnę tekstu i łagodna od dołu
   pod podpis. Prawa część kadru zostaje czytelna — wieża jest widoczna. */
.mp-hero .mp-figure-scrim::after {
	background:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--mp-night-900) 88%, transparent) 0%,
			color-mix(in srgb, var(--mp-night-900) 78%, transparent) 42%,
			color-mix(in srgb, var(--mp-night-900) 34%, transparent) 66%,
			transparent 84%
		),
		linear-gradient(
			to top,
			color-mix(in srgb, var(--mp-night-900) 72%, transparent) 0%,
			color-mix(in srgb, var(--mp-night-900) 34%, transparent) 42%,
			transparent 78%
		);
}
/* Nadtytuł hero w najjaśniejszym kroku mosiądzu. `brass-300` (domyślny akcent
   sekcji nocnej) daje na tym kadrze 3,16:1 w najjaśniejszym miejscu — poniżej AA
   dla 13 px. `brass-100` trzyma ciepły ton marki i przechodzi próg. */
.mp-hero .mp-kicker { color: var(--mp-brass-100); }
/* Blok obrazu wstawia <figure> między kontener i <img>. Bez rozciągnięcia tego
   opakowania `height: 100%` na obrazie nie ma do czego się odnieść — zdjęcie
   zostaje pasem u góry, a resztę hero wypełnia gradient zastępczy. */
.mp-hero-media > .wp-block-group__inner-container,
.mp-hero-media figure,
.mp-hero-media .wp-block-image { height: 100%; margin: 0; }

/* Pętla wideo leży na posterze i pojawia się dopiero, gdy naprawdę gra —
   do tego czasu (a na telefonie na zawsze) widać zdjęcie. */
.mp-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
	opacity: 0;
	transition: opacity var(--mp-duration-reveal) var(--mp-ease-out);
	pointer-events: none;
}
.mp-hero-video.jest-widoczne { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mp-hero-video { display: none; }
}
.mp-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Poster i pętla muszą mieć identyczne kadrowanie, inaczej przy starcie
	   wideo obraz przeskakuje. Kadr jest zakotwiczony u dołu: wieża ląduje
	   wtedy nad rzędem przycisków, a niebo i grzbiet Izerów zostają w kadrze. */
	object-position: 50% 100%;
}

/* Na wąskim ekranie kadr 16:9 jest przycinany po bokach — przy wyśrodkowaniu
   wieża (72% szerokości źródła) wypadała poza widok. Przesunięcie w prawo
   wciąga ją z powrotem; policzone dla proporcji hero 390 × 620. */
@media (max-width: 899px) {
	/* Kadr pionowy: obraz 16:9 przy `cover` w wąskim oknie skaluje się do
	   WYSOKOŚCI, więc pion jest zablokowany — widać całą wysokość zdjęcia,
	   a wieża siedzi na jego 70% i zawsze wypada w okolicy kolumny tekstu.
	   Sterować da się tylko poziomem. 84% to wartość zmierzona: wieża stoi
	   wtedy nad rzędem przycisków. Sprawdzone 70% wypycha ją poza kadr.
	   Docelowo ten kadr prosi się o osobne, pionowe ujęcie — patrz README. */
	.mp-hero-media img,
	.mp-hero-video { object-position: 84% 50%; }

	/* Na telefonie hero zajmuje cały ekran. Nagłówek leży NA hero (przezroczysty,
	   `mp-hero-pod-naglowkiem` zeruje górne wypełnienie strony), więc pełna
	   wysokość widoku to dokładnie to, co widać — nie trzeba odejmować paska.

	   `svh` zamiast `vh` i `dvh` z rozmysłem: `vh` na iOS liczy widok BEZ paska
	   adresu, więc przy widocznym pasku dół hero (czyli właśnie zachęta do
	   przewinięcia) wypadał poza ekran. `dvh` z kolei zmienia wysokość w trakcie
	   przewijania, przez co treść skacze. `svh` to widok najmniejszy z możliwych:
	   całość mieści się zawsze, w najgorszym razie po schowaniu paska zostaje
	   pod hero wąski zapas. */
	.mp-hero { min-height: 100vh; }
}
@supports (min-height: 100svh) {
	@media (max-width: 899px) {
		.mp-hero { min-height: 100svh; }
	}
}

/* ——— Zachęta do przewinięcia ———
   Kolumna: podpis w rytmie nadtytułu, pod nim strzałka. Wyrównana do lewej
   krawędzi kolumny tekstu, a nie wyśrodkowana — cały layout serwisu stoi na
   lewej osi i wyśrodkowany element rozbijałby ją w najbardziej widocznym
   miejscu. Strzałka jest obróconym kwadratem z dwoma bokami, czyli tym samym
   kształtem, co romb przed etykietą przycisku i dzióbek pod rozwijanym menu. */
.mp-scroll-cue-wrap { margin: var(--mp-space-6) 0 0; }
.mp-scroll-cue {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mp-space-3);
	padding-block: var(--mp-space-2);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mp-brass-100);
	border: 0;
	transition: color var(--mp-duration-fast) var(--mp-ease-out);
}
.mp-scroll-cue:hover,
.mp-scroll-cue:focus-visible { color: var(--mp-paper-100); }
.mp-scroll-cue-strzalka {
	width: 10px;
	height: 10px;
	border-right: var(--mp-border-rule) solid currentColor;
	border-bottom: var(--mp-border-rule) solid currentColor;
	transform: rotate(45deg);
	/* Obrócony kwadrat ma wizualny środek wyżej niż geometryczny —
	   ujemny margines wraca do optycznej osi podpisu. */
	margin-left: 3px;
}
/* Ruch jest minimalny i wolny: 6 px w dół i z powrotem, 2,4 s. Ma być widoczny
   kątem oka, a nie ciągnąć wzrok z hasła. Przy `prefers-reduced-motion`
   strzałka po prostu stoi — odnośnik działa tak samo. */
@keyframes mp-strzalka {
	0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.65; }
	50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	.mp-scroll-cue-strzalka {
		animation: mp-strzalka 2400ms var(--mp-ease-in-out) 1400ms infinite;
	}
}
/* Skok do sekcji pod hero zostawia miejsce na przyklejony nagłówek,
   inaczej pasek zjadłby nadtytuł „Historia i teraźniejszość". */
#mp-dalej { scroll-margin-top: var(--mp-header-h); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (max-width: 899px) {
	/* Na pełnoekranowym hero podpis fundacji i zachęta stoją blisko siebie
	   przy dolnej krawędzi — dolne wypełnienie kolumny może być mniejsze
	   niż na desktopie, gdzie hero jest niskie. */
	.mp-hero > .mp-container { padding-bottom: var(--mp-space-6) !important; }
	.mp-scroll-cue-wrap { margin-top: var(--mp-space-5); }
	.mp-scroll-cue { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

/* ——————————————————————————————————————————————————————————
   9. OŚ CZASU, MECENASI, CYTAT
   —————————————————————————————————————————————————————————— */
.mp-timeline { list-style: none; margin: 0; padding: 0; }
.mp-timeline-item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--mp-space-5);
	padding-block: var(--mp-space-5);
	border-top: var(--mp-border-hairline) solid var(--mp-border);
	margin: 0;
}
.mp-timeline-year {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-h4);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-heading);
	color: var(--mp-accent);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.mp-timeline-body { color: var(--mp-text-secondary); }
.mp-timeline-body > :where(h3, h4) { margin-bottom: var(--mp-space-2); color: var(--mp-text); font-size: var(--mp-text-h4); }
.mp-timeline-body p { margin-bottom: 0; }
@media (max-width: 560px) {
	.mp-timeline-item { grid-template-columns: 1fr; gap: var(--mp-space-2); }
}

/* ——— Kalendarium prac ———
   Ta sama oś czasu, ale w innej roli: na podstronie Historia wiersz opisuje
   epokę i ma tytuł, tutaj jest to dziennik z dokładną datą i jednym zdaniem.
   Stąd dwie różnice: szersza kolumna daty (mieści „2 października") i data
   w stopniu tekstu zamiast nagłówka — przy 38 wierszach data w rozmiarze H4
   krzyczałaby głośniej niż treść, którą opisuje. */
.mp-rok {
	margin-top: var(--mp-space-8);
	margin-bottom: var(--mp-space-3);
	font-variant-numeric: tabular-nums;
}
/* Pierwszy rok stoi tuż pod leadem sekcji — bez zerowania byłby tam podwójny
   odstęp. Sąsiedztwo, a nie `:first-of-type`: pierwszym elementem w kontenerze
   jest nagłówek sekcji. */
.mp-section-heading + .mp-rok { margin-top: 0; }
.mp-timeline-prace .mp-timeline-item {
	grid-template-columns: 168px 1fr;
	padding-block: var(--mp-space-4);
}
/* Na desktopie kolumna daty dostaje wyraźny zapas i szerszą rynnę. Najdłuższa
   data („2 października") mieści się w 168 px tylko przy domyślnym stopniu
   pisma - wystarczy większa czcionka systemowa albo powiększenie strony, żeby
   złamała się na dwa wiersze i wizualnie zlała z opisem. 200 px plus rynna
   48 px trzyma obie kolumny osobno z zapasem. */
@media (min-width: 901px) {
	.mp-timeline-prace .mp-timeline-item {
		grid-template-columns: 200px 1fr;
		gap: var(--mp-space-7);
	}
}
.mp-timeline-prace .mp-timeline-year {
	font-size: var(--mp-text-small);
	letter-spacing: 0.04em;
	line-height: var(--mp-leading-body);
}
/* Opisy w kalendarium bywają długie i na szerokim ekranie rozciągały się na
   ~120 znaków w wierszu - dwa razy tyle, ile wynosi wygodna miara przyjęta
   w reszcie serwisu. */
.mp-timeline-prace .mp-timeline-body { max-width: var(--mp-measure); }
@media (max-width: 560px) {
	.mp-timeline-prace .mp-timeline-item { grid-template-columns: 1fr; }
}

.mp-donors { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--mp-space-6); }
.mp-donors li {
	margin-bottom: var(--mp-space-2);
	padding-bottom: var(--mp-space-2);
	border-bottom: var(--mp-border-hairline) solid var(--mp-border);
	break-inside: avoid;
}
@media (max-width: 900px) { .mp-donors { columns: 2; } }
@media (max-width: 560px) { .mp-donors { columns: 1; } }

.mp-quote { max-width: var(--mp-measure); }
.mp-quote p,
.mp-quote .wp-block-quote > p {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-h3);
	font-weight: var(--mp-weight-regular);
	line-height: 1.4;
	letter-spacing: var(--mp-tracking-heading);
	font-style: normal;
	text-transform: none;
}
.mp-quote cite,
.mp-quote .wp-block-quote cite {
	display: block;
	margin-top: var(--mp-space-4);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	font-style: normal;
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
}

/* ——————————————————————————————————————————————————————————
   10. WPISY
   —————————————————————————————————————————————————————————— */
.mp-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-3);
	height: 100%;
	background-color: var(--mp-surface);
	border: var(--mp-border-hairline) solid var(--mp-border);
	border-radius: var(--mp-radius-md);
	padding: var(--mp-space-5);
	transition: var(--mp-transition-hover), box-shadow var(--mp-duration-base) var(--mp-ease-out);
}
.mp-post-card:hover { border-color: var(--mp-accent-bold); box-shadow: var(--mp-shadow-md); }
.mp-post-card .wp-block-post-title { font-size: var(--mp-text-h4); margin: 0; }
.mp-post-card .wp-block-post-title a { text-decoration: none; border: 0; }
.mp-post-card .wp-block-post-excerpt { color: var(--mp-text-secondary); font-size: var(--mp-text-small); margin: 0; }
.mp-post-card .wp-block-post-date,
.mp-post-card .wp-block-post-terms {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
}
.mp-post-card .wp-block-post-terms a { color: var(--mp-accent); text-decoration: none; border: 0; }
.mp-post-meta {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
}

/* Paginacja i filtry kategorii */
.wp-block-query-pagination {
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-kicker);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
}
.wp-block-query-pagination a { text-decoration: none; border: 0; }
.wp-block-query-pagination a:hover { color: var(--mp-accent); }
.wp-block-query-pagination-numbers .current { color: var(--mp-accent); }

/* Filtry kategorii na archiwum — lista renderowana przez blok Kategorie */
.wp-block-categories.mp-kategorie {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
}
.wp-block-categories.mp-kategorie li { margin: 0; }
.wp-block-categories.mp-kategorie a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px var(--mp-space-3);
	border: var(--mp-border-hairline) solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mp-text-secondary);
	text-decoration: none;
}
.wp-block-categories.mp-kategorie a:hover {
	border-color: var(--mp-accent-bold);
	color: var(--mp-accent);
	background-color: var(--mp-accent-soft);
}

/* Wyszukiwanie */
.wp-block-search__input {
	min-height: 44px;
	padding: var(--mp-space-3);
	background: var(--mp-surface);
	color: var(--mp-text);
	border: var(--mp-border-hairline) solid var(--mp-border-strong);
	border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
	font-family: var(--mp-font-body);
	font-size: var(--mp-text-body);
}
.wp-block-search__button { border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; }

/* ——————————————————————————————————————————————————————————
   11. TABELA
   —————————————————————————————————————————————————————————— */
.wp-block-table th, .mp-table th {
	text-align: left;
	padding: var(--mp-space-3);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-caption);
	font-weight: var(--mp-weight-medium);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
	border-bottom: var(--mp-border-rule) solid var(--mp-border-strong);
}
.wp-block-table td, .mp-table td { padding: var(--mp-space-3); border-bottom: var(--mp-border-hairline) solid var(--mp-border); }

/* Przycisk wysyłki taki sam jak w formularzu kontaktowym — obie akcje robią
   to samo (wysyłają formularz), więc nie ma powodu, żeby wyglądały inaczej.
   `align-self` powstrzymuje go przed rozpychaniem na całą szerokość karty. */
.mp-form-ksiegi .mp-btn { align-self: flex-start; }

/* Reguły `.mp-poziomy` i `.mp-poziom*` (karty z medalami oraz nagłówki poziomów
   w księdze) zostały usunięte razem z sekcją „Medale Mon Plaisir" 31.07.2026.
   Żadna klasa z tej rodziny nie występuje już w znacznikach. */

/* ——— Grupy księgi mecenasów ———
   Jeden poziom podziału: mecenasi, mecenasi stali, mecenasi instytucjonalni.
   Każdą grupę otwiera mosiężna kreska na całą szerokość - to jedyny podział
   w księdze, więc może być wyraźny. Znaczniki generuje skrótkod `[mecenasi]`
   z danych wpisanych w panelu (Zbiórka → Mecenasi). */
.mp-grupa-mecenasow {
	margin-top: var(--mp-space-8);
	padding-top: var(--mp-space-5);
	border-top: var(--mp-border-rule) solid var(--mp-accent-bold);
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-2);
}
/* Pierwsza grupa siedzi tuż pod leadem sekcji - tam kreska byłaby drugą linią
   podziału w odstępie kilkudziesięciu pikseli. Celujemy przez sąsiedztwo, a nie
   przez `:first-of-type`: pierwszym `div` w kontenerze jest nagłówek sekcji,
   więc `:first-of-type` nie trafiłby w grupę nigdy. */
.mp-section-heading + .mp-grupa-mecenasow {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.mp-grupa-mecenasow > * { margin-block: 0; }
.mp-grupa-opis {
	color: var(--mp-text-secondary);
	max-width: 62ch;
	margin-top: var(--mp-space-2);
}
/* Grupa bez podziału na medale ma listę zaraz pod opisem. Bez tego odstępu
   pierwsza nazwa czyta się jak kolejny wiersz akapitu, a nie jak wpis księgi. */
.mp-grupa-mecenasow + .mp-donors { margin-top: var(--mp-space-5); }

/* ——— Kanały wsparcia ———
   Dane wpisane jako tekst, nie wypalone w grafikę: numer konta i KRS trzeba dać
   się zaznaczyć, skopiować i przeczytać czytnikiem ekranu.
   Trzy kolumny, więc pięć kart układa się 3 + 2 zamiast 4 + 1. */
.mp-kanaly {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mp-space-5);
}

@media (max-width: 1000px) {
	.mp-kanaly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.mp-kanaly { grid-template-columns: minmax(0, 1fr); }
}

/* WordPress dokłada `margin-block-start` każdemu potomkowi układu „przepływ"
   poza pierwszym — w siatce zbijało to górne krawędzie kart o 24 px. */
.mp-kanaly > * { margin-block: 0; }

.mp-kanal {
	gap: var(--mp-space-3);
	padding: var(--mp-space-6);
}

/* Blok danych: to, co odwiedzający ma przepisać do banku albo do PIT-u.
   Krój nagłówkowy i rozstrzelenie, żeby cyfry dało się czytać po jednej. */
.mp-dane {
	margin-top: auto;
	padding-top: var(--mp-space-4);
	border-top: var(--mp-border-hairline) solid var(--mp-border);
	font-family: var(--mp-font-heading);
	font-size: var(--mp-text-small);
	font-weight: var(--mp-weight-medium);
	line-height: var(--mp-leading-loose);
	letter-spacing: 0.02em;
	color: var(--mp-text);
	overflow-wrap: anywhere;
}

.mp-dane a { color: var(--mp-text); }
.mp-dane a:hover { color: var(--mp-accent); }

/* Etykieta nad wartością — mówi, co to za numer, ale nie kradnie mu uwagi. */
.mp-dane-opis {
	font-size: var(--mp-text-caption);
	font-weight: var(--mp-weight-regular);
	letter-spacing: var(--mp-tracking-kicker);
	text-transform: uppercase;
	color: var(--mp-text-muted);
}

.mp-kanal-qr {
	margin: 0;
	align-self: flex-start;
}

/* Znak firmowy operatora: ten sam slot co kod QR, ale bez ramki i bialego pola -
   logo BLIK ma wlasne czarne tlo z zaokraglonymi narozami. Nie przekolorowujemy
   go i nie kadrujemy, bo to cudzy znak. */
.mp-kanal-znak {
	margin: 0;
	align-self: flex-start;
}

.mp-kanal-znak img {
	width: 88px;
	height: auto;
}

.mp-kanal-qr img {
	width: 148px;
	height: auto;
	border: var(--mp-border-hairline) solid var(--mp-border);
	background-color: #FFF;
	padding: var(--mp-space-2);
}

/* ——— Pas wezwania nad stopką ———
   Cała wieża nie mieści się w kadrze pełnej szerokości: w źródle zajmuje ~1300 px
   wysokości przy 1920 px szerokości, więc pas o proporcji 2,6:1 pokazałby połowę.
   Dlatego zdjęcie wchodzi jako pionowy kadr wtopiony od prawej krawędzi —
   `background-size: auto 100%` mieści sylwetkę w całości, a maska rozpuszcza
   lewą krawędź w papierze, żeby nie było widać szwu.
   Pas zostaje jasny, bo ciemny zlałby się ze stopką w jedną plamę.
   Przyciski: do środka w pionie i do prawej krawędzi płótna. */
.mp-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Zapas wysokości, żeby sylwetka miała się gdzie zmieścić. */
	min-height: 420px;
	display: flex;
	align-items: center;
}

.mp-cta-band > .mp-container { width: 100%; }

.mp-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("../img/tlo-wezwanie.webp");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
	opacity: 0.68;
}

/* Miękka poświata papieru dokładnie pod rzędem przycisków. Sylweta wieży sięga
   wyżej i niżej, więc kadr nie traci na sile, a etykiety zostają czytelne. */
.mp-cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(
		ellipse 30% 22% at 79% 50%,
		var(--mp-bg-subtle) 0%,
		color-mix(in srgb, var(--mp-bg-subtle) 72%, transparent) 55%,
		transparent 100%
	);
}

@media (max-width: 900px) {
	.mp-cta-band {
		min-height: 0;
		display: block;
	}

	/* Na wąskim ekranie nie ma gdzie schować kadru za tekstem: pod nagłówkiem
	   kicker schodził do 3,62:1, pod przyciskami ramka do 2,97:1 — oba pod progiem.
	   Dlatego wieża dostaje własny pas pod rzędem przycisków i nie wchodzi
	   pod żaden tekst. */
	.mp-cta-band {
		padding-bottom: calc(var(--mp-section-y) + 190px);
	}

	.mp-cta-band::before {
		background-image: url("../img/tlo-wezwanie-mobile.webp");
		background-size: auto 230px;
		background-position: right bottom;
		opacity: 0.62;
	}

	.mp-cta-band::after { background-image: none; }
}

/* Kto prosi system o wyższy kontrast, dostaje czysty papier. */
@media (prefers-contrast: more) {
	.mp-cta-band::before { display: none; }
}

.mp-cta-split { align-items: center; }

@media (min-width: 901px) {
	.mp-cta-band .wp-block-buttons { justify-content: flex-end; }
}

/* ——— Przyciski na mobile: pełna szerokość ———
   Kciuk trafia w cały wiersz, a nie w prostokąt szerokości etykiety.
   Wyjątki niżej: nagłówek (przycisk stoi w pasku obok hamburgera) i pasek
   sticky, który ma własną geometrię. */
@media (max-width: 640px) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons > .wp-block-button,
	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	.mp-btn:not(.mp-btn-icon) {
		width: 100%;
	}

	/* Przycisk „duży” ma własne wymiary — ten też idzie na pełną szerokość. */
	.wp-block-button.mp-btn-lg > .wp-block-button__link,
	a.mp-btn-lg {
		width: 100%;
	}

	/* Wyjątki */
	.mp-header .wp-block-buttons {
		flex-direction: row;
		align-items: center;
	}

	.mp-header .wp-block-button,
	.mp-header .wp-block-button > .wp-block-button__link,
	.mp-sticky-cta .mp-btn,
	.mp-sticky-cta-close {
		width: auto;
	}
}

/* ——————————————————————————————————————————————————————————
   12. MAPA — Leaflet na kafelkach OpenStreetMap
   —————————————————————————————————————————————————————————— */
.mp-mapa {
	position: relative;
}

/* Płótno i panel zapasowy mają tę samą bryłę, więc podmiana jednego na drugi
   nie rusza treści obok. */
.mp-mapa-plotno,
.mp-mapa-zapas {
	aspect-ratio: 4 / 3;
	border: var(--mp-border-hairline) solid var(--mp-border);
	border-radius: var(--mp-radius-md);
	background-color: var(--mp-bg-subtle);
}

.mp-mapa-plotno {
	position: relative;
	overflow: hidden;
	/* Leaflet potrzebuje wysokości w pikselach, samo aspect-ratio mu nie starcza. */
	min-height: 320px;
}

/* Etykieta na czas dociągania kafelków. Znika razem z klasą, a Leaflet i tak
   kładzie swoje warstwy wyżej (z-index 400+), więc nic nie przesłania mapy. */
.mp-mapa:not(.jest-aktywna) .mp-mapa-plotno::before {
	content: "Wczytuję mapę…";
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	font-size: var(--mp-text-caption);
	color: var(--mp-text-muted);
}

/* `display: grid` niżej wygrałoby z atrybutem [hidden], stąd jawna reguła. */
.mp-mapa-zapas[hidden] { display: none; }

.mp-mapa-zapas {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--mp-space-3);
	padding: var(--mp-space-5);
	text-align: center;
}

.mp-mapa-zapas-tekst {
	max-width: 42ch;
	color: var(--mp-text-secondary);
	font-size: var(--mp-text-small);
}

.mp-mapa-legenda {
	list-style: none;
	margin: var(--mp-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2) var(--mp-space-5);
	font-size: var(--mp-text-caption);
	color: var(--mp-text-muted);
}

.mp-mapa-legenda li {
	display: flex;
	align-items: baseline;
	gap: var(--mp-space-2);
}

/* Kropka legendy powtarza znacznik z mapy — ten sam kształt, ten sam kolor. */
.mp-mapa-legenda li::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--mp-accent);
	transform: translateY(-1px);
}

.mp-mapa-legenda-parking::before { background-color: var(--mp-ink-700) !important; }

.mp-mapa-legenda strong {
	font-weight: var(--mp-weight-medium);
	color: var(--mp-text-secondary);
}

/* — znaczniki rysowane przez divIcon (Leaflet nie dokłada tu żadnych stylów) — */
.mp-mapa-pin {
	border-radius: 50%;
	background-color: var(--mp-accent);
	box-shadow: 0 0 0 3px var(--mp-paper-100), 0 2px 6px rgb(0 0 0 / 0.35);
}

.mp-mapa-pin-parking {
	background-color: var(--mp-ink-700, #33302B);
	box-shadow: 0 0 0 3px var(--mp-paper-100), 0 2px 6px rgb(0 0 0 / 0.25);
}

.mp-mapa-pin:focus-visible {
	outline: var(--mp-border-rule) solid var(--mp-focus);
	outline-offset: 3px;
}

/* — nadpisanie chromu Leafletu na tokeny motywu — */
.mp-mapa .leaflet-container {
	font-family: var(--mp-font-body);
	background-color: var(--mp-bg-subtle);
}

.mp-mapa .leaflet-bar a,
.mp-mapa .leaflet-control-zoom a {
	width: 34px;
	height: 34px;
	line-height: 34px;
	color: var(--mp-text);
	background-color: var(--mp-bg);
	border-bottom-color: var(--mp-border);
	font-family: var(--mp-font-heading);
	font-weight: var(--mp-weight-medium);
}

.mp-mapa .leaflet-bar a:hover,
.mp-mapa .leaflet-bar a:focus-visible {
	background-color: var(--mp-bg-subtle);
	color: var(--mp-accent);
}

.mp-mapa .leaflet-bar {
	border: var(--mp-border-hairline) solid var(--mp-border);
	border-radius: var(--mp-radius-sm);
	box-shadow: none;
}

.mp-mapa .leaflet-popup-content-wrapper,
.mp-mapa .leaflet-popup-tip {
	background-color: var(--mp-bg);
	color: var(--mp-text);
	border-radius: var(--mp-radius-sm);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
}

.mp-mapa .leaflet-popup-content {
	margin: var(--mp-space-4);
	font-size: var(--mp-text-small);
	line-height: var(--mp-leading-body);
	color: var(--mp-text-secondary);
}

.mp-mapa .leaflet-popup-content strong {
	display: block;
	margin-bottom: var(--mp-space-1);
	font-family: var(--mp-font-heading);
	font-weight: var(--mp-weight-medium);
	color: var(--mp-text);
}

.mp-mapa .leaflet-container a.leaflet-popup-close-button { color: var(--mp-text-muted); }

.mp-mapa .leaflet-control-attribution {
	background-color: color-mix(in srgb, var(--mp-bg) 88%, transparent);
	font-size: 11px;
	color: var(--mp-text-muted);
}

.mp-mapa .leaflet-control-attribution a { color: var(--mp-text-secondary); }