/*
 * Warstwa, której nie da się zapisać w theme.json: pasek nagłówka, panele na cały
 * ekran, ściana kafli, pas kontaktowy z mapą, stopka i stany pod kursorem.
 * Reszta wyglądu siedzi w tokenach.
 */

/* --- model pudełka --------------------------------------------------------
 * Motyw nie miał resetu, więc `width: 100%` plus padding dawało element szerszy od okna:
 * panel kontaktowy liczył 454 px przy oknie 390 px i cała strona jechała w bok.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* --- podpis pod kadrem ---------------------------------------------------
 * Referencja podpisuje kafle POD zdjęciem, nie w kadrze. Wersja z podpisem
 * wpisanym w róg padła na pomiarze: na jasnym kadrze biały napis na gradiencie
 * dawał kontrast 3,42 przy progu 4,5 dla 13 px. Tło pod literami nie ma barwy
 * w drzewie, więc liczy się je z pikseli, a nie z computed style.
 */
.jasne-kafel {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.jasne-kafel img {
	display: block;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
}

.jasne-kafel figcaption {
	color: var(--wp--preset--color--atrament);
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	letter-spacing: 0.02em;
	text-align: start;
}

/* --- kadr pełnej szerokości ---------------------------------------------- */
.jasne-kadr img {
	display: block;
	width: 100%;
	height: clamp(320px, 56vh, 620px);
	object-fit: cover;
}

/* --- wejście strony ------------------------------------------------------
 * Referencja rusza 180 elementami przy wczytaniu i nic nie odsłania przy
 * scrollu (zmierzone: 0 z 40 elementów na wysokości 1850 px). Kopiujemy to,
 * co zmierzone, a nie to, czego można się spodziewać po stronie pracowni.
 */
@keyframes jasne-wejscie {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.jasne-wejscie > * {
	animation: jasne-wejscie 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.jasne-wejscie > :nth-child(2) { animation-delay: 60ms; }
.jasne-wejscie > :nth-child(3) { animation-delay: 120ms; }

/* Źródło nie ma reguły reduced-motion. Dokładamy ją po swojej stronie. */
@media (prefers-reduced-motion: reduce) {
	.jasne-wejscie > * {
		animation: none;
	}
}

/* --- pas kontaktowy ------------------------------------------------------ */
.jasne-dane {
	font-family: var(--wp--preset--font-family--tekstowa);
	font-variant-numeric: tabular-nums;
}

.jasne-dane a {
	text-decoration: none;
	border-block-end: 1px solid currentColor;
}

/* --- panel na cały ekran -------------------------------------------------
 * Konstrukcja wzorca to STOS PANELI o jednakowej wysokości, nie dokument
 * o zmiennym rytmie. Pomiar: siedem pasm po 0,94 ekranu i jedno pełne, przy
 * kopii, która miała pasma od 0,35 do 0,93. Wysokość jest tu decyzją układu,
 * więc siedzi w klasie, a nie w paddingu poszczególnych wzorców.
 */
.jasne-panel {
	position: relative;
	min-height: clamp(600px, 88vh, 820px);
	display: grid;
	align-content: center;
	isolation: isolate;
	overflow: clip;
}

/* Kadr jest TŁEM pasma, nie ilustracją obok tekstu. Wzorzec niesie obrazem
 * 100% powierzchni czterech pasm i rozchodzi go na 100% szerokości strony;
 * kopia z kadrem w kolumnie obok tekstu dawała 30% i 41%.
 */
.jasne-panel__tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.jasne-panel__tlo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Przesłona pod tekstem. Pseudoelement, więc nie wchodzi do pomiaru jako blok
 * ani jako media — a jest jedyną rzeczą, która trzyma kontrast napisu na kadrze,
 * bo tło pod literami nie ma barwy w drzewie.
 */
.jasne-panel__tlo::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Wartości z pomiaru kontrastu na wierszach tekstu, nie z oka: przy 0,24 na prawym końcu
	 * druga kolumna zakresu prac schodziła do 3,78 przy progu 4,5 dla 16 px. */
	background: linear-gradient(100deg, rgba(18, 16, 14, 0.86) 0%, rgba(18, 16, 14, 0.74) 50%, rgba(18, 16, 14, 0.52) 100%);
}

.jasne-panel__tresc {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1288px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

/* Biel należy do panelu Z KADREM, nie do każdego panelu. Klasa modyfikatora musiałaby być
 * trzymana w zgodzie z obecnością kadru ręcznie, a rozjazd między nimi to biały napis na piasku.
 */
.jasne-panel:has(.jasne-panel__tlo) .jasne-panel__tresc,
.jasne-panel:has(.jasne-panel__tlo) .jasne-panel__tresc :is(h1, h2, h3, p, cite, a):not(.jasne-guzik) {
	color: var(--wp--preset--color--biel);
}

/* Tekst wzorca siedzi w LEWYM GÓRNYM rogu kadru, nie na środku pasma. */
.jasne-panel--gora {
	align-content: start;
}

.jasne-panel__kolumna {
	max-width: 46ch;
}

/* Pasmo zakresu: dwa kadry dzielą szerokość pasma na pół, więc tekst musi dzielić ją tak samo.
 * Wcześniej pary siedziały w kontenerze 1288 px wyśrodkowanym w oknie 1440 px, przez co OBIE
 * lądowały na lewym kadrze (x 108 i 479 przy szwie kadrów na 720), a druga przechodziła przez
 * szew. Teraz kolumna tekstu pokrywa się z kadrem, nad którym stoi.
 *
 * Nazwa sekcji i pary siedzą w TEJ SAMEJ komórce siatki treści: pasmo z nazwą inaczej
 * centrowałoby pary o pół wysokości nagłówka niżej niż pasmo bez nazwy i oba pasma
 * rozjechałyby się względem siebie.
 */
.jasne-panel--zakres {
	--jasne-wciecie-polowy: clamp(24px, 7.5vw, 108px);
	align-content: stretch;
}

/* Odstęp bloków WordPressa (`margin-block-start` z układu `flow`) zsuwał treść pasma o 32 px
 * w dół, a parom odbierał te 32 px wysokości, więc pasmo z nazwą centrowało tekst gdzie indziej
 * niż pasmo bez nazwy. W pasmie sterowanym siatką odstęp bloków nie ma nic do roboty.
 */
.jasne-panel--zakres .jasne-panel__tresc {
	display: grid;
	grid-template: 1fr / 1fr;
	max-width: none;
	margin-block: 0;
	padding-inline: 0;
}

.jasne-panel--zakres .jasne-panel__nazwa,
.jasne-panel--zakres .jasne-panel__pary {
	grid-area: 1 / 1;
	margin-block: 0;
}

/* Nazwa stoi na ŚRODKU pasma, nie nad lewym kadrem: pasmo jest podzielone na dwie równe
 * połowy, więc nazwa dosunięta do jednej z nich wygląda, jakby należała tylko do niej.
 * Szeroka jest tylko na swój napis, żeby nie zabierać najechania górnemu paskowi połówek.
 */
.jasne-panel__nazwa {
	align-self: start;
	justify-self: center;
	margin: 0;
	padding-inline: var(--jasne-wciecie-polowy);
	text-align: center;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--sredni);
	font-stretch: 75%;
	font-weight: 400;
	line-height: 1.05;
}

/* Wiersze skrajne są elastyczne (`1fr`), więc para nagłówek plus opis stoi w pionowym środku
 * pasma, a POŁOWA i tak sięga od krawędzi do krawędzi: to ona jest polem najechania, nie sam
 * napis. Wiersze 2 i 3 są wspólne dla obu połówek (`subgrid`), więc opis pod nagłówkiem
 * dwuwierszowym zaczyna się tam, co opis obok.
 */
.jasne-panel__pary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto auto auto 1fr;
	column-gap: 0;
	row-gap: var(--wp--preset--spacing--40);
	width: 100%;
	max-width: none;
}

.jasne-panel__polowa {
	position: relative;
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	justify-items: center;
	padding-inline: var(--jasne-wciecie-polowy);
	text-align: center;
}

.jasne-panel__polowa > * { margin: 0; }
.jasne-panel__polowa > h3 { grid-row: 2; }
.jasne-panel__polowa > p { grid-row: 3; max-width: 34ch; }
.jasne-panel__polowa > .jasne-panel__wiecej { grid-row: 4; }

/* Przycisk pojawia się dopiero, gdy skrypt zbuduje okno szczegółów: napis „Zobacz zakres"
 * bez okna do otwarcia byłby obietnicą bez pokrycia. Pole kliknięcia rozciąga się na CAŁĄ
 * połowę, bo klikalny jest kafel ze zdjęciem, a nie sam napis pod opisem.
 */
.jasne-panel__wiecej {
	display: none;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}

.jasne-panel--klikalny .jasne-panel__wiecej { display: inline-block; }

.jasne-panel--klikalny .jasne-panel__polowa { cursor: pointer; }

.jasne-panel--klikalny .jasne-panel__wiecej::after {
	content: "";
	position: absolute;
	inset: 0;
}

.jasne-panel--klikalny .jasne-panel__polowa:is(:hover, :focus-within) .jasne-panel__wiecej {
	border-color: var(--wp--preset--color--biel);
	background-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--atrament);
}

.jasne-panel__wiecej:focus-visible {
	outline: 2px solid var(--wp--preset--color--biel);
	outline-offset: 3px;
}

/* Kadr pasma zakresu siedzi we WŁASNYM pudełku z `overflow: clip`, bo powiększany kadr bez
 * pudełka wychodzi poza swoją połowę i wchodzi na sąsiednie zdjęcie przez szew między nimi.
 */
.jasne-panel__kadr {
	position: relative;
	display: block;
	overflow: clip;
}

/* Przesłona stoi NAD kadrami także wtedy, gdy kadr pod kursorem dostaje własną warstwę:
 * bez tego powiększone zdjęcie wychodziłoby spod przyciemnienia i napis na nim tracił kontrast.
 */
.jasne-panel__tlo::after { z-index: 2; }

/* Połowa reaguje na kursor tak samo jak kadry galerii: jej zdjęcie powoli się powiększa,
 * sąsiednie przygasa, a nagłówek dostaje kreskę spod reguły `jasne-podswietl`.
 */
.jasne-panel--zakres .jasne-panel__tlo img {
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 700ms ease;
}

.jasne-panel--zakres:has(.jasne-panel__polowa:first-child:hover) .jasne-panel__kadr:first-child img,
.jasne-panel--zakres:has(.jasne-panel__polowa:last-child:hover) .jasne-panel__kadr:last-child img {
	transform: scale(1.06);
}

.jasne-panel--zakres:has(.jasne-panel__polowa:first-child:hover) .jasne-panel__kadr:last-child img,
.jasne-panel--zakres:has(.jasne-panel__polowa:last-child:hover) .jasne-panel__kadr:first-child img {
	filter: brightness(0.62);
}

.jasne-panel__polowa > h3 {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jasne-panel__polowa:hover > h3 { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
	.jasne-panel--zakres .jasne-panel__tlo img,
	.jasne-panel__polowa > h3 { transition: none; }

	.jasne-panel--zakres:has(.jasne-panel__polowa:first-child:hover) .jasne-panel__kadr:first-child img,
	.jasne-panel--zakres:has(.jasne-panel__polowa:last-child:hover) .jasne-panel__kadr:last-child img {
		transform: none;
	}
}

.jasne-panel__cytat {
	margin: 0;
	max-width: 34ch;
}

.jasne-panel__cytat cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- ściana realizacji ---------------------------------------------------
 * Wzorzec zamyka stronę biblioteką 91 kafli o RÓŻNYCH rozmiarach, idącą od
 * krawędzi do krawędzi. Kopia miała w tym miejscu trzy równe kolumny w kontenerze.
 * Klient ma dziewięć zdjęć, więc ściana ma dziewięć kafli — różnica jest
 * w liczbie materiału, nie w rodzaju pasma.
 */
.jasne-sciana {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 232px;
	grid-auto-flow: dense;
	gap: 8px;
}

.jasne-sciana figure {
	position: relative;
	margin: 0;
	overflow: clip;
}

.jasne-sciana img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jasne-sciana figcaption {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	/* Napis siedzi w GĘSTEJ części gradientu. Wersja z przejściem do zera na wysokości liter
	 * dawała na jasnych kadrach 2,40 przy progu 4,5 (podpis „Więźba nad stanem surowym"). */
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: linear-gradient(to top, rgba(18, 16, 14, 0.92) 0%, rgba(18, 16, 14, 0.88) 62%, rgba(18, 16, 14, 0) 100%);
	color: var(--wp--preset--color--biel);
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
}

.jasne-sciana .jasne-szeroki { grid-column: span 2; }
.jasne-sciana .jasne-wysoki  { grid-row: span 2; }

@media (max-width: 781px) {
	.jasne-sciana { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}

/* --- nakładka menu -------------------------------------------------------
 * Wzorzec nie ma paska linków, tylko przycisk „Menu" i nakładkę 1440×450
 * z czterema kolumnami po 332 px, etykietami 44 px i kadrem odsłanianym pod
 * kursorem. Ta strona bierze od WordPressa `overlayMenu: always` razem z jego
 * pułapką ogniskową i obsługą Escape; własna nakładka musiałaby to napisać od nowa.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

/* Selektory są dociążone typem, bo arkusz bloku nawigacji wchodzi PO tym pliku i ustawia
 * `display: flex` z tą samą wagą. Bez `ul` siatka miała policzone kolumny i nie działała:
 * pomiar pokazywał `grid-template-columns: repeat(4, 1fr)` przy `display: flex` i czterech
 * pozycjach jedna pod drugą, z czego ostatnia poza ekranem.
 */
.wp-block-navigation__responsive-container.is-menu-open div.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open div.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open div.wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 1376px;
	margin-inline: auto;
	align-items: start;
	justify-content: start;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container.is-responsive {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	align-items: start;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
	display: block;
}

.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item > a.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--sredni);
	font-stretch: 75%;
	line-height: 1.05;
}

/* Kadr pod etykietą: rośnie z zera do 410 px, bo w spoczynku nakładka jest
 * samym spisem, a zdjęcie należy do kolumny, nad którą stoi kursor.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	margin-block-start: var(--wp--preset--spacing--40);
	height: 0;
	background-size: cover;
	background-position: center;
	transition: height 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:is(:hover, :focus-within) .wp-block-navigation-item__content::after {
	height: 260px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		transition: none;
	}
}

.jasne-menu-zakres    .wp-block-navigation-item__content::after { background-image: url("../img/wiazary-zielone.webp"); }
.jasne-menu-realizacje .wp-block-navigation-item__content::after { background-image: url("../img/dom-oddany.webp"); }
.jasne-menu-galeria   .wp-block-navigation-item__content::after { background-image: url("../img/hala-lukowa-w-budowie.webp"); }
.jasne-menu-kontakt   .wp-block-navigation-item__content::after { background-image: url("../img/rysunki-w-rulonach.webp"); }

/* --- podświetlenie linku --------------------------------------------------
 * Jeden stan pod kursorem dla WSZYSTKICH linków strony: kreska wyjeżdża od lewej
 * do pełnej szerokości. Nawigacja, stopka, dane kontaktowe i podpisy mają
 * zachowywać się tak samo, więc reguła jest jedna, a nie po jednej na sekcję.
 */
.jasne-podswietl {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jasne-podswietl:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.jasne-podswietl { transition: none; }
}

/* Skok do kotwicy ląduje pod przyklejonym paskiem, nie za nim: bez tego nadtytuł sekcji
 * („REALIZACJE", „OPINIE") chował się pod paskiem wysokim na 59–62 px.
 */
html {
	scroll-padding-block-start: 72px;
	/* Klik w nawigację ma PRZEWIEŹĆ do sekcji, nie przeskoczyć. Skok gubi poczucie, gdzie się
	 * jest na długiej stronie jednosekcyjnej. */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* --- pasek nagłówka -------------------------------------------------------
 * Układ standardowy, o jaki prosił klient: znak w lewym górnym rogu, spis sekcji
 * na środku, telefon w prawym górnym. Pasek jedzie ze stroną, bo numer ma być
 * pod ręką także w połowie ściany realizacji.
 */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
}

.jasne-pasek {
	backdrop-filter: saturate(140%) blur(6px);
}

.jasne-marka {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--biel);
	text-decoration: none;
}

.jasne-marka__znak {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 3px;
	transition: border-color 260ms ease, background-color 260ms ease;
}

.jasne-marka:is(:hover, :focus-visible) .jasne-marka__znak {
	border-color: var(--wp--preset--color--biel);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Znak marki to wykrzyknik z belką rozszerzającą się ku dołowi, czyli smuga światła.
 * Jest wyższy niż szeroki, więc szerokość jest mniejsza niż w motywie referencyjnym:
 * przy 13 px wysokość wychodzi 23 px i mieści się w pudełku 34 px razem z oddechem. */
.jasne-znak {
	display: block;
	width: 13px;
	height: auto;
}

.jasne-marka__nazwa {
	display: grid;
	gap: 2px;
	line-height: 1.1;
}

.jasne-marka__nazwa strong {
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1rem;
	font-weight: 500;
	font-stretch: 85%;
	letter-spacing: 0.01em;
}

.jasne-marka__nazwa span {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.72;
}

.jasne-nawigacja a {
	color: var(--wp--preset--color--biel);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jasne-nawigacja a:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

.jasne-telefon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	color: var(--wp--preset--color--biel);
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.jasne-telefon:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--biel);
	border-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--atrament);
}

.jasne-telefon__ikona {
	width: 17px;
	height: 17px;
	flex: none;
}

/* Na wąskim ekranie z paska schodzi nazwa pracowni i cyfry numeru: zostaje znak,
 * przycisk „Menu" i sama ikona słuchawki. Numer zostaje klikalny, bo to jedyne
 * wezwanie, które na telefonie ma sens.
 */
@media (max-width: 781px) {
	.jasne-marka__nazwa { display: none; }
	.jasne-telefon__numer { display: none; }
	.jasne-telefon { padding: 8px; }
}

/* --- guziki ---------------------------------------------------------------
 * Wezwania stoją na ciemnym: na kadrze hero i na atramencie pasa kontaktowego.
 * Stąd biel jako wypełnienie i atrament jako litera, odwrotnie niż w theme.json.
 */
.jasne-wezwanie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.jasne-guzik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 1px solid var(--wp--preset--color--biel);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 240ms ease, color 240ms ease;
}

.jasne-guzik--pelny {
	background-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--atrament);
}

.jasne-guzik--pelny:is(:hover, :focus-visible) {
	background-color: transparent;
	color: var(--wp--preset--color--biel);
}

.jasne-guzik--obrys {
	background-color: transparent;
	color: var(--wp--preset--color--biel);
}

.jasne-guzik--obrys:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--atrament);
}

/* --- otwarcie -------------------------------------------------------------
 * Tekst siedzi w LEWYM DOLNYM rogu kadru, wielkimi literami, i tam stoi wezwanie.
 * Wzorzec gęstości: hero referencyjne ma cztery słowa w nagłówku, nie zdanie.
 */
.jasne-panel--dol {
	align-content: end;
}

/* Kadr ma sięgać dolnej krawędzi ekranu RAZEM z wezwaniem, więc od wysokości okna
 * odchodzi pasek nagłówka: przy 100svh guziki schodziły 62 px pod zgięcie. */
.jasne-panel--otwarcie {
	min-height: clamp(560px, calc(100svh - 62px), 860px);
}

.jasne-panel--otwarcie .jasne-panel__tresc {
	padding-block-end: var(--wp--preset--spacing--60);
}

.jasne-tytul {
	font-size: clamp(2.75rem, 8.4vw, 6.25rem);
	max-width: 14ch;
}

/* --- powiększenie kadru pod kursorem --------------------------------------
 * Ruch ma być ODPOWIEDZIĄ, więc zaczyna się natychmiast i kończy w 360 ms.
 * Poprzednie 700 ms czytało się jak opóźnienie łącza, a nie jak reakcja na kursor.
 */
.jasne-kafel__kadr {
	display: block;
	overflow: clip;
	border-radius: 4px;
}

.jasne-kafel__kadr img,
.jasne-sciana img {
	transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

.jasne-kafel:is(:hover, :focus-within) .jasne-kafel__kadr img,
.jasne-sciana figure:is(:hover, :focus-within) img {
	transform: scale(1.06);
}

.jasne-sciana figcaption {
	transition: background 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.jasne-kafel__kadr img,
	.jasne-sciana img {
		transition: none;
	}

	.jasne-kafel:is(:hover, :focus-within) .jasne-kafel__kadr img,
	.jasne-sciana figure:is(:hover, :focus-within) img {
		transform: none;
	}
}

/* --- pas kontaktowy z mapą ------------------------------------------------
 * Wzorzec z bee-trans: dane w kartach po lewej, mapa po prawej na całą wysokość
 * pasma, bez ramki i bez marginesu. Mapa wchodzi przez `output=embed`, więc nie
 * potrzebuje klucza Google ani konta rozliczeniowego klienta.
 */
.jasne-kontakt__siatka {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.jasne-kontakt__panel {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	max-width: 720px;
	margin-inline-start: auto;
	width: 100%;
	align-self: center;
}

.jasne-nadtytul {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--maly);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.72;
}

.jasne-kontakt__tytul {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--sredni);
	font-stretch: 75%;
	font-weight: 400;
	line-height: 1.05;
}

.jasne-karty {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	display: grid;
	gap: 1px;
	background-color: rgba(255, 255, 255, 0.16);
	border-block: 1px solid rgba(255, 255, 255, 0.16);
}

.jasne-karta {
	display: grid;
	grid-template-columns: 22px minmax(88px, 128px) 1fr;
	align-items: start;
	gap: 16px;
	padding: var(--wp--preset--spacing--40) 0;
	background-color: var(--wp--preset--color--atrament);
}

.jasne-karta__ikona {
	width: 22px;
	height: 22px;
	opacity: 0.8;
}

.jasne-karta__etykieta {
	font-size: var(--wp--preset--font-size--maly);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.66;
	padding-block-start: 2px;
}

.jasne-karta__dana {
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--wp--preset--color--biel);
	font-variant-numeric: tabular-nums;
}

a.jasne-karta__dana {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	width: fit-content;
}

a.jasne-karta__dana:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

.jasne-kontakt__mapa {
	position: relative;
	min-height: 460px;
}

.jasne-kontakt__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.2) contrast(1.04);
}

@media (max-width: 900px) {
	.jasne-kontakt__siatka { grid-template-columns: 1fr; }
	.jasne-kontakt__panel { max-width: none; margin-inline-start: 0; }
	.jasne-kontakt__mapa { min-height: 320px; }
}

/* --- stopka ---------------------------------------------------------------
 * Cztery kolumny danych, pod nimi nazwisko rozciągnięte na całą szerokość jako
 * pasmo domykające, i dopiero na końcu wiersz drobnym drukiem.
 */
.jasne-stopka {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.jasne-stopka__siatka {
	display: grid;
	grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--60);
	max-width: 1288px;
	margin-inline: auto;
}

.jasne-stopka__marka .jasne-marka__znak {
	width: 44px;
	height: 44px;
}

.jasne-stopka__marka .jasne-znak {
	width: 22px;
}

.jasne-stopka__zdanie {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40);
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--maly);
	line-height: 1.6;
	opacity: 0.78;
}

.jasne-stopka__numer {
	display: inline-block;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--wiodacy);
	font-stretch: 85%;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--biel);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jasne-stopka__numer:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

.jasne-stopka__naglowek {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--maly);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.66;
}

.jasne-stopka__kolumna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: var(--wp--preset--font-size--maly);
	line-height: 1.5;
}

.jasne-stopka__kolumna li span {
	display: block;
	opacity: 0.66;
}

.jasne-stopka__kolumna a {
	color: var(--wp--preset--color--biel);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jasne-stopka__kolumna a:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

.jasne-stopka__ocena {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--maly);
	line-height: 1.5;
	opacity: 0.78;
}

.jasne-stopka__ocena span {
	display: block;
	color: var(--wp--preset--color--biel);
	letter-spacing: 0.22em;
	opacity: 1;
}

/* Nazwisko jako pasmo, nie jako nagłówek: rośnie z szerokością okna i dociska
 * stopkę do dołu strony. Czytnik ekranu go pomija, bo nazwa stoi wyżej w marce.
 */
.jasne-stopka__napis {
	margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--40);
	max-width: 1288px;
	font-family: var(--wp--preset--font-family--naglowkowa);
	display: flex;
	justify-content: space-between;
	font-size: clamp(3rem, 17vw, 14rem);
	font-stretch: 75%;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.38);
	user-select: none;
}

.jasne-stopka__pas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: 1288px;
	margin-inline: auto;
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--wp--preset--font-size--maly);
	opacity: 0.66;
}

@media (max-width: 900px) {
	.jasne-stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.jasne-stopka__siatka { grid-template-columns: 1fr; }
}

/* Nakładka menu jest teraz WYŁĄCZNIE mobilna (`overlayMenu: mobile`), więc cztery
 * kolumny i kadr pod etykietą nie mają gdzie się zmieścić.
 */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container.is-responsive {
		grid-template-columns: 1fr;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
		display: none;
	}
}

.jasne-panel__tresc .jasne-wezwanie {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Odstęp między pasmami robi ich własna wysokość, nie margines kontenera. WordPress
 * daje korzeniowi `:where(.wp-site-blocks) > * { margin-block-start: blockGap }`, czyli
 * 32 px białej szpary przed stopką. Selektor bez `:where()` bije go samą specyficznością.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Karta kontaktowa ma trzy kolumny: ikona, etykieta, dana. Przy oknie 390 px suma ich
 * minimów rozpycha panel do 454 px i cała strona jedzie w bok, więc etykieta schodzi
 * nad daną i zostają dwie kolumny.
 */
@media (max-width: 600px) {
	.jasne-karta {
		grid-template-columns: 22px minmax(0, 1fr);
		gap: 6px 14px;
	}

	.jasne-karta__etykieta,
	.jasne-karta__dana {
		grid-column: 2;
	}
}

/* --- kurtyna wejścia -----------------------------------------------------
 * Strona otwiera się płachtą w atramencie ze znakiem pracowni i kreską, która przejeżdża
 * pod spodem. Płachta znika ANIMACJĄ CSS, nie skryptem: gdyby zależała od JS, jedna awaria
 * skryptu zostawiłaby stronę pod czarnym prostokątem na zawsze.
 */
.jasne-kurtyna {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 22px;
	background-color: var(--wp--preset--color--atrament);
	animation: jasne-kurtyna-schodzi 620ms cubic-bezier(0.65, 0, 0.35, 1) 760ms forwards;
}

.jasne-kurtyna__znak {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 4px;
	color: var(--wp--preset--color--biel);
	animation: jasne-kurtyna-znak 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.jasne-kurtyna__znak .jasne-znak {
	width: 26px;
}

.jasne-kurtyna__kreska {
	position: relative;
	width: min(260px, 44vw);
	height: 1px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.18);
}

.jasne-kurtyna__kreska::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--biel);
	transform: scaleX(0);
	transform-origin: left;
	animation: jasne-kurtyna-kreska 900ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes jasne-kurtyna-schodzi {
	to { opacity: 0; visibility: hidden; transform: translateY(-2%); }
}

@keyframes jasne-kurtyna-znak {
	from { opacity: 0; transform: translateY(10px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}

@keyframes jasne-kurtyna-kreska {
	to { transform: scaleX(1); }
}

/* Treść hero rusza dopiero, gdy płachta schodzi. Bez opóźnienia wejście odbywa się pod nią
 * i nikt go nie widzi.
 */
.jasne-panel--otwarcie .jasne-wejscie > *   { animation-delay: 820ms; }
.jasne-panel--otwarcie .jasne-wejscie > :nth-child(2) { animation-delay: 900ms; }
.jasne-panel--otwarcie .jasne-wejscie > :nth-child(3) { animation-delay: 980ms; }

@media (prefers-reduced-motion: reduce) {
	.jasne-kurtyna { display: none; }
	.jasne-panel--otwarcie .jasne-wejscie > * { animation-delay: 0ms; }
}

/* --- szew między pasmami -------------------------------------------------
 * Pasma stykają się bez przerwy, ale styk ma być WIDOCZNY: włos na całą szerokość pasma.
 * Krótka biała kreska na środku szwu wyleciała: czytała się jako element sterujący, którym
 * nie była. Szew rysuje panel, PRZED którym stoi inny panel, więc pierwsze pasmo strony
 * go nie dostaje.
 */
.jasne-panel + .jasne-panel::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 3;
	height: 1px;
	pointer-events: none;
	background-color: rgba(255, 255, 255, 0.22);
}

/* Pasmo na piasku niesie szew atramentem, bo biel na piasku jest niewidoczna. */
.jasne-panel + .jasne-panel.has-piasek-background-color::before {
	background-color: rgba(17, 17, 17, 0.14);
}

/* Stopka domyka ten sam rytm. */
.jasne-stopka {
	position: relative;
}

.jasne-stopka::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.22);
}

/* --- karuzela ------------------------------------------------------------
 * Przesuwanie robi natywny scroll ze `scroll-snap`, nie transformacje liczone w skrypcie.
 * Bez JS zostaje w pełni przewijalny tor, tylko bez strzałek i licznika.
 */
.jasne-karuzela {
	--jasne-slajd: min(560px, 76%);
	/* Kadry jadą od lewej krawędzi kolumny, opinie od środka kadru. Stąd wcięcie toru jest
	 * zmienną, a nie stałą: przy wyrównaniu do środka pierwsza karta musi mieć przed sobą
	 * pół kadru pustego, przy wyrównaniu do lewej wcięcie równa się marginesowi sekcji. */
	--jasne-wciecie: var(--wp--preset--spacing--50);
	position: relative;
	z-index: 1;
	width: 100%;
	/* Karuzela jest dzieckiem siatki panelu, a domyślne `min-width: auto` elementu siatki liczy
	 * się od zawartości: tor rozpychał się do 940 px w oknie 390 px, a `overflow: clip` panelu
	 * chował skutek, więc bramka przepełnienia widziała 390 px i milczała. */
	min-width: 0;
	max-width: 1288px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70);
}

/* Pasmo z karuzelą jest wysokie tyle, ile jego treść: `min-height` panelu pełnoekranowego
 * zostawiało pod kartami pustą trzecią część ekranu.
 */
.jasne-panel--galeria,
.jasne-panel--opinie {
	min-height: 0;
}

.jasne-karuzela__glowa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--60);
}

.jasne-karuzela__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--sredni);
	font-stretch: 75%;
	font-weight: 400;
	line-height: 1.05;
}

/* Ster pokazuje się dopiero, gdy skrypt go podłączy: strzałka, która nic nie robi, jest gorsza
 * niż brak strzałki.
 */
.jasne-karuzela__ster {
	display: none;
	align-items: center;
	gap: 12px;
}

.jasne-karuzela--zywa .jasne-karuzela__ster {
	display: flex;
}

.jasne-licznik {
	margin: 0 8px 0 0;
	font-size: var(--wp--preset--font-size--maly);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	opacity: 0.66;
}

.jasne-strzalka {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.jasne-strzalka svg {
	width: 20px;
	height: 20px;
}

.jasne-strzalka:hover:not(:disabled),
.jasne-strzalka:focus-visible:not(:disabled) {
	background-color: var(--wp--preset--color--biel);
	color: var(--wp--preset--color--atrament);
	transform: scale(1.06);
}

/* Wciśnięcie ma być widoczne. Guzik, który pod palcem nie drgnie, czyta się jak martwy. */
.jasne-strzalka:active:not(:disabled) {
	transform: scale(0.9);
	transition-duration: 80ms;
}

.jasne-panel--galeria .jasne-strzalka:hover:not(:disabled),
.jasne-panel--galeria .jasne-strzalka:focus-visible:not(:disabled) {
	background-color: var(--wp--preset--color--atrament);
	color: var(--wp--preset--color--biel);
}

.jasne-strzalka:disabled {
	opacity: 0.28;
	cursor: default;
}

/* Boczny odstęp toru wyrównuje PIERWSZĄ i OSTATNIĄ kartę do środka kadru. Bez niego karta
 * skrajna nigdy nie trafia na środek i znacznik „jest-srodkowa" nie wchodzi na nią nigdy.
 */
.jasne-karuzela__tor {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	padding-inline: var(--jasne-wciecie);
	padding-block-end: 4px;
	/* Zaczepienie liczy się od krawędzi OKNA toru, nie od jego wypełnienia: bez tej linii
	 * przeglądarka przesuwała tor o szerokość wcięcia i pierwsza karta dotykała lewej krawędzi.
	 */
	scroll-padding-inline: var(--jasne-wciecie);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.jasne-karuzela__tor::-webkit-scrollbar {
	display: none;
}

/* Tor daje się ciągnąć myszą, więc dostaje kursor łapki. Kursor pojawia się dopiero razem ze
 * skryptem, który ciągnięcie obsługuje: łapka nad torem, którego nie da się złapać, to dokładnie
 * ta obietnica bez pokrycia, o którą chodziło w uwadze.
 */
.jasne-karuzela--zywa .jasne-karuzela__tor {
	cursor: grab;
}

.jasne-karuzela--zywa .jasne-karuzela__tor.jest-ciagniety {
	cursor: grabbing;
	/* Na czas gestu tekst kart przestaje być zaznaczalny: inaczej przeglądarka ciągnie
	 * zaznaczenie razem z ręką i przewija tor w przeciwną stronę. Poza gestem zaznaczanie
	 * wraca, bo opinię wolno skopiować. */
	user-select: none;
	/* Przyciąganie w trakcie ciągnięcia szarpie kartami pod palcem, więc na ten czas znika. */
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.jasne-karuzela__tor:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

.jasne-karuzela__tor:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.jasne-slajd {
	flex: 0 0 var(--jasne-slajd);
	margin: 0;
	scroll-snap-align: start;
}

/* Kadr jest PRZYCISKIEM otwierającym podgląd, a nie obrazkiem, który tylko udaje klikalny.
 * Dopóki skrypt nie wstanie, kadr nie ma ani kursora wskazującego, ani znacznika, bo obietnica
 * kliknięcia bez działania kliknięcia jest gorsza od braku obietnicy.
 */
.jasne-slajd__kadr {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: clip;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	background: none;
	color: inherit;
	cursor: default;
}

.jasne-karuzela--zywa .jasne-slajd__kadr {
	cursor: zoom-in;
}

.jasne-slajd__kadr img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), filter 420ms ease;
}

/* Znacznik wjeżdża od dołu razem z przyciemnieniem kadru. To jest ta „inna" tranzycja:
 * sama skala 6% jest ledwo widoczna i nie mówi, że coś się wydarzy po kliknięciu.
 */
.jasne-slajd__znacznik {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	display: none;
	padding: 10px 16px;
	background-color: var(--wp--preset--color--atrament);
	color: var(--wp--preset--color--biel);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transform: translateY(100%);
	transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.jasne-karuzela--zywa .jasne-slajd__znacznik {
	display: block;
}

.jasne-karuzela--zywa .jasne-slajd__kadr:is(:hover, :focus-visible) img {
	transform: scale(1.05);
	filter: brightness(0.86);
}

.jasne-karuzela--zywa .jasne-slajd__kadr:is(:hover, :focus-visible) .jasne-slajd__znacznik {
	transform: none;
}

.jasne-slajd__kadr:focus-visible {
	outline: 2px solid var(--wp--preset--color--atrament);
	outline-offset: 3px;
}

/* Podpis jedzie razem z kadrem, żeby reakcja obejmowała całą kartę, nie sam obrazek. */
.jasne-slajd figcaption strong {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.jasne-slajd:is(:hover, :focus-within) figcaption strong {
	background-size: 100% 1px;
}

.jasne-slajd figcaption {
	display: grid;
	gap: 4px;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--maly);
}

.jasne-slajd figcaption strong {
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1.0625rem;
	font-weight: 500;
}

.jasne-slajd figcaption span {
	opacity: 0.7;
}

/* --- opinie --------------------------------------------------------------
 * Karta w środku kadru jest większa i jaśniejsza od sąsiednich. To jedyne miejsce, gdzie
 * wyróżnienie robi skala, a nie sama barwa: przy pięciu kartach o tej samej treści to skala
 * mówi, którą się czyta.
 */
.jasne-karuzela--opinie {
	--jasne-slajd: min(420px, 78%);
	--jasne-wciecie: calc(50% - var(--jasne-slajd) / 2);
}

.jasne-opinia {
	flex: 0 0 var(--jasne-slajd);
	margin: 0;
	scroll-snap-align: center;
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.04);
	transform: scale(0.94);
	transform-origin: center bottom;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 420ms ease, border-color 420ms ease;
}

.jasne-opinia.jest-srodkowa {
	transform: none;
	border-color: rgba(255, 255, 255, 0.44);
	background-color: rgba(255, 255, 255, 0.09);
}

.jasne-opinia__gwiazdki {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.22em;
}

.jasne-opinia__tresc {
	margin: 0;
	border: 0;
	padding: 0;
}

.jasne-opinia__tresc p {
	margin: 0;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1.25rem;
	line-height: 1.4;
}

.jasne-opinia__tresc--pusta p {
	font-family: var(--wp--preset--font-family--tekstowa);
	font-size: var(--wp--preset--font-size--podstawowy);
	opacity: 0.66;
}

.jasne-opinia__stopka {
	display: grid;
	gap: 2px;
	font-size: var(--wp--preset--font-size--maly);
}

.jasne-opinia__stopka span {
	opacity: 0.66;
}

@media (prefers-reduced-motion: reduce) {
	.jasne-slajd__kadr img,
	.jasne-opinia,
	.jasne-strzalka {
		transition: none;
	}
}

@media (max-width: 781px) {
	.jasne-karuzela { padding-block: var(--wp--preset--spacing--60); }
	/* Na telefonie najdłuższa opinia rozciągała wszystkie karty do swojej wysokości, więc
	 * krótka opinia była ramką z pustym dołem na pół ekranu. Tu każda karta jest swoją treścią. */
	.jasne-karuzela--opinie .jasne-karuzela__tor { align-items: flex-start; }
	/* Wąskie okno nie mieści dwóch kolumn tekstu ani dwóch kadrów obok siebie: zostaje jeden
	 * kadr jako tło i pary jedna pod drugą, w kolejności z dokumentu. Wspólne wiersze
	 * (`subgrid`) i pole najechania na całą wysokość pasma nie mają tu czego trzymać,
	 * więc schodzą, a nazwa sekcji wraca nad pary. */
	.jasne-panel__pary {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: var(--wp--preset--spacing--50);
	}
	.jasne-panel__polowa {
		grid-row: auto;
		grid-template-rows: none;
		row-gap: var(--wp--preset--spacing--30);
	}
	.jasne-panel__polowa > h3,
	.jasne-panel__polowa > p { grid-row: auto; }
	.jasne-panel--zakres { align-content: center; }
	.jasne-panel--zakres .jasne-panel__tresc { display: block; }
	.jasne-panel--zakres .jasne-panel__nazwa { margin-block-end: var(--wp--preset--spacing--50); }
	.jasne-panel__tlo img:nth-child(2),
	.jasne-panel__tlo .jasne-panel__kadr:nth-child(2) { display: none; }
	.jasne-karuzela__glowa { margin-block-end: var(--wp--preset--spacing--50); }
}

/* --- wejście pasma przy przewijaniu ---------------------------------------
 * Strona miała ruch tylko pod kursorem, więc między sekcjami nie działo się nic. Pasmo wchodzi
 * raz: treść unosi się o 24 px i rozjaśnia w 620 ms. Klasa `jasne-ruch` na `body` jest nadawana
 * przez skrypt, więc bez skryptu nikt niczego nie chowa i strona zostaje cała widoczna.
 */
/* Stan ukrycia siedzi CAŁY w zapytaniu `no-preference`, a nie w regule zdejmowanej niżej przez
 * `reduce`: reguła zdejmująca musiała mieć wyższą wagę od zakładającej, a nie miała, więc przy
 * `prefers-reduced-motion: reduce` treść sekcji zostawała na `opacity: 0` na zawsze.
 */
@media (prefers-reduced-motion: no-preference) {
	body.jasne-ruch .jasne-panel:not(.jasne-panel--otwarcie) > :not(.jasne-panel__tlo) {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	body.jasne-ruch .jasne-panel.jest-widoczny > :not(.jasne-panel__tlo) {
		opacity: 1;
		transform: none;
	}

	body.jasne-ruch .jasne-panel > :not(.jasne-panel__tlo):nth-child(3) { transition-delay: 60ms; }
	body.jasne-ruch .jasne-panel > :not(.jasne-panel__tlo):nth-child(4) { transition-delay: 120ms; }
}

/* --- podgląd kadru --------------------------------------------------------
 * Natywny `<dialog>`: Escape, blokada tła i zwrot ogniska są w przeglądarce, więc nie ma tu
 * ani pułapki ogniska, ani obsługi klawiatury pisanej ręcznie.
 */
.jasne-podglad {
	width: min(1100px, 92vw);
	max-width: none;
	max-height: 92vh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--atrament);
	color: var(--wp--preset--color--biel);
	overflow: hidden;
}

.jasne-podglad::backdrop {
	background-color: rgba(17, 17, 17, 0.88);
	backdrop-filter: blur(3px);
}

.jasne-podglad[open] {
	animation: jasne-podglad-wchodzi 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.jasne-podglad[open]::backdrop {
	animation: jasne-tlo-wchodzi 320ms ease both;
}

@keyframes jasne-podglad-wchodzi {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@keyframes jasne-tlo-wchodzi {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Kadr w podglądzie ZMIENIA SIĘ, a nie przeskakuje: stary odjeżdża w stronę przeciwną do
 * naciśniętej strzałki i gaśnie, nowy wchodzi z jej strony. Kierunek bierze się z klasy, bo
 * inaczej ruch w lewo i w prawo wyglądałby identycznie i nie mówiłby, dokąd się jedzie.
 */
.jasne-podglad__kadr {
	display: block;
	width: 100%;
	max-height: 76vh;
	object-fit: contain;
	background-color: #000;
	transition: opacity 220ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.jasne-podglad__kadr.jest-zmiana--prawo,
.jasne-podglad__kadr.jest-zmiana--lewo {
	opacity: 0;
}

.jasne-podglad__kadr.jest-zmiana--prawo { transform: translateX(-24px); }
.jasne-podglad__kadr.jest-zmiana--lewo { transform: translateX(24px); }

.jasne-podglad__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.jasne-podglad__opis {
	flex: 1 1 260px;
	display: grid;
	gap: 4px;
	margin: 0;
	font-size: var(--wp--preset--font-size--maly);
}

.jasne-podglad__opis strong {
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1.0625rem;
	font-weight: 500;
}

.jasne-podglad__opis span {
	opacity: 0.7;
}

.jasne-podglad__ster {
	display: flex;
	align-items: center;
	gap: 8px;
}

.jasne-podglad__zamknij {
	margin-inline-start: 8px;
}

@media (max-width: 600px) {
	.jasne-podglad__stopka { padding: var(--wp--preset--spacing--40); }
	.jasne-podglad__ster { width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	.jasne-slajd__kadr img,
	.jasne-slajd__znacznik,
	.jasne-slajd figcaption strong,
	.jasne-podglad__kadr,
	.jasne-podglad[open],
	.jasne-podglad[open]::backdrop {
		transition: none;
		animation: none;
	}

	.jasne-karuzela--zywa .jasne-slajd__kadr:is(:hover, :focus-visible) img {
		transform: none;
	}
}

/* --- kadr zmienia się w jeździe --------------------------------------------
 * Karta galerii dochodzi do pełnej barwy i skali dopiero wjeżdżając w kadr toru, a wyjeżdżając
 * gaśnie. Ruch jest przypięty do POŁOŻENIA toru, nie do zegara: jedzie dokładnie tyle, ile jedzie
 * palec, i zatrzymuje się razem z nim. Zegarowa animacja odtwarzana po każdej zmianie karty
 * chodziłaby dalej po puszczeniu i rozjeżdżała się z gestem.
 *
 * Ruch bierze SAM KADR, nie całą kartę: podpis pod zdjęciem zostaje w pełnej barwie, bo przygaszony
 * do 18% ma kontrast 1,6:1 i nie da się go przeczytać wtedy, gdy karta stoi na skraju toru.
 *
 * Oś czasu widoku to rzecz przeglądarki: tam, gdzie jej nie ma, kadry stoją po prostu w pełnej
 * barwie i nic się nie psuje.
 */
@supports (animation-timeline: view(inline)) {
	@media (prefers-reduced-motion: no-preference) {
		.jasne-karuzela--zywa:not(.jasne-karuzela--opinie) .jasne-slajd__kadr {
			animation-name: jasne-kadr-jedzie;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view(inline);
		}
	}
}

@keyframes jasne-kadr-jedzie {
	0%   { opacity: 0.18; transform: scale(0.92); }
	24%  { opacity: 1; transform: none; }
	76%  { opacity: 1; transform: none; }
	100% { opacity: 0.18; transform: scale(0.92); }
}

/* --- okno szczegółów usługi -----------------------------------------------
 * Kliknięcie w połowę pasma zakresu otwiera natywny `<dialog>` z kadrem tej usługi i listą
 * tego, co w niej siedzi. Okno jest tym samym rodzajem powierzchni co podgląd kadru (ta sama
 * barwa, ten sam ster, te same strzałki), więc strona nie uczy dwóch różnych sposobów zamykania.
 */
.jasne-szczegoly {
	width: min(980px, 92vw);
	max-width: none;
	max-height: 92vh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--atrament);
	color: var(--wp--preset--color--biel);
	overflow: hidden;
}

.jasne-szczegoly::backdrop {
	background-color: rgba(17, 17, 17, 0.88);
	backdrop-filter: blur(3px);
}

.jasne-szczegoly[open] {
	animation: jasne-podglad-wchodzi 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.jasne-szczegoly[open]::backdrop {
	animation: jasne-tlo-wchodzi 320ms ease both;
}

.jasne-szczegoly__siatka {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	align-items: stretch;
}

.jasne-szczegoly__kadr {
	margin: 0;
	overflow: clip;
}

.jasne-szczegoly__kadr img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
}

.jasne-szczegoly__tresc {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.jasne-szczegoly__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: var(--wp--preset--font-size--sredni);
	font-stretch: 75%;
	font-weight: 400;
	line-height: 1.05;
}

.jasne-szczegoly__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--maly);
	opacity: 0.74;
}

.jasne-szczegoly__punkty {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jasne-szczegoly__punkty li {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgba(255, 255, 255, 0.22);
}

.jasne-szczegoly__ster {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-start: var(--wp--preset--spacing--30);
}

.jasne-szczegoly__zamknij {
	margin-inline-start: auto;
}

/* Zmiana usługi strzałką jest przejściem, tak jak zmiana kadru w podglądzie. */
.jasne-szczegoly__siatka {
	transition: opacity 200ms ease;
}

.jasne-szczegoly__siatka.jest-zmiana {
	opacity: 0;
}

@media (max-width: 781px) {
	.jasne-szczegoly__siatka { grid-template-columns: 1fr; }
	.jasne-szczegoly__kadr img { min-height: 0; max-height: 34vh; }
	.jasne-szczegoly__tresc { padding: var(--wp--preset--spacing--50); }
}

@media (prefers-reduced-motion: reduce) {
	.jasne-szczegoly[open],
	.jasne-szczegoly[open]::backdrop,
	.jasne-szczegoly__siatka { transition: none; animation: none; }
}

/* --- etapy pracowni --------------------------------------------------------
 * Pasmo „Pracownia" niosło jedno zdanie i kadr, czyli nie mówiło nic, czego nie widać
 * z nagłówka. Etapy nazywają to, co klient dostaje po kolei. Bez numerów: kolejność niesie
 * sama siebie.
 */
.jasne-etapy {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: 0;
	list-style: none;
}

.jasne-etap {
	padding-block-start: var(--wp--preset--spacing--30);
	/* Etap nie jest klikalny, więc nie dostaje stanu pod kursorem: reakcja na kursor
	   na elemencie, który nic nie otwiera, czyta się jako zepsute sterowanie. */
	border-block-start: 1px solid rgba(255, 255, 255, 0.34);
}

/* Rysunek etapu: kreska `1,1` w skali `24`, czyli po przeskalowaniu do 40 px mniej więcej
   ten sam włos co linia nad etapem. Bierze barwę z tekstu, więc żyje z motywem pasma. */
.jasne-etap__znak {
	display: block;
	width: 40px;
	height: 40px;
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--biel);
}

.jasne-etap__znak svg {
	display: block;
	width: 100%;
	height: 100%;
}

.jasne-etap__nazwa {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--naglowkowa);
	font-size: 1.125rem;
	font-weight: 500;
	font-stretch: 75%;
}

.jasne-etap__opis {
	margin: 0;
	font-size: var(--wp--preset--font-size--maly);
	max-width: 28ch;
}

@media (max-width: 1100px) {
	.jasne-etapy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.jasne-etapy { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}