/* Strona glowna. Uklad przepisany z design/claude-design/home/Main.dc.html - tam style
   siedza w atrybutach, tutaj w klasach. Wchodzi tylko na stronie glownej.

   Interakcje (karuzela hero, zakladki cennika, filtr grafiku, FAQ) stoja na ukrytych
   polach radio i na <details>, nie na JS. Klawiatura i czytnik ekranu dzialaja wtedy
   bez naszego kodu, a strona nie czeka na skrypt. Jedyny JS na tej stronie to dwie
   strzalki karuzeli filmow, bo scrollBy nie ma odpowiednika w CSS. */

/* ---------- Hero ---------- */

.fa-hero { background: var(--fa-ink-850); overflow: hidden; }

.fa-hero__scena {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	min-height: clamp(520px, 43vw, 620px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.fa-hero__tlo { position: absolute; inset: 0; overflow: hidden; }
.fa-hero__zdjecia { position: absolute; inset: 0 0 0 38.9%; }

.fa-hero__zdjecie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	opacity: 0;
	transition: opacity 500ms ease;
}

/* Wygaszenie prawej krawedzi, zeby zdjecie nie konczylo sie ostrym cieciem. */
.fa-hero__wygaszenie {
	position: absolute;
	inset: 0 0 0 auto;
	width: 12.5%;
	background: linear-gradient(270deg, var(--fa-ink-850) 0%, rgb(20 20 23 / 0) 100%);
}

/* Maska pod tekstem. Ukos idzie pod katem marki, wiec zdjecie zaczyna sie tam,
   gdzie konczy sie kolumna tekstu, a nie na twardej pionowej krawedzi. */
.fa-hero__maska {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 0, 60.1% 0, 44.4% 100%, 0 100%);
	background: var(--fa-ink-850);
}

.fa-hero__pas {
	position: absolute;
	top: -25%;
	left: 60.1%;
	width: clamp(96px, 11.9vw, 172px);
	height: 150%;
	transform-origin: top left;
	/* Kat z makiety przy szerokosci 1440 px: atan(0.157 * w / h) - 8 stopni. */
	transform: rotate(14deg) translateX(-50%);
	opacity: 0.85;
	pointer-events: none;
}

.fa-hero__pas img { width: 100%; height: 100%; display: block; object-fit: fill; }

@media (max-width: 900px) {
	.fa-hero__zdjecia { inset: 0; }
	.fa-hero__maska { clip-path: none; background: rgb(16 16 19 / 0.84); }
	.fa-hero__pas,
	.fa-hero__wygaszenie { display: none; }
}

.fa-hero__tresc {
	position: relative;
	padding: clamp(48px, 6vw, 92px) clamp(24px, 3.4vw, 48px) clamp(40px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: min(656px, 92%);
}

.fa-hero__slajd { display: none; }

.fa-hero__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(38px, 4.3vw, 58px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0 0 24px;
	text-wrap: balance;
}

.fa-hero__tekst { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: #B6B6BC; margin: 0 0 34px; }
.fa-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.fa-hero__nota { font-size: var(--fa-text-16); color: var(--fa-text-secondary); margin: 0; }

/* Sterowanie karuzela: radio trzyma stan, etykiety sa kropkami i strzalkami.
   Trzy slajdy nie potrzebuja skryptu, a bez niego dzialaja od pierwszej klatki. */
.fa-hero__stan { position: absolute; width: 1px; height: 1px; opacity: 0; }

.fa-hero__sterowanie {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 40px;
	min-height: 48px;
}

.fa-hero__kropki { display: flex; gap: 8px; }

.fa-hero__kropka {
	width: 40px;
	height: 48px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.fa-hero__kropka::before {
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	background: rgb(255 255 255 / 0.22);
	transition: background 160ms ease;
}

.fa-hero__kropka:hover::before { background: rgb(255 255 255 / 0.45); }

.fa-hero__licznik { font-size: var(--fa-text-13); letter-spacing: 0.06em; color: var(--fa-text-muted); margin: 0; display: none; }

.fa-hero__strzalki { position: absolute; right: 0; display: none; gap: 8px; }

.fa-hero__strzalka {
	width: 50px;
	height: 48px;
	background: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.32);
	color: var(--fa-text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-hero__strzalka:hover { background: rgb(255 255 255 / 0.08); border-color: var(--fa-line-ghost-hover); }

/* Stan karuzeli: zdjecie, slajd, kropka, licznik i para strzalek wybranego numeru.
   Regul per numer nie ma w tym arkuszu, bo liczba slajdow idzie z pola powtarzalnego
   w panelu. Sklada je `bloki/home-hero.php` pod tyle slajdow, ile naprawde stoi w sekcji;
   wpisane tu na sztywno do numeru 2 gasily by czwarty slajd bez sladu. */

/* Focus na ukrytym polu nie jest widoczny, wiec obrys przejmuje jego etykieta. */
.fa-hero__stan:focus-visible + .fa-hero__kropka::before { outline: 2px solid var(--fa-focus); outline-offset: 3px; }

/* ---------- Pasek miejscowosci ---------- */

.fa-miasta {
	background: var(--fa-ink-800);
	border-block: 1px solid var(--fa-line);
}

.fa-miasta__srodek {
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(24px, 2.8vw, 36px) clamp(24px, 4vw, 40px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px clamp(24px, 3vw, 44px);
}

.fa-miasta__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(18px, 1.6vw, 22px);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	margin: 0;
	flex: none;
}

.fa-miasta__lista {
	flex: 1 1 620px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fa-miasta__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid rgb(255 255 255 / 0.12);
	background: rgb(255 255 255 / 0.02);
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #C9C9CF;
	text-decoration: none;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.fa-miasta__link:hover {
	border-color: var(--fa-orange-500);
	color: var(--fa-text-primary);
	background: var(--fa-orange-wash);
}

.fa-miasta__link svg { flex: none; opacity: 0.6; }

/* ---------- Oferta (bento) ---------- */

.fa-oferta { position: relative; overflow: hidden; }

.fa-bento {
	display: grid;
	grid-template-columns: 1.32fr 1fr;
	gap: clamp(20px, 2.2vw, 28px);
	align-items: stretch;
}

.fa-bento__duzy { grid-row: span 2; }

@media (max-width: 1000px) {
	.fa-bento { grid-template-columns: 1fr; }
	.fa-bento__duzy { grid-row: auto; }
}

.fa-karta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--fa-ink-800);
}

.fa-karta--rdzen { border-top: 3px solid var(--fa-orange-500); }

.fa-karta__dekor {
	position: absolute;
	right: -14%;
	bottom: -12%;
	width: 54%;
	opacity: 0.16;
	pointer-events: none;
}

.fa-karta__kadr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111114; }

.fa-karta__kadr img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 42%;
	filter: brightness(0.62) saturate(0.82) contrast(1.05);
}

.fa-karta__przycieminie {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(17 17 20 / 0.42) 0%, rgb(17 17 20 / 0.08) 30%, rgb(17 17 20 / 0.97) 100%);
}

.fa-karta__tresc {
	position: relative;
	padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.4vw, 36px) clamp(28px, 2.6vw, 38px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fa-karta__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
	margin: 0 0 12px;
}

.fa-karta__tytul {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.04;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.fa-karta__opis { font-size: var(--fa-text-16); line-height: 1.62; color: #B6B6BC; margin: 0 0 24px; text-wrap: pretty; }

.fa-karta__fakty {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--fa-text-muted);
}

.fa-karta__dol {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.fa-karta__cena {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 36px);
	color: var(--fa-text-primary);
	margin: 0;
}

.fa-karta__cena span {
	font-family: var(--fa-font-ui);
	font-weight: 400;
	font-size: var(--fa-text-15);
	color: var(--fa-text-muted);
}

.fa-karta__dol .fa-btn--glowny { margin-left: auto; }

/* Karta pozioma: kadr po lewej, tresc po prawej. */
.fa-karta--poziom { flex-direction: row; }

.fa-karta--poziom .fa-karta__kadr { flex: none; width: 38%; aspect-ratio: auto; min-height: 168px; }

.fa-karta--poziom .fa-karta__kadr img { object-position: 55% 50%; filter: brightness(0.7) saturate(0.85) contrast(1.05); }

.fa-karta--poziom .fa-karta__przycieminie {
	background: linear-gradient(90deg, rgb(17 17 20 / 0.15) 0%, rgb(17 17 20 / 0.86) 100%);
}

.fa-karta--poziom .fa-karta__tresc { padding: clamp(24px, 2.2vw, 32px); }

.fa-karta--poziom .fa-karta__tytul { font-size: clamp(22px, 2vw, 27px); line-height: 1.06; margin-bottom: 14px; }

.fa-karta--poziom .fa-karta__opis { font-size: var(--fa-text-16); color: var(--fa-text-secondary); margin-bottom: 20px; }

.fa-karta__stawka { font-size: var(--fa-text-16); font-weight: 700; color: var(--fa-text-primary); margin: 0 0 18px; }

.fa-karta--poziom .fa-link-akcent { margin-top: auto; align-self: flex-start; }

@media (max-width: 620px) {
	.fa-karta--poziom { flex-direction: column; }
	.fa-karta--poziom .fa-karta__kadr { width: 100%; aspect-ratio: 16 / 9; }
	.fa-karta--poziom .fa-karta__przycieminie {
		background: linear-gradient(180deg, rgb(17 17 20 / 0.15) 0%, rgb(17 17 20 / 0.86) 100%);
	}
	.fa-karta__dol .fa-btn--glowny { margin-left: 0; }
}

/* ---------- Opinie ---------- */

.fa-oceny {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
	margin-bottom: clamp(36px, 4vw, 56px);
}

.fa-ocena {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.6vw, 24px);
	background: #1A1A1F;
	border: 1px solid rgb(255 255 255 / 0.09);
	padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 30px);
	color: inherit;
	text-decoration: none;
	transition: border-color 160ms ease, background 160ms ease;
}

.fa-ocena:hover { border-color: var(--fa-orange-500); background: var(--fa-orange-wash); }

.fa-ocena__logo { flex: none; display: block; }

.fa-ocena__serwis {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
	margin: 0 0 8px;
}

.fa-ocena__wynik { display: flex; align-items: center; gap: 14px; }

/* Liczba opinii pod ocena: sama gwiazdka nie mowi, czy stoi za nia trzynascie glosow,
   czy trzydziesci trzy. */
.fa-ocena__ile { font-size: var(--fa-text-13); color: var(--fa-text-muted); margin: 6px 0 0; }

.fa-ocena__liczba {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(30px, 2.8vw, 38px);
	line-height: 1;
	color: var(--fa-text-primary);
}

.fa-ocena__gwiazdki { display: flex; gap: 3px; }
.fa-ocena__dalej { margin-left: auto; flex: none; }

.fa-cytaty { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: start; }

@media (max-width: 900px) { .fa-cytaty { grid-template-columns: 1fr; } }

.fa-cytat--duzy { margin: 0; padding-left: clamp(20px, 2vw, 28px); border-left: 3px solid var(--fa-orange-500); }

.fa-cytat--duzy blockquote {
	margin: 0 0 24px;
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.42;
	color: var(--fa-text-primary);
	text-wrap: pretty;
}

.fa-cytaty__kolumna { display: flex; flex-direction: column; gap: clamp(24px, 2.6vw, 34px); }

.fa-cytat { margin: 0; }
.fa-cytat blockquote { margin: 0 0 12px; font-size: var(--fa-text-16); line-height: 1.66; color: #C2C2C8; text-wrap: pretty; }
.fa-cytat figcaption,
.fa-cytat--duzy figcaption { font-size: var(--fa-text-15); color: var(--fa-text-muted); }

/* ---------- Studio Treningowe ---------- */

.fa-studio { position: relative; overflow: hidden; }

.fa-studio__dekor { position: absolute; top: -8%; right: -6%; width: 46%; opacity: 0.13; pointer-events: none; }

.fa-studio__srodek { position: relative; }

.fa-studio__stan { position: absolute; width: 1px; height: 1px; opacity: 0; }

.fa-studio__filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2vw, 28px); }

.fa-studio__filtr {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 16px 20px;
	min-height: 44px;
	flex: 1 1 240px;
	background: rgb(255 255 255 / 0.03);
	cursor: pointer;
	transition: background 160ms ease;
}

.fa-studio__filtr:hover { background: rgb(255 255 255 / 0.06); }

/* Stan aktywny niesie trzy sygnaly niezalezne od koloru: jasniejsze tlo, pasek u gory
   kafla i slowo "Pokazuje". Sam obrys w kolorze projektu by nie wystarczyl. */
.fa-studio__filtr::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: transparent;
}

.fa-studio__znak { width: 14px; height: 14px; flex: none; }

.fa-studio__nazwa {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	display: block;
}

.fa-studio__rola { font-size: 14px; line-height: 1.35; color: var(--fa-text-secondary); display: block; }

.fa-studio__pokazuje {
	margin-left: auto;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
	visibility: hidden;
}

.fa-studio__opis { display: none; background: rgb(255 255 255 / 0.03); padding: clamp(20px, 2vw, 28px); }
.fa-studio__opis--wszystkie { display: block; }

.fa-studio__opis-rzad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 14px; }

.fa-studio__opis h3 {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--fa-text-primary);
}

.fa-studio__opis-meta { font-size: var(--fa-text-13); color: var(--fa-text-secondary); }
.fa-studio__opis p { font-size: var(--fa-text-16); line-height: 1.7; color: #C2C2C8; margin: 0; text-wrap: pretty; }

.fa-studio__grafik-naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: clamp(36px, 4vw, 56px) 0 20px;
}

.fa-studio__grafik-naglowek h3 {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(20px, 1.8vw, 26px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.fa-studio__siatka { display: grid; grid-template-columns: 78px repeat(6, minmax(0, 1fr)); gap: 8px; }

.fa-studio__dzien {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-15);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
	padding-left: 2px;
}

.fa-studio__godzina {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--fa-text-primary);
	display: flex;
	align-items: center;
}

.fa-studio__komorka { min-height: 62px; padding: 10px 12px; background: rgb(255 255 255 / 0.03); }
.fa-studio__komorka--pusta { background: rgb(255 255 255 / 0.012); }

.fa-studio__zajecia {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-16);
	letter-spacing: 0.02em;
	color: var(--fa-text-primary);
	display: block;
	margin-bottom: 4px;
}

.fa-studio__projekt { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fa-text-13); color: var(--fa-text-secondary); }
.fa-studio__projekt i { width: 9px; height: 9px; flex: none; display: block; }

/* Filtr: kafel zapala sie, a komorki spoza projektu gasna. Nie znikaja, bo pusta
   kratka w miejscu zajec czytalaby sie jak brak zajec o tej godzinie. */
.fa-studio:has(#studio-wszystkie:checked) .fa-studio__filtr--wszystkie,
.fa-studio:has(#studio-iron-queens:checked) .fa-studio__filtr--iron-queens,
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__filtr--strefa-formy,
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__filtr--wolf-extreme { background: rgb(255 255 255 / 0.08); }

.fa-studio:has(#studio-wszystkie:checked) .fa-studio__filtr--wszystkie .fa-studio__pokazuje,
.fa-studio:has(#studio-iron-queens:checked) .fa-studio__filtr--iron-queens .fa-studio__pokazuje,
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__filtr--strefa-formy .fa-studio__pokazuje,
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__filtr--wolf-extreme .fa-studio__pokazuje { visibility: visible; }

.fa-studio:has(#studio-wszystkie:checked) .fa-studio__filtr--wszystkie::before,
.fa-studio:has(#studio-iron-queens:checked) .fa-studio__filtr--iron-queens::before,
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__filtr--strefa-formy::before,
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__filtr--wolf-extreme::before { background: var(--fa-orange-500); }

.fa-studio:has(#studio-iron-queens:checked) .fa-studio__komorka:not(.fa-studio__komorka--iron-queens),
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__komorka:not(.fa-studio__komorka--strefa-formy),
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__komorka:not(.fa-studio__komorka--wolf-extreme) { opacity: 0.24; }

.fa-studio:has(#studio-iron-queens:checked) .fa-studio__pozycja:not(.fa-studio__pozycja--iron-queens),
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__pozycja:not(.fa-studio__pozycja--strefa-formy),
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__pozycja:not(.fa-studio__pozycja--wolf-extreme) { opacity: 0.24; }

.fa-studio:has(#studio-iron-queens:checked) .fa-studio__opis--wszystkie,
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__opis--wszystkie,
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__opis--wszystkie { display: none; }

.fa-studio:has(#studio-iron-queens:checked) .fa-studio__opis--iron-queens,
.fa-studio:has(#studio-strefa-formy:checked) .fa-studio__opis--strefa-formy,
.fa-studio:has(#studio-wolf-extreme:checked) .fa-studio__opis--wolf-extreme { display: block; }

.fa-studio__stan:focus-visible + .fa-studio__filtr { outline: 2px solid var(--fa-focus); outline-offset: 3px; }

.fa-studio__nota { font-size: 14px; line-height: 1.65; color: var(--fa-text-muted); margin: 22px 0 0; }

.fa-studio__stawki {
	margin-top: clamp(44px, 5vw, 72px);
	border-top: 1px solid var(--fa-line-strong);
	padding-top: clamp(32px, 3.4vw, 44px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 2.6vw, 40px);
	align-items: start;
}

.fa-studio__etykieta {
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-13);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
	margin: 0 0 10px;
}

.fa-studio__kwota {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: 32px;
	color: var(--fa-text-primary);
	margin: 0 0 10px;
}

.fa-studio__stawka-nota { font-size: 14px; line-height: 1.6; color: var(--fa-text-muted); margin: 0; }

.fa-studio__stawki-akcja { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Ponizej 900 px szesc kolumn nie da sie czytac nawet po przewinieciu, wiec te same
   dane ida lista pogrupowana dniami. Obie wersje stoja w markupie, przelacza CSS. */
.fa-studio__lista { display: none; flex-direction: column; gap: 24px; }

@media (max-width: 900px) {
	.fa-studio__siatka { display: none; }
	.fa-studio__lista { display: flex; }
}

.fa-studio__lista-dzien {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: var(--fa-text-16);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgb(255 255 255 / 0.09);
}

.fa-studio__pozycja {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 4px 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.05);
}

.fa-studio__pozycja .fa-studio__projekt { grid-column: 2; }

/* ---------- O nas ---------- */

.fa-onas { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: center; }

@media (max-width: 900px) { .fa-onas { grid-template-columns: 1fr; } }

.fa-onas__kadr { position: relative; aspect-ratio: 4 / 5; max-width: 460px; width: 100%; }

.fa-onas__kadr > div {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #111114;
	clip-path: polygon(140px 0, 100% 0, 100% calc(100% - 140px), calc(100% - 140px) 100%, 0 100%, 0 140px);
}

.fa-onas__kadr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.fa-onas__rog {
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 140px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background: repeating-linear-gradient(135deg, var(--fa-orange-500) 0 10px, rgb(253 130 2 / 0) 10px 22px);
	pointer-events: none;
}

.fa-onas p { font-size: 17px; line-height: 1.7; color: #C2C2C8; margin: 0 0 20px; text-wrap: pretty; }
.fa-onas h2 { margin-bottom: 24px; }
.fa-onas p:last-of-type { margin-bottom: 32px; }

/* ---------- Filmy ---------- */

.fa-filmy { background: var(--fa-ink-850); padding-block: clamp(56px, 7vw, 104px); }
.fa-filmy__srodek { max-width: 1360px; margin-inline: auto; padding-inline: clamp(24px, 4vw, 40px); }

.fa-filmy__naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; margin-bottom: clamp(28px, 3vw, 40px); }
.fa-filmy__naglowek p { font-size: var(--fa-text-16); line-height: 1.6; color: #9A9AA1; margin: 10px 0 0; }

.fa-filmy__strzalki { margin-left: auto; display: flex; gap: 10px; }

.fa-filmy__strzalka {
	width: 52px;
	height: 52px;
	background: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.28);
	color: var(--fa-text-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-filmy__strzalka:hover { background: rgb(255 255 255 / 0.08); border-color: var(--fa-line-ghost-hover); }

.fa-filmy__pas {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: clamp(24px, 4vw, 40px);
	scroll-padding-left: clamp(24px, 4vw, 40px);
	scrollbar-width: none;
	margin: 0;
	list-style: none;
}

.fa-filmy__pas::-webkit-scrollbar { display: none; }

.fa-film {
	position: relative;
	flex: none;
	width: clamp(212px, 23.5vw, 316px);
	aspect-ratio: 9 / 16;
	scroll-snap-align: start;
	overflow: hidden;
	background: var(--fa-ink-900);
	margin: 0;
}

@media (max-width: 760px) { .fa-film { width: 82vw; } }

.fa-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.94) saturate(0.96); }

.fa-film figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 56px 18px 18px;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: var(--fa-text-16);
	letter-spacing: 0.03em;
	line-height: 1.25;
	color: var(--fa-text-primary);
	background: linear-gradient(180deg, rgb(16 16 19 / 0) 0%, rgb(16 16 19 / 0.9) 62%);
}

/* Kadr z filmem: dol zajmuja kontrolki odtwarzacza, wiec podpis idzie na gore
   i przepuszcza klikniecia do odtwarzacza pod spodem. */
.fa-film video,
.fa-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--fa-ink-900); }

.fa-film--gra figcaption {
	inset: 0 0 auto 0;
	padding: 18px 18px 56px;
	pointer-events: none;
	background: linear-gradient(0deg, rgb(16 16 19 / 0) 0%, rgb(16 16 19 / 0.9) 62%);
}

.fa-film__odnosnik { position: absolute; inset: 0; }

.fa-film__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	translate: -50% -50%;
	color: var(--fa-text-primary);
	background: rgb(16 16 19 / 0.6);
	border: 1px solid var(--fa-line-ghost-hover);
	transition: background 0.2s;
}

.fa-film__odnosnik:hover .fa-film__play,
.fa-film__odnosnik:focus-visible .fa-film__play { background: var(--fa-orange-500); }

/* ---------- Zakonczenie ---------- */

.fa-zapisy { background: var(--fa-ink-850); overflow: hidden; }

.fa-zapisy__scena {
	position: relative;
	width: 100%;
	min-height: clamp(340px, 28vw, 420px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.fa-zapisy__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.fa-zapisy__przycieminie {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgb(20 21 23 / 0.94) 0%, rgb(20 21 23 / 0.78) 52%, rgb(20 21 23 / 0.6) 100%);
}

.fa-zapisy__dekor { position: absolute; right: -10%; top: -34%; width: 44%; opacity: 0.16; pointer-events: none; }

.fa-zapisy__tresc {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(52px, 6vw, 84px) clamp(24px, 4vw, 40px);
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

@media (max-width: 900px) { .fa-zapisy__tresc { grid-template-columns: 1fr; } }

.fa-zapisy h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; margin: 0 0 18px; }
.fa-zapisy__lead { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: #C2C2C8; margin: 0 0 30px; text-wrap: pretty; }

.fa-zapisy__obok { border-left: 1px solid var(--fa-line-strong); padding-left: clamp(24px, 3vw, 48px); }

@media (max-width: 900px) { .fa-zapisy__obok { border-left: 0; padding-left: 0; } }

.fa-zapisy__obok p { font-size: var(--fa-text-16); line-height: 1.6; color: var(--fa-text-secondary); margin: 0 0 18px; }
.fa-zapisy__obok .fa-btn { margin-bottom: 26px; }

.fa-zapisy__numer {
	font-family: var(--fa-font-display);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 36px);
	letter-spacing: 0.03em;
	color: var(--fa-text-primary);
	display: inline-block;
	padding-block: 6px;
	text-decoration: none;
}

.fa-zapisy__numer:hover { color: var(--fa-orange-400); }

/* Osiem nazw w dwoch rzedach po cztery, tak jak w makiecie. Ponizej pasek gubi
   kolumny, zeby najdluzsza nazwa (Polczyn-Zdroj) nie lamala sie na dwie linie. */
@media (min-width: 760px) { .fa-miasta__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fa-miasta__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Na telefonie licznik slajdu i strzalki nie miesza sie w jednym rzedzie z kropkami,
   a same kropki wystarczaja: sasiedni slajd jest o jedno dotkniecie. */
@media (max-width: 640px) {
	.fa-hero__licznik,
	.fa-hero__strzalki { display: none !important; }
	.fa-hero__sterowanie { margin-top: 32px; }
}

/* ---------- Ruch w hero ---------- */

/* Slajd wjezdza po kolei: nadtytul, tekst, przyciski, nota. Animacja startuje sama,
   bo `display: none` -> `block` przy przelaczeniu slajdu odpala ja od nowa. Zadnego
   skryptu tu nie ma, sterowanie robia pola radio. */
.fa-hero__slajd > * {
	animation: fa-rise 480ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.fa-hero__tytul { animation-delay: 60ms; }
.fa-hero__tekst { animation-delay: 140ms; }
.fa-hero__cta { animation-delay: 220ms; }
.fa-hero__nota { animation-delay: 300ms; }

/* Zdjecie i pas dekoru wchodza samym zanikiem: przesuwanie tla przy zmianie slajdu
   robiloby wrazenie, ze strona sie przeladowuje. */
.fa-hero__pas { animation: fa-fade 900ms ease 120ms backwards; }

@media (prefers-reduced-motion: reduce) {
	.fa-hero__slajd > *,
	.fa-hero__pas { animation: none; }
	.fa-hero__zdjecie { transition: none; }
}