/* Widoki portfolia i bloga — listing realizacji, realizacja, blog, wpis.

   CZEGO TU NIE MA. Ani jednej reguły, którą niesie już warstwa z plansz
   (assets/css/formimpress.css): przycisk-pigułka, znacznik, koło ze strzałką,
   etykieta z trójkątem, lead, karta, kropki, siatka, trójkąty i poświata stoją
   tam i są tu tylko używane. Ten arkusz dopisuje WYŁĄCZNIE komponenty, których
   w motywie nie było — stąd przedrostek `.fi-p-`: „p" jak portfolio, żeby dało
   się na pierwszy rzut oka odróżnić to, co przyszło z plansz wspólnych, od
   tego, co dołożyły cztery widoki. Powód i lista: DECYZJE-portfolio-blog.md.

   Wszystkie wartości pochodzą z theme.json przez most kit-bridge.css.
   Liczby wpisane wprost mają przy sobie powód — i są to wyłącznie liczby
   z plansz Portfolio.dc.html, Realizacja.dc.html, Blog.dc.html, Wpis.dc.html
   i MobilnePortfolio.dc.html.                                                */

/* ---------------------------------------------------------------------------
   1. Rytm strony i kontener

   Plansze mają 1440 px szerokości i 120 px marginesu — czyli 1200 px treści,
   dokładnie tyle, ile `--foreto-wrap-max`. Kontener liczy się więc tak samo
   jak `.foreto-container` kitu: szerokość treści plus rynna, żeby na wąskim
   ekranie było czym oddychać.
   --------------------------------------------------------------------------- */

.fi-p-wrap {
	width: 100%;
	max-width: calc(var(--foreto-wrap-max) + 2 * var(--foreto-wrap-gutter));
	margin-inline: auto;
	padding-inline: var(--foreto-wrap-gutter);
}

.fi-p-sekcja {
	position: relative;
}

/* Odstępy z plansz, przeliczone na kroki rytmu motywu: 88/72 nad i pod głową
   strony, 96 przed pasmem, 40 między pasmem filtrów a siatką. */
.fi-p-sekcja--glowa { padding-block: 72px var(--foreto-space-8); }
/* 72 od góry: okruszki na 200 px od góry strony, jak etykiety podstron. */
.fi-p-sekcja--glowa-wpisu { padding-block: 72px var(--foreto-space-7); }
.fi-p-sekcja--case { padding-block: 72px var(--foreto-space-7); }
.fi-p-sekcja--siatka { padding-block: 0 var(--foreto-space-10); }
.fi-p-sekcja--pierwsza { padding-bottom: var(--foreto-space-10); }
.fi-p-sekcja--reszta { padding-block: var(--foreto-space-10); }
.fi-p-sekcja--panel { padding-bottom: var(--foreto-space-4); }
.fi-p-sekcja--meta { padding-bottom: var(--foreto-space-9); }
/* Sceny mają 100vw, czyli razem z paskiem przewijania — obcięcie w poziomie
   zdejmuje poziomy pasek strony. */
.fi-p-sekcja--galeria { padding-bottom: var(--foreto-space-10); overflow-x: clip; }

/* Treść realizacji (bloki z edytora między metryką a galerią). Plansza
   portfolio z Figmy układa grafiki jako karty pełnej szerokości kolumny,
   jedna pod drugą z odstępem 16 px; kolaż na końcu wychodzi na całą
   szerokość okna. Obrazy są eksportami 2× — `width` z bloku trzyma
   rozmiar układu, przeglądarka bierze z `srcset` gęstość ekranu. */
.fi-p-sekcja--tresc { padding-bottom: var(--foreto-space-8); overflow-x: clip; }
.fi-p-tresc { display: flex; flex-direction: column; gap: 16px; }
.fi-p-tresc > .foreto-split { margin-block: var(--foreto-space-4) var(--foreto-space-7); }
.fi-p-tresc .wp-block-image { margin: 0; }
.fi-p-tresc .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--foreto-radius-card); }
.fi-p-tresc .fi-obraz-pelny { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); margin-top: var(--foreto-space-4); }
.fi-p-tresc .fi-obraz-pelny img { border-radius: 0; }
.fi-p-tresc .fi-p-h4 { margin-bottom: var(--foreto-space-3); }
.fi-p-tresc ul { margin: 0 0 var(--foreto-space-6); padding-left: 1.25em; }
.fi-p-tresc ul li { margin-bottom: 6px; }
.fi-p-sekcja--nawigacja { padding-bottom: var(--foreto-space-10); }
.fi-p-sekcja--wyrozniony { padding-bottom: var(--foreto-space-7); }
.fi-p-sekcja--powiadomienia { padding-bottom: var(--foreto-space-10); }
.fi-p-sekcja--obraz-wpisu { padding-bottom: var(--foreto-space-8); }
.fi-p-sekcja--artykul { padding-bottom: var(--foreto-space-10); }
.fi-p-sekcja--dalej { padding-bottom: var(--foreto-space-10); }

/* ---------------------------------------------------------------------------
   2. Typografia widoków

   Nazwy z plansz (fi-h1 … fi-maly) nie weszły do formimpress.css — tam siedzą
   tylko reguły `em`/`mark`. Zamiast dopisywać się do cudzego pliku, widoki
   niosą własne klasy o tych samych wartościach z theme.json.
   --------------------------------------------------------------------------- */

.fi-p-h1,
.fi-p-h2,
.fi-p-h3,
.fi-p-h4 {
	margin: 0;
	font-family: var(--fi-display);
	color: var(--fi-granat-900);
	letter-spacing: -0.02em;
}

.fi-p-h1 {
	font-weight: var(--wp--custom--weight--bold);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line--h-1);
}

.fi-p-h2 {
	font-weight: var(--wp--custom--weight--bold);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--line--h-2);
}

.fi-p-h3 {
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--line--h-3);
	letter-spacing: -0.01em;
}

.fi-p-h4 {
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line--h-4);
	letter-spacing: 0;
}

.fi-p-h1 em,
.fi-p-h2 em,
.fi-p-h3 em {
	font-style: normal;
	font-weight: var(--wp--custom--weight--thin);
}

.fi-p-h1 mark,
.fi-p-h2 mark,
.fi-p-h3 mark {
	background: none;
	color: var(--fi-blekit-500);
}

.na-ciemnym .fi-p-h1,
.na-ciemnym .fi-p-h2,
.na-ciemnym .fi-p-h3,
.na-ciemnym .fi-p-h4 { color: var(--fi-biel); }

/* Na ciemnym tle akcent jaśnieje — błękit 300 daje ponad 8:1 na głębi. */
.na-ciemnym .fi-p-h1 mark,
.na-ciemnym .fi-p-h2 mark,
.na-ciemnym .fi-p-h3 mark { color: var(--fi-blekit-300); }

.fi-p-maly {
	margin: 0;
	font-size: var(--wp--preset--font-size--card);
	line-height: var(--wp--custom--line--card);
	color: var(--fi-tekst-2);
}

.na-ciemnym .fi-p-maly { color: rgb(255 255 255 / 0.6); }

/* Nadetykieta pól metryki i kolumny bocznej — wersaliki bez trójkąta. */
.fi-p-etykieta-mala {
	display: block;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: 11px; /* Plansza: `.ds-etykieta`, mniejsza od `--label` (12 px). */
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fi-tekst-2);
}

/* ---------------------------------------------------------------------------
   3. Głowa strony — tytuł po lewej, lead po prawej
   --------------------------------------------------------------------------- */

.fi-p-glowa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-8);
	align-items: start;
}

.fi-p-glowa > :not(.fi-p-glowa__tekst) { align-self: end; }

.fi-p-glowa--realizacja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

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

.fi-p-glowa__lead { margin: 0; }

/* Tytuł realizacji w tym samym stopniu, co każdy h1 podstrony (64/68) —
   plansza miała 72, ale jeden stopień h1 w serwisie jest ważniejszy. */
.fi-p-h1--case {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line--h-1);
}

.fi-p-tagi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foreto-space-1);
}

/* Pigułki pod tytułem realizacji: przekrzywione na przemian i pływające bez
   przerwy, jak tagi na kartach i kafle ikon. Obrót na `rotate`, pływanie na
   `translate` — nie wchodzą sobie w drogę. */
.fi-p-tagi--glowa { gap: 10px; margin-top: 4px; }

.fi-p-tagi--glowa .fi-tag {
	rotate: -2deg;
	animation: fi-plyw 5s ease-in-out infinite;
}

.fi-p-tagi--glowa .fi-tag:nth-child(2n) { rotate: 2.5deg; animation-delay: -1.9s; }
.fi-p-tagi--glowa .fi-tag:nth-child(3n) { rotate: -1.5deg; animation-delay: -3.6s; }

@media (prefers-reduced-motion: reduce) {
	.fi-p-tagi--glowa .fi-tag { animation: none; rotate: 0deg; }
}

/* ---------------------------------------------------------------------------
   4. Pasek filtrów
   --------------------------------------------------------------------------- */

.fi-p-pasek-filtrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-4);
	margin-block-start: var(--foreto-space-7);
}

.fi-p-filtry ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--foreto-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Znacznik-odsyłacz. `.fi-tag` z warstwy plansz jest napisany na `<span>`,
   więc odsyłacz dokłada tylko to, czego span nie potrzebował. */
/* Bez własnego `transition` — przejścia i pływanie na najechanie daje kit
   (a.fi-tag w formimpress.css). */
.fi-p-filtry .fi-tag { text-decoration: none; }

.fi-p-filtry .fi-tag:hover { background: var(--fi-szary-300); }
.fi-p-filtry .fi-tag--aktywny:hover { background: var(--fi-granat-700); }

.fi-p-filtry .fi-tag:focus-visible {
	outline: 3px solid var(--foreto-focus);
	outline-offset: 3px;
}

/* Kropka rozdzielająca nazwę od licznika — sama w sobie nic nie znaczy, więc
   jest ukryta przed czytnikiem, a licznik zostaje liczbą. */
.fi-p-filtry__kropka { opacity: 0.5; }
.fi-p-filtry__ile { font-variant-numeric: tabular-nums; }

.fi-p-pasek-filtrow__nota {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   5. Siatka portfolia i karta projektu

   Trzy kolumny, wiersz 300 px, przerwa 16 px — plansza Portfolio.dc.html.
   Karta pierwsza (i ostatnia w drugiej części) zajmuje dwie kolumny.
   --------------------------------------------------------------------------- */

.fi-p-siatka-portfolio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 300px;
	gap: var(--foreto-space-3);
}

.fi-p-projekt {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--fi-granat-900);
	color: var(--fi-biel);
	text-decoration: none;
	isolation: isolate;
}

.fi-p-projekt--szeroka { grid-column: span 2; }
/* Jedyna karta w siatce (kategoria z jednym projektem) idzie na całą szerokość. */
.fi-p-siatka-portfolio > .fi-p-projekt:only-child { grid-column: 1 / -1; }
/* Duża karta 2×2 — układ bento liczy serwer (formimpress_p_uklad_bento). */
.fi-p-projekt--duza { grid-column: span 2; grid-row: span 2; }
.fi-p-projekt--duza .fi-p-projekt__tytul { font-size: 40px; line-height: 44px; }
.fi-p-projekt--duza .fi-p-projekt__tresc { padding: var(--foreto-space-5); }

.fi-p-projekt__tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zdjęcie jeżdżące pod nakładką na najechanie — jedyna animacja karty,
	   i to na `transform`, czyli bez przeliczania układu strony. */
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fi-p-projekt:hover .fi-p-projekt__tlo,
.fi-p-projekt:focus-visible .fi-p-projekt__tlo { transform: scale(1.04); }

.fi-p-projekt__naklad {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(7 15 43 / 0) 35%, rgb(7 15 43 / 0.92) 100%);
}

.fi-p-projekt--bez-tla { background-color: var(--fi-granat-900); }

.fi-p-projekt__tresc {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--foreto-space-3);
	padding: 22px; /* Plansza: `.fi-projekt__tresc` w siatce portfolia. */
}

.fi-p-projekt--szeroka .fi-p-projekt__tresc { padding: var(--foreto-space-4); }

.fi-p-projekt__opis {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-2);
	min-width: 0;
}

.fi-p-projekt__tytul {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 24px; /* Plansza: karta pojedyncza 24/30, szeroka 34/38. */
	line-height: 30px;
	letter-spacing: -0.01em;
	color: var(--fi-biel);
}

.fi-p-projekt--szeroka .fi-p-projekt__tytul {
	font-size: 34px;
	line-height: 38px;
}

/* Zajawka na szerokiej karcie ma być JEDNYM ODDECHEM, nie akapitem: dwa
   wiersze to tyle, ile plansza pokazuje pod tytułem, a dłuższy opis wchodzi
   na zdjęcie i przestaje być czytelny. */
.fi-p-projekt__lead {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--card);
	line-height: var(--wp--custom--line--card);
	color: rgb(255 255 255 / 0.7);
}

.fi-p-projekt .fi-tag {
	height: 26px;
	font-size: 11px;
}

/* Bez własnego `transition` — przejścia (w tym amplitudy pływania) daje kit;
   lokalna lista przejść nadpisywała je i koło przeskakiwało. */
.fi-p-projekt .fi-kolo {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

/* Koło na każdej karcie 44 px — także na szerokiej i dużej. */

/* Reakcja koła ze strzałką na najechanie jest wspólna dla serwisu
   (formimpress.css, sekcja „Pływanie") — tu nic o kole. */

.fi-p-projekt:focus-visible {
	outline: 3px solid var(--foreto-focus);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   6. Pasmo CTA — reguł nie ma, bo nie ma komponentu

   Ciemny pas domykający stronę rysuje blok `formimpress/pasmo`
   z inc/widoki-glowna.php i on niesie własne `.fi-g-pasmo*`. Powtórzenie tych
   reguł tutaj znaczyłoby dwa arkusze na jeden pas.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   7. Realizacja — panel, metryka, galeria, nawigacja
   --------------------------------------------------------------------------- */

/* Krój, wersaliki, błękit i trójkąt biorą z .fi-etykieta (formimpress.css).
   16 px do tytułu — tyle, ile etykieta do h1 na innych podstronach. */
.fi-p-okruszki { margin-bottom: var(--foreto-space-3); }

.fi-p-okruszki ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-p-okruszki li {
	display: flex;
	align-items: center;
	min-width: 0;
}

.fi-p-okruszki > ol > svg {
	width: 6px;
	height: 9px;
	flex: 0 0 auto;
	color: var(--fi-blekit-500);
}

.fi-p-okruszki a { color: inherit; text-decoration: none; }
.fi-p-okruszki a:hover { text-decoration: underline; text-underline-offset: 4px; }

.fi-p-okruszki__tu {
	color: var(--fi-granat-900);
	font-weight: var(--wp--custom--weight--medium);
	/* Tytuł wpisu bywa zdaniem — okruszek zostaje jednym wierszem. */
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fi-p-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 620px; /* Plansza Realizacja.dc.html. */
	overflow: hidden;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--fi-granat-900);
}

/* Ten sam powód co przy galerii: zrzut całej strony kadrowany od góry pokazuje
   nagłówek projektu, a wyśrodkowany — przypadkowy kawałek środka. */
.fi-p-panel .fi-p-projekt__tlo { object-position: top center; }

.fi-p-panel__naklad {
	background: linear-gradient(180deg, rgb(7 15 43 / 0) 60%, rgb(7 15 43 / 0.6) 100%);
}

.fi-p-panel__stopka {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-3);
	padding: var(--foreto-space-5);
}

/* Pigułka kategorii w panelu: przekrzywiona i pływająca bez przerwy, jak
   pigułki pod tytułem. Bez backdrop-filter — warstwa z rozmyciem plus ruch
   dawały schodkowanie tekstu (patrz tagi na kartach). */
.fi-p-panel__podpis {
	background: rgb(7 15 43 / 0.72);
	color: var(--fi-biel);
	rotate: -2deg;
	animation: fi-plyw 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.fi-p-panel__podpis { animation: none; rotate: 0deg; }
}

.fi-p-panel__live { flex: 0 0 auto; margin-inline-start: auto; }

.fi-p-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--foreto-space-3);
}

.fi-p-meta__poz {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-1);
	padding: 20px 24px; /* Plansza: `.fi-meta__poz`. */
	border-radius: 20px;
	background: var(--fi-lod);
}

.fi-p-meta__wartosc {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 17px; /* Plansza: `.fi-h4` przyciśnięty do 17 px. */
	line-height: 24px;
	color: var(--fi-granat-900);
	overflow-wrap: anywhere;
}

.fi-p-meta__wartosc--link { color: var(--fi-blekit-600); }
.fi-p-meta__wartosc--link:hover { text-decoration: underline; }
.fi-p-meta__wartosc--brak { color: var(--fi-tekst-2); font-weight: var(--wp--custom--weight--medium); }

/* ---------------------------------------------------------------------------
   7b. Galeria realizacji — sceny z pływającymi, nachodzącymi kartami.

   Zrzuty w naturalnych proporcjach, bez cięcia. Scena wychodzi poza kolumnę
   1200 na całą szerokość okna. Karta: pływa (translate na <li>), stoi
   przekrzywiona (rotate na odsyłaczu), nachodzi na sąsiadki ujemnymi
   marginesami. Najechanie: pływanie zamiera, karta prostuje się, rośnie
   o 4 %, wychodzi na wierzch. Długa strona stoi
   w ramce tabletu i przewija się po najechaniu; ekran telefonu w ramce
   telefonu. Poniżej 768 px karty nie nachodzą (dotyk nie ma hovera).
   --------------------------------------------------------------------------- */

.fi-gal__naglowek {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-8);
	align-items: end;
	margin-bottom: var(--foreto-space-7);
}

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

.fi-gal__pigulki { display: flex; flex-wrap: wrap; gap: 10px; justify-self: end; }

.fi-gal__pigulka {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1.5px solid var(--foreto-border-control);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fi-granat-900);
	text-decoration: none;
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

.fi-gal__pigulka b { font-weight: var(--wp--custom--weight--regular); color: var(--fi-tekst-2); }
.fi-gal__pigulka:hover, .fi-gal__pigulka:focus-visible { background: var(--fi-granat-900); border-color: var(--fi-granat-900); color: var(--fi-biel); }
.fi-gal__pigulka:hover b, .fi-gal__pigulka:focus-visible b { color: var(--fi-blekit-300); }

/* Scena na całą szerokość okna; treść ma własne marginesy. */
.fi-gal__scena {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: var(--foreto-space-7) 0 var(--foreto-space-9);
	overflow: hidden;
}

/* Tło sceny z konfiguracji (pole „Tło sceny"). Granat odwraca kolory nagłówka. */
.fi-gal__scena--tlo-lod { background: var(--fi-lod); }
.fi-gal__scena--tlo-granat { background: var(--fi-granat-900); }
.fi-gal__scena--tlo-granat .fi-gal__tytul, .fi-gal__scena--tlo-granat .fi-etykieta { color: var(--fi-biel); }
.fi-gal__scena--tlo-granat .fi-gal__tytul em { color: var(--fi-blekit-300); }

.fi-gal__glowa {
	width: 100%;
	max-width: calc(var(--foreto-wrap-max) + 2 * var(--foreto-wrap-gutter));
	margin: 0 auto var(--foreto-space-6);
	padding-inline: var(--foreto-wrap-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
	align-items: flex-start;
}

/* Tytuł sceny w pełnym rozmiarze h2 — scena to rozdział galerii, nie podpis. */
.fi-gal__tytul { font-size: var(--wp--preset--font-size--h-2); line-height: var(--wp--custom--line--h-2); }

/* Karty trzymają się kolumny 1200 px (tło sceny nadal na całą szerokość);
   nadmiar z nachodzenia obcina scena. */
.fi-gal__karty {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: calc(var(--foreto-wrap-max) + 2 * var(--foreto-wrap-gutter));
	margin: 0 auto;
	padding: 0 var(--foreto-wrap-gutter);
	box-sizing: border-box;
	list-style: none;
}

/* Cztery liczby układu przychodzą z PHP (inc/galeria-uklady.php) jako zmienne
   na <li>: szerokość, przesunięcia i obrót. */
.fi-gal__plyw {
	position: relative;
	flex: 0 0 auto;
	width: var(--fi-szer, 46%);
	margin-left: var(--fi-ml, 0);
	margin-top: var(--fi-mt, 0);
	animation: fi-plyw 6s ease-in-out infinite;
}

.fi-gal__plyw:nth-child(2n) { animation-duration: 7.4s; animation-delay: -2.1s; }
.fi-gal__plyw:nth-child(3n) { animation-duration: 8.2s; animation-delay: -4.6s; }
.fi-gal__plyw:hover { animation-play-state: paused; z-index: 20; }

.fi-gal__karta {
	position: relative;
	display: block;
	border-radius: var(--foreto-radius-card);
	background: var(--fi-biel);
	box-shadow: 0 8px 24px rgb(7 15 43 / 0.06);
	overflow: hidden;
	transition: rotate 500ms cubic-bezier(0.2, 0.7, 0.2, 1), scale 500ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 500ms ease;
}

.fi-gal__karta img { display: block; width: 100%; height: auto; }

/* Odstęp w karcie (pole „Odstęp w galerii" na załączniku): białe pole dookoła
   zrzutu przyciętego do krawędzi; sam zrzut dostaje wtedy lekkie zaokrąglenie. */
.fi-gal__karta--odstep { padding: var(--fi-pad, 24px); }
.fi-gal__karta--odstep img { border-radius: 12px; }

.fi-gal__karta { rotate: var(--fi-rot, 0deg); }

.fi-gal__plyw:hover .fi-gal__karta,
.fi-gal__karta:focus-visible { rotate: 0deg; scale: 1.04; box-shadow: 0 14px 36px rgb(7 15 43 / 0.09); }
.fi-gal__karta:focus-visible { outline: 3px solid var(--foreto-focus); outline-offset: 4px; }

/* Koło ze strzałką „powiększ" — pojawia się z kartą na wierzchu. */
.fi-gal__kolo { position: absolute; right: 18px; top: 18px; opacity: 0; transition: opacity 350ms ease; }
.fi-gal__plyw:hover .fi-gal__kolo, .fi-gal__karta:focus-visible .fi-gal__kolo { opacity: 1; }

/* --- strony w całości: ramka tabletu, ekran przewija się po najechaniu ---- */
/* Układ Auto (desktop i całe strony): niepełny ostatni rząd NIE centruje
   się — samotna karta zostaje w lewej kolumnie. Pary dosuwa do środka PHP
   (formimpress_galeria_wyrownaj_pary), bo zna szerokości obu kart. */
.fi-gal__scena--desktop.fi-gal__scena--uklad-auto .fi-gal__karty,
.fi-gal__scena--strony.fi-gal__scena--uklad-auto .fi-gal__karty { justify-content: flex-start; }

.fi-gal__karta--strony { padding: 16px; background: var(--fi-granat-900); border-radius: 28px; }
.fi-gal__ekran { display: block; height: clamp(320px, 30vw, 460px); overflow: hidden; border-radius: 12px; background: var(--fi-biel); }
.fi-gal__ekran img { transition: translate 7s ease-in-out; }
.fi-gal__plyw:hover .fi-gal__ekran img { translate: 0 calc(-100% + clamp(320px, 30vw, 460px)); }

/* --- mobile: ramka telefonu ---------------------------------------------- */
.fi-gal__karta--mobile { padding: 10px; background: var(--fi-granat-900); border-radius: 36px; }
.fi-gal__karta--mobile img { border-radius: 26px; }
.fi-gal__karta--mobile .fi-gal__kolo { right: 22px; top: 22px; }

/* Ramka urządzenia w kolorze projektu (pole „Ramka" na realizacji).
   Bez żadnych obrysów — biała ramka od strony odcina się samym cieniem
   karty. */
.fi-gal--ramka-biel .fi-gal__karta--mobile,
.fi-gal--ramka-biel .fi-gal__karta--strony { background: var(--fi-biel); }
.fi-gal--ramka-czern .fi-gal__karta--mobile,
.fi-gal--ramka-czern .fi-gal__karta--strony { background: #0b0d12; }
.fi-gal--ramka-jasna .fi-gal__karta--mobile,
.fi-gal--ramka-jasna .fi-gal__karta--strony { background: var(--fi-lod, #eef3f9); }

/* Tło per zdjęcie z edytora ręcznego — wygrywa z ramką realizacji. */
.fi-gal .fi-gal__karta--tlo-biel { background: var(--fi-biel); }
.fi-gal .fi-gal__karta--tlo-granat { background: var(--fi-granat-900); }
.fi-gal .fi-gal__karta--tlo-czern { background: #0b0d12; }
.fi-gal .fi-gal__karta--tlo-jasna { background: var(--fi-lod, #eef3f9); }

/* --- tryb Ręczny: karty stoją tam, gdzie postawiła je redakcja ---------
   Lista ma wysokość z edytora (procent szerokości), karty są pozycjonowane
   absolutnie procentami — ten sam obraz w każdej szerokości okna. Ekran
   tabletu dostaje wysokość z edytora (procent szerokości karty); przewijanie
   po najechaniu liczy się z jednostki kontenera (cqh), bo wysokość nie jest
   już znana z góry. Poniżej 768 px wszystko wraca do zwykłej kolumny. */
.fi-gal__scena--uklad-reczny .fi-gal__karty {
	display: block;
	position: relative;
	max-width: var(--foreto-wrap-max);
	padding: 0;
	aspect-ratio: 100 / var(--fi-wys, 100);
	container-type: inline-size; /* 1cqw = 1 % szerokości sceny — dla pozycji pionowej kart. */
}

.fi-gal__scena--uklad-reczny .fi-gal__plyw {
	position: absolute;
	left: var(--fi-x, 0%);
	top: calc(var(--fi-y, 0) * 1cqw);
	margin: 0;
	z-index: var(--fi-z, 1);
}

.fi-gal__scena--uklad-reczny .fi-gal__plyw:hover { z-index: 20; }

.fi-gal__scena--uklad-reczny .fi-gal__ekran { height: auto; aspect-ratio: 100 / var(--fi-ekran, 80); container-type: size; }
.fi-gal__scena--uklad-reczny .fi-gal__plyw:hover .fi-gal__ekran img { translate: 0 calc(-100% + 100cqh); }

@media (max-width: 1279px) {
	.fi-gal__scena--uklad-reczny .fi-gal__karty { width: calc(100% - 2 * var(--foreto-wrap-gutter)); }
}

/* Tablet (768–1023 px): własny układ z edytora, gdy scena go ma (zmienne -t
   na kartach); bez niego zmienne -t nie istnieją i zostaje desktop. */
@media (max-width: 1023px) {
	.fi-gal__scena--reczny-t .fi-gal__karty { aspect-ratio: 100 / var(--fi-wys-t, var(--fi-wys, 100)); }
	.fi-gal__scena--reczny-t .fi-gal__plyw { left: var(--fi-x-t, var(--fi-x)); top: calc(var(--fi-y-t, var(--fi-y, 0)) * 1cqw); width: var(--fi-szer-t, var(--fi-szer)); z-index: var(--fi-z-t, var(--fi-z, 1)); }
	.fi-gal__scena--reczny-t .fi-gal__plyw:hover { z-index: 20; }
	.fi-gal__scena--reczny-t .fi-gal__karta { rotate: var(--fi-rot-t, var(--fi-rot, 0deg)); }
	.fi-gal__scena--reczny-t .fi-gal__plyw:hover .fi-gal__karta { rotate: 0deg; }
	.fi-gal__scena--reczny-t .fi-gal__ekran { aspect-ratio: 100 / var(--fi-ekran-t, var(--fi-ekran, 80)); }
}

@media (max-width: 1023px) {
	.fi-gal__naglowek { grid-template-columns: 1fr; gap: var(--foreto-space-5); }
	.fi-gal__pigulki { justify-self: start; }
	.fi-gal__scena--mobile .fi-gal__plyw { width: 30% !important; }
}

/* Na dotyku nic nie nachodzi — karty w kolumnach, nadal pływają i stoją
   lekko przekrzywione. */
@media (max-width: 767px) {
	.fi-gal__karty { gap: var(--foreto-space-5) var(--foreto-space-4); padding: 0 var(--foreto-space-4); }
	.fi-gal__scena .fi-gal__plyw { width: 100% !important; margin: 0 !important; position: static; }
	.fi-gal__scena--uklad-reczny .fi-gal__karty { display: flex; aspect-ratio: auto; width: auto; max-width: none; padding: 0 var(--foreto-space-4); }
	.fi-gal__scena--uklad-reczny .fi-gal__ekran { aspect-ratio: auto; container-type: normal; }
	.fi-gal__scena--uklad-reczny .fi-gal__plyw:hover .fi-gal__ekran img { translate: 0 calc(-100% + 60vw); }

	/* Telefon z własnym układem z edytora (zmienne -m): znów płótno absolutne,
	   bez pływania w kolumnie. Scena bez układu telefonu zostaje w kolumnie. */
	.fi-gal__scena--reczny-m .fi-gal__karty { display: block; position: relative; aspect-ratio: 100 / var(--fi-wys-m, 100); width: auto; max-width: none; padding: 0; margin-inline: var(--foreto-space-4); gap: 0; container-type: inline-size; }
	.fi-gal__scena--reczny-m .fi-gal__plyw { position: absolute; left: var(--fi-x-m); top: calc(var(--fi-y-m, 0) * 1cqw); width: var(--fi-szer-m) !important; margin: 0 !important; z-index: var(--fi-z-m, 1); }
	.fi-gal__scena--reczny-m .fi-gal__plyw:hover { z-index: 20; }
	.fi-gal__scena--reczny-m .fi-gal__karta { rotate: var(--fi-rot-m, 0deg); }
	.fi-gal__scena--reczny-m .fi-gal__ekran { height: auto; aspect-ratio: 100 / var(--fi-ekran-m, 80); container-type: size; }
	.fi-gal__scena--reczny-m .fi-gal__plyw:hover .fi-gal__ekran img { translate: 0 calc(-100% + 100cqh); }
	.fi-gal__scena--mobile .fi-gal__plyw { width: calc(50% - var(--foreto-space-4) / 2) !important; }
	.fi-gal__scena--mobile .fi-gal__plyw:nth-child(2n) { margin-top: var(--foreto-space-6) !important; }
	.fi-gal__ekran { height: 60vw; }
	.fi-gal__plyw:hover .fi-gal__ekran img { translate: 0 calc(-100% + 60vw); }
}

@media (prefers-reduced-motion: reduce) {
	.fi-gal__plyw { animation: none; }
	.fi-gal__karta { rotate: 0deg !important; transition: none; }
	.fi-gal__ekran img { transition: none; }
}

.fi-p-nawigacja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-4);
	padding-block-start: var(--foreto-space-6);
	border-block-start: var(--fi-linia);
}

.fi-p-nawigacja__poz { max-width: 34%; }
.fi-p-nawigacja__napis { text-align: start; white-space: normal; }
.fi-p-nawigacja__rola { color: var(--fi-tekst-2); }
.fi-p-nawigacja__poz--dalej { text-align: end; }
.fi-p-nawigacja__kolo { transform: rotate(180deg); }
.fi-p-nawigacja__wszystkie { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   8. Blog — wyróżniony wpis, siatka, powiadomienia
   --------------------------------------------------------------------------- */

.fi-p-szukajka {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-2);
	flex: 0 0 auto;
	width: 280px; /* Plansza Blog.dc.html. */
	height: 44px;
	padding-inline: 18px 6px;
	border: var(--wp--custom--border--width) solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fi-lod);
}

.fi-p-szukajka:focus-within {
	background: var(--fi-biel);
	border-color: var(--fi-blekit-500);
	box-shadow: 0 0 0 4px rgb(0 166 237 / 0.15);
}

.fi-p-szukajka__pole {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--fi-body);
	font-size: var(--wp--preset--font-size--card);
	color: var(--fi-tekst);
}

.fi-p-szukajka__pole:focus { outline: none; }

.fi-p-szukajka__guzik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--fi-granat-900);
	cursor: pointer;
}

.fi-p-szukajka__guzik svg { width: 16px; height: 16px; }

.fi-p-wyrozniony {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-6);
	align-items: center;
	padding: var(--foreto-space-4);
}

.fi-p-wyrozniony__obraz {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--field);
}

/* Kolor tła podaje modyfikator z karty (`--granat` / `--lod`) — tu zostaje
   sam kadr, żeby jedna reguła obsługiwała oba warianty tekstury. */
.fi-p-wyrozniony__obraz--bez { min-height: 220px; }

.fi-p-wyrozniony__tresc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--foreto-space-3);
	padding-inline-end: var(--foreto-space-4);
}

.fi-p-wyrozniony__tytul {
	font-size: 32px; /* Plansza: przyciśnięta „h2" karty wyróżnionej. */
	line-height: 40px;
}

.fi-p-wyrozniony__tytul a { color: inherit; }
.fi-p-wyrozniony__tytul a:hover { color: var(--fi-blekit-600); }

.fi-p-wyrozniony__zajawka { color: var(--fi-tekst-2); }

.fi-p-wyrozniony__meta {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-2);
	margin: 0;
}

.fi-p-awatar {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--fi-biel);
}

.fi-p-awatar--maly { width: 36px; height: 36px; border-width: 0; }
.fi-p-awatar--duzy { width: 64px; height: 64px; }

.fi-p-wpisy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--foreto-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-p-wpis {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--fi-linia);
	border-radius: var(--wp--custom--radius--card);
	background: var(--fi-biel);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fi-p-wpis:hover {
	box-shadow: var(--fi-cien-1);
	transform: translateY(-2px);
}

.fi-p-wpis__obraz {
	display: block;
	width: 100%;
	height: 200px; /* Plansza Blog.dc.html: `.fi-wpis__obraz`. */
	object-fit: cover;
	flex: 0 0 auto;
}

.fi-p-wpis__obraz--granat { background-color: var(--fi-granat-900); }
.fi-p-wpis__obraz--lod { background-color: var(--fi-lod); }

.fi-p-wpis__tresc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 22px 24px 26px; /* Plansza: `.fi-wpis__tresc`. */
}

.fi-p-wpis__tytul { color: var(--fi-granat-900); }

/* Klikalne pole na całą kartę bez owijania nagłówka odsyłaczem. */
.fi-p-wpis__link { color: inherit; }

.fi-p-wpis__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.fi-p-wpis:hover .fi-p-wpis__tytul { color: var(--fi-blekit-600); }

.fi-p-wpis__link:focus-visible::after {
	outline: 3px solid var(--foreto-focus);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--card);
}

.fi-p-wpis__stopka { margin-block-start: auto; }

.fi-p-wiecej {
	display: flex;
	justify-content: center;
	margin-block-start: var(--foreto-space-6);
}

.fi-p-powiadomienia {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--foreto-space-7);
	align-items: center;
	overflow: hidden;
	padding: 48px 56px; /* Plansza Blog.dc.html. */
	background: var(--fi-glebia);
	color: var(--fi-biel);
}

.fi-p-powiadomienia__poswiata {
	width: 360px;
	height: 360px;
	background: rgb(0 166 237 / 0.4);
	inset-inline-end: -60px;
	inset-block-start: -180px;
}

.fi-p-powiadomienia__tekst,
.fi-p-powiadomienia__forma {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
	align-items: flex-start;
}

.fi-p-powiadomienia__forma { gap: var(--foreto-space-3); width: 100%; }

.fi-p-powiadomienia__wiersz {
	display: flex;
	gap: var(--foreto-space-2);
	width: 100%;
}

.fi-p-pole {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--wp--custom--field--h);
	padding-inline: 18px;
	border: var(--wp--custom--border--width) solid rgb(255 255 255 / 0.14);
	border-radius: var(--wp--custom--radius--field);
	background: rgb(255 255 255 / 0.08);
	font-family: var(--fi-body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--fi-biel);
}

.fi-p-pole::placeholder { color: rgb(255 255 255 / 0.5); }

.fi-p-pole:focus-visible {
	outline: 3px solid var(--wp--custom--state--focus-on-accent, #fff);
	outline-offset: 2px;
}

.fi-p-zgoda { margin: 0; }

.fi-p-zgoda label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fi-p-zgoda__pole {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--fi-blekit-500);
}

.fi-p-zgoda .fi-p-maly { font-size: 12px; line-height: 18px; }
.fi-p-zgoda a { color: var(--fi-biel); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   9. Wpis
   --------------------------------------------------------------------------- */

.fi-p-glowa-wpisu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--foreto-space-4);
	margin-block-start: 0;
	text-align: center;
}

.fi-p-h1--wpis {
	max-width: 1000px; /* Plansza Wpis.dc.html — miara wiersza, nie kolumny. */
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.15;
}

.fi-p-autor-wiersz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

.fi-p-autor-wiersz__osoba { color: var(--fi-tekst); }
.fi-p-autor-wiersz__osoba strong { font-weight: var(--wp--custom--weight--medium); }

.fi-p-obraz-wpisu {
	display: block;
	width: 100%;
	/* `height: auto` przy `aspect-ratio` nie jest ozdobą: atrybuty `width`
	   i `height` obrazu WordPressa są dla przeglądarki podpowiedzią
	   prezentacyjną o randze stylu, więc bez tej deklaracji wygrywają
	   z proporcją i kadr rozjeżdża się do naturalnej wysokości pliku. */
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--panel);
}

.fi-p-artykul {
	display: grid;
	grid-template-columns: 240px minmax(0, 720px); /* Plansza Wpis.dc.html. */
	gap: var(--foreto-space-8);
	justify-content: center;
}

.fi-p-bok {
	position: sticky;
	top: var(--foreto-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-4);
	align-self: start;
}

.fi-p-bok__blok {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-2);
}

.fi-p-spis__lista {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fi-p-spis__lista a {
	display: block;
	padding-inline-start: 14px;
	font-size: var(--wp--preset--font-size--card);
	line-height: 20px;
	color: var(--fi-tekst-2);
}

.fi-p-spis__lista a:hover { color: var(--fi-granat-900); }

.fi-p-spis__lista a[aria-current="true"] {
	padding-inline-start: 12px;
	border-inline-start: 2px solid var(--fi-blekit-500);
	color: var(--fi-blekit-600);
}

.fi-p-udostepnij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--foreto-space-2);
}

.fi-p-udostepnij__poz {
	width: 40px;
	height: 40px;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 13px;
	cursor: pointer;
}

.fi-p-udostepnij__poz svg { width: 16px; height: 16px; }

.fi-p-udostepnij__poz:focus-visible {
	outline: 3px solid var(--foreto-focus);
	outline-offset: 3px;
}

.fi-p-udostepnij__status:empty { display: none; }

/* Treść wpisu — miary z planszy Wpis.dc.html. */
.fi-p-artykul__tresc p {
	margin: 0 0 var(--foreto-space-4);
	font-size: 17px;
	line-height: 30px;
	color: var(--fi-tekst);
}

/* Lead: pierwszy akapit wpisu jest zajawką i tak stoi na planszy. */
.fi-p-artykul__tresc > p:first-child {
	font-size: 20px;
	line-height: 34px;
	color: var(--fi-granat-500);
}

.fi-p-artykul__tresc h2 {
	margin: var(--foreto-space-6) 0 var(--foreto-space-3);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 24px;
	line-height: 32px;
	color: var(--fi-granat-900);
}

/* PYTANIE WYWIADU. Wpisy bloga to w większości wywiady: pytanie dziennikarki
   przyszło z importu jako `h3` i tak ma zostać w drzewie dokumentu — trójkąt
   jest znakiem marki dorysowanym obramowaniami, nie treścią. */
.fi-p-artykul__tresc h3 {
	display: flex;
	gap: var(--foreto-space-2);
	margin: var(--foreto-space-5) 0 var(--foreto-space-2);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 19px;
	line-height: 30px;
	color: var(--fi-granat-900);
	scroll-margin-top: var(--foreto-space-8);
}

.fi-p-artykul__tresc h3::before {
	content: '';
	width: 0;
	height: 0;
	flex: 0 0 auto;
	margin-block-start: 10px;
	border-inline-start: 8px solid var(--fi-blekit-500);
	border-block: 6px solid transparent;
}

.fi-p-artykul__tresc h4 {
	margin: var(--foreto-space-5) 0 var(--foreto-space-2);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--wp--custom--line--h-4);
	color: var(--fi-granat-900);
}

.fi-p-artykul__tresc img,
.fi-p-artykul__tresc figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

.fi-p-artykul__tresc figure { margin: var(--foreto-space-5) 0; }

.fi-p-artykul__tresc figcaption {
	margin-block-start: var(--foreto-space-2);
	font-size: var(--wp--preset--font-size--card);
	line-height: var(--wp--custom--line--card);
	color: var(--fi-tekst-2);
}

.fi-p-artykul__tresc ul,
.fi-p-artykul__tresc ol {
	margin: 0 0 var(--foreto-space-4);
	padding-inline-start: var(--foreto-space-5);
	font-size: 17px;
	line-height: 30px;
}

.fi-p-artykul__tresc a { color: var(--fi-blekit-600); text-decoration: underline; text-underline-offset: 3px; }

/* Wyróżniony cytat — karta na lodzie z wielkim cudzysłowem. */
.fi-p-artykul__tresc blockquote {
	position: relative;
	margin: var(--foreto-space-2) 0 var(--foreto-space-6);
	padding: 28px 32px 28px 88px;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--fi-lod);
}

.fi-p-artykul__tresc blockquote::before {
	content: '“';
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 32px;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--thin);
	font-size: 80px;
	line-height: 60px;
	color: var(--fi-blekit-500);
}

.fi-p-artykul__tresc blockquote p {
	margin: 0;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--regular);
	font-size: 22px;
	line-height: 32px;
	color: var(--fi-granat-900);
}

.fi-p-artykul__tresc blockquote cite {
	display: block;
	margin-block-start: var(--foreto-space-2);
	font-style: normal;
	font-size: var(--wp--preset--font-size--card);
	color: var(--fi-tekst-2);
}

.fi-p-stopka-autora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-4);
	margin-block-start: var(--foreto-space-6);
	padding-block-start: var(--foreto-space-5);
	border-block-start: var(--fi-linia);
}

.fi-p-stopka-autora__osoba {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-3);
}

.fi-p-stopka-autora__osoba p { margin: 0; }

.fi-p-glowa-sekcji {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--foreto-space-4);
	margin-block-end: var(--foreto-space-5);
}

.fi-p-glowa-sekcji .fi-p-h2 { font-size: 32px; line-height: 40px; }

/* ---------------------------------------------------------------------------
   10. Węższe ekrany

   Kolejność progów wynika z tego, co się psuje pierwsze: najpierw kolumna
   boczna wpisu (potrzebuje 1024 px na dwie kolumny), potem siatki trójkowe,
   na końcu wszystko, co stoi obok siebie w wierszu.
   --------------------------------------------------------------------------- */

@media (max-width: 1120px) {
	.fi-p-artykul {
		grid-template-columns: minmax(0, 720px);
		gap: var(--foreto-space-5);
		justify-content: start;
	}

	/* Kolumna boczna wchodzi POD tytuł, a nie znika: spis treści jest jedyną
	   mapą wywiadu na 8000 znaków. Przestaje być przyklejona, bo przyklejony
	   pasek na wąskim ekranie zjada pół widoku. */
	.fi-p-bok {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--foreto-space-5);
	}

	.fi-p-bok__blok { flex: 1 1 240px; }
}

@media (max-width: 1024px) {
	.fi-p-siatka-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Dwie kolumny: bloki liczone na trzy kolumny zostawiałyby dziury, więc
	   duża i szeroka idą na cały wiersz, a wysokość dużej wraca do jednego
	   wiersza (2×2 w dwóch kolumnach to za dużo ekranu na jedną kartę). */
	.fi-p-projekt--szeroka { grid-column: span 2; }
	.fi-p-projekt--duza { grid-column: span 2; grid-row: auto; }
	.fi-p-projekt--duza .fi-p-projekt__tytul { font-size: 34px; line-height: 38px; }
	.fi-p-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fi-p-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fi-p-panel { min-height: 420px; }
	.fi-p-powiadomienia { grid-template-columns: minmax(0, 1fr); padding: var(--foreto-space-6); }
	.fi-p-wyrozniony { grid-template-columns: minmax(0, 1fr); }
	.fi-p-wyrozniony__tresc { padding-inline-end: 0; }
}

@media (max-width: 860px) {
	.fi-p-glowa,
	.fi-p-glowa--realizacja {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--foreto-space-4);
	}

	.fi-p-nawigacja {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.fi-p-nawigacja__poz { max-width: none; }
	.fi-p-nawigacja__wszystkie { order: 3; }
}

@media (max-width: 767px) {
	/* Plansza MobilnePortfolio.dc.html: h1 40/44, sekcje 64/20, karty 4:3
	   w jednej kolumnie, pierwsza kwadratowa. */
	.fi-p-h1 { font-size: 40px; line-height: 44px; }
	.fi-p-h2 { font-size: 30px; line-height: 36px; }
	.fi-p-h3 { font-size: 22px; line-height: 28px; }
	.fi-p-h1--case { font-size: 40px; line-height: 44px; }
	.fi-p-h1--wpis { font-size: 32px; line-height: 38px; }
	.fi-p-wyrozniony__tytul { font-size: 26px; line-height: 34px; }
	.fi-p-glowa-sekcji .fi-p-h2 { font-size: 26px; line-height: 32px; }

	.fi-p-sekcja--glowa { padding-block: var(--foreto-space-6) var(--foreto-space-5); }
	.fi-p-sekcja--siatka,
	.fi-p-sekcja--pierwsza { padding-bottom: var(--foreto-space-8); }
	.fi-p-sekcja--reszta { padding-block: var(--foreto-space-8); }

	/* Filtry przewijane poziomo, aktywny zawsze widoczny — plansza mobilna.
	   Rynna po bokach wchodzi do środka przewijaka, żeby pierwsza pigułka
	   zaczynała się w linii tekstu, a ostatnia miała gdzie się skończyć. */
	.fi-p-pasek-filtrow {
		display: block;
		margin-block-start: var(--foreto-space-5);
	}

	.fi-p-filtry {
		margin-inline: calc(-1 * var(--foreto-wrap-gutter));
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

	.fi-p-filtry::-webkit-scrollbar { display: none; }

	.fi-p-filtry ul {
		flex-wrap: nowrap;
		width: max-content;
		padding-inline: var(--foreto-wrap-gutter);
	}

	.fi-p-filtry .fi-tag { height: 34px; flex: 0 0 auto; }

	.fi-p-pasek-filtrow__nota { display: none; }

	.fi-p-szukajka {
		width: 100%;
		margin-block-start: var(--foreto-space-3);
	}

	.fi-p-siatka-portfolio {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px;
	}

	.fi-p-projekt {
		aspect-ratio: 4 / 3;
		border-radius: 20px;
	}

	.fi-p-projekt--szeroka { grid-column: auto; aspect-ratio: 1 / 1; }
	.fi-p-projekt--duza { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
	.fi-p-projekt--duza .fi-p-projekt__tytul { font-size: 28px; line-height: 32px; }
	.fi-p-projekt--duza .fi-p-projekt__tresc { padding: 18px; }
	.fi-p-projekt__tresc { padding: 18px; }
	.fi-p-projekt__tytul { font-size: 22px; line-height: 26px; }
	.fi-p-projekt--szeroka .fi-p-projekt__tytul { font-size: 28px; line-height: 32px; }
	.fi-p-projekt--szeroka .fi-p-projekt__tresc { padding: 18px; }
	.fi-p-projekt .fi-tag { height: 24px; font-size: 10px; padding-inline: 10px; }
	.fi-p-projekt .fi-kolo,
	.fi-p-projekt--szeroka .fi-kolo { width: 40px; height: 40px; }

	.fi-p-wpisy,
	.fi-p-meta,

	.fi-p-panel { min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--wp--custom--radius--card); }
	.fi-p-panel__stopka { flex-wrap: wrap; padding: var(--foreto-space-3); }
	.fi-p-panel__live { margin-inline-start: 0; width: 100%; }

	.fi-p-obraz-wpisu { aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--card); }

	.fi-p-glowa-wpisu { text-align: start; align-items: flex-start; }
	.fi-p-autor-wiersz { justify-content: flex-start; }

	.fi-p-artykul__tresc > p:first-child { font-size: 18px; line-height: 30px; }
	.fi-p-artykul__tresc blockquote { padding: 24px 20px 24px 20px; }

	.fi-p-artykul__tresc blockquote::before {
		position: static;
		display: block;
		margin-block-end: -18px;
	}

	.fi-p-stopka-autora { flex-direction: column; align-items: flex-start; }

	.fi-p-glowa-sekcji { flex-direction: column; align-items: flex-start; gap: var(--foreto-space-3); }

	.fi-p-okruszki__tu { max-width: 22ch; }
}

/* Ruch jest ozdobą — kto go nie chce, dostaje ten sam układ bez ruchu. */
@media (prefers-reduced-motion: reduce) {
	.fi-p-projekt__tlo,
	.fi-p-wpis { transition: none; }

	.fi-p-projekt:hover .fi-p-projekt__tlo,
	.fi-p-wpis:hover { transform: none; }
}

/* Nazwa kategorii w nagłówku archiwum: cała w jednym wierszu (nie łamie się
   w środku „UI/UX Design"), cała w akcencie. */
.fi-p-h1__caly { white-space: nowrap; }

/* Karty bloga jednej wysokości: obraz zawsze 200 px (jest), a tytuł ma stałe
   miejsce na trzy wiersze i dłuższy jest ucinany wielokropkiem — bez tego
   rząd z tytułem na cztery wiersze był wyższy od sąsiednich. */
.fi-p-wpis__tytul {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * var(--wp--custom--line--h-4));
}