/*
 * Peron 12 — arkusz motywu.
 *
 * Kolory, kroje i skala pochodzą z theme.json (zmienne --wp--preset--*).
 * Nie wpisujemy tu wartości szesnastkowych: paleta ma jedno źródło prawdy.
 * Poniżej tylko te wartości pochodne, których theme.json nie wyraża —
 * przezroczystości tekstu i linii włosowych.
 */

:root {
	/*
	 * Warstwa tokenow semantycznych.
	 *
	 * Strona stoi na bieli — to wersja podstawowa z ksiegi znaku, bo wlasnie
	 * na bialym tle ksiega pokazuje logo w wariancie podstawowym. Ciemne tla
	 * sa tam wariantem "w kontrze", nie regula.
	 *
	 * Kluczowa konsekwencja: zlota ochra na bieli daje 3,56 : 1, czyli nie
	 * przechodzi AA dla tekstu zwyklego. Na jasnym tle zloto pracuje wiec
	 * wylacznie jako duzy napis, linia wlosowa i tlo przycisku, a role koloru
	 * akcentujacego w tekscie przejmuje burgund (11,47 : 1).
	 */
	--p12-tlo: var(--wp--preset--color--biel-ciepla);
	--p12-tekst: var(--wp--preset--color--burgund-ciemny);
	--p12-akcent: var(--wp--preset--color--burgund);

	/*
	 * Znak firmowy to grafika, nie tekst — obowiazuje go prog 3 : 1 dla
	 * elementow nietekstowych. Zlota ochra na bieli daje 3,56, wiec znak
	 * moze zostac w kolorze podstawowym marki, tak jak pokazuje ksiega.
	 */
	--p12-znak: var(--wp--preset--color--ochra);

	/* Przezroczystosci ciemnego tekstu. .66 daje 5,0 : 1 na bieli — zapas
	   nad progiem 4,5 wystarczajacy takze na cieplejszych odcieniach tla. */
	--p12-tekst-przygaszony: rgba(58, 28, 39, 0.82);
	--p12-tekst-drugorzedny: rgba(58, 28, 39, 0.66);

	--p12-linia: rgba(170, 128, 77, 0.42);
	--p12-linia-cicha: rgba(58, 28, 39, 0.14);
	--p12-przyciemnienie: rgba(20, 9, 12, 0.86);

	--p12-zielen-glebia: #1F3B32;
	--p12-tablica-tlo: #3A1C27;

	/*
	 * Rytm pionowy strony. Wartosc wyprowadzona ze skladu: najwieksza dziura
	 * wewnatrz typowej sekcji to okolo 63 px, a przerwa rozdzielajaca sekcje
	 * musi byc od niej wyraznie wieksza. Przerwa nalezy do granicy, nie do
	 * bloku — kazda sekcja niesie polowe u gory i polowe u dolu.
	 */
	--p12-rytm: clamp(5rem, 9vw, 9rem);
	--p12-rytm-polowa: clamp(2.5rem, 4.5vw, 4.5rem);
}

/*
 * Sekcje o ciemnym tle przestawiaja te same tokeny z powrotem na jasne
 * wartosci. Dzieki temu regula napisana raz jest poprawna i na bieli,
 * i wewnatrz kolorowego pasa — bez dublowania selektorow.
 */
.peron12-hero__copy,
.peron12-rezerwacja,
.peron12-bar,
.peron12-opinie,
.peron12-cta--burgund,
.peron12-tablica__pudlo,
.peron12-formularz__kolumna,
.peron12-hero__bilet,
.peron12-konferencje__bilet,
.peron12-konferencje--foto,
.peron12-header,
.wp-block-navigation__responsive-container.is-menu-open,
.peron12-placeholder,
.peron12-mapa {
	/*
	 * W pasach tekst jest kością przygaszoną, nie kością słoniową. Różnica
	 * jest niewielka w liczbach, a duża w odbiorze: biel na ciemnym tle przy
	 * jasnej stronie dookoła razi, przygaszony odcień siada spokojnie.
	 */
	--p12-tekst: var(--wp--preset--color--kosc-przygaszona);
	--p12-akcent: var(--wp--preset--color--ochra-jasna);
	--p12-znak: var(--wp--preset--color--ochra-jasna);
	--p12-tekst-przygaszony: rgba(245, 240, 232, 0.78);
	--p12-tekst-drugorzedny: rgba(245, 240, 232, 0.62);
	--p12-linia: rgba(205, 179, 115, 0.28);
	--p12-linia-cicha: rgba(205, 179, 115, 0.14);
}

/*
 * Odnosniki wewnatrz ciemnych pasow.
 *
 * theme.json ustawia globalny kolor odnosnika na burgund — swietny na jasnym
 * tle (11,47 : 1), ale na ciemnym pasie ginie. Pasy przestawiaja token akcentu
 * na jasna ochre, wiec wystarczy skierowac na niego odnosniki. Przyciski maja
 * wlasne tlo i zostaja poza ta regula.
 */
.peron12-hero__copy a:not(.peron12-button),
.peron12-rezerwacja a:not(.peron12-button),
.peron12-bar a:not(.peron12-button),
.peron12-opinie a:not(.peron12-button),
.peron12-cta--burgund a:not(.peron12-button),
.peron12-tablica__pudlo a:not(.peron12-button),
.peron12-mapa a:not(.peron12-button) {
	color: var(--p12-akcent);
}

/* --------------------------------------------------------- Rytm sekcji */

/*
 * Rytm dotyczy sekcji, nie każdego bloku motywu. Znak firmowy renderuje się
 * jako <div> i trafia do nagłówka oraz stopki — gdyby łapał się na tę regułę,
 * urósłby o dwie połowy rytmu i rozepchnął nagłówek. Stąd selektor po
 * znaczniku <section>, którym renderują się wyłącznie bloki sekcyjne.
 */
section[class*="wp-block-peron12-"] {
	margin-block: 0;
	padding-block: var(--p12-rytm-polowa);
}

/* Hero niesie pełnoekranowe zdjęcie — własny oddech ma w warstwie tekstu. */
.peron12-hero {
	padding-block: 0;
}

/*
 * Pasek rezerwacji i pas zachęty to elementy sterujące, nie sekcje treści.
 * Mają być zwarte, więc dostają własną, mniejszą połowę rytmu. Pasek
 * dodatkowo przykleja się do hero, bo razem tworzą jedno wejście na stronę.
 */
.peron12-rezerwacja,
.peron12-cta {
	--p12-rytm-polowa: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ Baza */

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 3px;
}

/* Link pomijający nawigację — wymóg dostępności z § 2 ust. 1. */
.peron12-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ochra);
	color: #231218;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: none;
}

.peron12-skip:focus {
	left: 1rem;
	top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		/*
		 * Zerowanie opóźnień jest tu równie ważne jak zerowanie czasu trwania.
		 * Bez tego kaskada w nagłówku przyklejonym nadal by istniała — treść
		 * pojawiałaby się skokowo, ale wciąż z przesunięciem do 160 ms.
		 */
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* Tekst wyłącznie dla czytników ekranu. Motyw blokowy nie dostaje tej klasy
   z rdzenia, a używamy jej przy znaku firmowym i linku pomijającym. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------- Znak firmowy */

.peron12-logo-block {
	display: flex;
	align-items: center;
	/* Domyślna barwa znaku; ustawienie koloru w edytorze ją nadpisze. */
	color: var(--p12-znak);
}

.peron12-logo-block__link {
	display: inline-flex;
	align-items: center;
	height: 100%;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.peron12-logo-block__link:hover,
.peron12-logo-block__link:focus-visible {
	color: var(--p12-tekst);
}

/* Znak skaluje się wysokością — szerokość wynika z proporcji krzywych. */
.peron12-logo {
	display: block;
	height: 100%;
	width: auto;
}

/* ------------------------------------------------------- Elementy wspólne */

.peron12-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

.peron12-button {
	display: inline-block;
	padding: 0.9rem 1.5rem;
	background: var(--wp--preset--color--ochra);
	color: #231218;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	transition: background-color 0.18s ease;
}

/*
 * Najechanie ciemnieje zamiast jasniec: burgund z biala typografia daje
 * 11,47 : 1. Wczesniejsza wersja rozjasniala tlo do jasnej ochry, co przy
 * jasnym motywie zostawialo prawie czarny napis na burgundzie.
 */
.peron12-button:hover,
.peron12-button:focus-visible {
	background: var(--wp--preset--color--burgund);
	color: var(--wp--preset--color--kosc-sloniowa);
	text-decoration: none;
}

.peron12-button--ghost {
	background: transparent;
	color: var(--p12-akcent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ochra);
}

.peron12-button--ghost:hover,
.peron12-button--ghost:focus-visible {
	background: var(--wp--preset--color--ochra);
	color: #231218;
}

/* Podpowiedź widoczna wyłącznie w podglądzie edytora. */
.peron12-hint {
	font-size: var(--wp--preset--font-size--s);
	color: var(--p12-tekst-drugorzedny);
	font-style: italic;
}

/* Miejsce na zdjęcie hotelu — celowo nie udaje fotografii. */
.peron12-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 18rem;
	background:
		repeating-linear-gradient(
			135deg,
			var(--wp--preset--color--burgund-ciemny) 0 12px,
			var(--wp--preset--color--noc) 12px 24px
		);
	box-shadow: inset 0 0 0 1px var(--p12-linia);
}

.peron12-placeholder span {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

/* ------------------------------------------------------- Nagłówek i stopka */

.peron12-header {
	/* Ten sam kolor na każdej stronie: z hero — szkło nad zdjęciem, bez hero — pełny burgund. */
	background: var(--wp--preset--color--burgund);
	border-bottom: 1px solid rgba(205, 179, 115, 0.22);
}

.peron12-header__row {
	gap: var(--wp--preset--spacing--30);
}

/* Nawigacja bierze wolną przestrzeń między znakiem a przyciskiem i siada
   przy przycisku — znak zostaje sam przy lewej krawędzi. */
.peron12-header .peron12-nav {
	margin-inline-start: auto;
}

/*
 * Kolor menu ustawiamy na kontenerze, nie na odnosniku.
 *
 * Rdzen WordPressa wypisuje regule o specyficznosci trzech klas:
 *   .wp-block-navigation .wp-block-navigation-item__content
 *     .wp-block-navigation-item__content { color: inherit }
 * Zwykle ".peron12-nav a" jej nie przebija, wiec odnosnik dziedziczyl kolor
 * tekstu strony — na ciemnym pasku dawalo to kontrast 1,28 i menu znikalo.
 * Skoro rdzen kaze dziedziczyc, ustawiamy kolor tam, skad dziedziczenie idzie.
 */
.peron12-header .peron12-nav,
.peron12-lepki__menu {
	color: var(--p12-tekst-przygaszony);
}

.peron12-header .peron12-nav a,
.peron12-lepki__menu a {
	text-decoration: none;
	transition: color 0.18s ease;
}

/* Najechanie musi przebic te same trzy klasy rdzenia — stad zdublowana klasa. */
.peron12-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.peron12-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.peron12-lepki__menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.peron12-lepki__menu .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.peron12-nav .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--p12-akcent);
}

.peron12-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/*
 * Blok nawigacji rdzenia przełącza się na menu nakładkowe dopiero przy 600 px.
 * Nagłówek potrzebuje 812 px na znak, sześć pozycji i przycisk rezerwacji,
 * a przy 900 px zostaje go 810 — czyli dokładnie o dwa piksele za mało.
 * Dlatego próg wypada na 960 px, nie na 900. Odwracamy reguły rdzenia
 * w tym zakresie, bo jego breakpoint jest zapisany na sztywno.
 */
@media (min-width: 600px) and (max-width: 959.98px) {
	.peron12-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.peron12-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Tablety poziomo (960-1199 px): znak, sześć pozycji, języki i przycisk
   potrzebują ok. 950 px, a w wierszu jest 860-1000 - przycisk spadał do drugiego
   wiersza. Gęstsze menu, mniejsze odstępy i węższy przycisk mieszczą się w 830. */
@media (min-width: 960px) and (max-width: 1199.98px) {
	.peron12-header__row {
		gap: 1rem;
	}

	.peron12-header .peron12-nav .wp-block-navigation__container {
		gap: 1rem;
	}

	.peron12-header .peron12-nav .wp-block-navigation-item__content {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}

	.peron12-header__cta .wp-block-button__link {
		padding-inline: 1.1rem;
	}
}

/* Menu nakładkowe: pozycje w rytmie okładki, nie w domyślnym gęstym stosie. */
.peron12-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--l);
	letter-spacing: 0.08em;
}

.peron12-footer {
	margin-block-start: var(--p12-rytm);
	border-top: 1px solid var(--p12-linia);
	color: var(--p12-tekst-drugorzedny);
	font-size: var(--wp--preset--font-size--s);
}

.peron12-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1.9;
}

.peron12-footer__list a {
	color: var(--p12-tekst-drugorzedny);
	text-decoration: none;
}

.peron12-footer__list a:hover,
.peron12-footer__list a:focus-visible {
	color: var(--p12-akcent);
	text-decoration: underline;
}

/* ------------------------------------------------------------- Blok: hero */

.peron12-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 34rem);
	overflow: hidden;
}

.peron12-hero__media {
	position: absolute;
	inset: 0;
}

.peron12-hero__media img,
.peron12-hero__media .peron12-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Dwie osie przyciemnienia zamiast jednej. Pionowa sama nie wystarcza: tekst
   hero stoi mniej wiecej w polowie wysokosci kadru, gdzie stary gradient byl
   najslabszy (0,18), wiec jasny fragment zdjecia wchodzil prosto pod litery.
   Pozioma dokłada klin po lewej, czyli dokladnie tam, gdzie leży kolumna
   tekstu — dzieki temu czytelnosc nie zalezy od tego, jakie zdjecie wgra hotel. */
.peron12-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(20, 9, 12, 0.58) 0%,
			rgba(20, 9, 12, 0.16) 30%,
			rgba(20, 9, 12, 0.46) 58%,
			var(--p12-przyciemnienie) 100%
		),
		linear-gradient(
			90deg,
			rgba(20, 9, 12, 0.62) 0%,
			rgba(20, 9, 12, 0.24) 46%,
			rgba(20, 9, 12, 0) 78%
		);
}

.peron12-hero__copy {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	/* To samo wcięcie co reszta strony — inaczej nagłówek hero nie trzyma
	   pionowej linii z tekstem sekcji poniżej. */
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	padding-block-end: var(--wp--preset--spacing--40);
}

.peron12-hero__copy > * {
	max-width: 40ch;
}

/* Na jednolitych ciemnych pasach nadtytul jest zloty i to jest w porzadku.
   Na zdjeciu zloto (#CDB373) potrzebuje tla ciemniejszego niz realnie daje
   fotografia — przy 11,5 px to tekst zwykly, czyli prog 4,5:1. Kosc sloniowa
   trzyma ten prog na kazdym kadrze, wiec w hero nadtytul jest jasny. */
.peron12-hero__eyebrow {
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--kosc-przygaszona);
}

.peron12-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--p12-tekst);
	text-wrap: balance;
}

.peron12-hero__title em {
	font-style: italic;
	color: var(--p12-akcent);
}

.peron12-hero__lead {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.5;
	color: var(--p12-tekst-przygaszony);
	max-width: 34ch;
}

.peron12-hero__actions {
	margin: 1.75rem 0 0;
}

/* W edytorze blok nie ma pełnej szerokości okna — pilnujemy, żeby podgląd
   nie sugerował innych proporcji niż front. */
.editor-styles-wrapper .peron12-hero {
	min-height: 24rem;
}

/* ------------------------------------------------ Nagłówek strony (H1 podstron) */

/* Tytuł podstrony trzyma tę samą pionową linię co logotyp i menu. Bez tego
   layout constrained zawęża go do contentSize i centruje — H1 odjeżdża wtedy
   o kilkaset pikseli w prawo od reszty strony. */
.peron12-naglowek-strony {
	margin-block-end: var(--wp--preset--spacing--40);
}

.peron12-naglowek-strony > * {
	margin-inline: 0;
}

/* Wiersz nie ma prawa jechać przez całe 1600 px — długość linii zostaje
   czytelna, ale krawędź startu pozostaje wspólna z logotypem. */
.peron12-naglowek-strony :is(h1, .wp-block-post-title) {
	max-width: 20ch;
	margin-block: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.peron12-naglowek-strony .peron12-eyebrow {
	margin-block: 0 0.75rem;
}

.peron12-naglowek-strony p:not(.peron12-eyebrow) {
	max-width: 46ch;
	margin-block: 1rem 0;
}

.peron12-naglowek-strony .wp-block-buttons {
	margin-block-end: 0;
}

/* Hero pełnoekranowy na podstronach. Wysokość to okno minus nagłówek strony —
   skrypt mierzy nagłówek i zapisuje go w --p12-naglowek-h, żeby dolna krawędź
   hero wypadła dokładnie na krawędzi ekranu, a „Następny przystanek” był
   widoczny bez przewijania. */
.peron12-hero--pelny {
	/* 90 svh, nie 100: skrawek następnej sekcji pod krawędzią zachęca do
	   przewinięcia, a bilet ma nad sobą powietrze. --p12-nad-hero to wysokość
	   tego, co stoi nad hero (ustawia skrypt); gdy hero zaczyna stronę — zero. */
	min-height: calc(90vh - var(--p12-nad-hero, 0px));
	min-height: calc(90svh - var(--p12-nad-hero, 0px));
	/* Motyw nie ma globalnego box-sizing: bez tej linii do 90 svh doliczał się
	   padding hero i bilet wypadał pod krawędzią ekranu. */
	box-sizing: border-box;
}

/* Nagłówek nad hero: burgundowe szkło. Przezroczyste nie przejdzie — kremowe
   menu 11,5 px na białym suficie pokoju nie dociągnie do 4,5:1. 78% burgundu
   z rozmyciem plus pas przyciemnienia w scrimie pod nagłówkiem daje 4,9:1
   nawet nad czystą bielą, a nad ciemnym kadrem czyta się jak szkło. */
.peron12-hero-na-gorze .peron12-header {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 30;
	border-bottom: 1px solid rgba(205, 179, 115, 0.22);
	background: transparent;
}

/* Tint i rozmycie na pseudoelemencie, nie na nagłówku. backdrop-filter robi
   z elementu kontener dla position: fixed — menu mobilne WordPressa (fixed,
   inset: 0) i przycisk przyklejony do dołu ekranu zamykałyby się w pudełku
   nagłówka. Pseudoelement pod treścią daje ten sam obraz bez tej pułapki. */
.peron12-hero-na-gorze .peron12-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(58, 28, 39, 0.78);
	backdrop-filter: blur(10px) saturate(1.15);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
}

/* Hero w układzie standardowym (strona główna) dokłada sobie wysokość
   nagłówka, żeby zdjęcia pod szkłem nie ubyło. */
.peron12-hero-na-gorze .peron12-hero:not(.peron12-hero--pelny) {
	min-height: calc(clamp(24rem, 62vh, 34rem) + var(--p12-naglowek-h, 6rem));
}

/* Trzecia warstwa scrimu: równy pas pod nagłówkiem, wygaszany 8 rem niżej. */
.peron12-hero-na-gorze .peron12-hero__scrim {
	background:
		linear-gradient(
			180deg,
			rgba(20, 9, 12, 0.45) 0,
			rgba(20, 9, 12, 0.45) var(--p12-naglowek-h, 6rem),
			rgba(20, 9, 12, 0) calc(var(--p12-naglowek-h, 6rem) + 8rem)
		),
		linear-gradient(
			180deg,
			rgba(20, 9, 12, 0.58) 0%,
			rgba(20, 9, 12, 0.16) 30%,
			rgba(20, 9, 12, 0.46) 58%,
			var(--p12-przyciemnienie) 100%
		),
		linear-gradient(
			90deg,
			rgba(20, 9, 12, 0.62) 0%,
			rgba(20, 9, 12, 0.24) 46%,
			rgba(20, 9, 12, 0) 78%
		);
}

.peron12-hero--pelny .peron12-hero__copy {
	padding-block: var(--wp--preset--spacing--50);
}

/* „Następny przystanek”: zamiast strzałki w kółku — pionowy odcinek toru,
   po którym zjeżdża wagon, i nazwa sekcji, do której prowadzi. Nazwę dopisuje
   skrypt z pierwszego nagłówka pod hero; bez skryptu zostaje „Przewiń w dół”,
   a odnośnik skacze do kotwicy na dolnej krawędzi hero. */
.peron12-hero__dalej {
	position: absolute;
	right: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	bottom: var(--wp--preset--spacing--50);
	display: flex;
	align-items: flex-end;
	gap: 1.1rem;
	max-width: none;
	text-decoration: none;
	color: var(--p12-tekst);
}

.peron12-hero__dalej-tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 22ch;
	text-align: right;
}

.peron12-hero__dalej-nad {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kosc-przygaszona);
}

.peron12-hero__dalej-cel {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.3;
	color: rgba(245, 240, 232, 0.85);
	transition: color 200ms ease;
}

.peron12-hero__tor {
	position: relative;
	flex: 0 0 auto;
	width: 2px;
	height: 3.5rem;
	background: rgba(205, 179, 115, 0.55);
	transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.peron12-hero__wagon {
	position: absolute;
	top: 0;
	left: -1px;
	width: 4px;
	height: 0.9rem;
	background: var(--p12-znak);
	animation: peron12-wagon 2.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes peron12-wagon {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateY(2.6rem); opacity: 0; }
}

.peron12-hero__dalej:hover .peron12-hero__tor,
.peron12-hero__dalej:focus-visible .peron12-hero__tor {
	height: 4.5rem;
}

.peron12-hero__dalej:hover .peron12-hero__wagon,
.peron12-hero__dalej:focus-visible .peron12-hero__wagon {
	animation-duration: 1.4s;
}

.peron12-hero__dalej:hover .peron12-hero__dalej-cel,
.peron12-hero__dalej:focus-visible .peron12-hero__dalej-cel {
	color: var(--p12-akcent);
}

.peron12-hero__dalej:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 6px;
}

/* Kotwica na dolnej krawędzi hero = górna krawędź następnej sekcji. */
.peron12-hero__koniec {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
}

/* Cel przewinięcia nie może schować się pod przyklejonym nagłówkiem. */
.peron12-hero__koniec,
section[class*="wp-block-peron12-"] {
	scroll-margin-top: var(--p12-lepki-h, 4.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.peron12-hero__wagon {
		top: auto;
		bottom: 0;
		opacity: 1;
		animation: none;
	}
}

@media (max-width: 699px) {
	.peron12-hero__dalej {
		position: static;
		margin-top: 2.25rem;
		align-self: flex-start;
	}

	.peron12-hero__dalej-tekst {
		align-items: flex-start;
		text-align: left;
	}
}

/* Mobile: „Rezerwuj” przyklejony do dolnej krawędzi ekranu, na całą szerokość,
   z marginesem na pasek gestów (safe-area). Nagłówek chudnie o cały rząd,
   a pasek po scrollu nie dubluje przycisku. */
@media (max-width: 699px) {
	.peron12-header__cta {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		/* Pod nagłówkiem (z-index 30): otwarte menu mobilne rysuje się w jego
		   kontekście warstw i pasek nie może zasłaniać ostatnich pozycji. */
		z-index: 25;
		margin: 0;
		padding: 0.6rem var(--wp--style--root--padding-left, var(--wp--preset--spacing--30))
			calc(0.6rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(205, 179, 115, 0.28);
		background: rgba(58, 28, 39, 0.94);
	}

	.peron12-header__cta .wp-block-button,
	.peron12-header__cta .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.peron12-lepki__cta {
		display: none;
	}

	/* Miejsce pod przycisk, żeby nie zasłaniał końca stopki. */
	body {
		padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px));
	}

	/* Hero pełnoekranowe: „Następny przystanek” ma stać nad paskiem, nie pod nim. */
	.peron12-hero--pelny .peron12-hero__copy {
		padding-block-end: calc(var(--wp--preset--spacing--50) + 3.6rem + env(safe-area-inset-bottom, 0px));
	}
}

/* Menu mobilne. Dodatki (logotyp, kontakt, przycisk) wstrzykuje inc/nawigacja.php;
   na desktopie nakładki nie ma, więc są ukryte. Lista pozycji to pionowa mapa
   trasy: mosiężna linia po lewej, każda pozycja to przystanek, bieżąca strona
   ma pełną kropkę — ten sam język, co kategorie w galerii. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .peron12-menu__gora,
.wp-block-navigation__responsive-container:not(.is-menu-open) .peron12-menu__dol,
.wp-block-navigation__responsive-container:not(.is-menu-open) .peron12-menu__jezyki {
	display: none;
}

/* Lista menu w nakładce ma order: 2 (pod logotypem), więc języki muszą stanąć
   za nią jawnie - inaczej lądują nad menu mimo kolejności w HTML. */
.wp-block-navigation__responsive-container.is-menu-open .peron12-menu__jezyki {
	order: 3;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--noc);
	color: var(--p12-tekst);
	/* Nakładka nie ma prawa przewijać się w bok. */
	overflow-x: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 1.1rem var(--wp--style--root--padding-left, var(--wp--preset--spacing--30))
		calc(1.5rem + env(safe-area-inset-bottom, 0px));
	/* Cała nakładka ma się mieścić w pionie bez przewijania: odstępy i rozmiary
	   niżej rosną z wysokością ekranu (svh), a przewijanie zostaje tylko jako
	   zapas na wyjątkowo niskie okna. */
	flex: 1 1 auto;
	min-height: 0;
	padding-top: clamp(0.6rem, 1.5svh, 1.1rem);
	padding-bottom: calc(clamp(0.75rem, 2svh, 1.5rem) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
}

/* Pośrednik WordPressa między kontenerem a dialogiem ma wysokość automatyczną,
   więc dialog nie może wziąć 100% - zamiast tego cały łańcuch jest kolumną flex,
   która wypełnia kontener (fixed, inset: 0), a dialog rozkłada się w niej. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Bez min-height: 0 - obszar listy nie kurczy się poniżej treści; gdyby
	   naprawdę zabrakło miejsca, dialog się przewinie, a nic nie nachodzi. */
	padding-top: 0;
}

/* Rdzeń WP daje obszarowi listy 56 px paddingu i 24 px odstępu (selektorami
   silniejszymi niż powyższe) - w nakładce mierzonej na wysokość ekranu to
   za dużo, zerujemy jeszcze mocniejszym selektorem. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content {
	margin: 0;
	padding-top: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog {
	gap: 0;
}

.peron12-menu__gora,
.peron12-menu__dol {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.peron12-menu__gora {
	flex: none;
	margin: 0 0 2.25rem;
	margin-bottom: clamp(0.5rem, 2svh, 2.25rem);
}

.peron12-menu__znak {
	display: inline-flex;
	color: var(--p12-znak);
}

.peron12-menu__logo {
	display: block;
	width: auto;
	height: 56px;
	height: clamp(40px, 7svh, 56px);
}

/* Tor po lewej i przystanki. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	position: relative;
	gap: 0;
	padding-inline-start: 1.6rem;
}

/* WordPress kopiuje klasę bloku (peron12-nav) na listę w nakładce, więc odstęp
   wiersza nagłówka trafiał między pozycje menu; tu odstęp rośnie z ekranem. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.peron12-nav {
	gap: 0;
	gap: clamp(0px, 1svh, 1rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::before {
	content: "";
	position: absolute;
	top: 0.9rem;
	bottom: 0.9rem;
	left: 0.28rem;
	width: 1px;
	background: var(--p12-linia);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	position: relative;
	padding-block: 0.55rem;
	padding-block: clamp(0.2rem, 0.8svh, 0.55rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -1.6rem;
	width: 0.56rem;
	height: 0.56rem;
	border: 1px solid var(--p12-znak);
	border-radius: 50%;
	background: var(--wp--preset--color--noc);
	transform: translateY(-50%);
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(a[aria-current])::before {
	background: var(--p12-znak);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.75rem;
	font-size: clamp(1.15rem, 3.1svh, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--p12-akcent);
}

/* Stopka nakładki: kontakt i rezerwacja. */
.peron12-menu__dol {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	gap: clamp(0.15rem, 0.5svh, 0.35rem);
	margin-top: 2rem;
	margin-top: clamp(0.6rem, 1.6svh, 2rem);
	padding-top: 1.4rem;
	padding-top: clamp(0.6rem, 1.4svh, 1.4rem);
	border-top: 1px solid var(--p12-linia);
}

.peron12-menu__nad {
	margin: 0 0 0.4rem;
	color: var(--p12-akcent);
}

.peron12-menu__telefon,
.peron12-menu__email {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--p12-tekst);
}

.peron12-menu__telefon {
	font-size: 1.45rem;
	font-size: clamp(1.1rem, 2.8svh, 1.45rem);
	line-height: 1.2;
}

.peron12-menu__email {
	font-size: 1.05rem;
	font-size: clamp(0.9rem, 2svh, 1.05rem);
	color: var(--p12-tekst-przygaszony);
}

.peron12-menu__telefon:hover,
.peron12-menu__email:hover,
.peron12-menu__telefon:focus-visible,
.peron12-menu__email:focus-visible {
	color: var(--p12-akcent);
}

.peron12-menu__rezerwuj {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 1.1rem;
	margin-top: clamp(0.5rem, 1.2svh, 1.1rem);
	text-align: center;
}

.wp-block-navigation__responsive-container-close {
	color: var(--p12-akcent);
}

/* Tablica: przypis, śródtytuł z tekstem i zdanie zamykające. */
.peron12-tablica__przypis {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-tablica__dopisek {
	max-width: 62ch;
	margin-top: var(--wp--preset--spacing--40);
}

.peron12-tablica__podtytul {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.peron12-tablica__opis {
	margin: 0;
	color: var(--p12-tekst-przygaszony);
}

.peron12-tablica__zamkniecie {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--l);
	color: var(--p12-akcent);
}

/* Bilet w hero podstron: pływająca karta nad dolną krawędzią zdjęcia —
   burgundowe szkło jak nagłówek u góry, mosiężna linia, po prawej odcinek
   kontrolny z „Następnym przystankiem” za perforacją. Karta nie dotyka
   następnej sekcji: ma pod sobą powietrze, a hero ma 90 svh. Poniżej 900 px
   bilet znika — rezerwację prowadzi przycisk przyklejony do dołu. */
.peron12-hero--z-biletem .peron12-hero__copy {
	padding-block-end: calc(var(--wp--preset--spacing--40) + 10.5rem);
}

.peron12-hero__bilet {
	position: absolute;
	inset-inline: 0;
	bottom: clamp(1.5rem, 4vh, 2.75rem);
	z-index: 3;
}

.peron12-hero__bilet-wnetrze {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
}

/* Karta: szkło + linia, jedna bryła z odcinkiem. */
.peron12-hero__bilet-wnetrze::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	right: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	z-index: -1;
	border: 1px solid rgba(205, 179, 115, 0.32);
	background: rgba(58, 28, 39, 0.82);
	backdrop-filter: blur(10px) saturate(1.15);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
}

/* Tło paska ze strony głównej ma tę samą specyficzność co wariant — tu
   przezroczystość wymusza selektor z rodzicem. */
.peron12-hero__bilet .peron12-rezerwacja {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	padding: 1rem 1.5rem 1.15rem;
	background: transparent;
	border: 0;
}

.peron12-hero__bilet .peron12-rezerwacja__nota {
	margin: 0 0 0.6rem;
}

.peron12-hero__bilet .peron12-rezerwacja__pola {
	gap: var(--wp--preset--spacing--30);
}

.peron12-hero__bilet .peron12-pole {
	flex: 1 1 7.5rem;
	min-width: 7rem;
}

.peron12-hero__bilet .peron12-pole__wartosc {
	font-size: 1.1rem;
	padding-block-end: 0.35rem;
}

/* Hero ma overflow: hidden, więc kalendarz otwiera się nad biletem, do góry. */
.peron12-hero__bilet .peron12-kalendarz {
	top: auto;
	bottom: calc(100% + 0.75rem);
	left: 0;
	width: min(42rem, 100%);
}

/* Odcinek kontrolny: perforacja po lewej, „Następny przystanek” w środku. */
.peron12-hero__bilet-odcinek {
	position: relative;
	flex: 0 0 15.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 1rem 1.4rem 1rem 1.6rem;
}

.peron12-hero__bilet-odcinek::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 0;
	width: 1px;
	background: radial-gradient(circle at 50% 50%, rgba(205, 179, 115, 0.6) 0.9px, transparent 1.1px);
	background-size: 1px 7px;
	background-repeat: repeat-y;
}

.peron12-hero__bilet-odcinek .peron12-hero__dalej {
	position: static;
	max-width: none;
}

.peron12-hero__bilet-odcinek .peron12-hero__dalej-tekst {
	max-width: 11rem;
}

.peron12-hero__bilet-odcinek .peron12-hero__tor {
	height: 2.6rem;
}

.peron12-hero__bilet-odcinek .peron12-hero__wagon {
	height: 0.7rem;
	animation-name: peron12-wagon-krotki;
}

@keyframes peron12-wagon-krotki {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateY(1.9rem); opacity: 0; }
}

@media (max-width: 1199px) {
	/* Mniej miejsca: nota znika, odcinek węższy — przycisk zostaje w jednym rzędzie. */
	.peron12-hero__bilet .peron12-rezerwacja__nota {
		display: none;
	}

	.peron12-hero__bilet-odcinek {
		flex-basis: 12.5rem;
	}
}

/* Wąskie ekrany: bilet zostaje w hero, ale układa się w pionie — pola w dwóch
   kolumnach, przycisk na całą szerokość, odcinek kontrolny jako dolny rząd
   za poziomą perforacją. Nota znika. */
@media (max-width: 899px) {
	.peron12-hero__bilet {
		bottom: 1rem;
	}

	.peron12-hero__bilet-wnetrze {
		flex-direction: column;
	}

	.peron12-hero__bilet .peron12-rezerwacja {
		padding: 0.9rem 1rem 0.9rem;
	}

	.peron12-hero__bilet .peron12-rezerwacja__pola {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
	}

	.peron12-hero__bilet .peron12-pole {
		min-width: 0;
	}

	.peron12-hero__bilet .peron12-rezerwacja__akcja {
		grid-column: 1 / -1;
	}

	.peron12-hero__bilet .peron12-rezerwacja__akcja .peron12-button {
		display: block;
		width: 100%;
		text-align: center;
	}

	.peron12-hero__bilet-odcinek {
		flex-basis: auto;
		justify-content: flex-start;
		padding: 0.75rem 1rem 0.85rem;
	}

	.peron12-hero__bilet-odcinek::before {
		top: 0;
		bottom: auto;
		left: 0.6rem;
		right: 0.6rem;
		width: auto;
		height: 1px;
		background: radial-gradient(circle at 50% 50%, rgba(205, 179, 115, 0.6) 0.9px, transparent 1.1px);
		background-size: 7px 1px;
		background-repeat: repeat-x;
	}

	.peron12-hero__bilet-odcinek .peron12-hero__dalej {
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: 1rem;
	}

	.peron12-hero__bilet-odcinek .peron12-hero__dalej-tekst {
		align-items: flex-start;
		text-align: left;
		max-width: none;
	}

	.peron12-hero--z-biletem .peron12-hero__copy {
		padding-block-end: calc(var(--wp--preset--spacing--30) + 22.5rem);
	}

	/* Trzecie pole samo w rzędzie wyglądało jak dziura — idzie na całą szerokość. */
	.peron12-hero__bilet .peron12-pole:nth-of-type(3) {
		grid-column: 1 / -1;
	}

	.peron12-hero--z-biletem .peron12-hero__title {
		font-size: clamp(2.6rem, 9vw, var(--wp--preset--font-size--hero));
	}
}

/* Przyklejony „Rezerwuj” na wąskich ekranach pokazuje się dopiero, gdy bilet
   zniknie u góry — skrypt zdejmuje klasę, kiedy bilet jest w oknie. Bez skryptu
   przycisk jest widoczny zawsze; prowadzi do #rezerwacja, czyli do biletu. */
@media (max-width: 699px) {
	.peron12-header__cta {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
	}

	html.peron12-rezerwacja-widoczna .peron12-header__cta {
		transform: translateY(110%);
		visibility: hidden;
	}
}

/* Na telefonie hero ma pełną wysokość ekranu — więcej oddechu nad biletem. */
@media (max-width: 699px) {
	.peron12-hero--pelny {
		min-height: calc(100vh - var(--p12-nad-hero, 0px));
		min-height: calc(100svh - var(--p12-nad-hero, 0px));
	}
}

/* ---------------------------------------------------------- Pasek górny */

/* Wąski pas nad nagłówkiem, biały, nieprzyklejony: telefon, e-mail,
   godziny recepcji i profile. Wysokość trzyma zmienna, bo na stronach z hero
   absolutny nagłówek musi zjechać dokładnie o tyle. Poniżej 900 px pasek znika -
   te same dane ma nakładka menu, a pierwszy ekran telefonu jest cenny. */
:root {
	--p12-pasek-gorny-h: 2.5rem;
}

.peron12-pasek-gorny {
	position: relative;
	z-index: 31;
	height: var(--p12-pasek-gorny-h);
	box-sizing: border-box;
	background: var(--wp--preset--color--biel);
	border-bottom: 1px solid var(--p12-linia-cicha);
	color: var(--p12-tekst-przygaszony);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.peron12-pasek-gorny__wnetrze {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	box-sizing: border-box;
}

.peron12-pasek-gorny__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.peron12-pasek-gorny__poz {
	margin: 0;
}

.peron12-pasek-gorny__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--p12-tekst);
	text-decoration: none;
	transition: color 0.2s ease;
}

.peron12-pasek-gorny__link:hover,
.peron12-pasek-gorny__link:focus-visible {
	color: var(--p12-akcent);
}

.peron12-pasek-gorny__ikona {
	flex: none;
	color: var(--p12-akcent);
}

.peron12-pasek-gorny__nota {
	margin: 0 0 0 auto;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--p12-tekst-przygaszony);
}

/* Profile w pasku: mniejsze kółka bez obwódki, sama ikona. */
.peron12-pasek-gorny .peron12-sociale {
	gap: 0.25rem;
}

.peron12-pasek-gorny .peron12-sociale__link {
	min-width: 1.75rem;
	height: 1.75rem;
	padding-inline: 0.3rem;
	border-color: transparent;
}

.peron12-pasek-gorny .peron12-sociale__link:hover,
.peron12-pasek-gorny .peron12-sociale__link:focus-visible {
	border-color: var(--p12-linia);
}

.peron12-pasek-gorny .peron12-sociale__ikona {
	width: 1rem;
	height: 1rem;
}

/* Strony z hero: nagłówek-szkło zjeżdża pod pasek. Warunek sąsiedztwa, nie
   zmienna na :root - gdy pasek jest pusty i się nie renderuje, nagłówek
   zostaje na górze. */
@media (min-width: 900px) {
	.peron12-hero-na-gorze .peron12-pasek-gorny + .peron12-header {
		top: var(--p12-pasek-gorny-h);
	}
}

@media (max-width: 899px) {
	.peron12-pasek-gorny {
		display: none;
	}
}

/* ------------------------------------------------ Profile społecznościowe */

/* Ikony w kółkach z linią włosową, jak przyciski podglądu; kolor z tokenów
   miejsca (stopka kremowa, nakładka menu i pas kontaktu ciemne). */
.peron12-sociale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.peron12-sociale__poz {
	margin: 0;
}

.peron12-sociale__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	box-sizing: border-box;
	border: 1px solid var(--p12-linia);
	border-radius: 999px;
	color: var(--p12-tekst);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.peron12-sociale__link:hover,
.peron12-sociale__link:focus-visible {
	color: var(--p12-akcent);
	border-color: var(--p12-akcent);
}

.peron12-sociale__ikona {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.peron12-sociale__nazwa {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.peron12-footer__sociale {
	margin-top: var(--wp--preset--spacing--20);
}

.peron12-menu__sociale {
	margin-block: 0.75rem 1rem;
	margin-block: clamp(0.3rem, 1svh, 0.75rem) clamp(0.4rem, 1.2svh, 1rem);
}

.peron12-menu__sociale .peron12-sociale__link {
	min-width: 2.25rem;
	height: 2.25rem;
}

/* Niskie okna (starsze iPhone'y z paskami przeglądarki): bez nadtytułu
   „Recepcja”, niższy przycisk i mniejsze kółka profili. */
@media (max-height: 640px) {
	.wp-block-navigation__responsive-container.is-menu-open .peron12-menu__nad {
		display: none;
	}

	.peron12-menu__rezerwuj {
		padding-block: 0.7rem;
	}

	.peron12-menu__sociale .peron12-sociale__link {
		min-width: 2rem;
		height: 2rem;
	}
}

.peron12-kontakt__sociale {
	margin-top: var(--wp--preset--spacing--20);
}

/* ----------------------------------------------------- Sygnet jako akcent */

/* Stempel: mały sygnet w mosiądzu przed nadtytułem każdej sekcji — jak pieczątka
   na bilecie. Maska z pliku znaku, więc to zawsze ten sam kształt co w logo. */
.peron12-naglowek-sekcji .peron12-eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.9rem;
	margin-inline-end: 0.55rem;
	vertical-align: -0.12em;
	background: var(--p12-znak);
	-webkit-mask: url("../img/sygnet.svg") no-repeat center / contain;
	mask: url("../img/sygnet.svg") no-repeat center / contain;
}

/* Znak wodny: duży, ledwie widoczny sygnet w pierwszej sekcji pod hero, na
   każdej stronie - jak suchy tłok na papierze. Wystaje poza górną krawędź
   sekcji (obcięty), więc nie musi mieścić się w całości. Na ciemnych pasach
   (bar, konferencje ze zdjęciem) - odwrócony na kość słoniową. */
.peron12-hero + section[class*="wp-block-peron12-"] {
	position: relative;
	overflow: hidden;
}

.peron12-hero + section[class*="wp-block-peron12-"]::before {
	content: "";
	position: absolute;
	top: -3rem;
	right: calc(var(--wp--style--root--padding-left, 2rem) - 2rem);
	width: 14rem;
	height: 25rem;
	z-index: 0;
	background: var(--wp--preset--color--ochra);
	opacity: 0.07;
	pointer-events: none;
	-webkit-mask: url("../img/sygnet.svg") no-repeat center / contain;
	mask: url("../img/sygnet.svg") no-repeat center / contain;
}

.peron12-hero + section[class*="wp-block-peron12-"] > * {
	position: relative;
	z-index: 1;
}

/* Rewers na ciemnym tle. */
.peron12-hero + .peron12-bar::before,
.peron12-hero + .peron12-konferencje--foto::before,
.peron12-hero + .peron12-rezerwacja::before {
	background: var(--wp--preset--color--kosc-sloniowa);
	opacity: 0.09;
}

@media (max-width: 899px) {
	.peron12-hero + section[class*="wp-block-peron12-"]::before {
		top: -2rem;
		right: -1.5rem;
		width: 9rem;
		height: 16rem;
		opacity: 0.06;
	}
}

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

/* Wejście przy przewijaniu: o 14 px z przezroczystości, w 640 ms, kaskadą
   co 70 ms wśród rodzeństwa (--i ustawia skrypt). Klasa peron12-ruch na <html>
   pojawia się dopiero ze skryptem — bez niego wszystko jest widoczne od razu. */
html.peron12-ruch .peron12-ruch__el {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

html.peron12-ruch .peron12-ruch__el.is-widoczny {
	opacity: 1;
	transform: none;
}

/* Nagłówek sekcji: mosiężna linia włosowa rysuje się od lewej pod tytułem,
   chwilę po tym, jak tytuł stanie — ten sam gest, co w przyklejonym pasku. */
html.peron12-ruch .peron12-naglowek-sekcji {
	position: relative;
}

html.peron12-ruch .peron12-naglowek-sekcji::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--wp--preset--spacing--20));
	width: 4.5rem;
	height: 1px;
	background: var(--p12-znak);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

html.peron12-ruch .peron12-naglowek-sekcji.is-widoczny::after {
	transform: scaleX(1);
}

/* Hero i bilet są widoczne od razu — bez czekania na obserwator. */
html.peron12-ruch .peron12-hero .peron12-ruch__el {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	html.peron12-ruch .peron12-ruch__el {
		opacity: 1;
		transform: none;
	}

	html.peron12-ruch .peron12-naglowek-sekcji::after {
		transform: scaleX(1);
	}
}

/* Akapit wstępu do lokalizacji: zwykły tekst treści, w szerokości czytelnej. */
.peron12-akapit-lokalizacji {
	max-width: 62ch;
	color: var(--p12-tekst-przygaszony);
}

/* Tablica: głowa w dwóch kolumnach jak w sekcji historii — nadtytuł, tytuł
   i odnośnik po lewej, wstęp po prawej, szeryfem w rozmiarze leadu. */
.peron12-tablica__glowa--ze-wstepem {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: start;
	margin-bottom: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.peron12-tablica__glowa--ze-wstepem {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.peron12-tablica__glowa--ze-wstepem .peron12-naglowek-sekcji {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0;
}

.peron12-tablica__glowa--ze-wstepem .peron12-naglowek-sekcji__link {
	margin-top: 0.5rem;
}

.peron12-tablica__wstep {
	max-width: 54ch;
	padding-top: 0.35rem;
}

.peron12-tablica__wstep p {
	/* Bez własnego kroju i rozmiaru: to zwykły akapit strony (Mulish 17 px). */
	margin: 0 0 1rem;
	text-wrap: pretty;
}

.peron12-tablica__wstep p:last-child {
	margin-bottom: 0;
}

/* Konferencje ze zdjęciem: burgundowe przyciemnienie nad fotografią, tekst
   w tokenach ciemnego pasa, bilet odwrócony na kość słoniową. Zdjęcie jest
   o 12% wyższe niż sekcja i przesuwa się przy przewijaniu — animacja
   sterowana scrollem w CSS; gdzie jej nie ma, zdjęcie po prostu stoi. */
.peron12-konferencje--foto {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--burgund-ciemny);
	/* Tytuł dziedziczyłby kolor z body i ginął na zdjęciu. */
	color: var(--p12-tekst);
}

.peron12-konferencje__tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.peron12-konferencje__foto {
	position: absolute;
	top: -6%;
	left: 0;
	width: 100%;
	height: 112%;
	object-fit: cover;
	will-change: transform;
}

@supports (animation-timeline: view()) {
	.peron12-konferencje__foto {
		animation: peron12-paralaksa linear both;
		animation-timeline: view();
	}

	@keyframes peron12-paralaksa {
		from { transform: translateY(-4%); }
		to { transform: translateY(4%); }
	}
}

.peron12-konferencje__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(58, 28, 39, 0.9) 0%, rgba(58, 28, 39, 0.78) 55%, rgba(58, 28, 39, 0.62) 100%);
}

.peron12-konferencje--foto .peron12-konferencje__wnetrze {
	position: relative;
	z-index: 1;
}

/* Tytuł w tym samym jasnym kolorze co akapity pod nim. */
.peron12-konferencje--foto .peron12-konferencje__tytul {
	color: var(--p12-tekst-przygaszony);
}

.peron12-konferencje--foto .peron12-konferencje__kontakt {
	color: var(--p12-tekst);
	border-bottom-color: var(--p12-linia);
}

/* Bilet na zdjęciu: kość słoniowa z burgundowym tekstem — własne tokeny jasne. */
.peron12-konferencje--foto .peron12-konferencje__bilet {
	--p12-tlo: var(--wp--preset--color--kosc-sloniowa);
	--p12-tekst: var(--wp--preset--color--burgund-ciemny);
	--p12-akcent: var(--wp--preset--color--burgund);
	--p12-znak: var(--wp--preset--color--ochra);
	--p12-tekst-przygaszony: rgba(58, 28, 39, 0.82);
	--p12-tekst-drugorzedny: rgba(58, 28, 39, 0.66);
	--p12-linia: rgba(170, 128, 77, 0.42);
	background: var(--wp--preset--color--kosc-sloniowa);
	color: var(--p12-tekst);
}

.peron12-konferencje--foto .peron12-konferencje__bilet::before {
	background: radial-gradient(circle at 50% 50%, var(--wp--preset--color--burgund-ciemny) 0.28rem, transparent 0.3rem);
	background-size: 0.9rem 1.2rem;
	background-repeat: repeat-y;
	background-position: 0 0.6rem;
}

/* ------------------------------------------------- Nagłówek sekcji (wspólny) */

.peron12-naglowek-sekcji {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
}

.peron12-naglowek-sekcji .peron12-eyebrow {
	flex: 1 1 100%;
	margin-block-end: 0.75rem;
}

.peron12-naglowek-sekcji__tytul {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.peron12-naglowek-sekcji__link {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p12-akcent);
	text-decoration: none;
	white-space: nowrap;
}

.peron12-naglowek-sekcji__link:hover,
.peron12-naglowek-sekcji__link:focus-visible {
	text-decoration: underline;
}

/* Kontener dla treści szerszej niż ekran — strona nigdy nie jedzie w bok. */
.peron12-przewijane {
	overflow-x: auto;
}

/* ------------------------------------------------- Blok: pasek rezerwacji */

.peron12-rezerwacja {
	background: var(--wp--preset--color--burgund);
	border-block-start: 0;
}

.peron12-rezerwacja__wnetrze {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
}

.peron12-rezerwacja__pola {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
}

.peron12-pole {
	flex: 1 1 9rem;
	min-width: 8rem;
	margin: 0;
}

.peron12-pole__etykieta {
	display: block;
	margin-block-end: 0.45rem;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

/* Pola wyglądają jak wpisane odręcznie na bilecie: linia zamiast ramki. */
.peron12-pole__wartosc {
	width: 100%;
	padding: 0 0 0.5rem;
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--p12-linia);
	border-radius: 0;
	color: var(--p12-tekst);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	appearance: none;
}

.peron12-pole__wartosc:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 4px;
}

/* Lista gości w stylu pól dat: własny chevron w mosiądzu zamiast systemowej strzałki. */
select.peron12-pole__wartosc {
	padding-inline-end: 1.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB373' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 top 0.15rem;
	background-size: 1.25rem 1.25rem;
	cursor: pointer;
}

/* Ikona kalendarza w Chrome jest czarna na ciemnym tle — odwracamy ją. */
.peron12-pole__wartosc::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.55;
	cursor: pointer;
}

.peron12-pole__wartosc option {
	background: var(--wp--preset--color--burgund-ciemny);
	color: var(--p12-tekst);
}

.peron12-rezerwacja__akcja {
	flex: 0 0 auto;
	margin: 0;
}

.peron12-rezerwacja__akcja .peron12-button {
	cursor: pointer;
}

.peron12-rezerwacja__nota {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

/* Kalendarz paska rezerwacji. Przycisk daty wygląda jak pole na bilecie
   (linia zamiast ramki), a kalendarz to kremowa karta pod paskiem: dwa
   miesiące obok siebie, na wąskim ekranie arkusz od dołu. Przyjazd i wyjazd
   to pełne mosiężne kropki, dni pomiędzy — pas w kości przygaszonej. */
.peron12-rezerwacja__wnetrze {
	position: relative;
}

.peron12-data {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	text-align: left;
	cursor: pointer;
}

.peron12-data svg {
	flex: 0 0 auto;
	color: var(--p12-akcent);
	opacity: 0.8;
}

.peron12-data[aria-expanded="true"] {
	border-block-end-color: var(--p12-akcent);
}

.peron12-kalendarz {
	box-sizing: border-box;
	/* Jasna karta wewnątrz ciemnego pasa: własny zestaw tokenów. */
	--p12-tlo: var(--wp--preset--color--biel-ciepla);
	--p12-tekst: var(--wp--preset--color--burgund-ciemny);
	--p12-akcent: var(--wp--preset--color--burgund);
	--p12-znak: var(--wp--preset--color--ochra);
	--p12-tekst-przygaszony: rgba(58, 28, 39, 0.82);
	--p12-tekst-drugorzedny: rgba(58, 28, 39, 0.66);
	--p12-linia: rgba(170, 128, 77, 0.42);
	--p12-linia-cicha: rgba(58, 28, 39, 0.14);
	position: absolute;
	z-index: 40;
	top: calc(100% - var(--wp--preset--spacing--30));
	left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	width: min(42rem, calc(100% - 2 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--30))));
	padding: 1.25rem 1.5rem 1.25rem;
	background: var(--p12-tlo);
	color: var(--p12-tekst);
	border: 1px solid var(--p12-linia);
	box-shadow: 0 28px 60px rgba(20, 9, 12, 0.35);
}

.peron12-kalendarz__naglowek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.peron12-kalendarz__zakres {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--p12-znak);
}

.peron12-kalendarz__krok {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--p12-linia);
	border-radius: 50%;
	background: transparent;
	color: var(--p12-akcent);
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.peron12-kalendarz__krok:hover:not([disabled]),
.peron12-kalendarz__krok:focus-visible {
	border-color: var(--p12-znak);
	background: rgba(170, 128, 77, 0.12);
}

.peron12-kalendarz__krok[disabled] {
	opacity: 0.35;
	cursor: default;
}

.peron12-kalendarz__miesiace {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 700px) {
	.peron12-kalendarz__miesiace {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

.peron12-kalendarz__nazwa {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
}

.peron12-kalendarz__nazwa em {
	font-style: italic;
	color: var(--p12-znak);
}

.peron12-kalendarz__dni {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	row-gap: 2px;
}

.peron12-kalendarz__tydzien {
	padding: 0.3rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-kalendarz__dzien {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--p12-tekst);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.peron12-kalendarz__dzien[disabled] {
	color: var(--p12-linia-cicha);
	cursor: default;
}

.peron12-kalendarz__dzien:not([disabled]):hover {
	background: rgba(170, 128, 77, 0.14);
}

.peron12-kalendarz__dzien:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: -2px;
	z-index: 1;
}

/* Dzisiaj: mała mosiężna kropka pod liczbą. */
.peron12-kalendarz__dzien.is-dzis::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.3rem;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--p12-znak);
	transform: translateX(-50%);
}

/* Zakres to pastylka rysowana pod liczbami (::before). Na dniach pomiędzy
   biegnie na całą szerokość komórki; pod kropką przyjazdu zaczyna się 8% od
   lewej krawędzi, pod kropką wyjazdu kończy 8% od prawej — oba końce
   zaokrąglone, więc wystaje spod kółek prawie do ich zewnętrznej krawędzi.
   Na końcach rzędu (poniedziałek / niedziela) też zaokrąglona. */
.peron12-kalendarz__dzien.is-w-zakresie::before,
.peron12-kalendarz__dzien.is-od.is-z-zakresem::before,
.peron12-kalendarz__dzien.is-do::before,
.peron12-kalendarz__dzien.is-tymczas::before {
	content: "";
	position: absolute;
	top: 9%;
	bottom: 9%;
	left: 0;
	right: 0;
	z-index: -1;
	background: var(--wp--preset--color--kosc-przygaszona);
}

.peron12-kalendarz__dzien.is-tymczas::before {
	background: rgba(232, 223, 210, 0.6);
}

/* Przyjazd: zaokrąglony początek pod kółkiem. */
.peron12-kalendarz__dzien.is-od.is-z-zakresem::before {
	left: 8%;
	border-radius: 999px 0 0 999px;
}

/* Wyjazd (i podgląd wyjazdu przy najechaniu): zaokrąglony koniec pod kółkiem. */
.peron12-kalendarz__dzien.is-do::before,
.peron12-kalendarz__dzien.is-tymczas:not(.is-w-zakresie)::before {
	right: 8%;
	border-radius: 0 999px 999px 0;
}

/* Końce rzędu: krawędź przy brzegu siatki zaokrąglona. */
.peron12-kalendarz__dzien.is-w-zakresie.is-pn::before,
.peron12-kalendarz__dzien.is-do.is-pn::before,
.peron12-kalendarz__dzien.is-tymczas.is-pn::before {
	border-top-left-radius: 999px;
	border-bottom-left-radius: 999px;
}

.peron12-kalendarz__dzien.is-w-zakresie.is-nd::before,
.peron12-kalendarz__dzien.is-od.is-nd::before {
	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
}

.peron12-kalendarz__dzien.is-od,
.peron12-kalendarz__dzien.is-do {
	background: var(--p12-znak);
	color: #231218;
	border-radius: 50%;
}

.peron12-kalendarz__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--p12-linia);
}

.peron12-kalendarz__podsumowanie {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--p12-tekst-przygaszony);
}

.peron12-kalendarz__gotowe {
	cursor: pointer;
}

@media (max-width: 699px) {
	/* Selektor z biletem, bo reguła „otwórz nad kartą” (.peron12-hero__bilet
	   .peron12-kalendarz) inaczej wypychała arkusz ponad okno. */
	.peron12-kalendarz,
	.peron12-hero__bilet .peron12-kalendarz {
		position: fixed;
		inset-inline: 0;
		top: auto;
		bottom: 0;
		left: 0;
		z-index: 95;
		width: 100%;
		max-width: 100%;
		max-height: 88vh;
		max-height: 88dvh;
		margin: 0;
		padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		overflow: auto;
		border-inline: 0;
		border-bottom: 0;
		border-radius: 1rem 1rem 0 0;
		box-shadow: 0 -16px 48px rgba(20, 9, 12, 0.35);
	}

	.peron12-kalendarz__dzien {
		font-size: 0.95rem;
	}

	/* Jeden miesiąc na ekranie — nazwa nad siatką wystarczy, górna by ją dublowała. */
	.peron12-kalendarz__zakres {
		visibility: hidden;
	}

	.peron12-kalendarz__stopka {
		position: sticky;
		bottom: 0;
		padding-bottom: 0.25rem;
		background: var(--p12-tlo);
	}
}

/* Okno silnika Previo: pasek z tytułem, zamknięciem i ucieczką do nowej karty,
   pod nim ramka silnika — wysokość ustawia skrypt Previo, więc treść okna
   przewija się sama. Ciemne tło jak w podglądzie galerii. */
.peron12-previo {
	width: min(64rem, 100vw);
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--burgund-ciemny);
}

.peron12-previo::backdrop {
	background: rgba(20, 9, 12, 0.9);
}

.peron12-previo[open] {
	display: flex;
	flex-direction: column;
}

html.peron12-previo-otwarte {
	overflow: hidden;
}

.peron12-previo__pasek {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.1rem 0.85rem 1.4rem;
	border-bottom: 1px solid rgba(170, 128, 77, 0.35);
	background: var(--wp--preset--color--biel-ciepla);
}

.peron12-previo__tytul {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ochra);
}

.peron12-previo__karta {
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--burgund);
}

.peron12-previo__zamknij {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(170, 128, 77, 0.45);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--burgund);
	cursor: pointer;
}

.peron12-previo__zamknij:hover,
.peron12-previo__zamknij:focus-visible {
	border-color: var(--wp--preset--color--ochra);
	background: rgba(170, 128, 77, 0.12);
}

.peron12-previo__tresc {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.peron12-previo__ramka {
	display: block;
	width: 100%;
	min-height: 100%;
	border: 0;
}

/* ------------------------------------------------------- Blok: pokoje */

.peron12-bilety {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}

/*
 * Karta pokoju na jasnym motywie: ciepla kosc sloniowa odcina ja od bieli
 * strony bez uzywania cienia, ktorego ten jezyk graficzny nie zna. Ramka
 * w mosiadzu zamiast szarej — to ona niesie marke.
 */
.peron12-bilet {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--kosc-sloniowa);
	border: 1px solid var(--p12-linia);
}

.peron12-bilet__kadr {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.peron12-bilet__kadr img,
.peron12-bilet__kadr .peron12-placeholder {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

.peron12-bilet__tresc {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.peron12-bilet__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.1;
}

.peron12-bilet__tytul a {
	color: var(--p12-tekst);
	text-decoration: none;
}

.peron12-bilet__tytul a:hover,
.peron12-bilet__tytul a:focus-visible {
	color: var(--p12-akcent);
}

/* Hasło kategorii — jedno zdanie, które sprzedaje pokój. */
.peron12-bilet__haslo {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--p12-tekst);
	text-wrap: balance;
}

.peron12-bilet__dane {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

.peron12-bilet__opis {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--p12-tekst-przygaszony);
}

.peron12-bilet__cechy {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.9;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-bilet__cechy li::before {
	content: "—";
	margin-inline-end: 0.55rem;
	color: var(--p12-akcent);
}

/* Odrywany odcinek biletu — perforacja zamiast zwykłej kreski. */
.peron12-bilet__odcinek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-block-start: 1px dashed var(--p12-linia);
}

.peron12-bilet__cena {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.4rem;
	line-height: 1.1;
	color: var(--p12-akcent);
	font-variant-numeric: tabular-nums;
}

.peron12-bilet__cena small {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-bilet__cena--brak {
	font-size: 1rem;
	color: var(--p12-tekst-drugorzedny);
}

/* ---------------------------------------------------------- Blok: bar */

.peron12-bar {
	background: var(--p12-zielen-glebia);
	border-block-start: 1px solid rgba(205, 179, 115, 0.2);
}

.peron12-bar__siatka {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 820px) {
	.peron12-bar__siatka {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

.peron12-bar__kadr {
	min-height: 16rem;
}

.peron12-bar__kadr img,
.peron12-bar__kadr .peron12-placeholder {
	width: 100%;
	height: 100%;
	min-height: 16rem;
	object-fit: cover;
}

.peron12-bar__tekst {
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
}

.peron12-bar__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--p12-tekst);
	text-wrap: balance;
}

.peron12-bar__opis {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 44ch;
	color: var(--p12-tekst-przygaszony);
}

.peron12-program {
	margin: var(--wp--preset--spacing--40) 0 0;
	border-block-start: 1px solid rgba(205, 179, 115, 0.22);
	font-variant-numeric: tabular-nums;
}

.peron12-program__wiersz {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	padding-block: 0.7rem;
	border-block-end: 1px solid rgba(205, 179, 115, 0.12);
}

.peron12-program__kiedy {
	flex: 0 0 6.5rem;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

.peron12-program__co {
	flex: 1 1 12rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--p12-tekst-przygaszony);
}

.peron12-bar__akcja {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* --------------------------------------------- Blok: tablica odjazdów */

.peron12-tablica__pudlo {
	background: var(--p12-tablica-tlo);
	border: 1px solid var(--p12-linia);
	padding: clamp(1rem, 2.5vw, 1.85rem);
}

.peron12-tablica__belka {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-block-end: 0.9rem;
	border-block-end: 1px solid var(--p12-linia);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

.peron12-tablica__stacja {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
}

.peron12-tablica__tabela {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.peron12-tablica__tabela th {
	padding: 0.75rem 0.6rem 0.6rem;
	border-block-end: 1px solid var(--p12-linia-cicha);
	text-align: start;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-tablica__tabela td {
	padding: 0.7rem 0.6rem;
	border-block-end: 1px solid rgba(205, 179, 115, 0.08);
}

.peron12-tablica__tabela tr:last-child td {
	border-block-end: 0;
}

.peron12-tablica__kol-czas {
	width: 6rem;
}

.peron12-tablica__kol-sposob {
	width: 9rem;
}

.peron12-tablica__czas {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--p12-akcent);
}

.peron12-tablica__kierunek {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p12-tekst);
}

.peron12-tablica__sposob {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

/* Przewrót klapki jak na tablicy dworcowej — raz, przy wejściu na stronę. */
.peron12-flip {
	display: inline-block;
	animation: peron12-flip 0.5s ease both;
	animation-delay: var(--p12-flip, 0s);
}

@keyframes peron12-flip {
	from {
		opacity: 0;
		transform: translateY(-0.4em) rotateX(60deg);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 30rem) {
	.peron12-tablica__kol-sposob,
	.peron12-tablica__sposob {
		display: none;
	}
}

/* --------------------------------------------------------- Blok: wstęp */

.peron12-intro__siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

@media (min-width: 820px) {
	.peron12-intro__siatka {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

.peron12-intro__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.peron12-intro__tresc > p {
	margin: 0 0 var(--wp--preset--spacing--20);
	max-width: 56ch;
	color: var(--p12-tekst-przygaszony);
}

.peron12-intro__tresc > p:last-of-type {
	margin-bottom: 0;
}

.peron12-liczby {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--p12-linia-cicha);
}

.peron12-liczby__poz {
	min-width: 4.5rem;
}

.peron12-liczby__wartosc {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--p12-akcent);
	font-variant-numeric: tabular-nums;
}

.peron12-liczby__podpis {
	margin: 0.3rem 0 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

/* -------------------------------------------------- Blok: udogodnienia */

/* Kafelki jak pola na tablicy: siatka z liniami włosowymi zamiast osobnych
   ramek, ikona w mosiądzu, nazwa pod nią. Bez opisów — na życzenie klienta.
   Linie robi tło siatki (jedna barwa) i odstęp 1 px, więc kafelki nie
   dublują krawędzi na stykach. */
.peron12-udogodnienia__kafelki {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background: var(--p12-linia);
	border: 1px solid var(--p12-linia);
}

@media (min-width: 640px) {
	.peron12-udogodnienia__kafelki {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.peron12-udogodnienia__kafelki {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.peron12-udogodnienia__kafelek {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.8rem;
	min-width: 0;
	padding: 1.2rem 0.9rem;
	text-align: center;
	background: var(--p12-tlo);
	transition: background-color 240ms ease;
}

.peron12-udogodnienia__kafelek:hover {
	background: var(--wp--preset--color--kosc-sloniowa);
}

.peron12-udogodnienia__ikona {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	color: var(--p12-znak);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.peron12-udogodnienia__kafelek:hover .peron12-udogodnienia__ikona {
	transform: translateY(-2px);
}

.peron12-udogodnienia__nazwa {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--p12-tekst);
	text-wrap: balance;
}

.peron12-udogodnienia__szczegol {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

/* ---------------------------------------------------- Blok: konferencje */

/* Jasny pas (kość słoniowa) z tekstem i burgundowy „bilet” po prawej —
   hasło zamykające i liczby jak odcinek kontrolny. */
.peron12-konferencje {
	background: var(--wp--preset--color--kosc-sloniowa);
}

.peron12-konferencje__wnetrze {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
}

@media (min-width: 900px) {
	.peron12-konferencje__wnetrze {
		grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
		align-items: start;
	}
}

.peron12-konferencje__tytul {
	max-width: 22ch;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.peron12-konferencje__akapit {
	max-width: 58ch;
	margin: 0 0 1rem;
	color: var(--p12-tekst-przygaszony);
}

.peron12-konferencje__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.75rem;
	margin-top: 1.75rem;
}

.peron12-konferencje__kontakt {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	text-decoration: none;
	color: var(--p12-tekst);
	border-bottom: 1px solid var(--p12-linia);
	transition: color 200ms ease, border-color 200ms ease;
}

.peron12-konferencje__kontakt:hover,
.peron12-konferencje__kontakt:focus-visible {
	color: var(--p12-akcent);
	border-color: currentColor;
}

/* Bilet: ząbkowana krawędź po lewej jak odcinek oderwany z bloczka. */
.peron12-konferencje__bilet {
	position: relative;
	padding: 1.75rem 1.75rem 1.6rem;
	background: var(--wp--preset--color--burgund);
	color: var(--p12-tekst);
	--p12-tlo: var(--wp--preset--color--burgund);
}

.peron12-konferencje__bilet::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: -0.45rem;
	width: 0.9rem;
	background: radial-gradient(circle at 50% 50%, var(--wp--preset--color--kosc-sloniowa) 0.28rem, transparent 0.3rem);
	background-size: 0.9rem 1.2rem;
	background-repeat: repeat-y;
	background-position: 0 0.6rem;
}

.peron12-konferencje__fakty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 0 0 1.4rem;
	border-bottom: 1px solid var(--p12-linia);
}

.peron12-konferencje__fakt {
	margin: 0;
}

.peron12-konferencje__wartosc {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2rem;
	line-height: 1;
	color: var(--p12-akcent);
}

.peron12-konferencje__podpis {
	margin: 0.35rem 0 0;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-konferencje__haslo {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.3;
	text-wrap: balance;
}

/* ------------------------------------------------------------ Blok: FAQ */

/* Okienka informacji: numer jak na tablicy, linia włosowa między pozycjami,
   znak „+” obracający się w „×” po otwarciu. Bez skryptu — <details>. */
.peron12-faq__lista {
	max-width: 62rem;
	border-top: 1px solid var(--p12-linia);
}

.peron12-faq__poz {
	border-bottom: 1px solid var(--p12-linia);
}

.peron12-faq__pytanie {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.3;
	color: var(--p12-tekst);
	transition: color 200ms ease;
}

.peron12-faq__pytanie::-webkit-details-marker {
	display: none;
}

.peron12-faq__pytanie:hover,
.peron12-faq__poz[open] .peron12-faq__pytanie {
	color: var(--p12-akcent);
}

.peron12-faq__pytanie:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 4px;
}

.peron12-faq__nr {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--p12-znak);
}

/* Znak: dwie kreski, po otwarciu obrót o 45° daje „×”. */
.peron12-faq__znak {
	position: relative;
	align-self: center;
	width: 1rem;
	height: 1rem;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.peron12-faq__znak::before,
.peron12-faq__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--p12-znak);
}

.peron12-faq__znak::after {
	transform: rotate(90deg);
}

.peron12-faq__poz[open] .peron12-faq__znak {
	transform: rotate(45deg);
}

.peron12-faq__odpowiedz {
	padding: 0 0 1.4rem 3.35rem;
	max-width: 62ch;
	color: var(--p12-tekst-przygaszony);
}

.peron12-faq__odpowiedz p {
	margin: 0 0 0.8rem;
}

.peron12-faq__odpowiedz p:last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.peron12-faq__pytanie {
		grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
		font-size: 1.1rem;
	}

	.peron12-faq__odpowiedz {
		padding-left: 0;
	}
}

/* ----------------------------------------------------------- Karta pokoju */

.peron12-bilet__kadr-link {
	display: block;
	line-height: 0;
}

/* ------------------------------------------------------ Blok: języki */

/* Rozwijany: przycisk z bieżącym kodem (stan, nie odnośnik), pod nim lista
   pozostałych wersji. Otwiera się kliknięciem (skrypt) albo fokusem (bez).
   Zapowiedziane wersje przygaszone, bez odnośnika, z podpowiedzią. */
.peron12-jezyki {
	position: relative;
}

.peron12-jezyki__biezacy {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p12-tekst);
	cursor: pointer;
}

.peron12-jezyki__biezacy svg {
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.peron12-jezyki.is-otwarty .peron12-jezyki__biezacy svg {
	transform: rotate(180deg);
}

.peron12-jezyki__biezacy:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 4px;
}

.peron12-jezyki__lista {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 40;
	min-width: 9.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--wp--preset--color--burgund-ciemny);
	border: 1px solid rgba(205, 179, 115, 0.3);
	box-shadow: 0 18px 40px rgba(20, 9, 12, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

/* Bez skryptu: fokus w obrębie przełącznika pokazuje listę. Ze skryptem — klasa. */
.peron12-jezyki:not(.is-js):focus-within .peron12-jezyki__lista,
.peron12-jezyki.is-otwarty .peron12-jezyki__lista {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.peron12-jezyki__link {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.55rem 0.9rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--kosc-przygaszona);
	transition: background-color 160ms ease, color 160ms ease;
}

.peron12-jezyki__link .peron12-jezyki__nazwa {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(245, 240, 232, 0.62);
}

.peron12-jezyki__link:not(.is-planowany):hover,
.peron12-jezyki__link:focus-visible {
	background: rgba(205, 179, 115, 0.12);
	color: var(--wp--preset--color--ochra-jasna);
	outline: none;
}

.peron12-jezyki__link.is-planowany {
	opacity: 0.55;
	cursor: help;
}

/* Każdy ekran z hamburgerem (także tablety pionowo): przełącznik języków
   przed hamburgerem, hamburger na samym końcu. */
@media (max-width: 959.98px) {
	.peron12-header__row .peron12-jezyki {
		order: 1;
		margin-inline-start: auto;
	}

	.peron12-header__row .peron12-nav {
		order: 2;
		margin-inline-start: 0.25rem;
	}

	.peron12-header__row .peron12-header__cta {
		order: 3;
	}
}

/* Wiersz języków w nakładce menu. */
.peron12-menu__jezyki {
	flex: none;
	display: flex;
	gap: 1.5rem;
	margin: 1.4rem 0 0 1.6rem;
	margin-top: clamp(0.6rem, 1.6svh, 1.4rem);
	padding: 0.9rem 0 0;
	padding-top: clamp(0.4rem, 1svh, 0.9rem);
	list-style: none;
	border-top: 1px solid var(--p12-linia-cicha);
}

.peron12-menu__jezyk-nazwa {
	margin-inline-start: 0.4rem;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-menu__jezyk {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-menu__jezyk.is-active {
	color: var(--p12-akcent);
	border-bottom: 1px solid var(--p12-akcent);
}

.peron12-menu__jezyk.is-planowany {
	opacity: 0.5;
}

/* ----------------------------------------------- Blok: szczegóły pokoju */

.peron12-pokoj__siatka {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

@media (min-width: 1000px) {
	.peron12-pokoj__siatka {
		grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

/* Minikaruzela: tor na scroll-snap, kadry 4:3, strzałki i licznik pod torem. */
.peron12-pokoj__karuzela {
	position: relative;
}

.peron12-pokoj__tor {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.peron12-pokoj__tor::-webkit-scrollbar {
	display: none;
}

.peron12-pokoj__tor:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 4px;
}

.peron12-pokoj__kadr {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.peron12-pokoj__obraz {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.peron12-pokoj__ster {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 0.9rem;
}

.peron12-pokoj__krok {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--p12-linia);
	border-radius: 50%;
	background: transparent;
	color: var(--p12-akcent);
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease, opacity 200ms ease;
}

.peron12-pokoj__krok:hover:not([disabled]),
.peron12-pokoj__krok:focus-visible {
	border-color: var(--p12-znak);
	background: rgba(170, 128, 77, 0.12);
}

.peron12-pokoj__krok[disabled] {
	opacity: 0.35;
	cursor: default;
}

.peron12-pokoj__licznik {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-pokoj__konfig {
	margin-bottom: 0.9rem;
}

.peron12-pokoj__tytul {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.peron12-pokoj__akapit {
	max-width: 58ch;
	margin: 0 0 1rem;
	color: var(--p12-tekst-przygaszony);
}

.peron12-pokoj__nad {
	margin: 1.75rem 0 0.75rem;
}

/* Wyposażenie: dwie kolumny, ikona w mosiądzu i nazwa, linie włosowe. */
.peron12-pokoj__wyposazenie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.peron12-pokoj__cecha {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--p12-linia-cicha);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.02rem;
	color: var(--p12-tekst);
}

.peron12-pokoj__ikona {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--p12-znak);
}

.peron12-pokoj__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin: 1.75rem 0 0;
}

.peron12-pokoj__powrot {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--p12-akcent);
}

.peron12-pokoj__powrot:hover,
.peron12-pokoj__powrot:focus-visible {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.peron12-pokoj__wyposazenie {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------- Blok: galeria */

/* Mapa trasy: kategorie jako przystanki na jednej mosiężnej linii. Aktywny
   przystanek ma pełną kropkę, a znacznik na torze przejeżdża pod niego jak
   wagon — ten sam motyw, co tablica odjazdów i bilety pokoi. */
.peron12-trasa {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.peron12-trasa__linia {
	--pozycja: 0px;
	--szerokosc: 0px;
	position: relative;
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0 0 1.1rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.peron12-trasa__linia::-webkit-scrollbar {
	display: none;
}

/* Tor. */
.peron12-trasa__linia::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.45rem;
	height: 1px;
	background: var(--p12-linia);
}

/* Wagon — pozycję i szerokość ustawia skrypt; bez niego jest niewidoczny,
   a aktywny przystanek dostaje własny odcinek (niżej). */
.peron12-trasa__linia::after {
	content: "";
	position: absolute;
	left: var(--pozycja);
	bottom: 0.35rem;
	width: var(--szerokosc);
	height: 0.2rem;
	background: var(--p12-znak);
	opacity: 0;
	transition:
		left 420ms cubic-bezier(0.22, 1, 0.36, 1),
		width 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 200ms ease;
}

.peron12-trasa__linia.is-js::after {
	opacity: 1;
}

.peron12-trasa__przystanek {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.peron12-trasa__link {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.35rem 0 0.9rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--p12-tekst-drugorzedny);
	transition: color 200ms ease;
}

/* Przystanek: kropka na torze. */
.peron12-trasa__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.93rem;
	width: 0.56rem;
	height: 0.56rem;
	border: 1px solid var(--p12-znak);
	border-radius: 50%;
	background: var(--p12-tlo);
	transform: translateX(-50%);
	transition: background-color 200ms ease;
}

.peron12-trasa__link:hover,
.peron12-trasa__link:focus-visible,
.peron12-trasa__link.is-active {
	color: var(--p12-tekst);
}

.peron12-trasa__link:hover::after,
.peron12-trasa__link:focus-visible::after {
	background: var(--p12-linia);
}

.peron12-trasa__link.is-active::after {
	background: var(--p12-znak);
}

.peron12-trasa__link:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 4px;
}

/* Bez skryptu aktywny przystanek ma stały odcinek toru. */
.peron12-trasa__linia:not(.is-js) .peron12-trasa__link.is-active::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.75rem;
	height: 0.2rem;
	background: var(--p12-znak);
}

.peron12-trasa__liczba {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--p12-tekst-drugorzedny);
	transition: color 200ms ease;
}

.peron12-trasa__link.is-active .peron12-trasa__liczba {
	color: var(--p12-akcent);
}

/* Mozaika: kolumny z siatki, wysokości z rytmu kadrów. Skrypt przelicza
   wysokość każdego kafelka na wiersze po 4 px — stąd równe odstępy przy
   różnych proporcjach. Bez skryptu zostaje zwykła siatka o tym samym rytmie. */
.peron12-galeria__siatka {
	--p12-gal-odstep: clamp(0.75rem, 1.5vw, 1.25rem);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--p12-gal-odstep);
	row-gap: var(--p12-gal-odstep);
	margin: 0;
	padding: 0;
	transition: opacity 160ms ease;
}

.peron12-galeria__siatka.is-mozaika {
	grid-auto-rows: 4px;
	row-gap: 0;
}

.peron12-galeria__siatka.is-chowanie {
	opacity: 0;
}

.peron12-galeria__kadr {
	position: relative;
	margin: 0;
	align-self: start;
}

.peron12-galeria__kadr--szeroki {
	grid-column: span 2;
}

.peron12-galeria__link {
	position: relative;
	display: block;
	aspect-ratio: var(--kadr, 3 / 2);
	overflow: hidden;
	background: var(--wp--preset--color--kosc-przygaszona);
	outline-offset: 3px;
}

/* Mosiężna ramka pojawia się dopiero po najechaniu. */
.peron12-galeria__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--p12-znak);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.peron12-galeria__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.peron12-galeria__kadr:hover .peron12-galeria__obraz,
.peron12-galeria__link:focus-visible .peron12-galeria__obraz {
	transform: scale(1.03);
}

.peron12-galeria__kadr:hover .peron12-galeria__link::after,
.peron12-galeria__link:focus-visible::after {
	opacity: 1;
}

/* Etykieta jak odcinek biletu: numer i kategoria, tylko po najechaniu. */
.peron12-galeria__etykieta {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	padding: 1.6rem 0.9rem 0.7rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kosc-sloniowa);
	background: linear-gradient(180deg, rgba(20, 9, 12, 0) 0%, rgba(20, 9, 12, 0.72) 100%);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms ease;
}

.peron12-galeria__kadr:hover .peron12-galeria__etykieta,
.peron12-galeria__kadr:focus-within .peron12-galeria__etykieta {
	opacity: 1;
	transform: translateY(0);
}

.peron12-galeria__nr {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

@media (hover: none) {
	.peron12-galeria__etykieta {
		display: none;
	}
}

@media (max-width: 1099px) {
	.peron12-galeria__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.peron12-galeria__siatka {
		grid-template-columns: minmax(0, 1fr);
	}

	.peron12-galeria__kadr--szeroki {
		grid-column: span 1;
	}

	.peron12-galeria__kadr--szeroki .peron12-galeria__link {
		aspect-ratio: 3 / 2;
	}
}

/* Podgląd: ciemna scena z tą samą mosiężną linią co reszta strony. Pasek na
   dole to tor z pozycją zdjęcia w zbiorze — zamiast kropek po stronie. */
.peron12-lightbox {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--kosc-przygaszona);
}

.peron12-lightbox::backdrop {
	background: rgba(20, 9, 12, 0.96);
}

.peron12-lightbox[open] {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
}

html.peron12-lightbox-otwarty {
	overflow: hidden;
}

.peron12-lightbox__scena {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	min-height: 0;
	padding: clamp(1rem, 3vw, 2.5rem);
}

.peron12-lightbox__kadr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
	margin: 0;
}

.peron12-lightbox__obraz {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 12rem);
	max-height: calc(100dvh - 12rem);
	object-fit: contain;
	outline: 1px solid rgba(205, 179, 115, 0.28);
	outline-offset: 6px;
}

.peron12-lightbox__podpis {
	max-width: 60ch;
	margin: 1.6rem 0 0;
	text-align: center;
}

.peron12-lightbox__bilet {
	display: flex;
	justify-content: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ochra-jasna);
}

.peron12-lightbox__bilet > span + span::before {
	content: "·";
	margin-inline-end: 1rem;
	opacity: 0.6;
}

.peron12-lightbox__opis {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.4;
	color: rgba(245, 240, 232, 0.85);
}

.peron12-lightbox__krok,
.peron12-lightbox__zamknij {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(205, 179, 115, 0.35);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ochra-jasna);
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.peron12-lightbox__krok:hover,
.peron12-lightbox__zamknij:hover,
.peron12-lightbox__krok:focus-visible,
.peron12-lightbox__zamknij:focus-visible {
	border-color: var(--wp--preset--color--ochra-jasna);
	background: rgba(205, 179, 115, 0.12);
	outline: none;
}

.peron12-lightbox__zamknij {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 1;
}

.peron12-lightbox__tor {
	position: relative;
	height: 1px;
	margin: 0 clamp(1rem, 3vw, 2.5rem) 1.5rem;
	background: rgba(205, 179, 115, 0.22);
}

.peron12-lightbox__pociag {
	--postep: 0;
	position: absolute;
	top: -1px;
	left: 0;
	width: calc(var(--postep) * 100%);
	height: 3px;
	background: var(--wp--preset--color--ochra-jasna);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 699px) {
	.peron12-lightbox__scena {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0.75rem;
	}

	.peron12-lightbox__krok {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(20, 9, 12, 0.6);
	}

	.peron12-lightbox__krok--wstecz {
		left: 0.75rem;
	}

	.peron12-lightbox__krok--dalej {
		right: 0.75rem;
	}

	.peron12-lightbox__obraz {
		max-height: calc(100vh - 10rem);
		max-height: calc(100dvh - 10rem);
	}
}

/* Tablica ze zdjęciami (Okolica): czwarta kolumna z kadrem 3:2 przy każdym
   kierunku, wiersz wyższy; kadr to odnośnik z podglądem. Wiersz bez zdjęcia
   ma kafelek z czasem w mosiądzu - jak pusta pozycja na tablicy. */
.peron12-tablica--ze-zdjeciami .peron12-tablica__kol-kadr {
	width: 22rem;
}

.peron12-tablica--ze-zdjeciami .peron12-tablica__tabela td {
	vertical-align: middle;
}

.peron12-tablica--ze-zdjeciami .peron12-tablica__kierunek .peron12-flip {
	font-size: 1.15rem;
}

.peron12-tablica__kadr {
	width: 22rem;
	padding-block: 0.6rem;
	text-align: right;
}

.peron12-tablica__foto,
.peron12-tablica__kafelek {
	display: block;
	width: 20rem;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	margin-inline-start: auto;
	overflow: hidden;
	outline: 1px solid rgba(205, 179, 115, 0.28);
	outline-offset: -1px;
}

.peron12-tablica__foto {
	position: relative;
	background: var(--wp--preset--color--burgund-ciemny);
}

.peron12-tablica__foto:focus-visible {
	outline: 2px solid var(--p12-akcent);
	outline-offset: 3px;
}

.peron12-tablica__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.peron12-tablica__foto:hover .peron12-tablica__obraz {
	transform: scale(1.04);
	opacity: 0.92;
}

/* Znak lupy w rogu kadru - subtelny, mosiężny. */
.peron12-tablica__foto::after {
	content: "";
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: rgba(20, 9, 12, 0.6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	box-shadow: inset 0 0 0 1px rgba(205, 179, 115, 0.5);
	opacity: 0;
	transition: opacity 200ms ease;
}

.peron12-tablica__foto:hover::after,
.peron12-tablica__foto:focus-visible::after {
	opacity: 1;
}

.peron12-tablica__kafelek {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.4rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ochra-jasna);
	background:
		linear-gradient(135deg, rgba(20, 9, 12, 0.22) 0%, rgba(20, 9, 12, 0) 60%),
		var(--wp--preset--color--burgund-ciemny);
}

@media (max-width: 899px) {
	.peron12-tablica--ze-zdjeciami .peron12-tablica__kol-kadr,
	.peron12-tablica__kadr {
		width: 11rem;
	}

	.peron12-tablica__foto,
	.peron12-tablica__kafelek {
		width: 10rem;
	}

	.peron12-tablica__kafelek {
		font-size: 1.5rem;
	}
}

/* Kontakt: dane firmy pod listą kontaktową - drobniej, w tabelarycznym rytmie. */
.peron12-kontakt__firma {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.peron12-kontakt__firma-tytul {
	margin: 0 0 0.6rem;
}

.peron12-kontakt__firma-nazwa {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
}

.peron12-kontakt__firma-adres {
	margin: 0 0 0.6rem;
	font-style: normal;
	color: var(--p12-tekst-przygaszony);
}

.peron12-kontakt__firma-lista {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.95rem;
}

.peron12-kontakt__firma-lista dt {
	color: var(--p12-tekst-drugorzedny);
}

.peron12-kontakt__firma-lista dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Formularz: informator (60%) po lewej, formularz (40%) po prawej. */
.peron12-formularz__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

@media (min-width: 900px) {
	.peron12-formularz__uklad {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--50);
	}
}

.peron12-informator__tytul {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.15;
}

.peron12-informator__lista {
	margin: 0;
	border-top: 1px solid var(--p12-linia);
}

.peron12-informator__poz {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--p12-linia-cicha);
}

.peron12-informator__poz dt {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--p12-znak);
}

.peron12-informator__poz dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1rem;
}

.peron12-informator__poz dd.is-puste {
	font-style: italic;
	color: var(--p12-tekst-drugorzedny);
}

@media (max-width: 480px) {
	.peron12-informator__poz {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}
}

/* Kolumna formularza: burgundowy panel z tokenami ciemnego pasa, tytuł nad
   polami. Pola dziedziczą styl „linia zamiast ramki” i czytają się na burgundzie. */
.peron12-formularz__kolumna {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--burgund);
	color: var(--p12-tekst);
}

.peron12-formularz__kolumna .peron12-formularz__tytul {
	font-size: var(--wp--preset--font-size--xl);
	margin-bottom: 0.75rem;
	color: var(--p12-tekst);
}

.peron12-formularz__kolumna .peron12-formularz__wstep {
	color: var(--p12-tekst-przygaszony);
}

.peron12-formularz__kolumna .peron12-pole__wartosc {
	color: var(--p12-tekst);
	border-block-end-color: var(--p12-linia);
}

.peron12-formularz__kolumna .peron12-pole__wartosc::placeholder {
	color: var(--p12-tekst-drugorzedny);
}

.peron12-formularz__kolumna .peron12-formularz__ok,
.peron12-formularz__kolumna .peron12-formularz__bledy {
	color: var(--p12-tekst);
}

.peron12-formularz__kolumna .peron12-formularz__bledy a {
	color: var(--p12-akcent);
}

.peron12-formularz__kolumna .peron12-pole__blad {
	color: var(--wp--preset--color--ochra-jasna);
}

.peron12-formularz__kolumna .peron12-formularz__form .peron12-button {
	cursor: pointer;
}

/* -------------------------------------------------------- Blok: opinie */

.peron12-opinie {
	background: var(--wp--preset--color--burgund);
	border-block: 0;
	padding-block: clamp(4rem, 7vw, 7rem);
}

.peron12-opinie__naglowek { margin: 0 0 2.5rem; font-size: clamp(2rem, 4vw, 3.5rem); color: var(--p12-tekst); }
.peron12-opinia__naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.peron12-opinia__naglowek h3 { margin: 0; font-size: 1.6rem; color: var(--p12-akcent); }
.peron12-opinia__wynik { white-space: nowrap; font-size: 1.5rem; color: var(--p12-akcent); }
.peron12-opinia__wynik small { font-size: 0.8rem; }
.peron12-opinia__autor time { display: block; margin-top: 0.45rem; font-weight: 400; letter-spacing: 0.03em; text-transform: none; }

.peron12-opinie__wnetrze {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
}

.peron12-opinie__ocena {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.peron12-opinie__wynik {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--p12-akcent);
	font-variant-numeric: tabular-nums;
}

.peron12-opinie__zrodlo {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-opinie__link {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

.peron12-opinie__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.peron12-opinia {
	margin: 0;
	border-top: 1px solid var(--p12-akcent);
	padding-top: 1.5rem;
}

.peron12-opinia__tresc {
	margin: 0;
	border: 0;
	padding: 0;
}

.peron12-opinia__tresc p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--p12-tekst-przygaszony);
}

.peron12-opinia__autor {
	margin-block-start: 0.9rem;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--p12-akcent);
}

/* ------------------------------------------------------- Blok: kontakt */

.peron12-kontakt__siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

/* Mapa rośnie do wysokości lewej kolumny; iframe wypełnia ją całą. */
.peron12-kontakt__siatka .peron12-mapa {
	height: 100%;
}

.peron12-kontakt__siatka .peron12-mapa iframe {
	position: absolute;
	inset: 0;
	height: 100%;
	min-height: 0;
}

@media (min-width: 820px) {
	.peron12-kontakt__siatka {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

.peron12-kontakt__tekst p {
	margin: 0 0 var(--wp--preset--spacing--20);
	max-width: 46ch;
	color: var(--p12-tekst-przygaszony);
}

.peron12-kontakt__lista {
	margin: 0;
	border-block-start: 1px solid var(--p12-linia-cicha);
}

.peron12-kontakt__poz {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0 1rem;
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--p12-linia-cicha);
}

.peron12-kontakt__poz dt {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
	padding-block-start: 0.2rem;
}

.peron12-kontakt__poz dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--p12-tekst);
}

.peron12-kontakt__poz dd address {
	font-style: normal;
}

.peron12-kontakt__poz dd a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--p12-linia);
}

.peron12-kontakt__poz dd a:hover,
.peron12-kontakt__poz dd a:focus-visible {
	color: var(--p12-akcent);
}

/* Mapa: dopóki gość nie kliknie, jest tu tylko wyjaśnienie i odnośnik. */
.peron12-mapa {
	position: relative;
	min-height: 18rem;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(
			135deg,
			var(--wp--preset--color--burgund-ciemny) 0 12px,
			var(--wp--preset--color--noc) 12px 24px
		);
	box-shadow: inset 0 0 0 1px var(--p12-linia);
}

.peron12-mapa__zgoda {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.peron12-mapa__info {
	margin: 0;
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--s);
	color: var(--p12-tekst-przygaszony);
}

.peron12-mapa__przycisk {
	cursor: pointer;
}

.peron12-mapa__zapas {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.peron12-mapa--wlaczona {
	display: block;
	background: none;
	min-height: 0;
}

.peron12-mapa iframe {
	display: block;
	width: 100%;
	min-height: 22rem;
	border: 0;
}

/* ----------------------------------------------------- Blok: pas CTA */

.peron12-cta--burgund {
	background: var(--wp--preset--color--burgund);
}

.peron12-cta--ochra {
	background: var(--wp--preset--color--ochra);
}

.peron12-cta__wnetrze {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
}

.peron12-cta__tekst {
	margin: 0;
	flex: 1 1 18rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.3;
	text-wrap: balance;
}

.peron12-cta--burgund .peron12-cta__tekst {
	color: var(--p12-tekst);
}

.peron12-cta--ochra .peron12-cta__tekst {
	color: #231218;
}

.peron12-cta__akcja {
	margin: 0;
	flex: 0 0 auto;
}

/* Na ochrze przycisk musi być ciemny, inaczej ginie w tle. */
.peron12-button--kontra {
	background: #231218;
	color: var(--p12-tekst);
}

.peron12-button--kontra:hover,
.peron12-button--kontra:focus-visible {
	background: var(--wp--preset--color--noc);
	color: var(--p12-akcent);
}

/* -------------------------------------------------- Blok: formularz */

.peron12-formularz__tytul {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.peron12-formularz__wstep {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 52ch;
	color: var(--p12-tekst-przygaszony);
}

.peron12-formularz__siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 40rem) {
	.peron12-formularz__siatka {
		grid-template-columns: 1fr 1fr;
	}

	.peron12-pole--pelna {
		grid-column: 1 / -1;
	}
}

/* Pułapka na boty: niewidoczna, ale nie przez display:none —
   część botów pomija pola ukryte tą metodą. */
.peron12-pulapka {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.peron12-pole__gwiazdka {
	margin-inline-start: 0.25rem;
	color: var(--p12-akcent);
}

.peron12-pole__opcja {
	margin-inline-start: 0.5rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--p12-tekst-drugorzedny);
}

.peron12-pole__wartosc--obszar {
	min-height: 9rem;
	padding: 0.75rem 0;
	line-height: 1.6;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--m);
	resize: vertical;
}

.peron12-pole__blad {
	display: block;
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--s);
	color: #E8A08C;
}

.peron12-pole__wartosc[aria-invalid="true"] {
	border-block-end-color: #E8A08C;
}

.peron12-formularz__bledy {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-inline-start: 2px solid #E8A08C;
	background: rgba(232, 160, 140, 0.08);
}

.peron12-formularz__bledy p {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
}

.peron12-formularz__bledy ul {
	margin: 0.5rem 0 0;
	padding-inline-start: 1.2rem;
	font-size: var(--wp--preset--font-size--s);
	color: var(--p12-tekst-przygaszony);
}

.peron12-formularz__bledy a {
	color: inherit;
}

.peron12-formularz__ok {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 2px solid var(--wp--preset--color--ochra);
	background: rgba(205, 179, 115, 0.08);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--l);
	color: var(--p12-tekst-przygaszony);
}

.peron12-zgoda {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 62ch;
}

.peron12-zgoda input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--ochra);
}

.peron12-zgoda__tekst {
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
	color: var(--p12-tekst-przygaszony);
}

.peron12-zgoda .peron12-pole__blad {
	grid-column: 2;
}

.peron12-formularz__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.peron12-formularz__stopka .peron12-button {
	cursor: pointer;
}

.peron12-formularz__nota {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p12-tekst-drugorzedny);
}

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

/*
 * Pasek żyje poza układem strony, więc nie zabiera miejsca pierwszemu
 * ekranowi — pojawia się dopiero, gdy hero wyjedzie w górę. Domyślnie
 * jest przesunięty poza kadr i niewidoczny także dla czytników ekranu
 * (atrybut inert w znaczniku), żeby tabulator nie trafiał w pustkę.
 */
/*
 * Ruch paska opiera się na jednej zasadzie: wejście jest zaaranżowane
 * i wolniejsze, wyjście szybkie i jednolite. Gość ma zauważyć pojawienie się
 * paska, a nie jego zniknięcie — dlatego przy wejściu treść wchodzi kaskadą,
 * a przy wyjściu wszystko schodzi razem.
 *
 * Krzywe: wejście na cubic-bezier(.22, 1, .36, 1), czyli zdecydowany start
 * i długie, miękkie dochodzenie do miejsca. Wyjście na (.4, 0, 1, 1) —
 * przyspieszające, bo element ucieka z pola widzenia.
 *
 * Rozmycia tła nie animujemy: przejście backdrop-filter potrafi szarpać
 * na słabszych maszynach, a zysk wizualny jest żaden.
 */
.peron12-lepki {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	/* Po scrollu wraca do bieli: krem z rozmyciem, menu w burgundzie, mosiężna
	   linia włosowa na dole. Odwrotność burgundowego szkła nad hero. */
	background: transparent;
	transform: translateY(-100%);
	visibility: hidden;
	transition:
		transform 240ms cubic-bezier(0.4, 0, 1, 1),
		visibility 240ms;
}

/* Krem i rozmycie na pseudoelemencie — patrz uwaga przy nagłówku nad hero. */
.peron12-lepki::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(250, 247, 242, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.peron12-lepki--widoczny {
	transform: none;
	visibility: visible;
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}

/*
 * Mosiężna linia włosowa zamiast statycznej ramki. Przy wejściu rozsuwa się
 * od środka ku krawędziom i kończy biec chwilę po tym, jak pasek już stanie —
 * to ten jeden detal, który ma się zauważyć.
 */
.peron12-lepki::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--wp--preset--color--ochra) 18%,
		var(--wp--preset--color--ochra) 82%,
		transparent 100%
	);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}

.peron12-lepki--widoczny::after {
	transform: scaleX(1);
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}

/*
 * Kaskada treści. Znak, menu i przycisk wchodzą w tej kolejności, co 50 ms —
 * odstęp na tyle mały, że czyta się jako jeden ruch, a nie trzy osobne.
 * Przy wyjściu żadnych opóźnień: wszystko gaśnie równocześnie i szybciej.
 */
.peron12-lepki__znak,
.peron12-lepki__menu,
.peron12-lepki__cta {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.peron12-lepki--widoczny .peron12-lepki__znak,
.peron12-lepki--widoczny .peron12-lepki__menu,
.peron12-lepki--widoczny .peron12-lepki__cta {
	opacity: 1;
	transform: none;
}

.peron12-lepki--widoczny .peron12-lepki__znak {
	transition:
		opacity 300ms ease 60ms,
		transform 340ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}

.peron12-lepki--widoczny .peron12-lepki__menu {
	transition:
		opacity 300ms ease 110ms,
		transform 340ms cubic-bezier(0.22, 1, 0.36, 1) 110ms;
}

.peron12-lepki--widoczny .peron12-lepki__cta {
	transition:
		opacity 300ms ease 160ms,
		transform 340ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}

.peron12-lepki__wnetrze {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--30));
	padding-block: 0.5rem;
}

.peron12-lepki__znak {
	display: flex;
	align-items: center;
	color: var(--p12-znak);
	text-decoration: none;
	flex: 0 0 auto;
}

/*
 * Pełny logotyp, nie sygnet — na życzenie Zamawiającego. Przy 40 px dolna
 * linia lockupu jest już tylko fakturą, nie tekstem do czytania; czytelną
 * wersję znaku gość ma w nagłówku głównym nad pierwszym ekranem.
 */
.peron12-lepki__znak .peron12-logo {
	height: 40px;
	width: auto;
	flex: 0 0 auto;
}

.peron12-lepki__znak:hover,
.peron12-lepki__znak:focus-visible {
	color: var(--p12-tekst);
}

/* Menu bierze wolną przestrzeń i siada przy przycisku rezerwacji. */
.peron12-lepki__menu {
	margin-inline-start: auto;
	min-width: 0;
}

.peron12-lepki__cta {
	flex: 0 0 auto;
	padding-block: 0.6rem;
	white-space: nowrap;
}

/*
 * Ten sam próg co w nagłówku głównym: poniżej 960 px sześć pozycji menu
 * przestaje się mieścić obok znaku i przycisku, więc menu zwija się
 * w nakładkę. Reguły rdzenia odwracamy tak samo jak wyżej.
 */
@media (min-width: 600px) and (max-width: 959.98px) {
	.peron12-lepki .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.peron12-lepki .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 30rem) {
	.peron12-lepki__znak .peron12-logo {
		height: 32px;
	}
}

/* Minimalistyczny nagłówek i hero - aktualizacja klienta 08.09.2026. */
.peron12-hero-na-gorze .peron12-header { border: 0; background: transparent; }
.peron12-hero-na-gorze .peron12-header::before { content: none; }
.peron12-header__row { position: relative; }
.peron12-header .peron12-logo-block { color: #fff; }
.peron12-hero-na-gorze .peron12-header a { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.peron12-hero__bilet-wnetrze { max-width: 1100px; }
.peron12-hero__bilet-wnetrze::before { background: rgba(20,9,12,.32); border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.home .peron12-hero--pelny { min-height: 100svh; }
.home .peron12-hero--pelny .peron12-hero__copy { text-align: center; width: 100%; box-sizing: border-box; margin-inline: auto; padding-top: 11rem; padding-bottom: 13rem; }
.home .peron12-hero__copy > * { margin-inline: auto; }
.home .peron12-hero__title { font-family: var(--wp--preset--font-family--sans); font-size: clamp(3.2rem, 8vw, 8rem); font-weight: 400; letter-spacing: .08em; line-height: 1.05; }
.home .peron12-hero__eyebrow { font-size: clamp(.9rem, 2vw, 1.3rem); letter-spacing: .35em; }
.home .peron12-hero__eyebrow::before { display: none; }
.home .peron12-hero__lead { font-size: clamp(.75rem, 1.5vw, 1rem); letter-spacing: .12em; }
@media (min-width: 960px) {
 .peron12-header .peron12-header__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; padding-block: 1rem; }
 .peron12-header__row > .peron12-logo-block { grid-column: 2; grid-row: 1; justify-self: center; }
 .peron12-header__row > .peron12-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 0; }
 .peron12-header__row > .peron12-jezyki { grid-column: 3; grid-row: 1; justify-self: end; }
 .peron12-header__row > .peron12-header__cta { display: none; }
}
@media (max-width: 959px) {
 .peron12-header .peron12-header__row { min-height: 76px; }
 .peron12-header__row > .peron12-logo-block { position: absolute; left: 50%; transform: translateX(-50%); }
 .peron12-header__row > .peron12-jezyki { margin-left: auto; }
 .home .peron12-hero--pelny .peron12-hero__copy { padding-top: 8rem; padding-bottom: 17rem; }
}
@media (max-width: 599px) {
 .home .peron12-hero__title { font-size: clamp(2.7rem, 12vw, 4.5rem); }
 .peron12-hero__bilet .peron12-rezerwacja { padding: 1rem; }
}

/* Wspólny, symetryczny nagłówek z pełnym logotypem pomiędzy pozycjami menu. */
.p12-balanced-header { width: 100%; max-width: 1600px; margin-inline: auto; padding: .8rem clamp(1rem, 3vw, 3rem) 1.2rem; box-sizing: border-box; }
.p12-balanced-header__details { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; margin-bottom: .5rem; font-size: .75rem; }
.p12-balanced-header__contact, .p12-balanced-header__social { display: flex; align-items: center; gap: 1.2rem; }
.p12-balanced-header__social { justify-content: flex-end; }
.p12-balanced-header__details a { color: inherit; text-decoration: none; }
.p12-balanced-header__details .peron12-sociale__link { width: 26px; height: 26px; }
.p12-balanced-header__main { position: relative; min-height: 80px; display: flex; align-items: center; }
.p12-balanced-header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 180px; height: 70px; display: flex; justify-content: center; color: inherit; z-index: 1; }
.p12-balanced-header__logo svg { height: 100%; width: 100%; }
.p12-balanced-header .p12-balanced-nav { width: 100%; margin: 0; color: inherit; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.p12-balanced-header .wp-block-navigation-item__content { color: inherit; }
.peron12-lepki .peron12-lepki__wnetrze { display: block; max-width: none; padding: 0; }
.peron12-lepki .p12-balanced-header { color: var(--wp--preset--color--burgund-ciemny); }
.home .peron12-hero__title { font-family: var(--wp--preset--font-family--serif); font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
.home .peron12-hero__lead { font-family: var(--wp--preset--font-family--sans); }
@media (min-width: 960px) {
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) 220px repeat(3,minmax(0,1fr)); width: 100%; gap: .5rem; align-items: center; text-align: center; }
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item { justify-content: center; }
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:nth-child(4) { grid-column: 5; }
}
@media (max-width: 959px) {
 .p12-balanced-header { padding-block: .65rem; }
 .p12-balanced-header__details { font-size: .65rem; gap: .4rem; }
 .p12-balanced-header__contact { flex-direction: column; align-items: flex-start; gap: .25rem; }
 .p12-balanced-header__social { gap: .5rem; }
 .p12-balanced-header__main { min-height: 70px; }
 .p12-balanced-header__logo { width: 145px; height: 58px; }
 .p12-balanced-header .p12-balanced-nav { justify-content: flex-end; }
 .home .peron12-hero__title { font-size: clamp(2.8rem, 9vw, 5rem); }
}
@media (min-width: 960px) {
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open),
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
 .p12-balanced-header .p12-balanced-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content { width: 100%; }
}

/* Czytelność nagłówka nad zdjęciem i brak szczeliny po części szablonu. */
.peron12-header .p12-balanced-header {
 color: var(--wp--preset--color--kosc-sloniowa);
}
.peron12-header .p12-balanced-header .p12-balanced-nav,
.peron12-header .p12-balanced-header__logo,
.peron12-header .p12-balanced-header__contact a,
.peron12-header .p12-balanced-header__social > .peron12-sociale a,
.peron12-header .p12-balanced-header .peron12-jezyki__biezacy {
 color: var(--wp--preset--color--kosc-sloniowa);
}
.peron12-hero-na-gorze .wp-site-blocks > main {
 margin-block-start: 0;
}
.peron12-hero-na-gorze .wp-site-blocks > .wp-block-template-part:first-child {
 margin-block: 0;
}
.peron12-hero-na-gorze .peron12-header {
 margin-block: 0;
}

/* Dodatkowe zaproszenie pod nazwą obiektu. */
.peron12-hero__copy > .peron12-hero__zaproszenie { max-width: 48rem; margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.peron12-hero__haslo { margin: 0 0 .8rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.55rem, 2.6vw, 2.35rem); font-style: italic; line-height: 1.2; color: var(--wp--preset--color--kosc-sloniowa); text-wrap: balance; }
.peron12-hero__opis { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.7; color: var(--wp--preset--color--kosc-przygaszona); text-wrap: balance; }
.home .peron12-hero--pelny .peron12-hero__copy { padding-top: 12rem; padding-bottom: 11rem; }
@media (max-width: 959px) {
 .home .peron12-hero--pelny .peron12-hero__copy { padding-top: 10rem; padding-bottom: 17rem; }
 .peron12-hero__copy > .peron12-hero__zaproszenie { margin-top: 1.5rem; }
}

/* Wspólne wyśrodkowanie tekstów hero na stronie głównej i podstronach. */
.peron12-hero .peron12-hero__copy {
 width: 100%;
 box-sizing: border-box;
 margin-inline: auto;
 text-align: center;
}
.peron12-hero .peron12-hero__copy > * {
 margin-inline: auto;
}

/* Kompaktowy sticky: tylko menu i logotyp. */
.peron12-lepki .p12-balanced-header__details { display: none; }
.peron12-lepki .p12-balanced-header { padding-block: .4rem; }
.peron12-lepki .p12-balanced-header__main { min-height: 54px; }
.peron12-lepki .p12-balanced-header__logo { width: 145px; height: 48px; }

.peron12-pokoj__cena { font-family: var(--wp--preset--font-family--serif); font-size: 2rem; line-height: 1.1; color: var(--p12-akcent); }
.peron12-pokoj__cena small { display: block; margin-top: .3rem; font-family: var(--wp--preset--font-family--sans); font-size: .7rem; color: var(--p12-tekst-drugorzedny); }
.peron12-pokoj__cena-nota { max-width: 52ch; font-size: .8rem; line-height: 1.5; color: var(--p12-tekst-drugorzedny); }

/* Mobile: logotyp przy lewej krawędzi, podpis hamburgera po prawej. */
@media (max-width: 959.98px) {
 .p12-balanced-header .p12-balanced-header__logo {
  left: 0;
  transform: translateY(-50%);
  justify-content: flex-start;
 }
 .p12-balanced-header__logo svg { object-position: left center; }
 .p12-balanced-header .wp-block-navigation__responsive-container-open {
  align-items: center;
  gap: .55rem;
  min-height: 44px;
 }
 .p12-balanced-header .wp-block-navigation__responsive-container-open::before {
  content: 'Menu';
  font-family: var(--wp--preset--font-family--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: none;
 }
}

/* Mobile header: kontakt i sociale / logotyp, język i menu. */
.p12-contact-icon, .p12-balanced-header__mobile-language { display: none; }
@media (max-width: 959.98px) {
 .p12-balanced-header__details { grid-template-columns: minmax(0,1fr) auto; gap: .75rem; margin-bottom: .35rem; }
 .p12-balanced-header__contact { flex-direction: row; align-items: center; gap: 1rem; white-space: nowrap; }
 .p12-balanced-header__contact > a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; }
 .p12-balanced-header__social > .peron12-jezyki { display: none; }
 .p12-balanced-header__social { gap: 0; }
 .p12-balanced-header__social > .peron12-sociale { margin: 0; gap: .5rem; }
 .p12-balanced-header__main { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .8rem; align-items: center; }
 .p12-balanced-header .p12-balanced-header__logo { position: static; transform: none; grid-column: 1; grid-row: 1; max-width: 100%; }
 .p12-balanced-header__mobile-language { display: block; grid-column: 2; grid-row: 1; }
 .p12-balanced-header__main > .p12-balanced-nav { grid-column: 3; grid-row: 1; width: auto; margin: 0; }
 .p12-balanced-header__mobile-language .peron12-jezyki__biezacy { min-height: 44px; }
}
@media (max-width: 479.98px) {
 .p12-balanced-header__contact .p12-contact-text { display: none; }
 .p12-balanced-header__contact .p12-contact-icon { display: block; }
 .p12-balanced-header__contact { gap: .5rem; }
 .p12-balanced-header__contact > a { width: 32px; }
 .p12-balanced-header__details .peron12-sociale__link { width: 32px; height: 32px; box-sizing: border-box; }
}

/* Okolica: kompaktowy katalog miejsc zamiast dużej tablicy ze zdjęciami. */
.p12-okolica-lista { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.p12-okolica-miejsce { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 1.1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--p12-linia); }
.p12-okolica-miejsce .peron12-tablica__foto { display: block; width: 120px; height: 88px; aspect-ratio: auto; min-height: 0; margin: 0; }
.p12-okolica-miejsce .peron12-tablica__obraz { width: 100%; height: 100%; object-fit: cover; }
.p12-okolica-info h3 { margin: 0 0 .3rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.2rem,1.6vw,1.55rem); font-weight: 400; line-height: 1.2; }
.p12-okolica-info p { margin: 0 0 .3rem; font-size: .78rem; color: var(--p12-tekst-drugorzedny); }
.p12-okolica-trasa { font-size: .75rem; text-underline-offset: .25em; }
.p12-okolica-symbol { display: grid; place-items: center; height: 88px; font-size: 2rem; color: var(--p12-znak); background: var(--wp--preset--color--kosc-sloniowa); }
@media(max-width: 699px) { .p12-okolica-lista { grid-template-columns: minmax(0,1fr); } .p12-okolica-miejsce { grid-template-columns: 96px minmax(0,1fr); gap: 1rem; } .p12-okolica-miejsce .peron12-tablica__foto { width: 96px; height: 76px; } .p12-okolica-symbol { height: 76px; } }

/* Film pozostaje pod przyciemnieniem i treścią hero. */
.peron12-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.peron12-hero__media .peron12-hero__scrim { z-index: 1; }
.peron12-hero__video-toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 4; border: 1px solid rgba(255,255,255,.45); background: rgba(20,9,12,.4); color: #fff; padding: .4rem .7rem; font: inherit; font-size: .7rem; cursor: pointer; }
.peron12-hero__video-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .peron12-hero__video { display: none; } }

/* Wspólna czytelność hero na zdjęciach i filmie, na wszystkich stronach. */
.peron12-hero .peron12-hero__copy {
 z-index: 2;
 background: radial-gradient(ellipse at center, rgba(12, 15, 18, .62) 0%, rgba(12, 15, 18, .38) 38%, rgba(12, 15, 18, 0) 72%);
 text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.peron12-hero .peron12-hero__copy :is(.peron12-hero__title, .peron12-hero__title em, .peron12-hero__lead, .peron12-hero__eyebrow, .peron12-hero__haslo, .peron12-hero__opis) {
 color: #fff;
}

/* Nagłówki główne hero zapisane wizualnie wersalikami. */
.peron12-hero h1.peron12-hero__title { text-transform: uppercase; }

/* Dokumenty: czytelna kolumna treści, spójny nagłówek hero. */
.peron12-dokument { width: 100%; box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin: clamp(2.5rem,6vw,5rem) auto; padding-inline: 1.25rem; line-height: 1.8; overflow-wrap: anywhere; }
.peron12-dokument h2 { margin-top: 2.5rem; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(1.65rem,3vw,2.2rem); line-height: 1.2; }
.peron12-dokument h3 { margin-top: 1.6rem; font-family: var(--wp--preset--font-family--serif); font-size: 1.4rem; }
.peron12-dokument li { margin-block: .7rem; padding-left: .25rem; }
.p12-legal-page .peron12-hero__title { font-size: clamp(2rem,5vw,4.5rem); max-width: 22ch; }
.peron12-faq__kategoria { margin: 2.2rem 0 1rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.4rem,2.5vw,1.8rem); font-weight: 400; }
.peron12-formularz__prywatnosc { font-size: .8rem; line-height: 1.65; margin-top: 1rem; max-width: 65ch; }
.peron12-formularz__prywatnosc a { color: var(--p12-akcent); text-decoration: underline; text-underline-offset: .2em; }
.peron12-formularz__prywatnosc a:hover,
.peron12-formularz__prywatnosc a:focus-visible { color: var(--p12-tekst); text-decoration-thickness: 2px; }

/* Podstrony prawne: kompaktowy burgundowy nagłówek bez fotografii. */
.p12-legal-page .peron12-header { position: relative; background: var(--wp--preset--color--burgund-ciemny); }
.p12-legal-page .peron12-header .p12-balanced-header { color: var(--wp--preset--color--kosc-sloniowa); }
.p12-legal-page .peron12-header a { text-shadow: none; }
.p12-legal-page .peron12-hero { min-height: 0; height: auto; padding: 0; background: var(--wp--preset--color--burgund-ciemny); }
.p12-legal-page .peron12-hero .peron12-hero__copy { padding-block: clamp(2rem,5vw,4rem); background: none; text-shadow: none; }
.p12-legal-page .peron12-hero .peron12-hero__copy :is(.peron12-hero__title, .peron12-hero__lead) { color: var(--wp--preset--color--kosc-sloniowa); }
.p12-legal-page .peron12-hero__title { font-size: clamp(2rem,4vw,3.5rem); }
.p12-legal-page .peron12-dokument { margin-top: clamp(3rem, 6vw, 5rem); }

.peron12-dokument.is-layout-constrained > * { max-width: none; }
.p12-legal-page .peron12-header :is(.p12-balanced-header__logo, .p12-balanced-nav, .p12-balanced-header__details, .peron12-jezyki, .peron12-sociale, .wp-block-navigation__responsive-container-open) { color: var(--wp--preset--color--kosc-sloniowa); }
.p12-legal-page .peron12-header a { color: var(--wp--preset--color--kosc-sloniowa); }

/* FAQ: dwie zrównoważone kolumny z kategoriami i lekkimi separatorami. */
.peron12-faq__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); max-width: none; width: 100%; border-top: 0; }
.peron12-faq__kolumna { min-width: 0; }
.peron12-faq__kolumna .peron12-faq__kategoria { margin: clamp(3.5rem, 5vw, 5rem) 0 1rem; padding: .85rem 1rem; border-left: 2px solid var(--p12-znak); background: var(--wp--preset--color--kosc-sloniowa); font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.25; }
.peron12-faq__kolumna .peron12-faq__kategoria:first-child { margin-top: 0; }
.peron12-faq__kolumna .peron12-faq__pytanie { grid-template-columns: 1.8rem minmax(0, 1fr) 1rem; gap: .6rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); padding: 1rem .25rem; }
.peron12-faq__kolumna .peron12-faq__odpowiedz { max-width: none; padding: 0 .5rem 1.25rem 2.65rem; font-size: .9rem; line-height: 1.75; }
@media (max-width: 899px) {
 .peron12-faq__lista { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
 .peron12-faq__kolumna .peron12-faq__odpowiedz { padding-left: .25rem; }
}

/* Baner zgód zgodny z kolorystyką strony. */
.p12-cookie-settings { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.cmplz-cookiebanner .cmplz-title { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; }
.cmplz-cookiebanner .cmplz-message { line-height: 1.65; }
.cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap; gap: .6rem; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 44px; font-family: var(--wp--preset--font-family--sans); }
.cmplz-cookiebanner .cmplz-buttons .cmplz-deny { order: 0; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences { order: 1; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept { order: 2; }

/* Delikatna linia pod H1, rozwijana od środka przy wejściu na stronę. */
.peron12-hero h1.peron12-hero__title { width: fit-content; margin-inline: auto; }
.peron12-hero h1.peron12-hero__title::after {
 content: "";
 display: block;
 width: 40%;
 height: 1px;
 margin: clamp(.9rem, 2vw, 1.5rem) auto 0;
 background: currentColor;
 opacity: .65;
 transform-origin: center;
 animation: peron12-hero-linia 1.1s cubic-bezier(.22, 1, .36, 1) .2s both;
}
@keyframes peron12-hero-linia {
 from { transform: scaleX(0); opacity: 0; }
 to { transform: scaleX(1); opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
 .peron12-hero h1.peron12-hero__title::after { animation: none; }
}

/* Dyskretny drogowskaz poniżej biletu rezerwacji. */
.peron12-hero--z-biletem .peron12-hero__bilet { bottom: 4rem; }
.peron12-hero a.peron12-hero__scroll { position: absolute; bottom: .4rem; left: 50%; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; padding: 0 .6rem; color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--sans); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.peron12-hero__scroll svg { animation: peron12-scroll-zaproszenie 1.6s ease-in-out 3; }
.peron12-hero__scroll:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
@keyframes peron12-scroll-zaproszenie { 0%,100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .peron12-hero__scroll svg { animation: none; } }

/* Karuzela opinii: natywne przesuwanie palcem i przyciąganie do karty. */
.peron12-opinie__siatka { position: relative; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--p12-znak) transparent; }
.peron12-opinie__siatka .peron12-opinia { min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; padding: clamp(1.5rem,4vw,3rem); }
.peron12-opinie__siatka .peron12-opinia__tresc { max-width: 65ch; }
.peron12-opinie__nawigacja { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 1.5rem; color: var(--p12-tekst); font-size: .8rem; font-variant-numeric: tabular-nums; }
.peron12-opinie__nawigacja[hidden] { display: none; }
.peron12-opinie__nawigacja button { width: 44px; height: 44px; border: 1px solid var(--p12-linia); background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer; }
.peron12-opinie__nawigacja button:disabled { opacity: .35; cursor: default; }
.peron12-opinie__nawigacja button:focus-visible, .peron12-opinie__siatka:focus-visible { outline: 2px solid var(--p12-znak); outline-offset: 4px; }

@media (min-width: 960px) {
 .peron12-opinie__siatka { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}

/* Delikatne podkreślenie menu desktopowego, także w nagłówku sticky. */
@media (min-width: 960px) {
 .p12-balanced-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
  position: relative;
  text-decoration: none;
 }
 .p12-balanced-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4rem;
  height: 1px;
  background: currentColor;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
 }
 .p12-balanced-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
 }
}
@media (prefers-reduced-motion: reduce) {
 .p12-balanced-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* Logotyp w hero strony głównej i sygnet w nagłówku nad filmem. */
.p12-balanced-header__logo .p12-header-sygnet { display: none; }
.home .peron12-hero h1.peron12-hero__title--logo { width: min(520px, 78vw); font-size: inherit; line-height: 1; }
.home .peron12-hero__title--logo > svg { display: block; width: 100%; height: auto; max-height: 26svh; color: #fff; filter: drop-shadow(0 2px 12px rgb(0 0 0 / .25)); }
@media (min-width: 960px) {
 .home .peron12-header .p12-balanced-header__logo .peron12-logo--logo { display: none; }
 .home .peron12-header .p12-balanced-header__logo .p12-header-sygnet { display: block; width: 64px; height: 64px; align-self: center; }
}

/* Dyskretniejsze hasło nad filmem na stronie głównej. */
.home .peron12-hero__haslo { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.35; margin-bottom: .55rem; }
.home .peron12-hero__copy > .peron12-hero__zaproszenie { margin-top: clamp(1rem, 2vh, 1.5rem); }

/* Wydarzenia: pełny plakat obok treści, bez przycinania grafiki. */
.p12-events { width: 100%; max-width: var(--wp--style--global--wide-size); margin-block: clamp(3rem,6vw,6rem); }
.p12-events__heading { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem,3vw,3rem); font-weight: 400; margin: 0 0 2rem; }
.p12-events__list + .p12-events__heading { margin-top: clamp(4rem,7vw,7rem); }
.p12-event { display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); padding-block: 3rem; border-top: 1px solid var(--p12-linia); align-items: start; }
.p12-event__poster img { display: block; width: 100%; height: auto; }
.p12-event__date { display: block; font-size: .8rem; letter-spacing: .08em; color: var(--p12-tekst-przygaszony); }
.p12-event h3 { margin: 1rem 0 1.5rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 400; line-height: 1.15; }
.p12-event__description { line-height: 1.8; overflow-wrap: anywhere; }
.p12-event__description > :first-child { margin-top: 0; }
.p12-event__description a, .p12-event__facebook { color: inherit; text-decoration: underline; text-underline-offset: .3em; }
.p12-event__facebook { display: inline-block; margin-top: 1.5rem; font-size: .85rem; }
.p12-event a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.p12-events__empty { padding: 2rem; border: 1px solid var(--p12-linia); line-height: 1.7; }
@media(max-width:700px) { .p12-event { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding-block: 2rem; } .p12-event__poster { max-width: 440px; margin-inline: auto; } }

/* Sygnet mobilny przed przewinięciem; sticky zachowuje pełne logo. */
@media (max-width: 959px) {
 .home .peron12-header .p12-balanced-header__logo { justify-content: flex-start; }
 .home .peron12-header .p12-balanced-header__logo .peron12-logo--logo { display: none; }
 .home .peron12-header .p12-balanced-header__logo .p12-header-sygnet { display: block; width: 48px; height: 48px; align-self: center; }
}
.p12-review-translation { font-size: .8rem; color: var(--p12-tekst-przygaszony); margin-block: .5rem 1.5rem; }

/* Reserve six weeks, including empty cells in short months. */
.peron12-kalendarz__pusty { aspect-ratio: 1; width: 100%; }