/* Złożenie części szablonu z prymitywów kitu.
   Tu stoją wyłącznie ustawienia zmiennych na klasach kitu i te elementy, których
   kit nie ma (logo, przełącznik języka). Żadnych własnych wartości — kroki skali
   i tokeny przychodzą z theme.json przez most. */

/* Nagłówek maluje TŁO STRONY, choć wygląda na tego samego koloru co ona.
   Powód jest nowy: strona ma pod spodem teksturę dryfujących kwadratów, a ta
   przechodziła za belką nawigacji — kwadrat wjeżdżał pod pozycję menu i tekst
   dostawał plamę pod spodem. Nawigacja jest chromem interfejsu, nie treścią,
   więc ma stać na spokojnym polu; tekstura zostaje tam, gdzie jest treść. */
/* WARSTWA 20, NIE 1. Jedynka przegrywała remis: sekcja hero podnosi swoją
   treść nad grafikę wychodzącą poza układ i robi to TĄ SAMĄ jedynką, a przy
   równej warstwie rozstrzyga kolejność w dokumencie — hero stoi za nagłówkiem,
   więc wygrywało. Skutek widać było dopiero po otwarciu szuflady: jej panel
   i przesłona żyją WEWNĄTRZ nagłówka, więc ich warstwy 8 i 9 porządkują je
   tylko względem rodzeństwa w belce, a nie względem strony. Menu malowało się
   pod treścią i nie dawało się kliknąć.

   Skala warstw motywu: treść 0–2, powrót na górę 5, nagłówek 20, skrót do
   treści 100. Chrom interfejsu ma stać nad treścią zawsze, a nie zależeć od
   tego, czy któraś sekcja sięgnęła po tę samą liczbę. */
.foreto-header {
	position: relative;
	z-index: 20;
	padding-block: var(--foreto-space-4);
	background: var(--foreto-page);
}

/* FROST W PASKU GÓRNYM — kwadraty mają pod niego WCHODZIĆ, a nie znikać na
   jego krawędzi. Nieprzezroczysta biel wyżej zostaje jako podstawa: to ona
   obowiązuje tam, gdzie nie ma filtru tła, i to ona gwarantuje czytelność
   logotypu i menu, gdy sztuczka niżej nie zadziała.

   Kierunek gradientu: PEŁNA POWIERZCHNIA U GÓRY, wygaszenie ku dołowi. Na
   górze siedzi logotyp i menu, więc tam biel ma być prawie pełna; przy dolnej
   krawędzi schodzi do zera, dzięki czemu granica paska przestaje istnieć —
   kwadrat wjeżdżający pod pasek blednie, zamiast urwać się w pół.

   Warstwa jest osobna, nie na samym pasku, z tego samego powodu co przy
   kolumnie treści: maska nałożona na pasek wygasiłaby razem z tłem jego menu
   i logotyp. z-index -1 wsuwa ją pod zawartość paska; pasek tworzy własny
   kontekst warstw (z-index: 20), więc warstwa nie ucieka wyżej w dokumencie.

   Tło paska musi przy tym zejść na przezroczyste — inaczej filtr tła rozmywa
   jego własną biel i pod spodem nie ma czego pokazać.                        */
@supports (backdrop-filter: blur(1px)) {
	.foreto-root:has(.foreto-drift) .foreto-header {
		background: transparent;
	}

	.foreto-root:has(.foreto-drift) .foreto-header::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		backdrop-filter: blur(var(--foreto-frost-bar, 8px));
		background: color-mix(in srgb, var(--foreto-page) var(--foreto-frost-bar-veil, 88%), transparent);
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--foreto-frost-bar-hold, 55%), transparent 100%);
		        mask-image: linear-gradient(to bottom, #000 0, #000 var(--foreto-frost-bar-hold, 55%), transparent 100%);
	}
}

.foreto-header__inner {
	--foreto-stack-gap: var(--foreto-space-5);
	justify-content: space-between;
}

/* Układ przepływowy WordPressa rozsuwa rodzeństwo marginesem górnym. W kontenerze
   giętkim odstęp niesie gap, więc margines dokładałby się do niego. */
.foreto-header__inner > * {
	margin-block: 0;
}

/* Logo przychodzi z ustawień witryny (core/site-logo), więc jego wymiar jest
   decyzją motywu, nie pliku: wysokość ze skali, szerokość z proporcji. */
.foreto-header .wp-block-site-logo {
	flex: 0 0 auto;

	/* WARSTWA RÓWNA PRZYCISKOWI SZUFLADY, żeby znak został widoczny przy
	   otwartym menu. Panel szuflady stoi WEWNĄTRZ nagłówka, więc o kolejności
	   malowania decyduje kontekst nagłówka, a nie strony: własne `z-index: 20`
	   nagłówka nie ma tu nic do rzeczy, bo panel jest jego dzieckiem.

	   W tym kontekście stoją przesłona (8), panel (9) i przycisk zamknięcia
	   (10), a blok logo był `static` bez warstwy — czyli malował się pod
	   wszystkim, co ma warstwę dodatnią. Po otwarciu menu znikał pod białym
	   panelem, choć nic go nie zasłaniało w sensie układu.

	   Dziesiątka, nie więcej: ta sama co przycisk, więc oba są nad panelem
	   i żaden nie przykrywa drugiego — w pasku i tak stoją obok siebie.       */
	position: relative;
	z-index: 10;
}

.foreto-header .wp-block-site-logo img {
	width: auto;
	height: var(--foreto-space-11);
	max-width: none;
}

/* Wersja pozioma znaku stoi w znaczniku zawsze, ale pokazuje się dopiero na
   wąskim ekranie — patrz filtr w `inc/icons.php`. Na szerokim znika zupełnie,
   a nie tylko przezroczystością: `display: none` usuwa element także z drzewa
   dostępności, dzięki czemu nazwę linku niesie zawsze dokładnie jeden z dwóch
   znaków, nigdy oba naraz.                                                  */
.foreto-header .foreto-brand-poziomy { display: none; }

@media (max-width: 640px) {
	.foreto-header {
		padding-block: var(--foreto-space-2);
	}

	/* Zamiana, nie dołożenie: pionowy stos schodzi tu do 52 na 48 px i napis
	   pod znakiem przestaje być czytelny, choć w pasku zostają 324 px wolnego.
	   Ta sama marka ułożona poziomo mieści przy tej wysokości napis szeroki
	   na 237 px — w miejscu, które i tak stało puste.                       */
	.foreto-header .wp-block-site-logo img { display: none; }

	.foreto-header .foreto-brand-poziomy { display: block; }

	/* WYSOKOŚĆ NIŻSZA NIŻ U ZNAKU PIONOWEGO, i to wynik rachunku, nie gustu.
	   W pasku 327 px stoją jeszcze wyszukiwarka (40) i menu (24), a odstęp
	   między nimi to 32 px — na znak zostaje niecałe 200. Przy 48 px wysokości
	   znak poziomy ma 237 px i wypycha menu poza ekran razem z poziomym paskiem
	   przewijania; zmierzone: nadmiar 77 px. 36 px daje 178 px szerokości
	   i mieści się z zapasem.

	   Napis i tak wychodzi na tym czytelniejszy niż w układzie pionowym, gdzie
	   przy 48 px wysokości całego stosu na podpis zostawało kilka pikseli.

	   SZEROKOŚĆ BEZ `min(…, 100%)`. Procent liczy się względem szerokości
	   rodzica, a ta przy ustalaniu szerokości linku jest jeszcze nieznana —
	   przeglądarka bierze wtedy domyślny rozmiar zastępczy SVG, czyli 300×150,
	   i link robi się na 300 px zamiast na szerokość rysunku. Zmierzone
	   dokładnie tyle: 300. Sam `calc` jest wymiarem określonym i tego nie robi. */
	/* 36 px, nie 48, i to wynik rachunku: w pasku 327 px stoją jeszcze
	   wyszukiwarka (40) i menu (24) przy odstępie 32, więc na znak zostaje
	   niecałe 200. Przy 48 px znak ma 237 i wypycha menu poza ekran —
	   zmierzony nadmiar 77 px i poziomy pasek przewijania.                   */
	.foreto-header .foreto-brand-poziomy .foreto-logo { --foreto-znak-h: 36px; }


	.foreto-header .foreto-logo__znak { fill: var(--foreto-red, #E00000); }
	.foreto-header .foreto-logo__podpis { fill: var(--foreto-text-muted, #6E6E6E); }
}

.foreto-header__nav {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
}

/* Przełącznik języka nie jest komponentem kitu — w makiecie to prostokąt
   z kodem języka i grotem, bez narysowanej listy. Zostaje przyciskiem, bo
   docelowo nim będzie; zachowanie dochodzi z wielojęzycznością. */
.foreto-header__lang {
	display: inline-flex;
	align-items: center;
	gap: var(--foreto-space-2);
	flex: 0 0 auto;
	min-height: var(--foreto-space-5);
	padding-inline: var(--foreto-space-3);
	background: var(--foreto-surface-band);
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
}

.foreto-header__lang-arrow {
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url('../icons/chevron-down.svg') no-repeat center / contain;
	        mask: url('../icons/chevron-down.svg') no-repeat center / contain;
}

/* Nagłówek LEŻY NA pierwszej sekcji, gdy ta rezerwuje sobie miejsce u góry.
   Wariant jest opcjonalny, bo bez sekcji hero absolutny nagłówek nachodziłby
   na treść. Włącza go szablon, nie sam nagłówek. */
.foreto-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.foreto-social__glyph {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.foreto-social__glyph[data-network="facebook"] {
	-webkit-mask-image: url('../icons/facebook.png');
	        mask-image: url('../icons/facebook.png');
}

.foreto-social__glyph[data-network="linkedin"] {
	-webkit-mask-image: url('../icons/linkedin.png');
	        mask-image: url('../icons/linkedin.png');
}

.foreto-social {
	--foreto-stack-gap: var(--foreto-space-3);
}

.foreto-contact {
	--foreto-stack-gap: var(--foreto-space-4);
}

/* Lista kontaktowa: etykieta W LINII przed wartością i w kolorze akcentu.
   Nie jest to KeyValue z kitu — tamten rysuje wiersze z kreską i etykietą
   wyszarzoną nad wartością, czyli inny język niż stopka. <dl> zostaje, bo
   para etykieta–wartość ma tu znaczenie. */
.foreto-contact__lines {
	margin: 0;
	padding-inline-start: var(--foreto-space-7);
}

.foreto-contact__line {
	display: flex;
	gap: var(--foreto-space-2);
}

.foreto-contact__line dt {
	flex: 0 0 auto;
}

.foreto-contact__line dd {
	margin: 0;
}

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

/* Pasek i szuflada to ten sam zestaw pozycji w dwóch rysunkach — próg 1181
   jest progiem kitu, nie doborem. */
.foreto-nav .foreto-drawer {
	display: none;
}

@media (max-width: 1181px) {
	.foreto-header__nav .foreto-navbar {
		display: none;
	}

	.foreto-header__nav .foreto-drawer {
		display: block;
	}
}

/* Hero. Sekcji w kicie nie ma — to zadanie motywu; wszystkie części pochodzą
   z kitu (Section, SectionTitle, Button, Link), tu stoi tylko ich układ.
   Grafika wychodzi poza prawą krawędź kontenera, więc sekcja przycina w obu
   osiach: w poziomie nie robi paska przewijania, w pionie nie wchodzi w sekcję
   pod spodem. */
/* WŁASNY KONTEKST WARSTW. Poniżej 1182 px treść hero wychodzi nad grafikę
   przez z-index, a to jest sprawa WYŁĄCZNIE tej sekcji. Bez izolacji obie
   warstwy trafiały do wspólnej puli dokumentu i konkurowały z nagłówkiem.
   Sam position: relative tego nie załatwia — kontekst powstaje dopiero wtedy,
   gdy element ma własny z-index albo isolation. */
.foreto-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.foreto-hero .foreto-section__inner {
	display: grid;
	/* Kolumna tekstu szersza od kolumny grafiki: etykiety działań z dokumentacji
	   („Porozmawiajmy o projekcie") są dłuższe niż w makiecie i przy równym
	   podziale łamały rząd przycisków na dwa wiersze. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: start;
	gap: var(--foreto-space-8);
}

.foreto-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--foreto-space-3);
}

.foreto-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--foreto-space-6);
	margin-top: var(--foreto-space-5);
}

.foreto-hero__visual img {
	width: 100%;
	height: auto;
}

@media (max-width: 1181px) {
	/* Grafika NIE zwija się pod tekst — przy tym collage'u czytałaby się jak
	   druga, niezwiązana rzecz. Wychodzi z układu, wsuwa się pod treść przy
	   prawej krawędzi, a czytelność tekstu daje wygaszenie jej lewej krawędzi.
	   Backdrop-filter pod tekstem był próbowany w statyku i odrzucony: zostawia
	   widoczną pionową granicę na jednolitej grafice. */
	.foreto-hero .foreto-section__inner {
		display: block;
	}

	.foreto-hero__content {
		position: relative;
		z-index: 1;
	}

	.foreto-hero__visual {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: calc(-1 * var(--foreto-wrap-gutter));
		z-index: 0;
		width: min(78vw, 706px);
		pointer-events: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .12) 32%, rgb(0 0 0 / .55) 52%, #000 72%);
		        mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .12) 32%, rgb(0 0 0 / .55) 52%, #000 72%);
	}
}

@media (max-width: 640px) {
	.foreto-hero__visual {
		width: 118vw;
		opacity: .32;
	}
}

/* Bez wsparcia dla mask-image grafika zasłoniłaby tekst — wtedy schodzi
   na drugi plan przezroczystością. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	@media (max-width: 1181px) {
		.foreto-hero__visual { opacity: .35; }
	}
}

/* Karuzela.

   TOR UKŁADA SIĘ Z SAMEGO CSS-a, bez czekania na skrypt — i to jest zmiana
   względem pierwotnego założenia, że „bez JavaScriptu zostaje pełna siatka".
   Założenie brzmiało rozsądnie, a dawało skok układu przy każdym wejściu:
   do czasu wykonania skryptu logotypy stały pełną siatką na kilka rzędów,
   po nim zwijały się do jednego. Widać było wszystkie, potem cztery, a sekcja
   traciła w tym momencie kilkaset pikseli wysokości.

   Warunkiem jest `.foreto-carousel`, nie sama klasa toru, i to nie jest
   ozdobnik: `ul` niesie równocześnie `.foreto-grid--m3`, więc selektor o jednej
   klasie przegrywałby albo wygrywał zależnie od kolejności arkuszy w kolejce.
   Dwie klasy wygrywają zawsze i wynik nie zależy od tego, co ktoś kiedyś doda.

   Skryptowi zostaje to, czego CSS nie zrobi: strzałki, pętla i śledzenie
   pozycji. Bez niego tor jest zwykłym przewijanym rzędem — palcem, kółkiem
   i klawiaturą, bo `tabindex` i `role` przychodzą z serwera.                 */
.foreto-carousel {
	position: relative;
	/* Przycięcie na OPAKOWANIU, nie tylko na torze: bez tego pozycje wystające
	   poza tor powiększały szerokość przewijania całego dokumentu (zmierzone
	   2466 px przy oknie 1779) i strona jechała w poziomie. */
	overflow: clip;
}

.foreto-carousel .foreto-carousel__track {
	display: flex;
	gap: var(--foreto-grid-gap, var(--foreto-space-5));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Pole na pierścień fokusu: track przyjmuje fokus, a bez zapasu pierścień
	   byłby przycięty przez własne przewijanie. */
	padding-block: var(--foreto-space-1);
}

.foreto-carousel .foreto-carousel__track::-webkit-scrollbar {
	display: none;
}

.foreto-carousel .foreto-carousel__track > * {
	flex: 0 0 calc((100% - 3 * var(--foreto-grid-gap, var(--foreto-space-5))) / 4);
	scroll-snap-align: start;
}

.foreto-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--foreto-space-2);
	margin-top: var(--foreto-space-4);
}

/* Nagłówek robi miejsce na sterowanie: SIATKA, nie rząd elastyczny, bo obok
   tytułu bywa jeszcze lead i w rzędzie stanąłby on koło tytułu zamiast pod
   nim. W siatce tytuł i lead schodzą w pierwszą kolumnę jeden pod drugim,
   a guziki zajmują drugą przez całą wysokość.

   KAŻDY NAGŁÓWEK JEST SIATKĄ, A DRUGA KOLUMNA JEST NIEJAWNA — bez :has().
   Wcześniej siatkę dostawał tylko nagłówek ze sterowaniem
   (`:has(.foreto-carousel__nav)`), a Chrome przy tej regule przeliczał style
   CAŁEGO dokumentu po każdym wstawieniu lub usunięciu węzła gdziekolwiek
   na stronie: zmierzone we wpisie blogu przy CPU ×4 — 90 ms na jedno
   appendChild, 3,6 ms bez tej jednej reguły (bisekcja po regułach arkusza).
   Płacił za to każdy kwadrat dryfu w tle i start gry, nie tylko karuzela.

   Bez sterowania siatka ma jedną kolumnę i żadnej szczeliny, bo tor
   niejawny powstaje dopiero, gdy coś każe się w nim postawić — układ
   nagłówków bez guzików wychodzi co do piksela ten sam, co blokowy
   (sprawdzone na stronie głównej, blogu i realizacjach: 11 nagłówków,
   zero różnic w prostokątach dzieci). */
.foreto-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--foreto-space-5);
}

.foreto-section-head > :not(.foreto-carousel__nav) {
	grid-column: 1;
}

.foreto-section-head > .foreto-carousel__nav {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin-top: 0;
}

/* Wyłącznik ruchu na czas skoku pętli. Zmienna, a nie transition: none —
   własność dziedziczy się na pozycje toru, więc nie trzeba przebijać ich
   selektorów ani sięgać po !important. Kto animuje, ten czyta ją jako czas. */
.foreto-carousel__track--static {
	--foreto-carousel-motion: 0s;
}

.foreto-carousel__glyph {
	width: var(--foreto-space-4);
	height: var(--foreto-space-4);
	background-color: currentColor;
	-webkit-mask: url('../icons/chevron-sm.svg') no-repeat center / contain;
	        mask: url('../icons/chevron-sm.svg') no-repeat center / contain;
}

.foreto-carousel__btn[data-direction="prev"] .foreto-carousel__glyph {
	transform: rotate(180deg);
}

/* Stan wyłączony niesie też kursor i pointer-events — sam kolor nie wystarcza,
   a przycisk, który nic nie robi, ma o tym mówić przed kliknięciem. */
.foreto-carousel__btn[disabled] {
	color: var(--foreto-border-hairline);
	cursor: not-allowed;
}

@media (max-width: 1181px) {
	.foreto-carousel .foreto-carousel__track > * {
		flex-basis: calc((100% - 2 * var(--foreto-grid-gap, var(--foreto-space-5))) / 3);
	}
}

@media (max-width: 760px) {
	.foreto-carousel .foreto-carousel__track > * {
		flex-basis: calc((100% - var(--foreto-grid-gap, var(--foreto-space-5))) / 2);
	}
}

/* Adres spółki bywa dłuższy niż kolumna („abonament.formimpress.com"), a to
   jeden wyraz — bez pozwolenia na złamanie rozpycha kartę. */
.foreto-company__link {
	overflow-wrap: anywhere;
}