/*
 * Siatka kart (flexisnap/card-grid): kolumny siatki, ruch kart przyklejonych
 * i tor na telefonie. Wygląd kart i odmiany są w theme.json i w odmiany/*.json.
 *
 * Kolumny ustawia support `layout` regułą kontenera rdzenia
 * (`.wp-container-flexisnap-card-grid-is-layout-*`), którą rdzeń drukuje po
 * arkuszu odmian. Odmiana z klucza `css` waży tyle samo i przegrywa
 * kolejnością, więc każda zmiana kolumn stoi tutaj, z dwiema klasami
 * w selektorze (gotchas 2026-09-13, ten sam wzór co fider).
 */

/* Z kartą wiodącą: dwie kolumny z panelu od 64rem, niżej jedna. */
@media (width < 64rem) {

	.wp-block-flexisnap-card-grid.is-style-siatka-z-wiodaca.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Kafle zawijają się same i dzielą całą szerokość (makieta: `auto-fit`).
   Rdzeń składa siatkę z `minimumColumnWidth` wyłącznie przez `auto-fill`, które
   zostawia puste tory, więc przy czterech kaflach na szerokim ekranie
   byłyby węższe niż w projekcie (gotchas 2026-09-14). */
.wp-block-flexisnap-card-grid.is-style-siatka-kafli.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Karty okładki: liczba kolumn z panelu od 64rem, niżej dwie, na telefonie
   jedna (makieta `card-grid--thirds`). */
@media (width < 64rem) {

	.wp-block-flexisnap-card-grid.is-style-karty-okladki.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 48rem) {

	.wp-block-flexisnap-card-grid.is-style-karty-okladki.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karty ze zdjęciem panoramicznym: liczba kolumn z panelu od 64rem, niżej
   jedna (makieta `card-grid--halves`). */
@media (width < 64rem) {

	.wp-block-flexisnap-card-grid.is-style-karty-panorama.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karty ze zdjęciem za krawędzią: liczba kolumn z panelu od 64rem, niżej
   jedna (makieta `card-grid--halves` z kartami `card--aside-bleed`). */
@media (width < 64rem) {

	.wp-block-flexisnap-card-grid.is-style-karty-zdjecie-za-krawedzia.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Lista z ikonami, pionowa: liczba kolumn z panelu od 75rem, dwie od 48rem,
   niżej jedna (makieta `icon-list--stacked`, progi z `.flexisnap-icon-list`).
   Do trzech pozycji (makieta `--stacked --trio`): liczba z panelu od 64rem,
   niżej jedna. Rozróżnia liczba pozycji, bo liczby kolumn z panelu arkusz nie
   widzi (rdzeń wpisuje ją w regułę kontenera o zmiennej nazwie). Warunek
   liczby stoi w `:where()`: `:has()` liczy się do wagi i reguła „do 75rem”
   wygrywałaby z regułą telefonu, a ma rozstrzygać kolejność. */
@media (width < 75rem) {

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-pionowa.is-layout-grid:where(:has(> .wp-block-flexisnap-card:nth-child(4))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 64rem) {

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-pionowa.is-layout-grid:where(:not(:has(> .wp-block-flexisnap-card:nth-child(4)))) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (width < 48rem) {

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-pionowa.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Lista z ikonami w jednym rzędzie (parametry produktu w Figmie): od 80rem
   wszystkie pozycje w jednym rzędzie, kolumny według treści i rozsunięte do
   krawędzi. Wartości mają rozmiar tytułu sekcji, więc w równych kolumnach
   łamałyby się nawet przy 1920 (w projekcie najdłuższa wychodzi poza
   kolumnę). Pełny rozmiar mieści się w rzędzie od około 1840 px, niżej
   wartości maleją razem z szerokością siatki (`cqi`), żeby rząd został
   rzędem: około 29 px przy 1440 i 24 px przy 1280. Od 64rem dwie kolumny,
   niżej jedna (reguła niżej). Liczba kolumn z panelu nie gra tu roli. */
@media (width >= 80rem) {

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-rzad.is-layout-grid {
		container-type: inline-size;
		grid-template-columns: none;
		grid-auto-columns: auto;
		grid-auto-flow: column;
		justify-content: space-between;
	}

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-rzad .is-style-tytul-sekcji {
		font-size: min(var(--wp--preset--font-size--tytul-sekcji), calc(3.4cqi - 1rem));
	}
}

@media (64rem <= width < 80rem) {

	.wp-block-flexisnap-card-grid.is-style-lista-ikon-rzad.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Lista z ikonami (ikona obok tekstu, makieta `--trio` i `--column`): liczba
   kolumn z panelu od 64rem, niżej jedna. */
@media (width < 64rem) {

	.wp-block-flexisnap-card-grid:is(.is-style-lista-ikon, .is-style-lista-ikon-srodek, .is-style-lista-ikon-rzad).is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Kafle na szkle (makieta `.flexisnap-stat-grid`): liczba kolumn z panelu
   od 48rem, niżej jedna. */
@media (width < 48rem) {

	.wp-block-flexisnap-card-grid.is-style-kafle-na-szkle.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karta na dwie kolumny (D5, makieta `card--span-2`): od 48rem, bo niżej
   siatka ma jedną kolumnę i karta dorobiłaby sobie drugą, niejawną. */
@media (min-width: 48rem) {

	.wp-block-flexisnap-card-grid > .wp-block-flexisnap-card.is-style-karta-dwie-kolumny {
		grid-column: span 2;
	}
}

/* Karta granatowa w siatce numerowanej (makieta `card--navy`, zachęta na końcu
   kroków rekrutacji): w tej odmianie panelem jest sam element karty, a numer
   rysuje `::before`, więc karta nie dostaje numeru i przejmuje tło. */
.wp-block-flexisnap-card-grid.is-style-numbered > .flexisnap-card.is-style-karta-granatowa {
	background-color: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--biel);
}

.wp-block-flexisnap-card-grid.flexisnap-card-grid.is-style-numbered > .flexisnap-card.is-style-karta-granatowa::before {
	content: none;
}

/* Karty przyklejone stoją jedna pod drugą niezależnie od liczby kolumn
   w panelu: kolumny obok siebie nie miałyby czego na siebie nasuwać. */
.wp-block-flexisnap-card-grid.is-style-karty-przyklejone.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
}

/* Karta przykrywana przez następną gaśnie i lekko się zmniejsza, więc
   przejście czyta się jako odsunięcie w tył. Ostatnia nie gaśnie, bo nic
   jej nie przykrywa (`:has(+ ...)` działa też po dołożeniu karty).

   Zakres liczy się od początku fazy `contain` i od wysokości okna, nie
   w procentach fazy: każda karta przechodzi ją w innym tempie. Koniec stoi
   10 px przed pełnym zakryciem, początek 310 px przed nim (najniższa karta
   na telefonie ma 320 px). Wartości i pomiar od 360x640 do 2560x1440:
   makieta, `css/style.css`, punkt 6.4.

   Poza `@supports` animacja dostałaby oś dokumentu z czasem zero i każda
   karta poza ostatnią od razu stałaby przezroczysta. Bez skrótu
   `animation`, bo zeruje `animation-timeline` (gotchas 2026-10-09). */
@media (prefers-reduced-motion: no-preference) {

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

		.wp-block-flexisnap-card-grid.is-style-karty-przyklejone > .wp-block-flexisnap-card:has(+ .wp-block-flexisnap-card) {
			transform-origin: 50% 0;
			animation-name: implai-odsuniecie;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range:
				contain calc(100vh - var(--implai-stos-naglowek, 0px) - 310px)
				contain calc(100vh - var(--implai-stos-naglowek, 0px) - 10px);
		}

		@keyframes implai-odsuniecie {

			from {
				opacity: 1;
				transform: scale(1);
			}

			to {
				opacity: 0;
				transform: scale(0.94);
			}
		}
	}
}

/* Tor na telefonie (styl grupy „Tor na telefonie”): siatki stają jedna za
   drugą w poziomym pasku, kafle w każdej idą jednym rzędem i są kwadratami.
   Szerokość kafla liczy się od szerokości paska (`cqi`), bo siatka bierze
   szerokość z treści i procent nie miałby się do czego odnieść. */
@media (width < 48rem) {

	.is-style-tor-na-telefonie .wp-block-flexisnap-card-grid.is-layout-grid {
		flex: none;
		grid-template-columns: none;
		grid-template-rows: none;
		grid-auto-flow: column;
		grid-auto-columns: min(85cqi, 20rem);
	}

	.is-style-tor-na-telefonie .wp-block-flexisnap-card .flexisnap-card__inner {
		aspect-ratio: 1;
		block-size: auto;
	}

	/* Kwadrat mieści tytuł w dwóch wierszach, nie w jednym. */
	.is-style-tor-na-telefonie .wp-block-flexisnap-card .flexisnap-card__body > .wp-block-heading {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
	}

	/* Kafel tekstowy w torze: tekst u góry, przycisk przy dolnej krawędzi. */
	.is-style-tor-na-telefonie .wp-block-flexisnap-card.is-style-karta-tekstowa .flexisnap-card__body {
		justify-content: space-between;
	}
}

/* Lista wpisów: jedna kolumna, odstęp siatki z makiety (karty bez tła). */
.wp-block-flexisnap-card-grid.is-style-lista-wpisow.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--siatka);
}

/* Karty panele (makieta `card-grid--quarters`): na telefonie jedna kolumna,
   od 48rem dwie, od 80rem liczba kolumn z panelu (tytuł na 28 px nie mieści
   się w kaflu węższym niż przy 1280 px). Do trzech kafli (makieta
   `card-grid--thirds`): dwie od 48rem, liczba z panelu od 64rem. Rozróżnia
   liczba kafli, bo liczby kolumn z panelu arkusz nie widzi. Tylko siatka
   stojąca wprost w sekcji: siatka w kolumnie obok nagłówka (wartości na
   Mission & Values) zostaje przy liczbie z panelu. */
@media (width < 80rem) {

	.wp-block-flexisnap-section > .wp-block-flexisnap-card-grid:is(.is-style-karty-panele, .is-style-karty-panele-proste).is-layout-grid:where(:has(> .wp-block-flexisnap-card:nth-child(4))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 64rem) {

	.wp-block-flexisnap-section > .wp-block-flexisnap-card-grid:is(.is-style-karty-panele, .is-style-karty-panele-proste).is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 48rem) {

	.wp-block-flexisnap-section > .wp-block-flexisnap-card-grid:is(.is-style-karty-panele, .is-style-karty-panele-proste).is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Numerowana (odmiana wtyczki `numbered`, makieta `card--panel` z
   `card__number`): biały panel, numer kroku dwucyfrowy w błękicie marki nad
   treścią. Licznik wtyczki rysuje numer na karcie, nie na jej warstwie, więc
   panelem jest tu sama karta, a warstwa `__inner` oddaje tło i wcięcie.
   Selektor numeru ma o klasę więcej niż reguła licznika wtyczki. */
.wp-block-flexisnap-card-grid.is-style-numbered > .flexisnap-card {
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--preset--border-radius--karta);
	background-color: var(--wp--preset--color--biel);
}

.wp-block-flexisnap-card-grid.flexisnap-card-grid.is-style-numbered > .flexisnap-card::before {
	content: counter(flexisnap-card, decimal-leading-zero);
	color: var(--wp--preset--color--blekit-jasny);
	font-size: var(--wp--preset--font-size--tytul-l);
	font-weight: 500;
	line-height: 1.35;
}

.wp-block-flexisnap-card-grid.is-style-numbered > .flexisnap-card > .flexisnap-card__inner {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

.wp-block-flexisnap-card-grid.is-style-numbered .flexisnap-card__body > h3 {
	font-size: var(--wp--preset--font-size--tytul-s);
}

/* Numerowana bezpośrednio w sekcji (makieta `card-grid--thirds`): liczba
   kolumn z panelu od 64rem, niżej dwie, na telefonie jedna. Siatka obok
   nagłówka (`media-naglowek-obok`) zostaje przy liczbie z panelu. */
@media (width < 64rem) {

	.wp-block-flexisnap-section > .wp-block-flexisnap-card-grid.is-style-numbered.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 48rem) {

	.wp-block-flexisnap-section > .wp-block-flexisnap-card-grid.is-style-numbered.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karty z ikoną (makieta `card--icon-row`): ikona na kaflu przy lewej
   krawędzi, treść obok niej, oba wyrównane do góry. Ikona wychodzi
   z przepływu, a treść dostaje wcięcie o kafel i odstęp; karta jest co
   najmniej tak wysoka jak kafel. Dwie klasy w selektorze, bo edytor nadaje
   każdemu blokowi `position: relative` wagą jednej klasy. Ten sam układ ma
   lista z ikonami (makieta `icon-list` bez `--stacked`), tylko bez karty. */
.wp-block-flexisnap-card-grid:is(.is-style-karty-z-ikona, .is-style-lista-ikon, .is-style-lista-ikon-srodek, .is-style-lista-ikon-rzad) .flexisnap-card__body {
	position: relative;
	min-block-size: var(--wp--custom--przycisk--ikona);
	padding-inline-start: calc(var(--wp--custom--przycisk--ikona) + var(--wp--preset--spacing--6));
}

.wp-block-flexisnap-card-grid:is(.is-style-karty-z-ikona, .is-style-lista-ikon, .is-style-lista-ikon-srodek, .is-style-lista-ikon-rzad) .flexisnap-card__body > .wp-block-icon {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	margin: 0;
}

/* Lista z ikonami, tekst na środku ikony (makieta `icon-list--middle`): ikona
   stoi na środku wysokości pozycji, więc przy tekście wyższym od kafla schodzi
   na środek tekstu, a przy niższym tekst staje na środku kafla. Stoi za
   regułą bazową ikony (ta sama waga, rozstrzyga kolejność). */
.wp-block-flexisnap-card-grid.is-style-lista-ikon-srodek .flexisnap-card__body > .wp-block-icon {
	inset-block-start: 50%;
	transform: translateY(-50%);
}