/* Wyszukiwarka — pole, panel w nagłówku i lista wyników.
   Kit nie ma żadnego z tych trzech komponentów, więc każdy jest ZŁOŻONY z jego
   części, a nie narysowany od nowa: pole to Field i Input ze wszystkimi ich
   stanami, panel powtarza mechanikę szuflady menu, a rząd wyniku mówi tym
   samym językiem co karta realizacji (kreska akcentowa, kadr dwuwarstwowy,
   tytuł w stopniu h4, metryka z terminów). Własne są wyłącznie układy tych
   części i to jest cała zawartość tego arkusza. */

/* =============================================================================
   1. Pole — .foreto-search

   Rząd: pole rośnie, przycisk zajmuje tyle, ile potrzebuje. Wysokości NIE
   podajemy nigdzie: align-items: stretch dociąga przycisk do wysokości pola,
   którą niesie token --field-h. Wpisana liczba rozjechałaby się z polem przy
   pierwszej zmianie skali, a w dwóch miejscach naraz (zwarte i pełne).
   ========================================================================== */

.foreto-search .foreto-field {
	/* Odstęp pod polem niesie rytm sekcji, a nie samo pole — formularz jest tu
	   jednym elementem układu, nie wierszem większego formularza. */
	margin-bottom: 0;
}

.foreto-search__row {
	display: flex;
	align-items: stretch;
	gap: var(--foreto-space-3);
}

/* min-width: 0 na elemencie giętkim, bo domyślne auto trzyma pole przy
   szerokości jego treści i długa fraza rozpychała rząd poza kontener. */
.foreto-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

.foreto-search__submit {
	flex: 0 0 auto;
}

/* Pole w treści strony stoi pod nagłówkiem podstrony, wyśrodkowane i zwężone
   do miary czytelniczej. Odstęp jest własny, bo nagłówek podstrony rozdziela
   swoje elementy marginesami pojedynczo, a nie wspólnym gapem — tak samo jak
   robi to z okruszkami i leadem. */
.foreto-search--page {
	max-width: var(--foreto-prose-max);
	margin: var(--foreto-space-7) auto 0;
}

/* Poniżej 480 px przycisk z etykietą „Szukaj" i grotem zabiera połowę rzędu,
   więc pole przestaje mieścić frazę. Kolumna zamiast rzędu — nie zwężony
   przycisk, bo etykieta ma zostać czytelna. */
@media (max-width: 480px) {
	.foreto-search__row {
		flex-direction: column;
	}

	.foreto-search__submit {
		justify-content: center;
	}
}

/* =============================================================================
   2. Wyszukiwarka w nagłówku — .foreto-searchbox

   TA SAMA MECHANIKA, CO SZUFLADA MENU: ukryty checkbox, etykieta jako
   przycisk, druga etykieta jako przesłona, panel otwierany selektorem sąsiada.
   Powtórzenie jest tu zaletą, nie duplikacją — dwa panele w jednym nagłówku,
   które otwierają się dwoma różnymi sposobami, byłyby dwoma różnymi
   zachowaniami do wyuczenia i dwoma miejscami do zepsucia.

   PEŁNY EKRAN, NIE PASEK POD BELKĄ. Pasek czytał się jak element nagłówka,
   który pojawił się bez powodu — nie mówił, że strona weszła w inny tryb.
   Nakładka mówi to rozmiarem.

   PODZIAŁ PRACY MIĘDZY PRZESŁONĄ A PANELEM. Przesłona jest PRZEZROCZYSTA
   i służy wyłącznie za cel kliknięcia „zamknij" — malowanie zostawia panelowi,
   bo to panel niesie kwadraty i treść. Panel leży nad nią na pełnym ekranie,
   ale ma pointer-events: none, więc kliknięcie w puste miejsce przechodzi
   przez niego do przesłony. Interaktywne są tylko pole, przycisk i krzyżyk.

   WARSTWY. Panel i przesłona żyją WEWNĄTRZ nagłówka, więc ich z-index
   porządkuje je tylko względem rodzeństwa w belce — nad treść strony wynosi je
   nagłówek (warstwa 20, patrz parts.css). Porządek w belce, od dołu:

     4  przesłona wyszukiwarki
     6  przycisk lupy
     7  nakładka wyszukiwarki
     8  przesłona szuflady menu   (kit)
     9  panel szuflady menu       (kit)
    10  przycisk hamburgera       (kit)

   Lupa stoi NAD przesłoną, ale POD nakładką: przy otwartym pełnym ekranie
   znika razem z resztą nagłówka, bo wyjściem jest wtedy krzyżyk w prawym
   górnym rogu, a nie ta sama lupa, którą się weszło. I stoi pod panelem
   szuflady, żeby nie pływać nad otwartym menu.

   HAMBURGER TEŻ MUSI ZEJŚĆ. Jego warstwa 10 jest wyższa od nakładki, więc bez
   poprawki wisiał nad białym ekranem obok krzyżyka — dwa przyciski zamykania,
   z których jeden otwiera co innego. Selektora sąsiada tu nie ma jak użyć:
   przełącznik siedzi w pudełku wyszukiwarki, a hamburger w nawigacji obok,
   więc warunek idzie przez :has() na wspólnym rodzicu.
   ========================================================================== */

.foreto-searchbox {
	display: flex;
}

.foreto-searchbox__button {
	position: relative;
	z-index: 6;
	cursor: pointer;
}

.foreto-searchbox__glyph {
	width: 24px;
	height: 24px;
}

/* Pierścień fokusu rysuje się wokół PRZYCISKU, choć fokus ma checkbox: to on
   jest kontrolką, a przycisk tylko jego etykietą. Ta sama reguła stoi przy
   przełączniku szuflady. */
.foreto-searchbox__toggle:focus-visible + .foreto-searchbox__button {
	outline: 2px solid var(--foreto-focus);
	outline-offset: 2px;
}

/* Przesłona bez własnego koloru — patrz podział pracy w nagłówku sekcji. */
.foreto-searchbox__scrim {
	position: fixed;
	inset: 0;
	z-index: 4;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: visibility var(--foreto-transition-base);
}

.foreto-searchbox__toggle:checked ~ .foreto-searchbox__scrim {
	opacity: 1;
	visibility: visible;
}

.foreto-searchbox__panel {
	position: fixed;
	inset: 0;
	z-index: 7;
	display: grid;
	place-items: center;
	overflow: hidden;
	/* KRYJĄCA. Prześwit strony pod spodem brzmiał dobrze w opisie, a wyglądał
	   jak zdublowany widok: przez nakładkę czytały się tytuły kart i pozycje
	   menu, więc oko miało dwie strony naraz i nie wiedziało, którą czyta.
	   Związek z serwisem niosą kwadraty, nie przezroczystość. */
	background: var(--foreto-page);
	opacity: 0;
	visibility: hidden;
	/* Kliknięcie w puste miejsce ma trafić w przesłonę POD spodem. */
	pointer-events: none;
	transition:
		opacity var(--foreto-transition-base),
		visibility var(--foreto-transition-base);
}

.foreto-searchbox__toggle:checked ~ .foreto-searchbox__panel {
	opacity: 1;
	visibility: visible;
}

.foreto-header__inner:has(.foreto-searchbox__toggle:checked) .foreto-drawer__button {
	z-index: 3;
}

/* Wjazd treści o krok skali w górę — sama zmiana krycia na pełnym ekranie
   czyta się jak przeskok, a nie jak otwarcie. Rusza się TREŚĆ, nie tło:
   przesuwanie pola kwadratów razem z nią dałoby wrażenie zjeżdżającej kurtyny,
   a kwadraty są tłem serwisu, nie częścią nakładki. */
.foreto-searchbox__inner,
.foreto-searchbox__close {
	pointer-events: auto;
	translate: 0 var(--foreto-space-3);
	transition: translate var(--foreto-transition-base);
}

.foreto-searchbox__toggle:checked ~ .foreto-searchbox__panel .foreto-searchbox__inner,
.foreto-searchbox__toggle:checked ~ .foreto-searchbox__panel .foreto-searchbox__close {
	translate: 0 0;
}

/* Krzyżyk w rogu, nie przy polu: pole jest treścią nakładki, a zamknięcie jej
   ramą. Odstęp z rynny kontenera, więc krzyżyk stoi w tej samej pionowej linii
   co prawa krawędź treści strony pod spodem. */
.foreto-searchbox__close {
	position: absolute;
	inset-block-start: var(--foreto-wrap-gutter);
	inset-inline-end: var(--foreto-wrap-gutter);
	cursor: pointer;
}

.foreto-searchbox__close:hover {
	color: var(--foreto-text-accent);
}

/* Pole nie rozciąga się na całą szerokość ekranu: wiersz wejściowy dłuższy
   niż miara czytelnicza wygląda jak pole na akapit, a nie na jedno hasło. */
.foreto-searchbox__inner {
	width: 100%;
}

.foreto-searchbox__inner .foreto-search {
	max-width: var(--foreto-prose-max, 680px);
	margin-inline: auto;
}

/* Etykieta nad polem — jedyny tekst na pełnym ekranie, więc niesie odstęp
   i wyśrodkowanie. Kitowy .foreto-eyebrow daje wersaliki i wagę. */
.foreto-search__label {
	margin-bottom: var(--foreto-space-3);
	color: var(--foreto-text-muted);
	text-align: center;
}

/* POLE KWADRATÓW. Siatka STAŁA i wyśrodkowana, tak jak w dryfującym tle
   strony: serwer nie zna rozmiaru okna, więc rysuje pole na 1920 × 1040
   i pozwala mu się przyciąć. Kwadrat rysuje kitowy .foreto-spark — stąd tutaj
   sam pojemnik i druga barwa. */
.foreto-search-sparks {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(56, var(--foreto-px, 40px));
	grid-template-rows: repeat(40, var(--foreto-px, 40px));
	place-content: center;
	color: var(--foreto-ink);
	pointer-events: none;
}

.foreto-search-sparks .foreto-spark--accent {
	background: var(--foreto-red);
}

/* ANIMACJA STOI, DOPÓKI NAKŁADKA JEST ZAMKNIĘTA. Reguły animacji działają też
   na elementach ukrytych, więc bez tego sto pięćdziesiąt pulsujących kwadratów
   chodziłoby w tle NA KAŻDEJ podstronie serwisu, choć nikt ich nie ogląda.
   Ujemne opóźnienia zostają, więc po otwarciu każdy kwadrat rusza z własnego
   punktu cyklu, a nie wszystkie razem. */
.foreto-search-sparks .foreto-spark {
	animation-play-state: paused;
}

.foreto-searchbox__toggle:checked ~ .foreto-searchbox__panel .foreto-spark {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
	.foreto-searchbox__scrim,
	.foreto-searchbox__panel,
	.foreto-searchbox__inner,
	.foreto-searchbox__close {
		transition: none;
	}

	.foreto-searchbox__inner,
	.foreto-searchbox__close {
		translate: none;
	}
}

/* KOLEJNOŚĆ W BELCE. Na szerokim ekranie przycisk stoi ZA pozycjami menu, bo
   nawigacja jest treścią nagłówka, a lupa narzędziem — narzędzie idzie na
   koniec. Poniżej 1181 px pozycje chowają się w szufladzie i zostaje sam
   hamburger; wtedy kolejność z HTML-a daje „logo, hamburger, lupa", czyli
   przycisk otwierający menu w ŚRODKU belki, między dwoma innymi elementami.
   Zamieniamy je miejscami, a margines auto skleja obie kontrolki w parę przy
   prawej krawędzi — nawigacja traci tu rozciąganie, bo to ono trzymało
   hamburger po prawej.

   Reguła stoi w tym arkuszu, a nie przy nagłówku, bo istnieje WYŁĄCZNIE
   dlatego, że w belce pojawiła się lupa. Bez niej nie ma czego przestawiać. */
@media (max-width: 1181px) {
	.foreto-header__inner .foreto-searchbox {
		order: 1;
		margin-inline-start: auto;
	}

	.foreto-header__inner .foreto-header__nav {
		order: 2;
		flex: 0 0 auto;
	}
}

/* =============================================================================
   3. Pole w szufladzie menu — .foreto-search--drawer

   Osobne wejście, nie powielenie: przy otwartym menu panel nagłówka jest pod
   spodem i niedostępny, więc bez tego pola trzeba by zamknąć menu, żeby
   zacząć szukać.
   ========================================================================== */

/* Odstęp od góry CLEARUJE KRZYŻYK. Kit odsuwa od niego listę pozycji
   marginesem 64 (.foreto-drawer__list), ale pole wchodzi NAD listę, więc to
   ono musi ten dystans wziąć na siebie — inaczej prawa krawędź pola wchodzi
   pod przycisk zamykania. Lista traci wtedy swój margines, bo dwa razy ten sam
   odstęp dałoby 96 px pustki między polem a pierwszą pozycją. */
.foreto-search--drawer {
	margin: var(--foreto-space-8) 0 var(--foreto-space-6);
}

.foreto-drawer__panel:has(.foreto-search--drawer) .foreto-drawer__list {
	margin-top: 0;
}

/* =============================================================================
   4. Zawężenie wyników — .foreto-results__facets

   Panel jest ten sam, co przy listingu realizacji, więc cały wygląd przychodzi
   z kitu. Zostaje odstęp do listy pod spodem — dokładnie ten sam, którym
   .foreto-facets-box odsuwa się na archiwum.
   ========================================================================== */

.foreto-results__facets {
	margin-bottom: var(--foreto-space-7);
}

/* =============================================================================
   5. Lista wyników — .foreto-results i .foreto-result

   RZĘDY, NIE KAFLE. Wyniki mieszają usługę, realizację i wpis w jednym
   porządku trafności; siatka kafli sugerowałaby, że pozycje są równorzędne
   i porównywalne, a one nie są — tu liczy się kolejność. Rząd czyta się
   z góry na dół, a kreska między rzędami jest tym samym włosem, którym
   serwis rozdziela wszystko inne.
   ========================================================================== */

.foreto-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.foreto-results > li + li {
	border-block-start: var(--foreto-border-width) solid var(--foreto-border-hairline);
}

.foreto-result {
	position: relative;
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--foreto-space-5);
	align-items: start;
	padding-block: var(--foreto-space-5);
	transition: background-color var(--foreto-transition-base);
}

/* Bez miniatury rząd jest jednokolumnowy, a nie z pustym kadrem: puste pudełko
   o stałej proporcji trzyma równy rząd w siatce kafli, ale w liście zostawia
   szary prostokąt, który niczego nie niesie. */
.foreto-result--plain {
	grid-template-columns: minmax(0, 1fr);
}

.foreto-result__media {
	--foreto-ratio: 4 / 3;
}

/* Powiększenie treści kadru, nie kadru — .foreto-media ma overflow: hidden,
   więc pole zostaje co do piksela na miejscu. Ta sama wartość i ten sam powód
   co na karcie realizacji. */
.foreto-result__media .foreto-media__img {
	transition: transform var(--foreto-transition-base);
}

.foreto-result:hover .foreto-result__media .foreto-media__img,
.foreto-result:has(.foreto-result__link:focus-visible) .foreto-result__media .foreto-media__img {
	transform: scale(1.03);
}

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

/* Kreska akcentowa rośnie o jeden krok skali, 24 → 32. Cały jej ruch — rząd
   niesie wtedy trzy zgodne reakcje (kreska, tytuł, kadr), a nie trzy różne. */
.foreto-result__rule {
	width: var(--foreto-space-4);
	height: 2px;
	margin: 0;
	border: 0;
	background: var(--foreto-red);
	transition: width var(--foreto-transition-base);
}

.foreto-result:hover .foreto-result__rule,
.foreto-result:has(.foreto-result__link:focus-visible) .foreto-result__rule {
	width: var(--foreto-space-5);
}

.foreto-result__kicker {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--foreto-text-accent);
}

.foreto-result__title {
	margin: 0;
	font-size: var(--foreto-font-size-h4);
	line-height: var(--foreto-line-h4);
	font-weight: 700;
	text-wrap: pretty;
}

.foreto-result__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--foreto-transition-base);
}

/* Nakładka rozciąga cel kliknięcia na cały rząd. Znany koszt, ten sam co na
   kartach listingów: tekstu w rzędzie nie da się zaznaczyć myszą. */
.foreto-result__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.foreto-result:hover .foreto-result__link,
.foreto-result:has(.foreto-result__link:focus-visible) .foreto-result__link {
	color: var(--foreto-text-accent);
}

/* Pierścień obejmuje CAŁY rząd, nie sam tytuł: łączem jest tytuł, ale celem
   kliknięcia jest rząd, więc pierścień wokół samych liter kłamałby o tym,
   co się zaraz stanie. */
.foreto-result:has(.foreto-result__link:focus-visible) {
	outline: 2px solid var(--foreto-focus);
	outline-offset: 3px;
}

.foreto-result__excerpt {
	margin: 0;
	font-size: var(--foreto-font-size-body);
	line-height: var(--foreto-line-body);
	color: var(--foreto-text-muted);
	text-wrap: pretty;
	/* Trzy wiersze: okno zajawki ma 220 znaków i przy wąskiej kolumnie potrafi
	   zająć cztery. Rząd ma zostać rzędem, a nie akapitem z obrazkiem. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.foreto-result__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--foreto-space-1) 0;
	margin: var(--foreto-space-1) 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 16px;
	color: var(--foreto-text-muted);
}

/* Separator niesie NASTĘPNIK, więc przy usunięciu pozycji nie zostaje sierotą. */
.foreto-result__meta > li + li::before {
	content: '·';
	padding-inline: var(--foreto-space-2);
}

/* Poniżej 640 px kadr 180 px zabiera połowę wiersza i na tytuł zostaje
   kolumna na dwa słowa. Kadr idzie nad treść, w pełnej szerokości. */
@media (max-width: 640px) {
	.foreto-result {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--foreto-space-4);
	}

	.foreto-result__media {
		--foreto-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.foreto-result__rule,
	.foreto-result__link,
	.foreto-result__media .foreto-media__img {
		transition: none;
	}

	.foreto-result:hover .foreto-result__media .foreto-media__img,
	.foreto-result:has(.foreto-result__link:focus-visible) .foreto-result__media .foreto-media__img {
		transform: none;
	}
}

/* =============================================================================
   6. Podświetlenie frazy — .foreto-mark

   NIE czerwone tło. Biel na #F00000 daje 3,94:1, czyli poniżej progu 4,5:1
   dla tekstu — a to jest tekst do przeczytania, nie zaznaczenie myszą, gdzie
   przeglądarka rządzi się sama. Zostaje szare pole kitu (czerń na #F6F6F6 to
   19,6:1) z akcentową podkreśloną krawędzią: podświetlenie widać, kolor marki
   jest obecny, a próg trzyma z zapasem. Kreska jest tym samym elementem
   języka, co kreska akcentowa nad nadtytułem.
   ========================================================================== */

.foreto-mark {
	padding-inline: 2px;
	background: var(--foreto-surface-band);
	box-shadow: inset 0 -2px 0 var(--foreto-text-accent);
	color: var(--foreto-ink);
	font-weight: 700;
}

/* =============================================================================
   7. Stan pusty — .foreto-results-empty

   Nie sam komunikat: strona z jednym zdaniem jest ślepym zaułkiem. Pod spodem
   stoją wejścia w działy serwisu, bo osoba, która nie znalazła frazy, i tak
   szuka jednej z tych rzeczy.
   ========================================================================== */

.foreto-results-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--foreto-space-4);
	padding-block: var(--foreto-space-6);
	text-align: center;
}

.foreto-results-empty__lead {
	margin: 0;
	font-size: var(--foreto-font-size-h4);
	line-height: var(--foreto-line-h4);
	font-weight: 700;
	text-wrap: balance;
}

.foreto-results-empty__hint {
	max-width: 62ch;
	margin: 0;
	color: var(--foreto-text-muted);
	text-wrap: pretty;
}

/* Wariant bez komunikatu: na stronie 404 zdanie wyjaśniające stoi już
   w nagłówku podstrony, więc zostają same wejścia w działy. */
.foreto-results-empty--bare {
	padding-block: 0;
}

.foreto-results-empty__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--foreto-space-3) var(--foreto-space-5);
	margin: var(--foreto-space-2) 0 0;
	padding: 0;
	list-style: none;
}