/*
 * Pionowa karuzela (makieta: obszary kompetencji w index.html
 * i strategic-partnership.html, css/style.css, rozdziały 6.6, 7.1, 7.2 i 7.4).
 *
 * Blok motywu Implai, więc jego arkusz maluje też bloki w środku: siatkę kart
 * i karty. Wszystkie selektory zaczynają się od klasy strukturalnej bloku
 * (`implai-pionowa-karuzela`), więc te same bloki gdzie indziej zostają
 * nietknięte.
 *
 * Szkielet względem makiety: `__etap` (makieta `media-text--sticky`) z kolumną
 * `figure.__media` (oba logo z atrybutów bloku, `render.php`) i `__tresc`
 * (nagłówek dla czytnika, `ul.flexisnap-card-grid`, przed kartą `drugieOd`
 * kafel `li.__kafel-logo` z drugim logo), karta to
 * `li > __inner > __body > h3 + p`. Makieta ma między tytułem a opisem węzeł
 * `__detail` (zwijany wiersz siatki), u nas tę rolę gra wiersz siatki `__body`,
 * a pasek marki pod opisem to `::after` akapitu jako ostatni wiersz jego treści
 * (w makiecie `span.brand-rule` w `__detail`), więc zwija się razem z opisem
 * w tym samym tempie. Poniżej 900 px i w trybie przypiętym akapit jest
 * przycinany do kilku wierszy, więc pasek stoi tam poza treścią akapitu:
 * `::after` samego `__body` (telefon) albo w dolnym wcięciu akapitu (tryb
 * przypięty). Wiersz opisu jest ostatni, a `__body` przycina, więc zwijanie
 * chowa opis od dołu razem z paskiem, jak `overflow: hidden` w makiecie.
 *
 * Tryby: poniżej 900 px lista z kaflami o stałej wysokości; od 900 px kolumna
 * z logo przyklejona obok listy; od 900 px z trybem przypiętym (klasa
 * `is-ready` z `view.js`) sekcja staje na środku ekranu. Ruch tylko przy
 * `prefers-reduced-motion: no-preference` i z osią przewijania w CSS; poza tym
 * strona stoi w stanie docelowym. Właściwości animacji wyłącznie szczegółowe,
 * bez skrótu `animation` (gotchas 2026-10-09).
 */

.implai-pionowa-karuzela {

	/* Bok kwadratu z logo (makieta `--media-size`). */
	--implai-pionowa-karuzela-logo: clamp(11rem, 20vw, 23.75rem);

	/* Stały kafel obszaru w układzie listy. Stała wysokość to warunek animacji
	   bez skakania; projekt ma 346 px, ale trzy tytuły łamią się na dwa wiersze,
	   więc wartość mieści najdłuższą treść z zapasem (makieta, tokens.css). */
	--implai-pionowa-karuzela-kafel: 26.5rem;

	/* Tryb przypięty: droga przewijania, przez którą sekcja stoi w miejscu
	   (dzielona po równo między pozycje), jeden wiersz tytułu sąsiada, odstęp
	   tytułu sąsiada od kafla i krok taśmy. `cqh` działa tylko w oknie taśmy,
	   bo zmienna rozwija się tam, gdzie jest użyta. */
	--implai-pionowa-karuzela-droga: 240svh;
	--implai-pionowa-karuzela-tytul: calc(var(--wp--preset--font-size--tytul-l) * var(--wp--custom--interlinia--normalna));
	--implai-pionowa-karuzela-odstep: 2rem;
	--implai-pionowa-karuzela-krok: calc(50cqh - var(--implai-pionowa-karuzela-tytul) * 1.5);
}

@media (width < 48rem) {

	.implai-pionowa-karuzela {
		--implai-pionowa-karuzela-kafel: 24.5rem;
	}
}

/* ---- 6.6 Układ ---- */

.implai-pionowa-karuzela .implai-pionowa-karuzela__etap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
	align-items: normal;
}

.implai-pionowa-karuzela .implai-pionowa-karuzela__media {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
	aspect-ratio: 1;
	inline-size: var(--implai-pionowa-karuzela-logo);
	margin: 0;
	padding: var(--wp--preset--spacing--6);
}

.implai-pionowa-karuzela .implai-pionowa-karuzela__media img {
	inline-size: min(100%, 15.5rem);
	block-size: auto;
}

.implai-pionowa-karuzela .implai-pionowa-karuzela__tresc {
	display: block;
	min-inline-size: 0;
}

.implai-pionowa-karuzela .flexisnap-card-grid.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
}

/* Kafel obszaru: warstwa `__inner` niesie tło, wcięcie i zaokrąglenie
   (wygląd karty z theme.json nadpisany, bo tu karta jest granatowa).
   `flex: none`, bo `flex: 1` z theme.json unieważnia stałą wysokość kafla
   na telefonie (podstawa `0%` wygrywa z `block-size`). */
.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__inner {
	position: relative;
	box-sizing: border-box;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	min-block-size: clamp(12rem, 20vw, 23.75rem);
	padding: var(--wp--preset--spacing--7);
	border-radius: var(--wp--preset--border-radius--karta);
	background-color: var(--wp--preset--color--granat-jasny);
	overflow: hidden;
}

/* Tytuł i opis: wiersz opisu zwija się od `1fr` do `0fr` (wysokość z treści,
   więc dłuższy opis nie jest przycinany), odstęp między nimi to odstęp
   wierszy. */
.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body {
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: var(--wp--preset--spacing--7);
}

.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > p {
	position: relative;
	align-self: start;
	box-sizing: border-box;
	max-inline-size: calc(700 * var(--wp--custom--u));
	min-block-size: 0;
	margin: 0;
}

/* Pasek marki pod opisem jako ostatni wiersz treści akapitu. Wcięcie albo
   margines zamiast tego nie zwijałyby się z wierszem `0fr` (minimum elementu
   siatki to jego wcięcie), a animowane osobno rozjeżdżały się z makietą
   w klatkach przejściowych o kilka pikseli. */
.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > p::after {
	content: "";
	display: block;
	margin-block-start: var(--wp--preset--spacing--7);
	inline-size: min(var(--wp--custom--pasek-marki--szerokosc), 100%);
	block-size: var(--wp--custom--pasek-marki--wysokosc);
	border-start-start-radius: var(--wp--preset--border-radius--m);
	border-start-end-radius: var(--wp--preset--border-radius--m);
	background-image: var(--wp--preset--gradient--pasek-marki);
}

/* Kafel z drugim logo przed kartą `drugieOd` (między obszarami pierwszej
   i drugiej firmy). Istnieje tylko w układzie listy; od 900 px to samo logo
   pokazuje kolumna z logo, więc w danej chwili widoczne jest jedno z dwóch. */
.implai-pionowa-karuzela .implai-pionowa-karuzela__kafel-logo {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1;
	padding: var(--wp--preset--spacing--6);
}

.implai-pionowa-karuzela .implai-pionowa-karuzela__kafel-logo img {
	inline-size: min(100%, 14.375rem);
	block-size: auto;
}

/* Lista poniżej 900 px: każdy kafel ma STAŁĄ wysokość, rozwinięty czy
   zwinięty, więc animacja nie zmienia długości strony pod palcem (uwaga
   Jonasza z 2026-09-24 w makiecie). Tytuł zwiniętego kafla stoi na środku:
   przesunięcie liczy się od wysokości kafla (`cqh`) i własnej wysokości
   tytułu. Opis najwyżej w sześciu wierszach. */
@media (width < 56.25rem) {

	.implai-pionowa-karuzela .implai-pionowa-karuzela__media {
		inline-size: 100%;
	}

	.implai-pionowa-karuzela .implai-pionowa-karuzela__logo-drugie {
		display: none;
	}

	.implai-pionowa-karuzela .implai-pionowa-karuzela__kafel-logo {
		display: flex;
	}

	.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__inner {
		container-type: size;
		justify-content: flex-start;
		block-size: var(--implai-pionowa-karuzela-kafel);
		min-block-size: 0;
		padding: var(--wp--preset--spacing--8);
	}

	/* Pasek marki rysuje tu `__body`, nie akapit: przycięcie do sześciu
	   wierszy kończy się na krawędzi wcięcia, więc siódmy wiersz wchodził
	   w dolne wcięcie akapitu i nachodził na pasek (zmierzone na „Quality
	   & Manufacturing” przy 375 px). Miejsce na pasek daje margines akapitu. */
	.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body {
		position: relative;
	}

	.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		overflow: hidden;
		margin-block-end: calc(var(--wp--preset--spacing--7) + var(--wp--custom--pasek-marki--wysokosc));
	}

	.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > p::after {
		content: none;
	}

	.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 0;
		inline-size: min(var(--wp--custom--pasek-marki--szerokosc), 100%);
		block-size: var(--wp--custom--pasek-marki--wysokosc);
		border-start-start-radius: var(--wp--preset--border-radius--m);
		border-start-end-radius: var(--wp--preset--border-radius--m);
		background-image: var(--wp--preset--gradient--pasek-marki);
	}
}

/* Od 900 px: kolumna z logo przyklejona obok listy, na środku części ekranu
   pod paskiem; aktywny kafel trafia w ten sam środek (7.1). */
@media (width >= 56.25rem) {

	.implai-pionowa-karuzela .implai-pionowa-karuzela__etap {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--wp--preset--spacing--10);
		align-items: start;
	}

	.implai-pionowa-karuzela .implai-pionowa-karuzela__media {
		position: sticky;
		inset-block-start: max(var(--wp--custom--naglowek--wysokosc), calc(var(--wp--custom--naglowek--wysokosc) + (100vh - var(--wp--custom--naglowek--wysokosc) - var(--implai-pionowa-karuzela-logo)) / 2));
		inset-block-start: max(var(--wp--custom--naglowek--wysokosc), calc(var(--wp--custom--naglowek--wysokosc) + (100svh - var(--wp--custom--naglowek--wysokosc) - var(--implai-pionowa-karuzela-logo)) / 2));
	}
}

/* Taśma tytułów (kopie tytułów pozycji z `view.js`) istnieje tylko w trybie
   przypiętym; pismo tytułu jak nagłówek pozycji. */
.implai-pionowa-karuzela .implai-pionowa-karuzela__tasma {
	display: none;
}

.implai-pionowa-karuzela .implai-pionowa-karuzela__tasma-tytul {
	margin: 0;
	font-size: var(--wp--preset--font-size--tytul-l);
	font-weight: 500;
	line-height: var(--wp--custom--interlinia--normalna);
}

/* ---- 7. Ruch ---- */

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		/* 7.1 Pozycja rozwija się, gdy wchodzi w środek ekranu. Oś widoku
		   na warstwie `__inner` (ona niesie tło i wcięcie), liczona od dolnej
		   krawędzi paska, więc pełne rozwinięcie wypada tam, gdzie stoi logo. */
		.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__inner {
			view-timeline-name: --implai-pionowa-karuzela-pozycja;
			view-timeline-inset: var(--wp--custom--naglowek--wysokosc) 0;
			animation-name: implai-pionowa-karuzela-odslona;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --implai-pionowa-karuzela-pozycja;
			animation-range: cover 15% cover 85%;
		}

		.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body {
			overflow: hidden;
			animation-name: implai-pionowa-karuzela-opis;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --implai-pionowa-karuzela-pozycja;
			animation-range: cover 15% cover 85%;
		}

		@keyframes implai-pionowa-karuzela-odslona {

			0%,
			18% {
				opacity: 0.3;
				background-color: transparent;
				padding: 0;
			}

			38%,
			62% {
				opacity: 1;
				background-color: var(--wp--preset--color--granat-jasny);
				padding: var(--wp--preset--spacing--7);
			}

			82%,
			100% {
				opacity: 0.3;
				background-color: transparent;
				padding: 0;
			}
		}

		@keyframes implai-pionowa-karuzela-opis {

			0%,
			18% {
				grid-template-rows: auto 0fr;
				row-gap: 0;
			}

			38%,
			62% {
				grid-template-rows: auto 1fr;
				row-gap: var(--wp--preset--spacing--7);
			}

			82%,
			100% {
				grid-template-rows: auto 0fr;
				row-gap: 0;
			}
		}

		/* 7.1a Lista poniżej 900 px: animacje, które nie ruszają układu. Kafel
		   jaśnieje i dostaje tło, tytuł jedzie ze środka do góry, a opis pojawia
		   się po nim (tytuł 18 do 30 procent, opis 30 do 38, przy zwijaniu
		   odwrotnie). Oś wraca do całego okna, bez wcięcia pod pasek. */
		@media (width < 56.25rem) {

			.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__inner {
				view-timeline-inset: 0;
				animation-name: implai-pionowa-karuzela-kafel;
			}

			.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body {
				overflow: visible;
				animation-name: none;
			}

			.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > p,
			.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body::after {
				animation-name: implai-pionowa-karuzela-opis-wejscie;
				animation-timing-function: linear;
				animation-fill-mode: both;
				animation-timeline: --implai-pionowa-karuzela-pozycja;
				animation-range: cover 15% cover 85%;
			}

			.implai-pionowa-karuzela .flexisnap-card .flexisnap-card__body > .wp-block-heading {
				animation-name: implai-pionowa-karuzela-tytul;
				animation-timing-function: linear;
				animation-fill-mode: both;
				animation-timeline: --implai-pionowa-karuzela-pozycja;
				animation-range: cover 15% cover 85%;
			}
		}

		@keyframes implai-pionowa-karuzela-kafel {

			0%,
			18% {
				opacity: 0.3;
				background-color: transparent;
			}

			38%,
			62% {
				opacity: 1;
				background-color: var(--wp--preset--color--granat-jasny);
			}

			82%,
			100% {
				opacity: 0.3;
				background-color: transparent;
			}
		}

		@keyframes implai-pionowa-karuzela-opis-wejscie {

			0%,
			30% {
				opacity: 0;
			}

			38%,
			62% {
				opacity: 1;
			}

			70%,
			100% {
				opacity: 0;
			}
		}

		@keyframes implai-pionowa-karuzela-tytul {

			0%,
			18% {
				translate: 0 calc(50cqh - 50%);
			}

			30%,
			70% {
				translate: 0 0;
			}

			82%,
			100% {
				translate: 0 calc(50cqh - 50%);
			}
		}

		/* 7.2 Logo przy liście: pierwsze ustępuje drugiemu w połowie listy.
		   Na każdej szerokości, jak w makiecie (na telefonie drugie jest
		   schowane, a przejście wypada, gdy kolumna z logo dawno zjechała). */
		.implai-pionowa-karuzela .implai-pionowa-karuzela__etap {
			timeline-scope: --implai-pionowa-karuzela-lista, --implai-pionowa-karuzela-granica;
		}

		.implai-pionowa-karuzela .implai-pionowa-karuzela__media {
			display: grid;
			place-items: center;
		}

		.implai-pionowa-karuzela .implai-pionowa-karuzela__tresc {
			view-timeline: --implai-pionowa-karuzela-lista block;
		}

		.implai-pionowa-karuzela .implai-pionowa-karuzela__media img {
			grid-area: 1 / 1;
			animation-name: implai-pionowa-karuzela-logo-pierwsze;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --implai-pionowa-karuzela-lista;
			animation-range: cover 0% cover 100%;
		}

		.implai-pionowa-karuzela .implai-pionowa-karuzela__media .implai-pionowa-karuzela__logo-drugie {
			animation-name: implai-pionowa-karuzela-logo-drugie;
		}

		/* Granica poza połową listy (`data-granica` z `render.php`, gdy karta
		   `drugieOd` nie zaczyna drugiej połowy): przenikanie na osi pierwszej
		   karty za kaflem z logo, gdy jej górna krawędź mija środek ekranu
		   (te same 45 i 58 procent, tu wysokości okna). */
		.implai-pionowa-karuzela[data-granica] .implai-pionowa-karuzela__kafel-logo + .flexisnap-card {
			view-timeline: --implai-pionowa-karuzela-granica block;
		}

		.implai-pionowa-karuzela[data-granica] .implai-pionowa-karuzela__media img {
			animation-timeline: --implai-pionowa-karuzela-granica;
			animation-range: cover 0 cover 100vh;
		}

		@keyframes implai-pionowa-karuzela-logo-pierwsze {

			0%,
			45% {
				opacity: 1;
			}

			58%,
			100% {
				opacity: 0;
			}
		}

		@keyframes implai-pionowa-karuzela-logo-drugie {

			0%,
			45% {
				opacity: 0;
			}

			58%,
			100% {
				opacity: 1;
			}
		}

		/* 7.4 Tryb przypięty (od 900 px, klasa `is-ready` z `view.js`).
		   Sekcja wjeżdża zwykłym przewijaniem i przykleja się, gdy jej treść
		   dojdzie do środka widocznej części ekranu pod paskiem; strona przewija
		   się dalej pod nią o `--implai-pionowa-karuzela-droga`. Kafel stoi
		   nieruchomo, a jego treść podmienia się skokowo (animacja w czasie, progi
		   z histerezą liczy skrypt). Przygaszone tytuły pozycji leżą na taśmie
		   pod kaflem i jadą w rytm przewijania. Logo zmienia się za aktywną
		   pozycją. Reguły mają klasę `is-ready`, więc są silniejsze od 6.6 i 7.1. */
		@media (width >= 56.25rem) {

			/* Sekcja bez wcięcia w pionie: wcięcie górne odtwarza wjazd etapu,
			   a dolne leżałoby pod drogą przewijania. */
			.wp-block-flexisnap-section:has(> .implai-pionowa-karuzela.is-ready) {
				padding-block: 0;
			}

			/* Oś przewijania bloku od dolnej krawędzi paska: zakres `contain`
			   to dokładnie czas przyklejenia etapu. */
			.implai-pionowa-karuzela.is-ready {
				view-timeline: --implai-pionowa-karuzela-sekcja block;
				view-timeline-inset: var(--wp--custom--naglowek--wysokosc) 0;
			}

			/* Droga przewijania: pusty blok pod etapem (element przyklejony nie
			   wychodzi poza pole treści rodzica). */
			.implai-pionowa-karuzela.is-ready::after {
				content: "";
				display: block;
				block-size: var(--implai-pionowa-karuzela-droga);
			}

			/* Etap: wysokość widocznej części ekranu pod paskiem, przyklejony
			   tuż pod nim, treść na środku w pionie. Maska wygasza taśmę przy
			   krawędziach etapu przez jeden wiersz tytułu. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__etap {
				position: sticky;
				inset-block-start: var(--wp--custom--naglowek--wysokosc);
				block-size: calc(100vh - var(--wp--custom--naglowek--wysokosc));
				block-size: calc(100svh - var(--wp--custom--naglowek--wysokosc));
				grid-template-rows: 1fr auto 1fr;
				row-gap: 0;
				align-content: center;
				align-items: center;
				overflow: clip;
				mask-image: linear-gradient(transparent, #000 var(--implai-pionowa-karuzela-tytul), #000 calc(100% - var(--implai-pionowa-karuzela-tytul)), transparent);
				animation-name: implai-pionowa-karuzela-wjazd;
				animation-timing-function: linear;
				animation-fill-mode: both;
				animation-timeline: --implai-pionowa-karuzela-sekcja;
				animation-range: entry 0% entry 100%;
			}

			/* Wjazd (makieta, Jonasz 2026-10-19): logo i kafel startują przy
			   górze etapu z wcięciem sekcji i zjeżdżają na środek dokładnie
			   w chwili przyklejenia. Przesuwa proporcja wierszy (suma stała,
			   więc ruch jest równy), nie `translate`, bo wysokości kafla arkusz
			   nie zna. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__media,
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__tresc {
				grid-row: 2;
			}

			@keyframes implai-pionowa-karuzela-wjazd {

				from {
					grid-template-rows: 0fr auto 2fr;
					padding-block-start: var(--wp--preset--spacing--sekcja-pion);
				}
			}

			/* Logo: przyklejony jest cały etap, oba znaki w jednej komórce,
			   zmiana przez przenikanie. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__media {
				position: static;
			}

			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__media img {
				animation-name: none;
				transition: opacity var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada);
			}

			.implai-pionowa-karuzela.is-ready:not([data-logo="drugie"]) .implai-pionowa-karuzela__media .implai-pionowa-karuzela__logo-drugie,
			.implai-pionowa-karuzela.is-ready[data-logo="drugie"] .implai-pionowa-karuzela__media img:not(.implai-pionowa-karuzela__logo-drugie) {
				opacity: 0;
			}

			/* Prawa kolumna: punkt odniesienia taśmy, bez `z-index`, więc taśma
			   może zejść pod tło kafla. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__tresc {
				position: relative;
			}

			/* Kafel: nieruchomy, wysokość najwyższej pozycji (wszystkie leżą
			   w jednej komórce), treść przycina krawędź pola treści. */
			.implai-pionowa-karuzela.is-ready .flexisnap-card-grid.is-layout-grid {
				padding: var(--wp--preset--spacing--7);
				border-radius: var(--wp--preset--border-radius--karta);
				background-color: var(--wp--preset--color--granat-jasny);
				overflow: clip;
				overflow-clip-margin: content-box;
			}

			/* Pozycje w jednej komórce: domyślnie pod polem treści, wcześniejsze
			   nad nim. Ruch mają tylko pozycja wjeżdżająca i wyjeżdżająca. */
			.implai-pionowa-karuzela.is-ready .flexisnap-card {
				grid-area: 1 / 1;
				translate: 0 100%;
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card[data-miejsce="przed"] {
				translate: 0 -100%;
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card[data-miejsce="aktywna"] {
				translate: none;
				transition: translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada);
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card[data-miejsce="wyjazd-w-gore"] {
				translate: 0 -100%;
				transition: translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada);
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card[data-miejsce="wyjazd-w-dol"] {
				translate: 0 100%;
				transition: translate var(--wp--custom--ruch--szuflada-czas) var(--wp--custom--ruch--szuflada);
			}

			/* Pozycja bez własnego tła i wcięcia (daje je kafel), animacje listy
			   wyłączone, opis rozwinięty. */
			.implai-pionowa-karuzela.is-ready .flexisnap-card .flexisnap-card__inner {
				flex: auto;
				justify-content: flex-start;
				min-block-size: 0;
				padding: 0;
				border-radius: 0;
				background-color: transparent;
				animation-name: none;
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card .flexisnap-card__body {
				animation-name: none;
			}

			/* Tytuł najwyżej w dwóch wierszach, opis w czterech. */
			.implai-pionowa-karuzela.is-ready .flexisnap-card .flexisnap-card__body > .wp-block-heading {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				overflow: hidden;
			}

			.implai-pionowa-karuzela.is-ready .flexisnap-card .flexisnap-card__body > p {
				animation-name: none;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				line-clamp: 4;
				overflow: hidden;
				padding-block-end: calc(var(--wp--preset--spacing--7) + var(--wp--custom--pasek-marki--wysokosc));
			}

			/* Pasek w dolnym wcięciu akapitu: przycięcie do czterech wierszy
			   go nie dotyka. */
			.implai-pionowa-karuzela.is-ready .flexisnap-card .flexisnap-card__body > p::after {
				position: absolute;
				inset-block-end: 0;
				inset-inline-start: 0;
				margin: 0;
			}

			/* Taśma: okno sięga od kafla o odstęp i dwa wiersze tytułu z obu
			   stron i służy tylko za miarę kroku; przycina etap. `z-index: -1`
			   kładzie ją pod tłem kafla. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__tasma {
				position: absolute;
				inset-inline: 0;
				inset-block: calc((var(--implai-pionowa-karuzela-odstep) + var(--implai-pionowa-karuzela-tytul) * 2) * -1);
				z-index: -1;
				display: block;
				container-type: size;
			}

			/* Pasek tytułów: każdy tytuł na odcinku o wysokości kroku. W połowie
			   odcinka każdej pozycji jej tytuł jest na środku kafla. */
			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__tasma-tor {
				position: absolute;
				inset-inline: var(--wp--preset--spacing--7);
				inset-block-start: calc(50% - var(--implai-pionowa-karuzela-tytul) / 2);
				animation-name: implai-pionowa-karuzela-tasma;
				animation-timing-function: linear;
				animation-fill-mode: both;
				animation-timeline: --implai-pionowa-karuzela-sekcja;
				animation-range: contain 0% contain 100%;
			}

			.implai-pionowa-karuzela.is-ready .implai-pionowa-karuzela__tasma-tytul {
				block-size: var(--implai-pionowa-karuzela-krok);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				opacity: 0.3;
			}

			@keyframes implai-pionowa-karuzela-tasma {

				from {
					translate: 0 calc(var(--implai-pionowa-karuzela-krok) / 2);
				}

				to {
					translate: 0 calc(var(--implai-pionowa-karuzela-krok) / 2 - 100%);
				}
			}

			/* Niski ekran: sąsiedzi mieszczą się pod paskiem także przy 1280x720. */
			@media (height < 50rem) {

				.implai-pionowa-karuzela {
					--implai-pionowa-karuzela-odstep: 1.5rem;
				}
			}
		}
	}
}