/*
 * Pax et Bonum — style uzupelniajace.
 *
 * Wszystko, co da sie ustawic w theme.json, siedzi w theme.json. Tutaj tylko to,
 * czego tamten format nie obsluguje: stany interakcji, drobne uklady i wzorce.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

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

/* Optyczny rozmiar Intera — subtelnie poprawia duze naglowki. */
h1, h2, .pax-hasło { font-variation-settings: "opsz" 32; }

/* Zawijanie: naglowki lamane na rowne linie, akapity bez sierot na koncu.
   Bez tego naglowek hero konczyl sie samotnym „ludzku." w trzeciej linii. */
:where(h1, h2, h3, h4, .pax-hero__tytul) { text-wrap: balance; }
:where(p, li, figcaption) { text-wrap: pretty; }

/* Cyfry o stalej szerokosci w tabelach — kolumny nie skacza. */
table, .pax-liczba { font-variant-numeric: tabular-nums; }

:where(a):focus-visible,
:where(button, .wp-block-button__link):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Odpowiedz na wcisniecie — przycisk ma sie zachowac jak fizyczny klawisz.
   Sam hover nie daje potwierdzenia na dotyku, gdzie stanu :hover w praktyce nie ma. */
:where(.wp-block-button__link, .wp-element-button) {
	transition: background-color var(--wp--custom--transition--base),
	            transform var(--wp--custom--transition--base);
}

:where(.wp-block-button__link, .wp-element-button):active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Pomijanie nawigacji
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 0 0 var(--wp--custom--radius--md) 0;
	text-decoration: none;
	font-weight: 560;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

/* --------------------------------------------------------------------------
   Naglowek
   -------------------------------------------------------------------------- */

/* UWAGA: `backdrop-filter` NIE moze stac na samym naglowku. Tak jak `transform`
   i `filter`, ustanawia on containing block dla potomkow `position: fixed` —
   a modal nawigacji mobilnej (.wp-block-navigation__responsive-container) jest
   potomkiem naglowka i wlasnie `fixed`. Efekt: modal zamiast pokryc ekran byl
   przycinany do wysokosci paska (71,9 px), wiec z czterech linkow menu widac
   bylo jeden. Rozmycie siedzi na warstwie ::before, ktora containing blocku
   nie tworzy. */
.pax-naglowek {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .88);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pax-naglowek::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

/* Naglowek jest w ukladzie przeplywowym, wiec nie dostaje ani szerokosci `wide`,
   ani odstepow od krawedzi — bez tego logo i menu dotykaja brzegow ekranu. */
.pax-naglowek > .wp-block-group {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Nazwa marki — znak z logo + krotka forma nazwy, nigdy sie nie lamie. */
.pax-marka {
	font-weight: 680;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	flex-shrink: 0;
}

.pax-marka a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}

.pax-marka__znak {
	width: 30px;
	height: auto;
	display: block;
}

@media (max-width: 480px) {
	.pax-marka { font-size: .98rem; }
	.pax-marka__znak { width: 26px; }
}

.pax-naglowek__prawa { min-width: 0; }

/* Bez tego tekst przycisku lamie sie na trzy linijki, gdy flex sciska naglowek. */
.pax-naglowek__cta { flex-shrink: 0; }
.pax-naglowek__cta .wp-block-button__link { white-space: nowrap; }

.pax-naglowek .wp-block-navigation__responsive-container-open,
.pax-naglowek .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.pax-naglowek .wp-block-navigation-item__content {
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--wp--custom--transition--base);
}

.pax-naglowek .wp-block-navigation-item__content:hover,
.pax-naglowek .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Podmenu — mniej „systemowe" niz domyslne. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: .35rem;
	min-width: 15rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	padding: .5rem .75rem;
	border-bottom: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   Typografia tresci
   -------------------------------------------------------------------------- */

/* Oddech nad naglowkami w dlugim tekscie — czytelnosc poradnikow. */
.pax-tresc :where(h2) { margin-top: var(--wp--preset--spacing--60); }
.pax-tresc :where(h3) { margin-top: var(--wp--preset--spacing--50); }

.pax-tresc :where(p, li) { max-width: 68ch; }

.pax-tresc :where(li + li) { margin-top: .35rem; }

/* Pierwszy akapit wpisu — lekko wiekszy, prowadzi w tekst. */
.pax-tresc > p:first-of-type {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	line-height: 1.55;
}

/* Tabele: przewijanie w poziomie zamiast rozpychania strony na telefonie.
   Tabele w poradnikach to goly <table> (tresc z klasycznego edytora), a nie
   blok `figure.wp-block-table` — samo ostylowanie opakowania bloku nic tu nie
   daje i tabela rozpycha strone (zmierzone: body.scrollWidth 450 px przy
   viewporcie 360). Dlatego kontenerem przewijania jest sama tabela.
   Problemem nie bylo wiec przewijanie, tylko brak sygnalu, ze jest co przewijac:
   na telefonie pasek jest nakladka i znika, a tresc wyglada na ucieta.
   Cien przy prawej krawedzi (gradient tla) pojawia sie tylko wtedy, gdy jest
   jeszcze tresc poza kadrem. */
.pax-tresc :where(.wp-block-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pax-tresc :where(table) {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
	background:
		linear-gradient(to right, var(--wp--preset--color--base) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat local,
		linear-gradient(to left, var(--wp--preset--color--base) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(32, 32, 80, .18), rgba(32, 32, 80, 0)) left / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(32, 32, 80, .18), rgba(32, 32, 80, 0)) right / 12px 100% no-repeat scroll;
}
.pax-tresc :where(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: .7rem .85rem;
	text-align: left;
	vertical-align: top;
}
.pax-tresc :where(thead th) {
	background: var(--wp--preset--color--surface);
	font-weight: 620;
	white-space: nowrap;
}

.pax-tresc :where(hr) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-block: var(--wp--preset--spacing--60);
}

/* Zastrzezenie prawne pod poradnikami. */
.pax-zastrzezenie {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-left: 3px solid var(--wp--preset--color--border);
	padding-left: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Karty i siatki
   -------------------------------------------------------------------------- */

.pax-karta {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--transition--base),
	            box-shadow var(--wp--custom--transition--base),
	            transform var(--wp--custom--transition--base);
	height: 100%;
}

.pax-karta:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

.pax-karta { position: relative; }

/* Cala karta klikalna, ale link zostaje jeden — dobre dla czytnikow ekranu.
   Nakladka MUSI wisiec na <a>, nie na naglowku: inaczej przykrywa karte
   i pochlania klikniecia, zamiast je przekazywac do odnosnika. */
.pax-karta .pax-karta__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

/* Tresc, ktora ma pozostac zaznaczalna, musi byc nad nakladka. */
.pax-karta > *:not(.pax-karta__link) { position: relative; z-index: 0; }

/* Naglowek sekcji trzyma lewa krawedz siatki, ale nie rozciaga sie na cala
   szerokosc — dlugie zdanie w jednej linii jest nieczytelne. */
.pax-naglowek-sekcji { max-width: 24ch; }

/* Tytuly w kartach: grafit zamiast koloru odnosnika, bez podkreslenia — inaczej
   siatka kilkunastu kart wyglada jak lista linkow, a nie jak zestaw tresci.
   Kolor akcentu wraca na hover, zeby klikalnosc nadal byla czytelna. */
.pax-karta :where(h2, h3, h4) a,
.pax-karta :where(h2, h3, h4) {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pax-karta:hover :where(h2, h3, h4) a,
.pax-karta:focus-within :where(h2, h3, h4) a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Etykieta kategorii w karcie zostaje w kolorze akcentu, ale bez podkreslenia. */
.pax-karta .pax-etykieta a { text-decoration: none; color: var(--wp--preset--color--accent); }

.pax-karta__numer {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 620;
	letter-spacing: .08em;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* Kreska u gory karty — sygnatura marki. Domyslnie koral (kolor dekoracyjny,
   do tekstu sie nie nadaje, do 3-pikselowej kreski owszem), a karta obszaru
   podmienia go na wlasny. Kolor idzie wlasna zmienna, nie `currentColor`:
   inaczej dziedziczyly go naglowki i akapity w srodku karty. */
.pax-karta {
	--pax-kreska: var(--wp--preset--color--koral);
}

.pax-karta::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--wp--custom--radius--lg);
	right: var(--wp--custom--radius--lg);
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--pax-kreska);
}

.pax-obszar--prawo   { --pax-kreska: var(--wp--preset--color--obszar-prawo); }
.pax-obszar--cyfra   { --pax-kreska: var(--wp--preset--color--obszar-cyfra); }
.pax-obszar--pomoc   { --pax-kreska: var(--wp--preset--color--obszar-pomoc); }
.pax-obszar--muzyka  { --pax-kreska: var(--wp--preset--color--obszar-muzyka); }
.pax-obszar--sklepik { --pax-kreska: var(--wp--preset--color--obszar-sklepik); }

/* --------------------------------------------------------------------------
   Wyroznione bloki
   -------------------------------------------------------------------------- */

.pax-wyroznienie {
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--radius--lg);
}

.pax-zbiorka {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--wp--preset--color--accent-soft) 0%, transparent 55%),
		var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   Wpis z prawa kolumna
   -------------------------------------------------------------------------- */

/* Tekst zachowuje swoja miare (44rem), kolumna bierze prawa krawedz kontenera.
   Ponizej 68rem na dwie kolumny nie ma miejsca — kolumna laduje pod tekstem.
   Tam nikt nie dociera (GA4: scroll 90% odpalil 36 razy na 213 odslon), wiec
   na waskich ekranach zbiorke wyciaga przyklejony pasek `.pax-pasek` nizej. */
@media (min-width: 68rem) {
	.pax-uklad {
		display: grid;
		grid-template-columns: minmax(0, 44rem) minmax(20rem, 24rem);
		justify-content: space-between;
		align-items: start;
		gap: var(--wp--preset--spacing--50);
	}

	/* Przyklejona jest tylko krotka karta zbiorki. Kolumna z formularzem bywa
	   wyzsza od okna, a przyklejony element wyzszy od okna urywa sie u dolu. */
	.pax-kolumna--lepka {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/* Pasek zbiorki na telefonie. Selektor dwuczlonowy, zeby wygrac z `display:flex`
   z `.is-layout-flex` corea (ta sama specyficznosc, kolejnosc arkuszy zmienna). */
.pax-kolumna .pax-pasek {
	display: none;
}

@media (max-width: 67.99rem) {
	.pax-kolumna .pax-pasek {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 20;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -6px 20px rgb(0 0 0 / 8%);
	}

	.pax-pasek .wp-block-button__link {
		white-space: nowrap;
	}

	/* Zeby pasek nie przykryl konca stopki. */
	body:has(.pax-pasek) {
		padding-bottom: 4.5rem;
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Uklad przeplywowy (nie constrained), zeby etykieta, tytul i lead trzymaly
   te sama lewa krawedz co naglowek strony. Szerokosc ograniczamy tutaj, bo
   `contentSize` wyrownalby wszystko do srodka. */
.pax-hero__tytul { max-width: 17ch; }
.pax-hero__lead  { max-width: 52ch; }

/* Znak z logo jako element tla — duzy, jasny, przyciety krawedzia ekranu.
   Ma dawac marce obecnosc, nie walczyc z tekstem, dlatego siedzi pod trescia
   i jest wylaczony z odczytu przez czytniki ekranu. */
.pax-hero-sekcja {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.pax-hero-sekcja::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -6%;
	top: 50%;
	transform: translateY(-50%) rotate(-8deg);
	width: min(42vw, 30rem);
	aspect-ratio: 472 / 442;
	background: url("../img/serce.png") no-repeat center / contain;
	opacity: .13;
	pointer-events: none;
}

.pax-hero-sekcja > * { position: relative; }

@media (max-width: 900px) {
	.pax-hero-sekcja::before {
		width: 24rem;
		right: -8rem;
		top: auto;
		bottom: -4rem;
		transform: rotate(-8deg);
		opacity: .09;
	}
}

@media (max-width: 781px) {
	.pax-hero__tytul { max-width: 100%; }
}

/* Sekcja „co juz sie udalo" — trzy konkrety, kazdy z kreska w kolorze marki. */
.pax-dokonania > .wp-block-group {
	border-top: 3px solid var(--wp--preset--color--koral);
	padding-top: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Zdjecia
   -------------------------------------------------------------------------- */

/* Przed / po — dwa ujecia pionowe obok siebie, przyciete do tej samej ramki,
   zeby porownanie bylo uczciwe (rozne proporcje zrodlowe zaburzylyby odbior). */
/* Oba zrodla sa pionowe — format 4:3 uciinal wieze w polowie. 4:5 miesci
   caly obiekt i nadal pozwala postawic zdjecia obok siebie. */
.pax-przedpo__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

@media (max-width: 781px) {
	.pax-przedpo { grid-template-columns: 1fr !important; }
}

.pax-podpis {
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.pax-podpis strong { color: var(--wp--preset--color--contrast); }

/* Pas ze zdjeciem: przyciemnienie musi wystarczyc na bialy tekst nawet nad
   jasnym niebem, stad dodatkowy gradient od dolu. */
.pax-pas-foto .wp-block-cover__background {
	background-image: linear-gradient(
		to top,
		rgba(32, 32, 80, .82) 0%,
		rgba(32, 32, 80, .55) 55%,
		rgba(32, 32, 80, .35) 100%
	);
}

.pax-pas-foto .wp-block-cover__inner-container { align-self: end; }


/* Zdjecia w tresci — spojne zaokraglenie i brak przeskokow ukladu. */
.pax-tresc :where(.wp-block-image img) { border-radius: var(--wp--custom--radius--md); }

/* Etykieta nad naglowkiem sekcji. */
.pax-etykieta {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Wariant na ciemnym tle (zdjecie w bloku cover). MUSI stac po `.pax-etykieta`:
   obie reguly maja te sama specyficznosc (jedna klasa), wiec o wyniku decyduje
   kolejnosc w pliku, a nie kolejnosc klas w HTML. Wczesniej modyfikator stal
   wyzej i byl zjadany, przez co etykieta szla kolorem `accent` — kontrast na
   przyciemnionym zdjeciu 2,40:1, ponizej progu AA (3:1). Biel daje 15,17:1.
   Koral tu nie wchodzi: to kolor dekoracyjny, 2,6:1 na bieli. */
.pax-etykieta--jasna { color: var(--wp--preset--color--base); }

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

.pax-stopka {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.pax-stopka :where(a) { color: var(--wp--preset--color--contrast); }
.pax-stopka :where(a):hover { color: var(--wp--preset--color--accent); }

.pax-dane-rejestrowe {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.pax-lista-stopki {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .4rem;
}

.pax-lista-stopki a { text-decoration: none; }
.pax-lista-stopki a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Formularz kontaktowy (Jetpack)
   -------------------------------------------------------------------------- */

.pax-tresc :where(.contact-form input[type="text"],
                  .contact-form input[type="email"],
                  .contact-form input[type="tel"],
                  .contact-form textarea,
                  .contact-form select) {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	font: inherit;
	color: inherit;
}

.pax-tresc :where(.contact-form label) {
	display: block;
	font-weight: 560;
	margin-bottom: .3rem;
}

.pax-tresc :where(.contact-form .grunion-field-wrap) { margin-bottom: var(--wp--preset--spacing--30); }

/* --------------------------------------------------------------------------
   Drobiazgi
   -------------------------------------------------------------------------- */

/* Obrazy nigdy nie rozpychaja ukladu. */
:where(img, svg, video) { max-width: 100%; height: auto; }

/* Sensowne zawijanie dlugich adresow w tresci. */
.pax-tresc :where(a) { overflow-wrap: anywhere; }

/* Paginacja wpisow. */
.wp-block-query-pagination { gap: .35rem; }
.wp-block-query-pagination :where(a, span) {
	padding: .45rem .8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
}
.wp-block-query-pagination .current { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

@media print {
	.pax-naglowek, .pax-stopka, .wp-block-navigation, .pax-zbiorka, .pax-kolumna { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Kafle obszarow na stronie glownej.
   Na szerokim ekranie zostaje siatka z bloku (grid, minimumColumnWidth 19rem).
   Ponizej ~740px zamienia sie w przesuwany pas — kafel widac w calosci, a to,
   ze da sie przesunac, sygnalizuje wystajacy sasiad. Bez JS i bez kropek.
   --------------------------------------------------------------------------- */
@media (max-width: 46.25rem) {
    .pax-obszary {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--wp--preset--spacing--30);
        padding-bottom: var(--wp--preset--spacing--20);
    }

    .pax-obszary > * { scroll-snap-align: start; }
}

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

/* ---------------------------------------------------------------------------
   Hero: przesuwane obszary.
   Tor scroll-snap zamiast JS-owej karuzeli. Slajdy nie zmieniaja sie same —
   czytelnik nie traci tekstu w polowie zdania. Kropki to kotwice, wiec dzialaja
   bez skryptow i sa dostepne z klawiatury.
   --------------------------------------------------------------------------- */
.pax-slider__tor {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pax-slider__tor::-webkit-scrollbar { display: none; }

.pax-slajd {
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: var(--wp--preset--spacing--30);
}

.pax-slajd--bez-foto { grid-template-columns: minmax(0, 1fr); }
.pax-slajd--bez-foto .pax-slajd__tresc { max-width: 46rem; }

.pax-slajd__tresc > * + * { margin-top: var(--wp--preset--spacing--30); }
.pax-slajd__tresc .pax-hero__tytul { margin-top: var(--wp--preset--spacing--20); }

.pax-slajd .pax-hero__tytul {
    font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem);
    line-height: 1.05;
}

.pax-slajd .pax-hero__lead {
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--large);
    max-width: 34em;
}

/* Zdjecie dostaje staly ksztalt, zeby wysokosc slajdow nie skakala przy przewijaniu. */
.pax-slajd__foto img {
    width: 100%;
    height: 100%;
    max-height: 22rem;
    object-fit: cover;
    border-radius: var(--wp--custom--radius--lg, 18px);
    display: block;
}

.pax-slajd__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
}

.pax-slajd__cta .pax-link-wtorny {
    color: var(--wp--preset--color--muted);
    text-decoration: none;
    font-weight: 500;
}

.pax-slajd__cta .pax-link-wtorny:hover { color: var(--wp--preset--color--accent); }

/* Kropki: kolor dziedziczy sygnature obszaru z .pax-obszar--*. */
.pax-slider__kropki {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: var(--wp--preset--spacing--30);
}

.pax-slider__kropki a {
    width: 2.5rem;
    height: .3rem;
    border-radius: 999px;
    background: var(--wp--preset--color--border, #d9d9e3);
    transition: background-color var(--wp--custom--transition--base, .2s);
}

.pax-slider__kropki a:hover,
.pax-slider__kropki a:focus-visible { background: var(--wp--preset--color--accent); }

/* Etykieta kropki zostaje dla czytnikow ekranu, ale nie zajmuje miejsca.
   Selektor MUSI byc zawezony do `a` — strzalki tez sa w tym rzedzie i maja
   wlasny <span> ze znakiem, ktory ma byc widoczny. */
.pax-slider__kropki a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 781px) {
    .pax-slajd {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wp--preset--spacing--30);
    }

    .pax-slajd__foto { order: -1; }
    .pax-slajd__foto img { max-height: 13rem; }
}

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

/* Slider z wlaczonym JS: strzalki i aktywna kropka. Bez JS nic z tego nie ma sensu. */
.pax-slider__kropki { align-items: center; }

.pax-slider__strzalka {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--wp--preset--color--border, #e3e3ea);
    border-radius: 999px;
    background: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--wp--custom--transition--base, .2s),
                border-color var(--wp--custom--transition--base, .2s),
                transform var(--wp--custom--transition--base, .2s);
}

.pax-slider__strzalka:hover {
    background: var(--wp--preset--color--surface, #f6f6f8);
    border-color: var(--wp--preset--color--accent);
}

.pax-slider__strzalka:active { transform: scale(.94); }
.pax-slider__strzalka--poprz { margin-right: .5rem; }
.pax-slider__strzalka--nast { margin-left: .5rem; }

.pax-slider__kropki a[aria-current="true"] {
    background: var(--wp--preset--color--accent);
    width: 3.5rem;
}

.pax-slider__kropki a:not(.pax-slider__strzalka) { transition: background-color .2s, width .3s; }

/* --------------------------------------------------------------------------
   Okienko przypominajki (JBO 2027)
   Pokazuje sie dopiero przy zamiarze wyjscia — logika w inc/przypominajka.php.
   -------------------------------------------------------------------------- */

.pax-okno[hidden] { display: none; }

.pax-okno {
	position: fixed;
	inset: 0;
	/* Wyzej niz .pax-naglowek (z-index: 100, sticky) — przy tej samej
	   wartosci kolejnosc malowania zalezy tylko od porzadku w DOM (footer
	   wygrywa z naglowkiem), co jest zbyt niepewne dla okienka, ktore ma
	   wychwycic klik na przycisku zamkniecia. Zglaszany objaw: "nie da sie
	   zamknac okna" — podejrzenie, ze cos nad nim (pasek admina, banner
	   zgody, ewentualnie nakladka czytnika w przegladarce) lapalo klik. */
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.pax-okno__tlo {
	position: absolute;
	inset: 0;
	background: rgb(32 32 80 / 55%);
}

.pax-okno__panel {
	position: relative;
	width: min(34rem, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--50);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
}

.pax-okno__panel h2 { margin: 0.2rem 0 0.6rem; }

.pax-okno__zamknij {
	position: absolute;
	top: 0.4rem;
	right: 0.6rem;
	border: 0;
	background: none;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
}

.pax-okno__zamknij:hover { color: var(--wp--preset--color--contrast); }

@media print {
	.pax-okno { display: none !important; }
}

/* --------------------------------------------------------------------------
   Znak z logo przy naglowku wpisu
   Ten sam zabieg co w hero na stronie glownej (.pax-hero-sekcja), ale przy
   tytule wpisu: kolumna tekstu ma ~44rem, a strona bywa dwa razy szersza, wiec
   po prawej stronie tytulu zostaje pusty margines. Serce z logo wchodzi wlasnie
   tam — pod trescia, z niskim kontrastem, wylaczone z odczytu.
   Ponizej 1100 px marginesu nie ma i znak sie nie pokazuje.
   `overflow-x: clip` na <main> przycina znak wychodzacy poza ekran. Celowo
   `clip`, nie `hidden` — `hidden` zrobilby z <main> kontener przewijania
   i zabil `position: sticky` w kolumnie zbiorki.
   -------------------------------------------------------------------------- */

main.wp-block-group { overflow-x: clip; }

.pax-znak-naglowek { position: relative; isolation: isolate; }

.pax-znak-naglowek > * { position: relative; }

/* Naglowek wpisu dostaje szerokosc `wide` (78rem), bo przy `contentSize` 44rem
   tytul lamal sie w polowie, mimo pustego marginesu obok. Miara 46ch trzyma
   wiersz w granicach czytelnosci, a `balance` rozklada zawijanie rowno,
   zamiast zostawiac jedno slowo w drugiej linii. */
.pax-znak-naglowek .wp-block-post-title {
	max-width: 46ch;
	text-wrap: balance;
}

@media (min-width: 1100px) {
	.pax-znak-naglowek::before {
		content: "";
		position: absolute;
		z-index: -1;
		/* Znak dostaje wysokosc bloku tytulu, nie wlasny rozmiar w vw. Wersja
		   z `min(30vw, 24rem)` na szerokim ekranie wisiala w powietrzu obok
		   naglowka strony i wchodzila pod karte w kolumnie — teraz jest
		   przywiazany do tytulu i konczy sie razem z nim. */
		inset-block: -0.5rem;
		right: 0;
		width: auto;
		aspect-ratio: 472 / 442;
		background: url("../img/serce.png") no-repeat right center / contain;
		opacity: .16;
		pointer-events: none;
	}
}

@media print {
	.pax-znak-naglowek::before { display: none; }
}