/* =============================================================================
   foreto — układy sekcji strony głównej

   Sekcja nie ma własnego wyglądu: dobiera prymitywy kitu (Container, Section,
   Grid, Card, Button, Link, CheckList, StepCard, Quote, Stat, Media, Timeline,
   LogoTile) i USTAWIA ICH ZMIENNE. Własna reguła pojawia się wyłącznie tam,
   gdzie kit komponentu nie ma — nakładka kafla realizacji, karta faktu,
   produktu, wpisu i spółki są złożone z pojemnika kitu, a ich wewnętrzny
   rysunek stoi tutaj.

   Ani jednej liczby: wszystko przychodzi z theme.json. Tam, gdzie most
   (kit-bridge.css) nie ma aliasu — grubość pisma i proporcja kadru — sięgamy
   po --wp--* wprost. Proporcje są presetem RDZENIA, świadomie zostawionym
   w inc/theme-json.php, więc --wp--preset--aspect-ratio--4-3 jest tokenem
   dokładnie tak samo jak krok odstępu.

   Arkusz musi stać w kolejce ZA kit.css. Kilka reguł niżej ma celowo tę samą
   wagę selektora co kit i wygrywa kolejnością — dzięki temu najechanie na
   .foreto-link nadal bije regułę stanu spoczynku, czego podbicie
   specyficzności podwojoną klasą by popsuło.

   Progi 1181, 760 i 640 to progi drabinki .foreto-grid — innych tu nie ma.
   ========================================================================== */


/* =============================================================================
   Kolekcje — wspólny kontrakt

   Pięć rodzajów kart wychodzi z jednego bloku (foreto/collection), więc
   zachowanie karty-odsyłacza opisujemy raz.
   ========================================================================== */

.foreto-collection {
	--foreto-grid-align: stretch;
}

/* Kartą jest DZIECKO <li>, nie samo <li>: siatka rozciąga komórkę, ale karta
   w środku zostaje przy swojej treści i rząd kończy się nierówno. Kafel
   realizacji zostaje poza regułą — jego wysokość niesie proporcja kadru. */
.foreto-collection > li > .foreto-card,
.foreto-collection > li > .foreto-post-card {
	height: 100%;
}

/* Cała karta jest odsyłaczem, a kit barwi KAŻDY odsyłacz akcentem przy
   najechaniu (.foreto-root :where(a:hover)). Na karcie znaczy to czerwony
   tytuł, czerwony akapit i czerwoną listę naraz. Kolor wraca więc do
   dziedziczonego, a sygnał przenosi się na jeden element: wiersz „więcej”,
   a tam, gdzie go nie ma — na tytuł. */
:is(.foreto-service-card, .foreto-segment-card, .foreto-product-card, .foreto-post-card):is(:hover, :focus-visible) {
	color: inherit;
}

.foreto-service-card__name,
.foreto-segment-card__more,
.foreto-product-card__more,
.foreto-post-card__more {
	transition: color var(--foreto-transition-base);
}

.foreto-service-card:is(:hover, :focus-visible) .foreto-service-card__name,
:is(.foreto-segment-card, .foreto-product-card, .foreto-post-card):is(:hover, :focus-visible) .foreto-link {
	color: var(--foreto-text-accent);
}

/* Grot rusza się przy najechaniu na KARTĘ, nie na sam wiersz „więcej” — kit zna
   tylko ten drugi przypadek, bo tam odsyłaczem jest sam wiersz. Krok odjazdu
   bierzemy ze skali, nie z pomiaru kitu. */
:is(.foreto-segment-card, .foreto-product-card, .foreto-post-card):is(:hover, :focus-visible) .foreto-btn__arrow {
	transform: translateX(var(--foreto-space-1));
}


/* =============================================================================
   2. Pasmo logotypów — .foreto-logos
   ========================================================================== */

.foreto-logos {
	--foreto-grid-align: stretch;
	/* Cztery w rzędzie, nie pięć z presetu --m5: logotypów jest osiem, więc
	   pięć zostawia rząd 5 + 3 z dziurą po prawej. Cztery dają dwa pełne rzędy. */
	--foreto-grid-cols: 4;
	--foreto-grid-cols-1181: 3;
	--foreto-grid-cols-760: 2;
}

/* Reguła należy do KAFLA, nie do sekcji: ten sam kafel stoi w paśmie na stronie
   głównej i w karuzeli klientów, a zawężenie do .foreto-logos zostawiało drugi
   przypadek bez ograniczenia i logotypy wychodziły poza kafel.
   Kafel ma stałą wysokość, a znak przychodzi z biblioteki mediów w dowolnej
   proporcji. Zapas pionowy równy dopełnieniu poziomemu trzyma znak w środku. */
.foreto-logo-tile img {
	width: auto;
	/* Długość BEZWZGLĘDNA, nie procent: przy `calc(100% - …)` procent liczy się
	   wobec komórki siatki, którą przeglądarka traktuje jako nieokreśloną, więc
	   ograniczenie nie działa — zmierzone 88 px przy limicie 48 px. */
	max-height: calc(var(--foreto-logo-h) - 2 * var(--foreto-space-4));
	object-fit: contain;
}


/* =============================================================================
   3. Usługi — .foreto-collection--uslugi
   ========================================================================== */

.foreto-service-card {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-4);
}

/* Ikona przychodzi jako załącznik „medium” (do 300 px) — jej wymiar jest
   decyzją sekcji, nie pliku; szerokość zostaje z proporcji. align-self, bo
   w kolumnie giętkiej obraz o szerokości auto rozciągnąłby się na całą kartę. */
.foreto-service-card__icon {
	align-self: flex-start;
	width: auto;
	height: var(--foreto-space-8);
}


/* =============================================================================
   4. Realizacje — .foreto-collection--realizacje

   Bez ani jednej reguły i to jest cała treść tej sekcji. Kartę listingu rysuje
   dziś kitowy CaseCard (kit.css), który przyszedł z dwoma wariantami siatki
   i własnym zestawem reakcji na kursor. Stał tu wcześniej kafel własnej roboty
   — zdjęcie z nakładką odsłanianą najechaniem — i został zdjęty w całości:
   nakładka chowała opis przed wszystkimi, którzy nie używają myszy, a na
   ekranie dotykowym i tak musiała wracać do przepływu osobną regułą.

   Sekcja zostaje pusta zamiast zniknąć, żeby numeracja niżej się nie przesunęła
   i żeby powód usunięcia dało się tu znaleźć.
   ========================================================================== */


/* =============================================================================
   5. Liczby — .foreto-stats

   Siatka liczb stoi na komponencie Stat: cały rysunek — stopień liczby, wielkość
   etykiety, kolor zmiany — jest w kicie, sekcji zostaje sama siatka.
   ========================================================================== */

/* Trzy w rzędzie: przy kontenerze 1134 kolumna ma zmierzone 358 px i mieści
   liczbę w stopniu h2 (42 px) bez łamania. To ta sama drabinka co preset --m3,
   ale zapisana na sekcji — układ ma być poprawny niezależnie od tego, czy blok
   dołoży klasę presetu. */
.foreto-stats {
	--foreto-grid-cols: 3;
	--foreto-grid-cols-1181: 2;
	--foreto-grid-cols-760: 1;
	/* Liczba i etykieta mają różną długość, a kafel liczby bywa kartą z tłem —
	   bez rozciągnięcia rząd kończy się schodkiem. */
	--foreto-grid-align: stretch;
}


/* =============================================================================
   5a. Fakty — .foreto-facts (pasmo „Foreto w liczbach")

   WŁASNY komponent, a nie wariant kitowego Stat — i to jest decyzja, nie skrót.
   Stat obsługuje daną mierzoną w zestawieniu: ma deltę, trend i jednostkę,
   a etykietę stawia nad wartością w stopniu 12/16, bo w tabeli skanuje się
   liczby, nie opisy. Fakt na stronie głównej stoi sam i sama liczba niczego nie
   dowodzi — kwalifikator jest treścią, więc dostaje stopień do czytania.

   WERSJA DRUGA. Pierwsza była płaska i każda z czterech zmian odpowiada na inny
   powód, dla którego była:
   SCHODEK zamiast trzech równych kolumn — wzrok dostaje kierunek czytania;
   DWUSTOPNIOWA ETYKIETA — między liczbą 80 px a zdaniem 16 px brakowało ogniwa,
   więc liczba wisiała nad drobnym tekstem; teraz jest nadtytuł 12/20 wersalikami;
   LICZBA W DOTO zamiast Poppinsa w stopniu h2 — pasmo dostaje własny rysunek,
   a nie kolejny akapit pogrubiony na czerwono;
   ODLICZANIE — liczba dochodzi do wartości, zamiast po prostu tam stać.

   Rysunek samej liczby jest w kicie (.foreto-count), bo nie należy do tej
   sekcji: to komponent, który uniesie każdą wartość podaną jako grafika. Tutaj
   zostaje UKŁAD PASMA — siatka, schodek, wejście i dwa warianty powierzchni.
   ========================================================================== */

/* Pomiar KONTENEREM, nie oknem: pasmo może stanąć i w kontenerze 1134 px,
   i na pełnej szerokości, a element nigdy nie jest kontenerem sam dla siebie —
   stąd osobne opakowanie zamiast container-type na samej liście. */
.foreto-facts-box {
	container-type: inline-size;
}

.foreto-facts {
	display: grid;
	/* STRETCH: karty w rzędzie mają jedną wysokość (decyzja z 06.09.2026).
	   Karta jest kolumną flex z treścią od góry, więc rozciągnięcie dokłada
	   pustkę na dole, a liczba i etykieta zostają na swoich miejscach. Schodek
	   niżej jedzie na translate, więc wysokości nie rusza; jedynie zastępczy
	   schodek z marginesów (bez osi przewijania) skraca karty 2 i 3 o krok. */
	align-items: stretch;
	gap: var(--foreto-space-7) 30px;
	margin: 0;
	padding: 0;
	/* PROGI LICZONE Z SZEROKOŚCI, JAKIEJ WYMAGA LICZBA, nie z okrągłych wartości.
	   Najdłuższa liczba pasma to „200 000+": przy stopniu 64 mierzy 278 px,
	   a karta dokłada 2 × 32 dopełnienia, czyli kolumna potrzebuje 342. Trzy
	   kolumny to 3 × 342 + 2 × 30 rynny = 1086, dwie 2 × 342 + 30 = 714. Przy
	   progu wziętym z listy popularnych szerokości (900) kontener 859 dostawał
	   trzy kolumny po 266 px i liczba wychodziła poza kolumnę. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* STOPIEŃ 64, NIE KITOWE 80. Kit mierzy liczbę bez karty; tu liczba stoi
   w karcie o wnętrzu 294 px (kolumna 358 przy kontenerze 1134), a „200 000+"
   w Doto przy 80 ma 348 px — wychodziła poza kartę. 64 daje 278 i zapas 16. */
.foreto-facts .foreto-count {
	--foreto-count-size: 64px;
}

@container (max-width: 1085px) {
	.foreto-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 713px) {
	.foreto-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stopień liczby schodzi DOPIERO gdy jedna kolumna nie mieści 342 px. 56 daje
   244 px liczby, czyli 308 z dopełnieniem — wystarcza aż do kontenera 308. */
@container (max-width: 341px) {
	.foreto-facts .foreto-count {
		--foreto-count-size: 56px;
	}
}

/* Wejście pozycji z opóźnieniem po kolei. Porządek niesie --i Z DANYCH, a nie
   :nth-child w CSS: liczba kolumn zmienia się z szerokością, a porządek nie. */
@keyframes foreto-facts-in {
	from { opacity: 0; transform: translateY(calc(var(--foreto-space-2) * -1)); }
	to   { opacity: 1; transform: none; }
}

.foreto-fact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--foreto-space-4);
	min-width: 0;
	animation: foreto-facts-in var(--foreto-transition-base, 200ms ease-out) both;
	animation-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
	.foreto-fact {
		animation: none;
	}
}

/* PORZĄDEK POZYCJI DLA OPÓŹNIENIA. W projekcie niósł go atrybut z danych, bo
   liczba kolumn zmienia się z szerokością, a porządek nie. Tutaj nie ma skąd
   go wziąć: WordPress renderuje każdą pozycję osobnym wywołaniem i żadne z nich
   nie zna swojego numeru w liście. :nth-child daje dokładnie ten sam porządek —
   kolejność w dokumencie, nie w rzędzie — więc wypisanie go tu niczego nie
   psuje. Cztery pozycje: pasmo jest na trzy, czwarta to zapas. */
.foreto-fact:nth-child(2) { --i: 1; }
.foreto-fact:nth-child(3) { --i: 2; }
.foreto-fact:nth-child(4) { --i: 3; }

/* SCHODEK: druga i trzecia pozycja schodzą o krok. Ten sam rysunek co w Reveal
   i w osi czasu — pasmo przestaje być trzema równymi kolumnami. Tylko przy
   trzech kolumnach: przy dwóch schodek na parach robi z rzędu zygzak, a przy
   jednej nie ma czego przesuwać. */
@container (min-width: 1086px) {
	.foreto-fact:nth-child(2) {
		margin-top: var(--foreto-space-5);
	}

	.foreto-fact:nth-child(3) {
		margin-top: calc(var(--foreto-space-5) * 2);
	}
}

/* SCHODEK ZAMYKA SIĘ PRZEWIJANIEM. Kolumny wjeżdżają rozstrzelone i równają się
   w miarę, jak pasmo wchodzi w ekran — kierunek czytania niesie wtedy RUCH,
   a stan spoczynku jest równym rzędem.

   Bez JavaScriptu: oś czasu animacji to postęp pasma przez ekran (view()),
   a nie zegar. Przewijanie w górę odtwarza to wstecz, bo animacja jest funkcją
   położenia, a nie zdarzeniem — pętla klatek nie chodzi wcale, gdy strona stoi.

   OŚ JEST WSPÓLNA DLA WSZYSTKICH TRZECH KOLUMN i to jest cały powód, dla
   którego nazywamy ją na opakowaniu zamiast wołać view() na każdej karcie:
   karta druga i trzecia stoją niżej, więc własna oś każdej z nich zaczynałaby
   się przy innym położeniu strony i schodek zamykałby się nierówno.

   Schodek jedzie na translate, nie na marginesie: margines przeliczałby układ
   w każdej klatce, a translate maluje się bez tego. Wartość początkowa to
   dokładnie ten sam krok, który wyżej niesie margines — dlatego margines jest
   tu zerowany, żeby przesunięcie nie dodało się do niego drugi raz.

   @supports, nie „nowoczesne przeglądarki": gdzie osi czasu z przewijania nie
   ma, cały blok jest niewidoczny i zostaje statyczny schodek z marginesów —
   ten sam rysunek, tylko bez ruchu. Tak samo przy prefers-reduced-motion. */
@keyframes foreto-facts-level {
	from { translate: 0 calc(var(--i, 0) * var(--foreto-facts-step, var(--foreto-space-5))); }
	to   { translate: 0 0; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.foreto-facts-box {
			view-timeline: --foreto-facts-view block;
		}

		/* KROK ANIMOWANY JEST WIĘKSZY OD STATYCZNEGO — 64 zamiast 32 — i wolno
		   mu być, bo to dwie różne rzeczy. Statyczny schodek zostaje na stronie
		   na zawsze, więc musi być na tyle drobny, żeby nie rozstrajał rzędu;
		   animowany istnieje tylko w trakcie wjazdu i po nim nie ma po nim
		   śladu, a przy 32 px ruch był ledwie widoczny.

		   SUFIT JEST POLICZONY, nie dobrany: trzecia kolumna startuje o dwa
		   kroki niżej, czyli 128 px, a to dokładnie dolne dopełnienie sekcji
		   (--foreto-space-12). Powyżej tej wartości karta wyjeżdżałaby poza
		   pasmo i chowała się pod tłem sekcji stojącej niżej — translate nie
		   zmienia układu, więc nikt by jej miejsca nie zarezerwował. */
		.foreto-facts {
			--foreto-facts-step: var(--foreto-space-8);
		}

		@container (min-width: 1086px) {
			/* Zerowanie MUSI trafić w te same selektory co schodek wyżej:
			   .foreto-fact:nth-child(2) jest mocniejsze od samego .foreto-fact
			   i kolejność w pliku tego nie odwraca. Bez tego margines i
			   przesunięcie dodają się do siebie, a rząd nigdy się nie równa. */
			.foreto-fact:nth-child(2),
			.foreto-fact:nth-child(3) {
				margin-top: 0;
			}

			.foreto-fact {
				/* Dwie animacje na jednym elemencie: wejście pozycji jedzie
				   dalej na zegarze, równanie schodka na przewijaniu. Nie biją
				   się o właściwość — tamta rusza transform i opacity, ta
				   translate. */
				animation:
					foreto-facts-in var(--foreto-transition-base, 200ms ease-out) both,
					foreto-facts-level linear both;
				animation-delay: calc(var(--i, 0) * 90ms), 0s;
				animation-timeline: auto, --foreto-facts-view;
				/* Zakres w fazie „cover", nie „entry", i to jest różnica
				   praktyczna, nie akademicka: „entry" kończy się w chwili, gdy
				   pasmo w całości wejdzie w ekran, więc pasmo stojące WYSOKO na
				   stronie — jak to na /o-nas/, drugie od góry — miałoby tę fazę
				   w większości za sobą, zanim ktokolwiek dotknie kółka myszy.
				   Przy załadowaniu strony schodek był wtedy zamknięty w trzech
				   czwartych i po prostu nie było czego oglądać.
				   „cover" liczy się od pierwszego zetknięcia z krawędzią ekranu
				   do zniknięcia za drugą, więc pasmo widoczne od razu ma dopiero
				   kilka procent postępu i cały ruch jest jeszcze przed nim.
				   Koniec na 60%: równanie ma się domknąć, ZANIM pasmo stanie na
				   środku i zacznie się je czytać. */
				animation-range: normal, cover 10% cover 60%;
			}
		}
	}
}

/* Nadtytuł i etykieta stoją bliżej siebie niż liczba i one — to jedno ogniwo
   w dwóch stopniach, a nie dwa osobne akapity. */
.foreto-fact__text {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-2);
}

/* Ogniwo między liczbą 80 px a zdaniem 16 px. Wersaliki 12/20 to ta sama
   mikrotypografia, którą kit daje etykiecie Stat — tam jest podpisem pod daną,
   tu jest nazwą kategorii nad zdaniem, więc zostaje w kolorze tekstu. */
.foreto-fact__kicker {
	margin: 0;
	font-size: var(--foreto-font-size-card);
	line-height: 20px;
	font-weight: var(--wp--custom--weight--bold);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Zdanie, nie podpis: dokumentacja treści wymaga, żeby przy każdej liczbie było
   jasne, czego dotyczy. Stąd stopień do czytania i waga zwykła — pogrubienie
   niosą już liczba i nadtytuł, trzecie odebrałoby im pierwszeństwo.
   28ch: wiersz krótszy od kolumny, żeby zdanie nie ciągnęło się na całą jej
   szerokość przy pojedynczej kolumnie. */
.foreto-fact__label {
	margin: 0;
	max-width: 28ch;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
	color: var(--foreto-text-muted);
	text-wrap: pretty;
}

/* WARIANT KAFLOWY. Dwa różne zadania, więc przełącznik, a nie drugi komponent:
   „plain" kładzie kolumny wprost na paśmie i barwę niesie sekcja, „cards" daje
   każdej kolumnie białą kartę, żeby pasmo mogło zostać bez własnego tła —
   nad tłem strony albo nad dryfującymi kwadratami. */
/* KAFLE NIE SĄ WYRÓWNYWANE DO WSPÓLNEJ LINII U DOŁU i to jest wybór, nie
   przeoczenie. Rozciągnięcie do najwyższej karty dawało schodek tylko górą,
   a dołem równą krawędź — czyli figurę, która z jednej strony schodzi, a z
   drugiej nie. Karta trzyma wysokość swojej treści, więc schodek widać na obu
   krawędziach, tak jak w projekcie. Cena: przy bardzo różnej długości zdań dolna
   krawędź jest nierówna nie tylko o krok schodka — to jednak sprawa treści, nie
   układu, i nie ma jej co przykrywać. */
.foreto-facts--cards .foreto-fact {
	background: var(--foreto-surface-card);
	box-shadow: var(--foreto-shadow-card);
	/* DOPEŁNIENIE GÓRNE WIĘKSZE OD POZOSTAŁYCH: 48 wobec 32. Nie pomyłka
	   w symetrii — glify Doto zaczynają się praktycznie przy górnej krawędzi
	   swojego pudełka (interlinia 1, zerowe światło nad wersalikiem), więc przy
	   równych 32 liczba optycznie przykleja się do krawędzi karty, choć
	   w pomiarze odstęp jest. */
	padding: var(--foreto-space-7) var(--foreto-space-5) var(--foreto-space-5);
	color: var(--foreto-ink);
}

/* Karta jest biała niezależnie od tonu pasma, więc kontekst czerni czy
   czerwieni jej nie dotyczy — kolory wracają do wartości stałych, a nie
   dziedziczonych po sekcji. */
.foreto-facts--cards .foreto-count,
.foreto-facts--cards .foreto-count__fix {
	color: var(--foreto-text-accent);
}

.foreto-facts--cards .foreto-fact__label {
	color: var(--foreto-text-muted-fixed, #6E6E6E);
}

/* =============================================================================
   6. CodeCast — oś czasu .foreto-timeline

   Oś czasu niesie w kicie CAŁĄ geometrię: raster 405 │ 82 │ 160 │ 82 │ 405,
   naprzemienność, punkty na krawędzi szyny, przełącznik „pokaż wszystkie”
   i trzy warianty przełamania. Sekcja daje jej tylko miejsce i miarę.
   ========================================================================== */

/* Pomiar KONTENEREM, nie oknem. Progi kontenerowe kitu (1133 / 1134) są dobrane
   pod szerokość TREŚCI, a .foreto-container ma dokładnie 1134 px przy oknie
   1182 — czyli pierwszym, przy którym okienny próg 1181 już nie działa. Oba
   pomiary schodzą się więc co do piksela, a tam, gdzie okno przestaje mówić
   prawdę o miejscu — kolumna czytelnicza 940, kanwa edytora — rozstrzyga ten
   właściwy: zygzak wymaga 2 × 405 px na treść i sam schodzi do jednej kolumny.

   Kontenerem musi być RODZIC, bo element nie odpytuje samego siebie. Kit ma na
   to klasę .foreto-timeline-box; ta reguła jest jej odpowiednikiem po stronie
   sekcji i zawęża pomiar do sekcji, w której oś czasu naprawdę stoi — inaczej
   każdy pojemnik sekcji stawałby się kontenerem zapytań. */
.foreto-section__inner:has(.foreto-timeline) {
	container-type: inline-size;
}

/* Oś czasu jest PASMEM w sekcji, nie kolejnym wierszem: pierwsze, co widać, to
   pełny słup czerwieni, więc odstęp z obu stron jest największym krokiem rytmu
   sekcji — tym samym, który sekcja daje po nagłówku. Zapas 52 px nad pierwszą
   datą leży WEWNĄTRZ szyny (--foreto-tl-cap) i jest częścią rysunku, nie
   odstępem: nie zastępuje powietrza na zewnątrz. */
.foreto-section__inner > * + :is(.foreto-timeline, .foreto-timeline-box),
.foreto-section__inner > :is(.foreto-timeline, .foreto-timeline-box) + * {
	margin-block-start: var(--foreto-space-7);
}


/* =============================================================================
   6a. Proces CodeCast — .foreto-steps
   ========================================================================== */

/* Sekcja stoi na gołym .foreto-grid, czyli na domyślnych trzech kolumnach bez
   drabinki — na telefonie zostawały trzy. Ta sama trójka, ale ze schodzeniem.

   Czterech kolumn nie ma, choć etapów jest osiem i podzieliłyby się równo: na
   kontenerze 1134 zostaje wtedy niecałe 150 px na tekst przy dopełnieniu karty
   2 × 56 (--foreto-step-pad-x), czyli poniżej dwudziestu znaków w wierszu.
   Inna liczba etapów to nadpisanie --foreto-grid-cols na sekcji. */
.foreto-steps {
	--foreto-grid-cols: 3;
	--foreto-grid-cols-1181: 2;
	--foreto-grid-cols-760: 1;
	--foreto-grid-align: stretch;
}


/* =============================================================================
   7. Segmenty — .foreto-collection--segmenty
   ========================================================================== */

.foreto-segment-card {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
}

/* Segment bez własnej strony renderuje się bez wiersza „zobacz ofertę”.
   Odsunięcie automatyczne trzyma wiersz przy dolnej krawędzi, więc karta
   z odsyłaczem i bez niego kończą się w tej samej linii. */
.foreto-segment-card__more {
	margin-top: auto;
}


/* =============================================================================
   8. Referencje — .foreto-quotes

   Układ na komponencie Quote: znak cudzysłowu, portret, podpis PRZED cytatem.
   ========================================================================== */

/* JEDEN cytat na wiersz. Zmierzone w żywym renderze przy kontenerze 1134:
   po jednym w wierszu kolumna tekstu ma 746 px (tyle dopuszcza sam komponent)
   i 83 znaki w wierszu; po dwóch — 291 px i 28 znaków. Podziału nie ratuje
   szersza kolumna, bo z jej szerokości portret zabiera 100 px, a rynna cytatu
   kolejne 64 — i to zanim zacznie się tekst. Wypowiedź łamana co 28 znaków
   przestaje się czytać jak wypowiedź, a zaczyna jak podpis pod zdjęciem. */
.foreto-quotes {
	/* Drabinka spłaszczona na KAŻDYM progu, nie tylko na podstawowym: łańcuch
	   zapasowy siatki czyta najpierw --…-cols-760, potem -1181, a preset --m3
	   deklaruje tam dwie kolumny. Sam --foreto-grid-cols by ich nie zdjął. */
	--foreto-grid-cols: 1;
	--foreto-grid-cols-1181: 1;
	--foreto-grid-cols-760: 1;
	/* Odstęp między cytatami musi być WIĘKSZY niż największy odstęp wewnątrz
	   cytatu — 48 px pod znakiem cudzysłowu. Przy 30 px z siatki czerwony znak
	   wiąże się z cytatem NAD sobą zamiast z własnym. Kroki schodzą razem
	   z komponentem: poniżej 640 px odstęp pod znakiem spada do 32 px, więc
	   48 nadal go przebija. */
	--foreto-grid-row-gap: var(--foreto-space-9);
	--foreto-grid-row-gap-1181: var(--foreto-space-8);
	--foreto-grid-row-gap-760: var(--foreto-space-7);
}


/* =============================================================================
   9. Produkty — .foreto-collection--produkty
   ========================================================================== */

.foreto-product-card {
	display: flex;
	flex-direction: column;
}

/* Karta świadomie nie ma .foreto-card--pad: kadr sięga krawędzi, a dopełnienie
   niesie treść — inaczej obraz stałby w białej ramce. Wartości te same, które
   --pad daje reszcie kart. */
.foreto-product-card__media {
	width: 100%;
	aspect-ratio: var(--wp--preset--aspect-ratio--4-3);
	object-fit: cover;
}

.foreto-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--foreto-space-3);
	padding: var(--foreto-space-6) var(--foreto-space-7);
}

.foreto-product-card__eyebrow {
	color: var(--foreto-text-accent);
}

.foreto-product-card__more {
	margin-top: auto;
}


/* =============================================================================
   10. Grupa — .foreto-companies
   ========================================================================== */

.foreto-companies {
	--foreto-grid-align: stretch;
}

.foreto-company {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-4);
}

/* Znak firmowy ograniczony DWOMA wymiarami, nie samą wysokością. Sztywne 48 px
   wysokości działa dla znaku kwadratowego, ale znak-napis ma proporcję ponad
   pięć do jednego: przy 48 px wychodził na 260 px, czyli dotykał obu krawędzi
   karty (262 px treści). Teraz o skali decyduje ten wymiar, który skończy się
   pierwszy — wysoki znak zatrzyma się na wysokości, szeroki na szerokości,
   a proporcja zostaje w obu przypadkach. */
.foreto-company__logo {
	align-self: flex-start;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--foreto-space-7);
	object-fit: contain;
}

/* Nazwa spółki jako tekst pod logotypem (albo bez niego) — odstępy daje gap
   karty, więc własny margines nagłówka wypada. */
.foreto-company__name {
	margin: 0;
}

/* Adres spółki jest ODSYŁACZEM, nie częścią karty-odsyłacza — najechanie
   obsługuje kit. Zostaje wyrównanie: karty o różnej długości opisu kończą się
   tym samym wierszem. */
.foreto-company__link {
	margin-top: auto;

	/* METRYKA KARTY, nie tekstu. Adres domeny to metadana, a nie zdanie, więc
	   bierze stopień 14 — ten sam, co „case study” na karcie realizacji.
	   To nie jest kosmetyka, tylko warunek zmieszczenia się w wierszu:
	   „abonament.formimpress.com” przy 16 px potrzebuje 250 px, a w karcie 358
	   po odjęciu dopełnienia zostaje 262. Sam napis by wszedł — ale grot
	   z odstępem 16 dokłada 36 px i całość wychodzi na 286. Domena łamała się
	   wtedy w środku, na „abonament.formimpress” i „.com”, a grot zostawał
	   samotnie przy pierwszym wierszu.
	   Przy 14 px i odstępie 8 całość zajmuje 247 px i mieści się z zapasem. */
	font-size: var(--foreto-font-size-card);
	gap: var(--foreto-space-2);

	/* Gdyby kiedyś trafił się adres dłuższy niż wiersz, ma się złamać PO KROPCE,
	   a nie w środku członu: „anywhere” z reguły ogólnej pozwala na jedno
	   i drugie, a w adresie kropka jest jedynym sensownym miejscem podziału. */
	overflow-wrap: normal;
}


/* =============================================================================
   11. Blog — .foreto-collection--blog
   ========================================================================== */

/* Wpis nie dostaje .foreto-card: w makiecie stoi bez tła i bez cienia, więc
   kartą jest sam układ. */
.foreto-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
}

/* Kadr odsuwa się o krok więcej niż wiersze tekstu — przy równym odstępie
   tytuł czyta się jak podpis wtopiony w obraz. */
.foreto-post-card__media {
	width: 100%;
	margin-bottom: var(--foreto-space-2);
	aspect-ratio: var(--wp--preset--aspect-ratio--16-9);
	object-fit: cover;
}

.foreto-post-card__more {
	margin-top: auto;
}


/* =============================================================================
   12. Wezwanie do działania — .foreto-cta

   Bez ani jednej reguły. Pasmo końcowe rysuje dziś kitowy CtaBand: własny
   komponent z tłem z pulsujących kwadratów, dwiema kolumnami powyżej pełnej
   szerokości i jednym nagłówkiem zamiast firmowego podziału na dwa kolory.
   Stało tu wcześniej złożenie z sekcji, nagłówka sekcji i grupy przycisków —
   sześć kopii w sześciu szablonach, które zdążyły się już różnić odstępami.

   Sekcja zostaje pusta zamiast zniknąć, żeby numeracja niżej się nie przesunęła
   i żeby powód usunięcia dało się tu znaleźć.
   ========================================================================== */


/* =============================================================================
   Ruch

   base.css skraca czasy przejść do zera, ale nie cofa samego przekształcenia —
   bez tego grot i kadr nadal skaczą, tylko natychmiast.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.foreto-segment-card, .foreto-product-card, .foreto-post-card):is(:hover, :focus-visible) .foreto-btn__arrow {
		transform: none;
	}
}

/* Sekcje stoją flush: rytm pionowy niesie sama sekcja (padding-block), więc
   odstęp bloku WordPressa między nimi dokładałby się do niego. */
.foreto-section + .foreto-section {
	/* Waga celowo dwie klasy: reguła odstępu bloku w rdzeniu to
	   `:root :where(.is-layout-constrained) > *`, czyli jedna klasa —
	   selektor w :where() by z nią przegrał. */
	margin-block-start: 0;
}

/* KONTROLKA Z RAMKĄ MUSI BYĆ WYPEŁNIONA. Kit daje pozycji zawężeń
   `background: transparent`, bo pisał ją na gładką białą stronę — a odkąd
   strona ma pod spodem teksturę, kwadraty wchodzą do ŚRODKA pozycji i czytają
   się jak brud na przycisku. Ramka 3:1 mówi „to jest kontrolka", więc jej
   wnętrze ma być polem, a nie oknem na to, co leży pod stroną.

   Wypełnienie idzie kolorem strony, nie bielą wpisaną wprost: na paśmie
   i w ciemnym motywie pozycja ma wtedy kolor swojego podłoża, a nie obcy. */
.foreto-facets__opt:not([aria-pressed="true"]) {
	background: var(--foreto-page);
}

/* TO SAMO NA NAJWYŻSZYM POZIOMIE DOKUMENTU. Rdzeń układa nagłówek, treść
   i stopkę jako trzy bloki w .wp-site-blocks i wstawia między nie ten sam
   odstęp bloku (24 px). Zmierzone: 24 px między nagłówkiem a pierwszą sekcją
   i 24 px między pasmem końcowym a stopką — biała szpara w miejscu, w którym
   pasmo ma dochodzić do stopki.

   Zerujemy tu, a nie przez blockGap w theme.json: tam odstęp obowiązuje też
   WEWNĄTRZ treści, gdzie jest potrzebny — to on rozdziela akapity artykułu. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Nagłówki schodzą O STOPIEŃ SKALI, nie płynnym clamp-em: system ma siedem
   stopni i nic pomiędzy, a kit robi dokładnie to samo z nazwą kafla
   (32 → 24 → 16 na progach). Bez tego h1 64 px nie mieści się w 375 px
   i tekst jest ucinany. */
@media (max-width: 1181px) {
	h1 {
		font-size: var(--wp--preset--font-size--h-2);
		line-height: var(--wp--custom--line--h-2);
	}
}

@media (max-width: 640px) {
	h1 {
		font-size: var(--wp--preset--font-size--h-3);
		line-height: var(--wp--custom--line--h-3);
	}

	h2 {
		font-size: var(--wp--preset--font-size--h-3);
		line-height: var(--wp--custom--line--h-3);
	}

	h3 {
		font-size: var(--wp--preset--font-size--h-4);
		line-height: var(--wp--custom--line--h-4);
	}
}

/* =============================================================================
   Bloki własne: sekcja i jej nagłówek
   ========================================================================== */

/* Rytm wewnątrz sekcji. Blok foreto/section renderuje zwykły <div>, więc nie
   dostaje odstępu bloku od WordPressa — i dobrze: odstęp między nagłówkiem
   a treścią sekcji jest decyzją systemu, nie ustawieniem redaktora. */
.foreto-section__inner > * + * {
	margin-block-start: var(--foreto-space-6);
}

.foreto-section-head + * {
	margin-block-start: var(--foreto-space-7);
}

.foreto-section-head__lead {
	/* Miara czytelnicza: lead ciągnący się przez pełne 1134 px ma ~150 znaków
	   w wierszu, czyli dwa razy powyżej progu czytelności. */
	max-width: var(--foreto-prose-max);
	margin-block-start: var(--foreto-space-3);
}

/* Odsyłacz „więcej" pod kolekcją odsuwa się mocniej niż elementy w środku:
   to wyjście z sekcji, nie kolejny jej wiersz. */
.foreto-collection + .wp-block-foreto-button-group,
.foreto-steps + .wp-block-foreto-button-group,
.foreto-companies + .wp-block-foreto-button-group {
	margin-block-start: var(--foreto-space-7);
}

/* Usterka kitu, obejście na poziomie motywu: .foreto-link ma wpisany
   color: var(--foreto-ink) i nie ma nadpisania w kontekście czerwieni, więc
   na czerwonym paśmie link jest czarny, a --foreto-link-hover (też ink)
   przestaje cokolwiek zmieniać. Do załatania w źródle kitu. */
[data-tone="accent"] .foreto-link,
.foreto-section--accent .foreto-link {
	color: var(--foreto-text-on-accent);
}

/* Sierota w siatce. Gdy kolekcja ma mniej pozycji niż kolumn — jeden dostępny
   produkt, dwie realizacje w powiązanych — karty wiszą przy lewej krawędzi
   z dziurą po prawej. Kolumna schodzi wtedy do zmierzonej szerokości 358,
   a rząd jest środkowany. Statyk rozwiązywał to klasą .u-orphan-center;
   :has() robi to samo bez klasy w znacznikach. */
/* Lista spółek Grupy jest tą samą siatką trzykolumnową, tylko pod inną nazwą —
   po zdjęciu kart bez nazwy zostały dwie i wisiały przy lewej krawędzi z pustą
   trzecią kolumną. Reguła obejmuje więc obie rodziny list. */
.foreto-collection:has(> li:last-child:nth-child(1)),
.foreto-collection:has(> li:last-child:nth-child(2)),
.foreto-companies:has(> li:last-child:nth-child(1)),
.foreto-companies:has(> li:last-child:nth-child(2)) {
	grid-template-columns: repeat(auto-fit, minmax(0, 358px));
	justify-content: center;
}

/* Tytuł karty usługi rezerwuje DWA wiersze niezależnie od długości. Bez tego
   „Aplikacje mobilne" (jeden wiersz) i „Rozwiązania e-commerce" (dwa) zaczynają
   listę na różnej wysokości i rząd kart traci wspólną linię. Dłuższy tytuł
   nadal rośnie — to rezerwa minimalna, nie obcięcie. */
.foreto-service-card__name {
	min-height: calc(2 * var(--foreto-line-h4));
}

/* Łamanie wierszy: dwie różne reguły do dwóch różnych zadań.

   balance wyrównuje DŁUGOŚĆ wierszy w bloku i przeglądarki liczą je tylko do
   kilku — dlatego trafia na tytuły i nagłówki, gdzie wierszy jest dwa lub trzy.
   Bez niego „Aplikacje i systemy / dedykowane" ma pierwszy wiersz pełny,
   a drugi na jedno słowo.

   pretty pilnuje OSTATNIEGO wiersza, żeby nie została w nim sierota — to
   zadanie dla prozy, czyli dla zajawek kart i cytatów.

   POPRAWKA: lead sekcji stał niżej, przy pretty, z uzasadnieniem „wyrównywanie
   długości nic tu nie daje". Zmierzone — daje. W kolumnie podziału (552 px)
   lead łamał się 469 + 82, czyli pełny wiersz i ogonek z dwóch słów; z balance
   wychodzi 264 + 287. Lead jest z definicji krótki (najdłuższy w serwisie ma
   trzy wiersze), a przeglądarki przestają balansować dopiero powyżej sześciu,
   więc mieści się w tym, do czego balance służy.

   DRUGA POPRAWKA, do zdania powyżej: „zajawki zostają przy pretty, bo bywają
   długie" jest prawdą o zajawkach W OGÓLE, ale nie o zajawce realizacji.
   Ta jest PRZYCIĘTA do czterech wierszy (trzech w wąskiej kolumnie), więc
   z definicji nie wyjdzie poza próg, na którym balansowanie wysiada. Zmierzone
   na /realizacje/ przy pretty: 407 + 102, 384 + 195, 368 + 106, 354 + 122 —
   same pełne wiersze z ogonkiem. Kryterium nie jest więc „lead czy zajawka",
   tylko „czy tekst ma ograniczoną liczbę wierszy".

   Obie degradują się bezgłośnie: przeglądarka bez wsparcia łamie jak dotąd. */
.foreto-section-head__lead,
.foreto-page-head__lead,
.foreto-case__excerpt,
.foreto-section-title,
.foreto-service-card__name,
.foreto-product-card__name,
.foreto-segment-card__name,
.foreto-post-card__name,
.foreto-timeline__heading,
.foreto-stat__label {
	text-wrap: balance;
}

.foreto-segment-card__text,
.foreto-product-card__text,
.foreto-post-card__excerpt,
.foreto-quote__text,
.foreto-company__text {
	text-wrap: pretty;
}

/* =============================================================================
   8a. Referencje jako karuzela — .foreto-testimonials

   To DRUGI komponent wypowiedzi obok kitowego Quote i różnica jest w zadaniu,
   nie w rysunku. Quote jest pełnej szerokości: znak cudzysłowu przy krawędzi
   kontenera, jedna wypowiedź wpięta w treść case study. Tutaj wypowiedzi stoją
   po trzy i mają się PORÓWNYWAĆ, więc każda dostaje własne pudełko.

   Pudełko, awatar i pole trafienia strzałki są kitowe (Card, Avatar,
   IconButton). Sekcji zostaje sam układ karuzeli: ile kart w widoku, gdzie
   stoją strzałki i która karta schodzi niżej.
   ========================================================================== */

.foreto-testimonials {
	--foreto-tm-visible: 3;
	/* Obniżenie karty środkowej. Wartość jest z makiety, ale nie jest okrągła
	   przez przypadek: to mniej więcej wysokość awatara minus jego odstęp,
	   czyli karta schodzi o tyle, żeby jej podpis stanął w miejscu cytatu
	   sąsiadki. Mniej i ruch ginie, więcej i rząd się rozjeżdża. */
	--foreto-tm-offset: 72px;
	--foreto-tm-gap: var(--foreto-space-6);
	/* Strzałki stoją POZA kontenerem, więc sekcja musi im oddać margines
	   wewnętrzny — inaczej wychodzą poza krawędź okna i rozpychają dokument
	   w poziomie. Pole trafienia to kitowy IconButton: 24 + 2 × 15 = 54. */
	--foreto-tm-nav: 54px;
	/* Ile cień kitowej karty wystaje pod jej dolną krawędź. Wyliczone z samego
	   cienia (0 38px 36px -15px): przesunięcie 38 + połowa rozmycia 18 − rozlanie
	   15 = 41. Zaokrąglone w górę do kroku siatki, bo tor przycina wszystko, co
	   nie zmieści się w jego dopełnieniu, a ścięty cień widać. */
	--foreto-tm-bleed: 44px;
	position: relative;
	/* PRZECIWIEŃSTWO logotypów: tam .foreto-carousel przycina, bo pozycje
	   wystające poza tor rozpychały dokument. Tutaj przycinanie zjadałoby
	   strzałki, które z założenia stoją POZA kontenerem. Rolę przycinania
	   przejmuje sam tor (overflow-x: auto), więc dokument i tak jest
	   bezpieczny — sprawdzone na każdej szerokości. */
	overflow: visible;
}

/* Szerokość karty z liczby widocznych: pole kontenera bez odstępów, podzielone
   przez tę liczbę. Odstępów jest o jeden mniej niż kart, bo są tylko MIĘDZY
   nimi — na krańcach toru ich nie ma. */
.foreto-testimonials--enhanced .foreto-testimonials__track > *,
.foreto-carousel--enhanced .foreto-testimonials__track > * {
	flex: 0 0 calc(
		(100% - (var(--foreto-tm-visible) - 1) * var(--foreto-tm-gap))
		/ var(--foreto-tm-visible)
	);
	scroll-snap-align: center;
}

.foreto-carousel--enhanced .foreto-testimonials__track {
	gap: var(--foreto-tm-gap);
	align-items: start;
	/* Zapas na kartę, która zeszła niżej, PLUS na jej cień. Jeden i na torze:
	   to on przycina (overflow-x: auto odbiera pionowi przepływ), więc zapas
	   dołożony piętro wyżej niczego nie chroni. */
	padding-bottom: calc(var(--foreto-tm-offset) + var(--foreto-tm-bleed));
}

/* Dopełnienie RÓWNE, wbrew kitowemu --pad (40 na 48).

   Powód jest wymiarowy, nie estetyczny: przy trzech kartach w rzędzie karta
   ma 351 px, więc 2 × 48 zostawia 255 na treść. Awatar kitu ma 100, odstęp 32,
   czyli na podpis zostaje 123 — za mało, i siatka zaczyna ŚCISKAĆ awatara
   (zmierzone 80 zamiast 100). Przy 40 na 40 i odstępie 24 zostaje 147, awatar
   ma pełne 100, a nazwiska mieszczą się w wierszu. Projekt zakłada tu zresztą
   dokładnie 40. */
.foreto-testimonial {
	padding: var(--foreto-space-6);
	/* Czas z przełącznika toru, a domyślnie z systemu — pętla zeruje go na
	   czas skoku, żeby podmiana węzła nie odegrała obniżenia drugi raz. */
	transition: transform var(--foreto-carousel-motion, var(--foreto-transition-base));
}

/* Klasę przekłada skrypt między kartami przy przewijaniu. Bez skryptu nie
   przychodzi wcale i rząd stoi równo — czyli układ jest poprawny również
   wtedy, a obniżenie jest wzbogaceniem, nie warunkiem czytelności. */
.foreto-testimonial.is-center {
	transform: translateY(var(--foreto-tm-offset));
}

/* Podpis POD awatarem, nie obok — i to jest wniosek z pomiaru, nie preferencja.

   Przy trzech kartach w rzędzie karta ma 351 px, więc po dopełnieniu i awatarze
   na tekst zostaje 147. Zmierzone potrzeby: nazwiska 128–184 px, a stanowiska
   do 391 („Monster Media Group, Demotywatory.pl, Pewex.pl”). Obok awatara
   łamały się trzy z pięciu nazwisk i każde dłuższe stanowisko.

   Projekt statyka wpada w to samo i ratuje się dwoma sposobami: white-space:
   nowrap na szerokości makiety (nazwisko WYSTAJE wtedy poza dopełnienie karty)
   oraz zejściem podpisu pod awatara przy węższych oknach. Bierzemy to drugie,
   bo działa na każdej szerokości i niczego nie wypycha poza kartę: podpis ma
   pełne 271 px i nazwiska mieszczą się w wierszu. */
.foreto-testimonial__figure {
	display: grid;
	justify-items: start;
	margin: 0;
}

.foreto-testimonial__avatar {
	margin-bottom: var(--foreto-space-4);
}

.foreto-testimonial__who {
	display: flex;
	flex-direction: column;
}

.foreto-testimonial__name {
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--foreto-line-body);
}

.foreto-testimonial__role {
	color: var(--foreto-text-muted);
	line-height: var(--foreto-line-body);
}

/* Cytat wraca pod awatara, przez całą szerokość karty — dwie kolumny są
   potrzebne podpisowi, nie tekstowi. */
.foreto-testimonial__quote {
	justify-self: stretch;
	margin: var(--foreto-space-6) 0 0;
	font-size: var(--foreto-font-size-card);
	text-wrap: pretty;
}

/* Strzałki flankują karty, a nie stoją pod nimi — sekcja ma trzy karty
   w rzędzie i sterowanie po bokach czyta się jako „dalej w tę stronę". */
.foreto-testimonials .foreto-carousel__nav {
	position: absolute;
	top: calc((100% - var(--foreto-tm-offset)) / 2);
	left: 0;
	right: 0;
	justify-content: space-between;
	margin-top: 0;
	/* Same guziki mają być klikalne; pas między nimi leży nad kartami. */
	pointer-events: none;
}

.foreto-testimonials .foreto-carousel__btn {
	pointer-events: auto;
	/* Sam grot w czerwieni, bez pola — guzik stoi nad kartą i tło kłóciłoby się
	   z jej krawędzią. Pole trafienia zostaje pełne (kitowe 24 + 2 × 15 = 54),
	   bo to sterowanie sekcji, a nie drobiazg przy tytule. */
	color: var(--foreto-text-accent);
}

.foreto-testimonials .foreto-carousel__btn[data-direction="prev"] {
	margin-left: calc(-1 * var(--foreto-tm-nav));
}

.foreto-testimonials .foreto-carousel__btn[data-direction="next"] {
	margin-right: calc(-1 * var(--foreto-tm-nav));
}

/* Poza kontenerem strzałki mieszczą się dopóki po bokach zostaje wolne pole.
   Przy węższym oknie wracają do środka, zamiast wychodzić poza krawędź. */
@media (max-width: 1321px) {
	.foreto-testimonials .foreto-carousel__btn[data-direction="prev"],
	.foreto-testimonials .foreto-carousel__btn[data-direction="next"] {
		margin-inline: 0;
	}
}

@media (max-width: 1181px) {
	.foreto-testimonials {
		--foreto-tm-visible: 2;
	}
}

/* Jedna karta w widoku, a wtedy obniżanie tej „na środku" nie ma czego
   odróżniać — schodziłaby każda po kolei. */
@media (max-width: 900px) {
	.foreto-testimonials {
		--foreto-tm-visible: 1;
		--foreto-tm-offset: 0px;
	}
}

/* Awatar z inicjałów — wypełnienie krążka, gdy nie ma zdjęcia.

   Rysunek koła i wymiar niesie kitowy Avatar; tutaj dochodzi tylko to, czym
   krążek jest wypełniony. Pasmo zamiast czerwieni: przy trzech kartach
   w rzędzie trzy czerwone krążki przeciągnęłyby uwagę na osoby, a treścią
   sekcji są wypowiedzi. Litery w kolorze tekstu dają na paśmie 19:1. */
.foreto-avatar--initials {
	display: grid;
	place-items: center;
	background: var(--foreto-surface-band);
	color: var(--foreto-ink);
	font-size: var(--foreto-font-size-h4);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1;
	user-select: none;
}

/* =============================================================================
   12. Poprawki komponentów kitu w nowych kontekstach

   Obie reguły zastępują style wpisywane wcześniej w znacznik. Powód wspólny:
   kit projektował te komponenty pod jeden układ, a my używamy ich w drugim.
   ========================================================================== */

/* CheckList w siatce. Kit rozsuwa pozycje marginesem (li + li), bo zakłada
   jedną kolumnę. W siatce odstęp niesie row-gap, a margines dokładałby się do
   niego i — co gorsza — spadał także na pozycję otwierającą drugą kolumnę,
   która wizualnie jest pierwsza w swoim rzędzie. */
.foreto-checklist.foreto-grid li + li {
	margin-top: 0;
}

/* Pytanie w akordeonie JEST nagłówkiem (FAQ musi dać się przejrzeć nawigacją
   po nagłówkach), ale stopień pisma należy do paska rozwijanego, nie do skali
   nagłówków. Bez tego theme.json narzuca h3 przez :root :where(h3) i wariant
   data-size="sm" oraz kitowe złamanie poniżej 760 px przestają działać.

   Selektor przez rodzica, bo sama klasa ma tę samą wagę co reguła z theme.json
   i o wyniku decydowałaby kolejność arkuszy. */
.foreto-disclosure__summary .foreto-disclosure__question {
	margin: 0;
	font: inherit;
	text-transform: inherit;
}

/* =============================================================================
   13. Sekcja bez zawartości

   Szablony rysują sekcje, których treść przychodzi z relacji wpisu: „Wybrane
   realizacje", „Najczęściej realizujemy to dla". Gdy relacja jest pusta, blok
   kolekcji nie zwraca nic — ale nagłówek sekcji już się wydrukował i zostaje
   napis nad pustym miejscem.

   Rozwiązanie deklaratywne zamiast warunku w szablonie: sekcja, w której
   nagłówek jest JEDYNYM dzieckiem, nie ma czego zapowiadać. Reguła sama się
   cofa — w chwili, gdy relacja dostanie pierwszą pozycję, sekcja wraca.

   display: none, a nie sama przezroczystość: nagłówek opisujący pustkę jest
   szumem także dla czytnika ekranu.
   ========================================================================== */

.foreto-section:has(> .foreto-section__inner > .foreto-section-head:only-child) {
	display: none;
}

/* =============================================================================
   14. Filtry listingu — .foreto-facets

   Panel rysuje kitowy FacetFilter, więc sekcji zostaje wyłącznie odstęp do
   siatki pod spodem. Wcześniej stały tu rzędy przycisków własnej roboty; kit
   dostał komponent, który robi to samo lepiej, i to on tu teraz stoi.
   ========================================================================== */

.foreto-facets-box {
	margin-bottom: var(--foreto-space-8);
}

/* =============================================================================
   15. Nagłówek podstrony — .foreto-page-head

   Wyśrodkowany blok otwierający listingi i podstrony informacyjne. Tytuł,
   okruszki i lead; znacznik przewijania jest osobnym blokiem, bo na części
   podstron stoi dopiero pod treścią, a nie tuż pod leadem.

   Prawie wszystko przychodzi z kitu: .foreto-section-title jest domyślnie
   wyśrodkowany i wersalikami (modyfikator --start dopiero go zlewa w lewo),
   a .foreto-scroll-mark niesie glif. Sekcji zostaje układ pionowy i szerokość
   leadu.
   ========================================================================== */

/* Bez wspólnego gap: odstęp tytuł→okruszki jest MNIEJSZY niż okruszki→lead,
   bo ścieżka należy do tytułu, a lead jest już osobną myślą. Jeden gap
   zrównałby oba i zgubił tę różnicę. */
.foreto-page-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Okruszki idą POD tytułem i wyśrodkowują się razem z nim. Na pozostałych
   podstronach zostają przy lewej krawędzi — stąd reguła zawężona do wnętrza
   nagłówka, a nie zmiana samego komponentu okruszków. */
.foreto-page-head .foreto-crumbs {
	margin-top: var(--foreto-space-5);
}

.foreto-page-head .foreto-crumbs__list {
	justify-content: center;
}

/* Semantycznie h1, ale w skali h2 — i to nie jest pomyłka.
   Największy stopień niesie hasło na stronie głównej i tam ma zostać:
   podstrona z tytułem tej samej wielkości co hasło zrównuje ze sobą dwie
   rzeczy o różnej wadze. Ta sama decyzja stoi w statyku.

   Klasa własna zamiast kitowego .foreto-h2, bo ta sama reguła zdejmuje
   też margines nagłówka i nie ma sensu wieszać na elemencie dwóch klas,
   z których jedna nadpisuje drugą. */
.foreto-page-head__title {
	margin: 0;
	font-size: var(--foreto-font-size-h2);
	line-height: var(--foreto-line-h2);
}

/* Miara czytelnicza, nie szerokość kontenera: lead ma dwa–trzy zdania i przy
   pełnych 1134 px wiersz robi się za długi, żeby wzrok trafiał w następny. */
/* `text-wrap` NIE STOI TUTAJ, tylko w grupie balansowanej wyżej — razem
   z leadem nagłówka sekcji, bo to ten sam gatunek tekstu i ta sama długość.
   Wcześniej było tu `pretty`, które usuwa sierotę, ale nie wyrównuje wierszy:
   przy dwóch wierszach drugi zostawał wyraźnie krótszy od pierwszego. */
.foreto-page-head__lead {
	max-width: 52rem;
	margin: var(--foreto-space-7) 0 0;
}

/* --- Rytm prozy w sekcji ---------------------------------------------------
   DWA AKAPITY OBOK SIEBIE STYKAŁY SIĘ WPROST — zmierzone zero pikseli. Kit
   zeruje marginesy `p` (i słusznie: komponenty rozstawiają się same), a nic
   ich potem nie przywracało dla zwykłej treści. Widać to było wszędzie tam,
   gdzie redakcja postawiła drugi akapit: /o-nas/, /jak-pracujemy/,
   /grupa-foreto/, realizacja, usługa — pięć podstron, ten sam brak.

   Odstęp 24 jest z makiety: kolumna tekstu w Kariera.dc.html stoi na
   `gap: var(--space-4)`.

   Reguła celuje w SĄSIEDZTWO bloków treści, nie w ich rodzica: grupa bywa
   raz blokiem, raz flexem z własną rynną (np. .foreto-split__stack), więc
   margines nałożony na dzieci rodzica dodawałby się tam do rynny.          */
.foreto-section__inner :where(
	.wp-block-paragraph,
	.wp-block-list,
	.wp-block-table,
	.wp-block-quote
) + :where(
	.wp-block-paragraph,
	.wp-block-list,
	.wp-block-table,
	.wp-block-quote
) {
	margin-block-start: var(--foreto-space-4);
}

/* --- Metryka realizacji w nagłówku — .foreto-case-meta --------------------
   Blok nie miał ANI JEDNEJ reguły: rysowała go przeglądarka domyślnym stylem
   listy opisowej, czyli wcięciem `dd`. Nie było tego widać, dopóki nagłówek
   był wyrównany do lewej — po wyśrodkowaniu metryka została jedynym
   elementem poza osią, w dodatku z wcięciem bez powodu.

   Wiersz idzie w jedną linię (nazwa i wartość obok siebie), bo to metryka,
   nie tabela: przy trzech pozycjach dwie kolumny robią pustkę po lewej. */
.foreto-case-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--foreto-space-2);
	margin: var(--foreto-space-5) 0 0;
	font-size: var(--foreto-font-size-card);
	line-height: var(--foreto-msg-line);
}

.foreto-case-meta__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--foreto-space-2);
}

.foreto-case-meta dt { font-weight: 700; }
.foreto-case-meta dd { margin: 0; color: var(--foreto-text-muted); }

/* Znacznik rysowany OBRAZEM, nie maską: jest dwukolorowy (górny daszek czarny,
   dolny czerwony), a maska niesie jeden kolor i dawała go w całości czerwonym.
   base.css nadaje obrazkom display: block, więc środkuje go margin-inline
   z kitu (.foreto-scroll-mark > *), nie text-align rodzica. */
.foreto-scroll-mark__image {
	width: 30px;
	height: 27px;
}

/* Odstęp nad znacznikiem zależy od tego, co nad nim stoi: po akapicie
   wystarczy krok kitu, po siatce kart potrzeba wyraźnie więcej, żeby znacznik
   nie czytał się jako część ostatniego rzędu. */
.foreto-scroll-mark--tight {
	--foreto-mark-gap: var(--foreto-space-4);
}

.foreto-scroll-mark--loose {
	--foreto-mark-gap: var(--foreto-space-9);
}

/* Krok pośredni: pod leadem, ale przed treścią, która jeszcze nie jest kartą.
   Tyle podaje specyfikacja widoku kontaktu i tyle wychodzi ze skali. */
.foreto-scroll-mark--roomy {
	--foreto-mark-gap: var(--foreto-space-5);
}

/* =============================================================================
   16. Nagłówek podstrony i sekcja pod nim — .foreto-section--head, --joined

   ODSTĘP PO NAGŁÓWKU DAJE TO, CO POD NIM. Wcześniej dokładały go obie strony:
   80 od dołu nagłówka plus 128 od góry sekcji to 208 px pustki między tytułem
   a pierwszą treścią (zmierzone 203 na /o-nas/). Jeden odstęp z dwóch źródeł
   to odstęp, nad którym nikt nie panuje: pod nagłówkiem stoi na części
   podstron post-content, a jego blokom szablon nie ma jak przypisać wariantu.

   Tak samo robi to makieta: `Podstrona.dc.html` daje nagłówkowi
   `padding: 64px 24px 0`, a pierwszej sekcji pełne 80 od góry.

   --head — nagłówek podstrony: 80 od góry, ZERO od dołu.
   --joined — sekcja ciągnąca dalej myśl nagłówka, a nie otwierająca nową:
     80 od góry, bo nagłówek już nic nie dokłada, i 128 od dołu, bo pod spodem
     wątek naprawdę się zmienia.

   To WARIANTY, nie zmiana domyślnego rytmu: sekcja otwierająca własny wątek
   nadal dostaje pełne 128 z obu stron. Nagłówek, który niesie w tej samej
   sekcji także treść (listingi taksonomii), zostaje przy rytmie domyślnym —
   dół należy tam do treści, nie do nagłówka.
   ========================================================================== */

.foreto-section--head {
	/* 72, jak .fi-naglowek-strony — etykieta 200 px od góry strony, jak w hero. */
	padding-block: 72px 0;
}

/* Rdzeń rozstawia bloki w toku o 24 px i między nagłówkiem a post-content ten
   odstęp zostawał — czyli 128 od sekcji plus 24 znikąd. Waga celowo dwie
   klasy: reguła rdzenia to `:root :where(.is-layout-*) > *`, czyli 0,1,0,
   a remis rozstrzygałaby kolejność arkuszy. */
.foreto-section.foreto-section--head + * {
	margin-block-start: 0;
}

.foreto-section--joined {
	padding-top: var(--foreto-space-9);
}

/* OBRAZEK WYRÓŻNIAJĄCY W SEKCJI BEZ RYTMU DAJE SOBIE ODSTĘP SAM.
   `rhythm: none` znaczy „zero dopełnienia" i tak ma zostać — sekcja bez rytmu
   bywa potrzebna. Ale gdy stoi w niej sam obrazek wyróżniający, a nad nią
   nagłówek podstrony (który od tej zmiany nie dokłada już nic od dołu), zero
   spotyka zero: zmierzone 0 px między znacznikiem przewijania a zdjęciem,
   które przez to zlepiało się z nagłówkiem.

   Reguła celuje w BRAK KLASY RYTMU, nie w nazwę szablonu: `foreto-section`
   pojawia się tylko wtedy, gdy rytm jest inny niż `none`, więc warunek czyta
   się wprost jako „sekcja, która odstępu nie daje". Tam, gdzie rytm jest
   (blog stawia ten sam obrazek w sekcji `joined`), reguła nie wchodzi i nic
   się nie dubluje.

   Zawężone do obrazka wyróżniającego, a nie do wszystkich obrazów: zdjęcia
   w prozie rozstawia rytm akapitów, a kafle galerii — jej siatka. Wspólny
   margines dla każdego `img` dokładałby się do obu.                        */
.wp-block-foreto-section:not(.foreto-section) > .foreto-section__inner > .wp-block-post-featured-image {
	margin-block: var(--foreto-space-9);
}

/* =============================================================================
   17. Widok kontaktu — .foreto-split, .foreto-contact-card, .foreto-people

   Trzy pojemniki, których kit nie ma, złożone z jego wartości. Karty, tony,
   pola i kroki przychodzą z kit.css; tutaj stoi wyłącznie to, co je układa
   obok siebie.
   ========================================================================== */

/* Siatka ze źródła: 486 + 72 + 528 = 1086 przy kontenerze 1134. Kolumny podane
   jako PODSTAWA flexa, nie w procentach — przy pełnym kontenerze rozwiązują się
   w wymiar z makiety, a w węższym niosą tę samą proporcję i zawijają się bez
   ani jednego przełamania.

   Nadmiar 48 px z makiety nie stoi przy krawędzi zewnętrznej: w źródle to
   „powietrze" przylega do prawej krawędzi, ale po odwróceniu osi (formularz po
   prawej) lądowałoby w środku, obok rynny 72 — czyli martwy pas 120 px zamiast
   odstępu. Dzieli się po równo między kolumny, co trzyma proporcję źródła
   z dokładnością 4‰. */
.foreto-split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foreto-space-9) 72px;
}

.foreto-split > * {
	min-width: 0;
	flex: 1 1 486px;
}

/* Pierwsze dziecko jest szersze, bo pierwsze w treści stoi to, co ważniejsze —
   kolejność w znaczniku niesie wagę, nie tylko układ. */
.foreto-split > :first-child {
	flex-basis: 528px;
}

/* Odwrócenie OSI, nie zamiana miejsc w dokumencie: kolejność czytania zostaje
   ta sama dla czytnika ekranu i dla tabulatora, zmienia się tylko strona,
   po której kolumna staje na ekranie. */
.foreto-split--reverse {
	flex-direction: row-reverse;
}

/* Kolumna, w której stoi kilka bloków jeden pod drugim. Odstęp 48 jest większy
   niż wewnątrz karty (24), bo rozdziela dwa OSOBNE pojemniki, a nie części
   jednego. */
.foreto-split__stack {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-7);
}

/* --- Karta „bez formularza" -------------------------------------------- */

.foreto-contact-card {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-6);
	padding: var(--foreto-space-6);
}

.foreto-contact-card__head {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-4);
}

/* Stopień h2 ze skali, nie z nagłówka sekcji: karta stoi w kolumnie 486 i pełny
   stopień strony rozpychałby ją na trzy wiersze. */
.foreto-contact-card__title {
	margin: 0;
	font-size: var(--foreto-font-size-h2);
	line-height: var(--foreto-line-h2);
	font-weight: var(--wp--custom--weight--bold);
}

/* Druga linia tytułu karty: samo złamanie wiersza, bez zmiany koloru — cały
   tytuł jest biały. Kolor niesie tu tło karty, nie litery. */
.foreto-contact-card__break {
	display: block;
}

.foreto-contact-card__lead,
.foreto-contact-card__address {
	margin: 0;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
}

.foreto-contact-card__lead {
	color: var(--foreto-text-muted);
	text-wrap: balance;
}

.foreto-contact-card__address {
	font-style: normal;
	margin-bottom: var(--foreto-space-3);
	text-wrap: pretty;
}

.foreto-contact-card__office + .foreto-contact-card__office {
	margin-top: var(--foreto-space-5);
}

.foreto-contact-card__lines {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
}

/* Prefiks jest POGRUBIENIEM, nie kolorem: na czerwonej karcie czerwony prefiks
   nie istnieje, a pogrubienie działa na obu tłach tak samo. */
.foreto-contact-card__prefix {
	font-weight: var(--wp--custom--weight--bold);
}

.foreto-contact-card__hours {
	margin-top: var(--foreto-space-2);
	font-size: var(--foreto-font-size-card);
	line-height: var(--foreto-space-4);
	color: var(--foreto-text-muted);
}

.foreto-contact-card__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foreto-space-3);
	margin: var(--foreto-space-3) 0 0;
	padding: 0;
	list-style: none;
}

/* Cel kliknięcia 48 przy znaku 36 — glif jest mniejszy od celu, tak jak
   w całym systemie. */
.foreto-contact-card__social {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: inherit;
}

.foreto-contact-card__social:hover .foreto-contact-card__mark,
.foreto-contact-card__social:focus-visible .foreto-contact-card__mark {
	opacity: .6;
}

/* Znak siecią MASKĄ w kolorze tekstu, nie kolorowym logotypem: na czerwonej
   karcie firmowe barwy (niebieski Facebooka, gradient Instagrama) nie mają
   kontrastu i rozbijają jedyne dwa kolory, jakie ta karta ma. Plik podaje
   render zmienną, bo lista profili jest ustawieniem witryny, nie klasą. */
.foreto-contact-card__mark {
	width: 36px;
	height: 36px;
	background-color: currentColor;
	transition: opacity var(--foreto-transition-base);
	-webkit-mask: var(--foreto-social-icon) no-repeat center / contain;
	        mask: var(--foreto-social-icon) no-repeat center / contain;
}

/* --- Osoby kontaktowe --------------------------------------------------- */

.foreto-people {
	padding: var(--foreto-space-6);
}

/* Wariant bez karty: sama lista osób, gdy pasmo niesie już sekcja, a nagłówek
   stoi w drugiej kolumnie podziału. Odstęp między osobami zostaje — bez niego
   dwa zdjęcia 116 px stykają się krawędziami. */
.foreto-people--plain {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-6);
	padding: 0;
}

.foreto-people__title {
	margin: 0 0 var(--foreto-space-3);
	font-size: var(--foreto-font-size-h2);
	line-height: var(--foreto-line-h2);
	font-weight: var(--wp--custom--weight--bold);
}

.foreto-people__lead {
	margin: 0 0 var(--foreto-space-4);
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
	color: var(--foreto-text-muted);
	text-wrap: balance;
}

.foreto-contact-person {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-4);
}

.foreto-contact-person + .foreto-contact-person {
	margin-top: var(--foreto-space-6);
}

/* Wysokość zdjęcia idzie za BLOKIEM TEKSTU, nie odwrotnie: dwa wiersze
   kontaktu mierzą 116, trzy (z profilem) 140. Kwadrat dopasowuje się do nich,
   bo to on wyznacza wysokość wizytówki. */
.foreto-contact-person__photo {
	flex: 0 0 auto;
	width: 116px;
	height: 116px;
}

.foreto-contact-person--tall .foreto-contact-person__photo {
	width: 140px;
	height: 140px;
}

.foreto-contact-person__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-1);
}

.foreto-contact-person__who {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--foreto-space-2);
}

.foreto-contact-person__name {
	margin: 0;
	font-size: var(--foreto-font-size-h4);
	line-height: var(--foreto-line-h4);
	font-weight: var(--wp--custom--weight--bold);
	text-wrap: balance;
}

.foreto-contact-person__role {
	margin: 0;
	font-size: var(--foreto-font-size-card);
	line-height: var(--foreto-space-5);
	color: var(--foreto-text-muted);
	text-wrap: balance;
}

.foreto-contact-person__row {
	margin: 0;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
}

/* Prefiks czerwony i pogrubiony — na szarym paśmie czerwień ma 5,03:1, więc
   niesie znaczenie sama, a pogrubienie jest drugim nośnikiem. */
.foreto-contact-person__prefix {
	color: var(--foreto-text-accent);
	font-weight: var(--wp--custom--weight--bold);
}

/* Przy jednej kolumnie zdjęcie i tekst przestają stać obok siebie: kwadrat 140
   przy kolumnie 327 zabiera 43% wiersza i na nazwisko zostaje 150 px. */
@media (max-width: 640px) {
	.foreto-contact-person {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Kroki z numerami: numeracja i stan przed skryptem ------------------ */

/* Numer LICZY CSS, nie treść. Kolejność należy do listy, więc przestawienie
   kroków w edytorze nie może zostawić numeracji 1, 2, 4, 3 — a wpisany w treść
   numer właśnie to robi. Dla czytnika ekranu numer nic nie znaczy (nazwą
   przycisku jest tytuł kroku), dlatego glif ma aria-hidden i wolno mu być
   wyłącznie w CSS. */
.foreto-reveal {
	counter-reset: foreto-reveal;
}

.foreto-reveal__item {
	counter-increment: foreto-reveal;
}

.foreto-reveal__n {
	margin: 0;
}

.foreto-reveal__n::before {
	content: counter( foreto-reveal );
}

/* STAN PRZED SKRYPTEM. Serwer rysuje wszystkie kroki otwarte, bo zwinięty krok
   ma szerokość zero i jego opis znika ze strony. Póki skrypt nie zamieni
   numerów w przyciski i nie ustawi data-ready, lista stoi pionowo — czyli
   dokładnie tak, jak wygląda w wąskiej kolumnie. Bez tej reguły przez moment
   (a bez JavaScriptu na zawsze) stałby poziomy akordeon, którego nie da się
   przełączyć. */
.foreto-reveal:not( [data-ready] ) {
	flex-direction: column;
	gap: var(--foreto-space-6);
}

.foreto-reveal:not( [data-ready] ) .foreto-reveal__item {
	flex: 1 1 auto;
}

.foreto-reveal:not( [data-ready] ) .foreto-reveal__item::before {
	transform: scaleX(1);
	animation: none;
}

.foreto-reveal:not( [data-ready] ) .foreto-reveal__inner {
	width: auto;
	opacity: 1;
	transform: none;
	transition: none;
}

.foreto-reveal:not( [data-ready] ) .foreto-reveal__n {
	color: var(--foreto-ink);
	padding-bottom: var(--foreto-space-4);
}

.foreto-reveal:not( [data-ready] ) {
	--foreto-reveal-num: 128px;
}

/* =============================================================================
   18. Numerały akordeonu — .foreto-reveal__n

   Kit wpisuje cyfry wprost w znacznik, bo jego widok jest statyczny. U nas kroki
   są blokami, więc numer musi wynikać z POZYCJI na liście — inaczej przestawienie
   kroków w edytorze zostawia numerację 1, 2, 4, 3, a redaktor nie ma jak tego
   zauważyć. Stąd licznik CSS, a nie treść w bloku.

   Sam <p> zostaje pusty i ma aria-hidden: dla czytnika numer nic nie znaczy,
   nazwę kroku niesie tytuł. Licznik rysuje się pseudoelementem, więc nie trafia
   ani do drzewa dostępności, ani do zaznaczenia tekstu.
   ========================================================================== */

.foreto-reveal {
	counter-reset: foreto-reveal;
}

.foreto-reveal__item {
	counter-increment: foreto-reveal;
}

.foreto-reveal__n::before {
	content: counter(foreto-reveal);
}

/* =============================================================================
   19. Wejście nagłówka podstrony — .foreto-enter

   Bez ani jednej reguły. Kaskadę wejścia niesie dziś kitowa klasa .foreto-enter
   (kit.css) razem ze zmienną --d podawaną przy elemencie, dokładnie tak, jak
   robi to widok kontaktu w kicie: tytuł 0, okruszki 40, lead 80, znacznik 120.

   Stała tu wcześniej reguła licząca :nth-child. Dawała ten sam efekt, ale
   przywiązywała opóźnienie do KOLEJNOŚCI elementów — nagłówek bez leadu albo
   nowy element w środku przestawiał całą kaskadę i nie było tego widać nigdzie
   w kodzie. Opóźnienie należy do elementu, więc jedzie razem z nim.
   ========================================================================== */

/* =============================================================================
   17. Artykuł — .foreto-article

   Kit ma kolumnę czytelniczą (Prose), ale nie ma rysunku dla bloków, z których
   składa się tekst redakcyjny: cytatu, listy, tabeli, kodu. Do tej pory nie było
   ich gdzie zobaczyć — blog stał pusty, a wpis renderował się w pełnej szerokości
   kontenera. Zmierzone: 142 znaki w wierszu przy normie typograficznej 45–75,
   czyli oko gubiło początek następnej linijki.

   Wszystko poniżej stoi na wartościach, które system już zna. Ani jednego
   nowego koloru, ani jednego stopnia pisma spoza skali.
   ========================================================================== */

/* Nagłówek sekcji artykułu jest SEMANTYCZNIE h2 (stoi pod h1 tytułu), ale bierze
   skalę h3 — ta sama decyzja co w nagłówku podstrony i z tego samego powodu:
   42 px w kolumnie 940 zajmuje trzecią część ekranu i przestaje być nagłówkiem,
   a zaczyna być drugim tytułem. Poziom opisuje dokument, stopień opisuje układ.

   Odstęp nad nagłówkiem (64) jest ponad dwa razy większy niż pod nim (24), bo
   nagłówek należy do tekstu POD sobą, a nie nad. Równe odstępy zostawiają go
   w zawieszeniu między dwoma akapitami. */
.foreto-article h2 {
	margin-top: var(--foreto-space-8);
	margin-bottom: var(--foreto-space-3);
	font-size: var(--foreto-font-size-h3);
	line-height: var(--foreto-line-h3);
	font-weight: 700;
	text-transform: uppercase;
	text-wrap: balance;
}

.foreto-article > h2:first-child {
	margin-top: 0;
}

/* MIARA WIERSZA, nie szerokość kolumny — i to jest jedyne miejsce, w którym
   odchodzę tu od kitu. Kit nazywa 940 „kolumną czytelniczą", ale przy piśmie
   16 px daje to zmierzone 118 znaków w wierszu, przy normie typograficznej
   45–75. Oko gubi wtedy początek następnej linijki i tekst czyta się wolniej,
   mimo że wygląda porządnie.
   940 zostaje szerokością KOLUMNY — tabela, cytat i obraz mają z niej korzystać,
   bo są materiałem do oglądania. Zawęża się wyłącznie tekst bieżący, i to
   jednostką „ch", czyli szerokością znaku bieżącego pisma, a nie nową wartością
   w pikselach: to reguła typograficzna, a nie kolejny wymiar w systemie. */
.foreto-article :is(p, li) {
	max-width: 68ch;
}

/* Listy: wcięcie takie, żeby punktor stał w rynnie, a tekst trzymał lewą
   krawędź akapitów. Odstęp między pozycjami mniejszy niż między akapitami —
   pozycje listy są jedną myślą rozbitą na części, a nie osobnymi myślami. */
.foreto-article :is(ul, ol) {
	margin-top: var(--foreto-space-4);
	margin-bottom: var(--foreto-space-4);
	padding-inline-start: var(--foreto-space-5);
	line-height: var(--foreto-space-4);
}

.foreto-article li + li {
	margin-top: var(--foreto-space-2);
}

/* Cytat wyróżniony: belka akcentowa 2 px z lewej — ten sam język co
   .foreto-divider--accent i kreska w karcie realizacji. Bez cudzysłowu
   graficznego: ten należy do komponentu Testimonial, gdzie cytat ma autora
   i jest treścią, a nie zdaniem wyjętym z własnego tekstu.

   Stopień h4 zamiast tekstowego, bo to zdanie ma zatrzymać oko w skanowaniu.
   Kursywy nie ma nigdzie w systemie i tu też jej nie będzie. */
.foreto-article blockquote {
	margin: var(--foreto-space-7) 0;
	padding-inline-start: var(--foreto-space-5);
	border-inline-start: 2px solid var(--foreto-red);
	font-size: var(--foreto-font-size-h4);
	line-height: var(--foreto-line-h4);
	font-weight: 700;
	text-wrap: pretty;
}

.foreto-article blockquote p {
	margin: 0;
	line-height: inherit;
}

/* Tabela w artykule dostaje rysunek tabeli z kitu: same kreski poziome,
   nagłówek 14 wersalikami nad podwójną linią. Zamiast dublować reguły,
   przepisujemy tu wyłącznie to, czego rdzeniowy blok nie da sam — resztę
   niesie .foreto-table, ale blok rdzenia nie ma jak jej dostać, bo klasy
   nadaje redaktor, a nie motyw. */
.foreto-article .wp-block-table {
	margin: var(--foreto-space-7) 0;
}

.foreto-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
	text-align: left;
}

.foreto-article .wp-block-table :is(th, td) {
	padding: var(--foreto-space-3) var(--foreto-space-4) var(--foreto-space-3) 0;
	border-bottom: 1px solid var(--foreto-border-hairline);
	vertical-align: top;
}

.foreto-article .wp-block-table :is(th, td):last-child {
	padding-inline-end: 0;
}

.foreto-article .wp-block-table thead th {
	padding-block: var(--foreto-space-2);
	border-bottom: 2px solid var(--foreto-border-strong);
	font-size: var(--foreto-font-size-card);
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: bottom;
}

.foreto-article .wp-block-table tbody tr:last-child > * {
	border-bottom: 0;
}

/* Nazwa pliku, stałej albo dyrektywy w zdaniu. Tło pasma zamiast ramki, bo
   ramka w wierszu tekstu rozpycha interlinię; krój systemowy o stałej szerokości
   znaków, bo Poppins nie ma odmiany maszynowej. */
.foreto-article code {
	padding: 0.1em var(--foreto-space-1);
	background: var(--foreto-surface-band);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	word-break: break-word;
}

/* Data pod wyśrodkowanym nagłówkiem podstrony — musi się z nim zgrać. */
.foreto-article-date {
	margin-top: var(--foreto-space-4);
	text-align: center;
}

/* =============================================================================
   20. Plakietka stanu na karcie produktu — .foreto-product-card__badge

   Kitowy Badge wchodzi w karcie NAD nazwę, a nie obok niej. Obok znaczyłoby
   rząd giętki i decyzję, co robić, gdy nazwa jest długa: plakietka albo
   spycha ją w drugi wiersz, albo sama ucieka poza kartę. Nad nazwą stoi
   zawsze tak samo, niezależnie od długości obu.

   BEZ WŁASNEGO MARGINESU. Ciało karty jest pojemnikiem giętkim z odstępem 16,
   więc margines plakietki DOKŁADAŁ się do niego: 32 px pod plakietką wobec 16
   między pozostałymi elementami — zmierzone. Odstęp należy do pojemnika,
   a element ma się w niego wpisać, nie dokładać swojego.

   Zostaje samo wyrównanie: bez niego plakietka rozciąga się na całą szerokość
   karty, bo pojemnik giętki w kolumnie rozciąga dzieci domyślnie.
   ========================================================================== */

.foreto-product-card__badge {
	align-self: start;
}

/* =============================================================================
   21. Powrót na górę — .foreto-to-top

   Znacznik tworzy js/to-top.js, nie serwer: przycisk ma sens tylko wtedy, gdy
   jest co przewijać, a tego serwer nie wie. Tu zostaje wyłącznie wygląd.

   POLE JASNE, NIE CZERWONE. Glif jest ten sam, co znacznik „przewiń dalej”
   pod nagłówkiem podstrony — dwukolorowy: górny daszek czarny, dolny czerwony.
   Na czerwonym tle dolny daszek znika, więc wariant --solid odpada; zostaje
   kitowy --band, na którym czytają się oba kolory. Włos obramowania oddziela
   szarość pola od bieli strony, bo cień kitu (0 38px …) na przycisku przy
   dolnej krawędzi ekranu spada poza widok i krawędzi nie rysuje.

   NAD TREŚCIĄ, POD NAGŁÓWKIEM. Warstwa 5 ze skali motywu (treść 0–2, powrót
   na górę 5, nagłówek 20, skrót do treści 100). Zero przegrywało z sekcjami,
   które podnoszą swoje elementy jedynką; wejście w zakres nagłówka przykryłoby
   panel szuflady, bo ten żyje w środku belki. Przy otwartej szufladzie przycisk
   i tak jest niepotrzebny: strona wtedy nie przewija się wcale.
   ========================================================================== */

.foreto-to-top {
	position: fixed;
	right: var(--foreto-wrap-gutter);
	bottom: var(--foreto-wrap-gutter);
	z-index: 5;
	border: var(--foreto-border-width) solid var(--foreto-border-hairline);
	box-shadow: var(--foreto-shadow-card);
	transition:
		background-color var(--foreto-transition-base),
		opacity var(--foreto-transition-base),
		translate var(--foreto-transition-base),
		visibility var(--foreto-transition-base);
}

/* Ukryty PRZEZROCZYSTOŚCIĄ i widocznością naraz. Sama przezroczystość zostawia
   pole klikalne nad treścią, sama widoczność ucina przejście. Kolejność tabulacji
   zdejmuje skrypt, bo visibility gaśnie dopiero po zakończeniu przejścia. */
.foreto-to-top[data-widoczny='false'] {
	opacity: 0;
	visibility: hidden;
	translate: 0 var(--foreto-space-3);
}

.foreto-to-top[data-widoczny='true'] {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

/* Obrót indywidualną własnością, nie transformem: kit skaluje glif transformem
   przy najechaniu, a rotate i transform składają się zamiast nadpisywać. */
.foreto-to-top__glyph {
	width: 24px;
	height: auto;
	rotate: 180deg;
	transition: transform var(--foreto-transition-base);
}

/* Powtórzone z kitu, bo tamta reguła celuje w .foreto-icon i svg — obrazek
   nie jest ani jednym, ani drugim. */
.foreto-to-top:hover .foreto-to-top__glyph,
.foreto-to-top:focus-visible .foreto-to-top__glyph {
	transform: scale(var(--foreto-icon-hover-scale));
}

.foreto-to-top:active .foreto-to-top__glyph {
	transform: scale(1);
}

body:has(.foreto-drawer__toggle:checked) .foreto-to-top {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.foreto-to-top,
	.foreto-to-top__glyph {
		transition: none;
	}

	.foreto-to-top[data-widoczny='false'] {
		translate: none;
	}
}

@media print {
	.foreto-to-top {
		display: none;
	}
}