/*
 * Karuzela w stylu „Kadr z kolumną” (makieta: hero strony głównej, 6.2).
 *
 * Kadr z wideo po lewej, kolumna boczna z kaflem produktu i granatowym
 * panelem po prawej; na tablecie kolumna schodzi pod kadr, na telefonie
 * zostaje sam kadr na wysokość ekranu. Podpis (panel szklany) leży na kadrze,
 * choć w treści stoi obok kafla i panelu w `__body` slajdu: `__body` jest
 * podsiatką slajdu, więc jego dzieci trafiają do komórek siatki slajdu bez
 * pozycjonowania bezwzględnego i bez nowych węzłów (decyzja D2). Miejsce
 * wyznacza styl grupy, nie kolejność w treści.
 *
 * Mechanikę przenikania (slajdy w jednej komórce, widoczność, czas) daje
 * arkusz bloku; czas i krzywe ustawia styles/kadr-z-kolumna.json. Tutaj jest
 * układ i wygląd, którego klucz `css` nie przebije (reguły bloku i rdzenia
 * mają wagę jednej albo dwóch klas).
 *
 * Progi 48rem i 64rem są z makiety (`settings.viewport` motywu to te same
 * granice minus 1 px).
 */

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna {
	--implai-kadr-kolumna: clamp(22rem, 29%, 33.625rem);

	/* Stała wysokość granatowego panelu z projektu (węzeł 4187:3498), żeby
	   panel nie skakał między slajdami z logo i bez. */
	--implai-kadr-panel: 21.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--2);
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna > .flexisnap-carousel__track {
	grid-area: 1 / 1 / 2 / -1;
}

/* Pigułka z paskami slajdów przy górnej prawej krawędzi kadru. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna > .flexisnap-carousel__dots {
	grid-area: 1 / 1 / 2 / 2;
	place-self: start end;
	z-index: 2;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--2);
	border-radius: var(--wp--preset--border-radius--l);
	background-color: var(--wp--custom--kolor--szklo-blade);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-carousel__dots button {
	display: block;
	inline-size: 3.75rem;
	block-size: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--l);
	background-color: var(--wp--preset--color--biel);
	overflow: hidden;
	cursor: pointer;
}

/* Postęp do następnego slajdu: czas podaje silnik karuzeli w zmiennej,
   z atrybutu „Co ile sekund”. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-carousel__dots button::before {
	content: "";
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
	background-color: var(--wp--preset--color--blekit);
	transform: scaleX(0);
	transform-origin: left center;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-carousel__dots button.jest-aktywna::before {
	animation-name: implai-postep-slajdu;
	animation-duration: var(--flexisnap-carousel-opoznienie, 7s);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-carousel__dots button.jest-pokazana::before {
	transform: scaleX(1);
}

@keyframes implai-postep-slajdu {

	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Slajd: siatka, w której `__body` jest podsiatką. Tablet: kadr, kafel, panel
   jeden pod drugim.

   Slajdy leżą w jednej komórce toru, więc krótszy slajd (bez logo w panelu)
   jest rozciągany do wysokości najwyższego, a nadmiar trafia do wierszy
   `auto`. W makiecie połowa nadmiaru idzie pod kadr, a po ćwiartce do kafla
   i panelu (dwa poziomy siatek: slajd i `__body`). Tu jest jedna siatka,
   więc ten sam rozkład dają dwa puste wiersze pod kadrem: cztery wiersze
   `auto` po ćwiartce. Wiersz kadru ma `max-content`, żeby nie rósł, bo podpis
   jest przyklejony do jego dolnej krawędzi. Przerwy niosą marginesy, nie
   `row-gap`: pusty wiersz też dostaje przerwę. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: max-content auto auto auto auto;
	gap: 0 var(--wp--preset--spacing--2);
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media {
	position: relative;
	isolation: isolate;
	grid-column: 1;
	grid-row: 1;

	/* Wysokość z proporcji, nie z rozciągnięcia na wiersz. */
	align-self: start;
	aspect-ratio: 1310 / 838;
	inline-size: 100%;
	min-block-size: 26rem;
	border-radius: var(--wp--preset--border-radius--karta);
	overflow: hidden;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media > video,
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Błękitny odcień kadru: nadaje kolor, nie zakrywa. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--custom--kolor--blekit-odcien);
	mix-blend-mode: color;
	pointer-events: none;
}

/* `position` po to, żeby podsiatka malowała się nad kadrem (kadr też jest
   pozycjonowany, więc o kolejności decyduje dokument). */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > * {
	margin: 0;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-szklany {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	margin: var(--wp--preset--spacing--4);
}

/* Odnośnik w podpisie istnieje tylko na telefonie (widoczność bloku), gdzie
   zastępuje przycisk granatowego panelu: 25 px nad nim z projektu. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .is-style-panel-szklany > .wp-block-buttons {
	margin-block-start: 1.5625rem;
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-kafel-produktu {
	grid-column: 1;
	grid-row: 4;
	margin-block-start: var(--wp--preset--spacing--2);
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-granatowy {
	display: flex;
	flex-direction: column;
	grid-column: 1;
	grid-row: 5;
	gap: var(--wp--preset--spacing--6);
	margin-block-start: var(--wp--preset--spacing--2);
	padding: clamp(var(--wp--preset--spacing--6), 2.6vw, var(--wp--preset--spacing--7));
	border-radius: var(--wp--preset--border-radius--karta);
}

.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .is-style-panel-granatowy > * {
	flex: none;
	margin: 0;
}

/* Przycisk zawsze przy dolnej krawędzi panelu, niezależnie od tekstu nad nim
   i od tego, czy slajd ma logo. */
.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .is-style-panel-granatowy > .wp-block-buttons {
	justify-content: flex-end;
	margin-block-start: auto;
}

/* Telefon (węzeł 5612:211): sam kadr od krawędzi do krawędzi, wysoki na ekran
   minus pasek nawigacji, bez zaokrągleń. Wysokość minimalna, nie sztywna:
   przy telefonie obróconym poziomo podpis jest wyższy niż ekran i kadr rośnie.
   `svh` bez paska adresu, linia z `vh` dla przeglądarek bez `svh`.
   Karuzela wychodzi poza wcięcie sekcji jak tor na telefonie: rdzeń daje
   dzieciom układu `constrained` automatyczne marginesy z `!important`. */
@media (width < 48rem) {

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna {
		position: relative;
		inset-inline-start: calc(-1 * var(--wp--style--root--padding-left, 0px));
		inline-size: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
		max-inline-size: none;
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide {
		grid-template-rows: auto;
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media {
		aspect-ratio: auto;
		min-block-size: calc(100vh - var(--wp--custom--naglowek--wysokosc-kompakt));
		min-block-size: calc(100svh - var(--wp--custom--naglowek--wysokosc-kompakt));
		border-radius: 0;
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-szklany {
		padding: var(--wp--preset--spacing--8);
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-kafel-produktu,
	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-granatowy {
		display: none;
	}
}

/* Od 64rem kolumna boczna obok kadru. Proporcja kadru jak w projekcie (1310
   na 838 przy treści 1856); dolna granica 33,25rem zostawia szaremu kaflowi
   co najmniej 11,25rem obok panelu (21,5rem plus przerwa). */
@media (width >= 64rem) {

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna,
	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide {
		grid-template-columns: minmax(0, 1fr) var(--implai-kadr-kolumna);
	}

	/* Tu wszystkie slajdy mają tę samą wysokość (proporcja kadru), więc
	   rozkładu nadmiaru nie ma czego odtwarzać. */
	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide {
		grid-template-rows: 1fr auto;
		row-gap: var(--wp--preset--spacing--2);
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__media {
		grid-row: 1 / -1;
		min-block-size: 33.25rem;
	}

	/* Górna krawędź podpisu równo z górną krawędzią panelu: 21,5rem panelu
	   minus 1rem wcięcia kadru. Dolna granica, nie sztywna wysokość: dłuższy
	   podtytuł urośnie w górę zamiast uciąć wiersz. */
	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-szklany {
		grid-row: 1 / -1;
		min-block-size: 20.5rem;
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-kafel-produktu {
		grid-column: 2;
		grid-row: 1;
		min-block-size: 0;
		margin-block-start: 0;
	}

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-slide__body > .is-style-panel-granatowy {
		grid-column: 2;
		grid-row: 2;
		block-size: var(--implai-kadr-panel);
		margin-block-start: 0;
	}

	/* Panel ma stałą wysokość, więc miejsce oddaje akapit: cztery wiersze, reszta
	   z wielokropkiem (makieta: najwięcej, ile mieści się przy 1846 px). */
	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .is-style-panel-granatowy > p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		flex: 0 1 auto;
		min-block-size: 0;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-flexisnap-carousel.is-style-kadr-z-kolumna .flexisnap-carousel__dots button.jest-aktywna::before {
		animation-name: none;
		transform: scaleX(1);
	}
}

/*
 * Tor kart (makieta: `carousel--rail`, `card-grid--rail`, `card--media-top`,
 * rozdziały 6.11 i 6.12). Kafle o stałej szerokości z odmiany
 * (`--implai-tor-kafel`), najwyżej 85 procent toru, tor wychodzi poza kolumnę
 * treści do krawędzi okna (odpowiednik `slidesOffsetAfter` Swipera: wcięcie
 * na końcu toru wchodzi w zasięg przewijania, więc ostatni kafel kończy się
 * na krawędzi kolumny). Przeciąganie myszą daje silnik wtyczki.
 */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) {
	position: relative;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__track {
	display: grid;
	grid-auto-columns: min(85%, var(--implai-tor-kafel));
	grid-auto-flow: column;
	gap: var(--wp--preset--spacing--siatka);
	margin-inline-end: calc(-1 * var(--wp--preset--spacing--bok));
	padding-inline-end: var(--wp--preset--spacing--bok);
	overscroll-behavior-inline: contain;
}

/* Kafel: zdjęcie u góry w pełnej szerokości, treść pod nim we wcięciu, tło
   wtórne; akcje przy dolnej krawędzi z prawej. */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .wp-block-flexisnap-slide {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	border-radius: var(--wp--preset--border-radius--karta);
	background-color: var(--wp--preset--color--tlo-wtorne);
	overflow: hidden;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__media {
	aspect-ratio: var(--implai-tor-kadr);
	border-radius: var(--wp--preset--border-radius--karta);
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--naglowek-sekcji);
	padding: var(--wp--preset--spacing--6);
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__body > * {
	margin: 0;
}

/* Tytuł kafla: rozmiar z odmiany (`--implai-tor-tytul`), domyślnie krój M
   jak w portfolio Professionals; tory produktu mają krój S. */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__body > h3 {
	font-size: var(--implai-tor-tytul, var(--wp--preset--font-size--tytul-m));
}

/* Kafel bez zdjęcia (tor wąski, makieta `card--text-only`): treść na całą
   wysokość kafla, więc przyciski stoją przy dolnej krawędzi. */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .wp-block-flexisnap-slide:not(:has(> .flexisnap-slide__media)) {
	grid-template-rows: minmax(0, 1fr);
}

/* Opis przycięty do liczby wierszy z odmiany (portfolio: trzy, kafle mają
   jedną wysokość; pozostałe tory bez przycięcia, `none`). */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__body > p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--implai-tor-wiersze);
	line-clamp: var(--implai-tor-wiersze);
	overflow: hidden;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-slide__body > .wp-block-buttons {
	justify-content: flex-end;
	margin-block-start: auto;
	padding-block-start: calc(var(--wp--preset--spacing--6) - var(--wp--preset--spacing--naglowek-sekcji));
}

/* Strzałki: wysokie paski na szkle nad torem, lewa w połowie wchodzi
   w kolumnę treści, prawa przy krawędzi okna. Warstwa nie łapie kursora,
   więc ciągnięcie kafli działa także pod nią. Na telefonie bez strzałek. */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__nav {
	display: none;
}

@media (min-width: 48rem) {

	.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__nav {
		position: absolute;
		inset-block: 0;
		inset-inline: 0 calc(-1 * var(--wp--preset--spacing--bok));
		display: block;
		pointer-events: none;
	}
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) :is(.flexisnap-carousel__prev, .flexisnap-carousel__next) {
	position: absolute;
	inset-block-start: 50%;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 13.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--l);
	background-color: var(--wp--custom--kolor--kontrolka);
	color: var(--wp--preset--color--biel);
	backdrop-filter: blur(20px);
	translate: 0 -50%;
	pointer-events: auto;
	cursor: pointer;
	transition:
		opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
		color var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) :is(.flexisnap-carousel__prev, .flexisnap-carousel__next)::before {
	content: "";
	inline-size: 0.75rem;
	block-size: 0.75rem;
	background-color: currentcolor;
	mask: url(../../icons/arrow-ne.svg) center / contain no-repeat;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__prev {
	inset-inline-start: -1.375rem;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__prev::before {
	rotate: 225deg;
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__next {
	inset-inline-end: var(--wp--preset--spacing--6);
}

.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) .flexisnap-carousel__next::before {
	rotate: 45deg;
}

/* Wygaszona strzałka na krańcu toru: 10 procent krycia z projektu. */
.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) :is(.flexisnap-carousel__prev, .flexisnap-carousel__next)[disabled] {
	opacity: 0.1;
	cursor: default;
}

@media (hover: hover) {

	.wp-block-flexisnap-carousel:is(.is-style-tor-kart-sredni, .is-style-tor-kart-szeroki, .is-style-tor-kart-waski) :is(.flexisnap-carousel__prev, .flexisnap-carousel__next):not([disabled]):hover {
		color: var(--wp--preset--color--czern);
	}
}