/* Wyglad strony gabinetu. Tokeny mieszkaja w theme.json — tutaj stoi tylko to,
   czego theme.json nie wyraza: rytm, kadrowanie, stany interaktywne i ruch.

   Kontrakt barw zdjety pomiarem z ever.co.id (Awwwards): powierzchnia #7a6047,
   atrament #ffffff, para kontrastu 5,85:1. Kazdy dodany kolor liczymy wobec taupe,
   nigdy wobec bieli. */

:root {
	--tyrka-linia: color-mix(in srgb, var(--wp--preset--color--taupe-cichy) 60%, transparent);
	--tyrka-ruch: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- etykiety sekcji: jedyne miejsce z wersalikami --- */

.tyrka-etykieta {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- naglowek strony --- */

.tyrka-naglowek {
	border-bottom: 1px solid var(--tyrka-linia);
}

.tyrka-znak {
	letter-spacing: 0.04em;
	margin: 0;
}

.tyrka-naglowek p {
	margin: 0;
}

.tyrka-nawigacja a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 240ms var(--tyrka-ruch), color 240ms var(--tyrka-ruch);
}

.tyrka-nawigacja a:hover,
.tyrka-nawigacja a:focus-visible {
	border-bottom-color: currentColor;
}

.tyrka-telefon-maly a {
	letter-spacing: 0.06em;
}

/* --- hero --- */

.tyrka-display {
	max-width: 16ch;
	text-wrap: balance;
}

.tyrka-hero-kadr img {
	width: 100%;
	aspect-ratio: 940 / 720;
	object-fit: cover;
	object-position: 62% 50%;
}

/* --- wspolny rytm sekcji --- */

/* Uklad `constrained` WordPressa centruje kazde dziecko wezsze od kontenera wlasnymi
   marginesami `auto` — wiec sam `max-width` na naglowku wypycha go na SRODEK sekcji,
   mimo ze tekst w srodku jest wyrownany do lewej. Zmierzone w styles.json:
   `margin=0px 216.062px 0px 216.047px` na kazdym `h2`. Kolumna zaczyna sie przy lewej
   krawedzi kontenera, wiec margines po lewej stronie zerujemy jawnie.

   `!important` jest tu KONIECZNE, nie wygodne: rdzen wypisuje regule
   `.is-layout-constrained > :where(...) { margin-left: auto !important }`, wiec bez tego
   samo podniesienie specyficznosci nic nie daje (sprawdzone — margines zostawal 216 px).

   Regula obejmuje WSZYSTKIE dzieci sekcji, nie tylko naglowki: kolumny i galeria maja
   `contentSize` 1120 px w sekcji szerokiej na 1296 px, wiec zostawione na auto-centrowaniu
   zaczynaja sie 88 px na prawo od naglowka. Jedna lewa krawedz na cala strone, tak jak
   w naglowku i stopce. */

.tyrka-sekcja > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.tyrka-sekcja h2 {
	max-width: 18ch;
	text-wrap: balance;
	margin-top: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.tyrka-sekcja p {
	max-width: 62ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* --- karty zabiegow i opinii --- */

/* Karty nie maja tla, wiec wspolna linia wiersza to ich GORNA kreska, nie dolna krawedz.
   Rozciaganie do wspolnej wysokosci zostawialo pustke pod krotsza lista (Brwi ma trzy
   pozycje, Usta i Oczy po dwie) i wiersz wygladal na nierowny mimo wspolnej siatki.
   `!important`, bo rdzen wysyla na `.wp-block-columns` regule `align-items: normal !important`.
   Na waskim ekranie kolumny maja `flex-basis: 100%`, wiec wyrownanie w poprzek nie zwezi kart. */
.tyrka-karty {
	align-items: flex-start !important;
}

.tyrka-karta {
	border-top: 1px solid var(--tyrka-linia);
	padding-top: var(--wp--preset--spacing--30);
}

.tyrka-karta h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Drugi wiersz zabiegow: „Usuwanie makijazu permanentnego" lamie sie na dwie linie,
   a sasiednia „Pielegnacja twarzy" miesci sie w jednej — pierwsza pozycja listy startowala
   o cala linie nizej. Rezerwujemy dwa wiersze, zeby listy zaczynaly sie na tej samej wysokosci. */
.tyrka-karty + .tyrka-karty .tyrka-karta h3 {
	min-height: 2lh;
}

.tyrka-metody {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.tyrka-metody li {
	padding: 6px 0;
	border-bottom: 1px solid var(--tyrka-linia);
}

.tyrka-metody li:last-child {
	border-bottom: 0;
}

.tyrka-karta-cta {
	border-top-color: var(--wp--preset--color--krem);
}

.tyrka-opinia p {
	max-width: none;
}

/* --- wezwania telefoniczne --- */

.tyrka-cta a,
.tyrka-telefon-stopka a,
.tyrka-numer a {
	text-decoration: none;
	border-bottom: 1px solid var(--tyrka-linia);
	padding-bottom: 4px;
	transition: border-color 240ms var(--tyrka-ruch);
}

.tyrka-cta a:hover,
.tyrka-cta a:focus-visible,
.tyrka-numer a:hover,
.tyrka-numer a:focus-visible,
.tyrka-telefon-stopka a:hover,
.tyrka-telefon-stopka a:focus-visible {
	border-bottom-color: currentColor;
}

.tyrka-numer {
	font-size: clamp(3rem, 9vw, 7.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: none;
}

/* --- galeria efektow ---
   Kadry sa z feedu Facebooka (414 px), wiec siatka trzyma kwadrat i nie rozciaga
   ich ponad zrodlowa rozdzielczosc. Po podmianie na zdjecia z aparatu prog mozna podniesc. */

.tyrka-galeria.wp-block-gallery {
	gap: var(--wp--preset--spacing--20);
}

.tyrka-galeria figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Podpis mowi, co kadr niesie: para „przed i po" czy pojedyncze zdjecie po zabiegu.
   Rdzen srodkuje podpisy — my trzymamy je przy lewej krawedzi calej strony. */
.tyrka-galeria figcaption.wp-element-caption {
	text-align: left;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--etykieta);
	color: var(--wp--preset--color--krem);
}

/* --- portret w sekcji o mnie --- */

.tyrka-portret img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* --- stopka --- */

.tyrka-stopka p {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.tyrka-linia.wp-block-separator {
	border: 0;
	height: 1px;
	opacity: 0.4;
	margin-block: var(--wp--preset--spacing--50);
}

/* --- widoczny fokus: nie do wyciecia ---
   Kontur liczony wobec taupe, a nie wobec bieli, bo powierzchnia bazowa jest ciemna. */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--krem);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- odslanianie przy scrollu ---
   Odslanianie jest funkcja polozenia elementu w oknie, a nie jednorazowym wyzwalaczem:
   zatrzymasz sie w polowie, zostanie w polowie. Po dopelnieniu ZATRZASKUJE sie, zeby
   tresc nie gasla przy cofaniu w gore. Skrypt js/ruch.js prowadzi to na zywo;
   ponizsze reguly to stan wyjsciowy i wyjscie awaryjne. */

/* Czas trwania zdjety z pomiaru zrodla: `motion` na ever.co.id daje mediane ruchu
   odslaniania 1453 ms i ostatni ruch wejscia po 1812 ms. Sama krzywa polozenia daje
   wartosc docelowa natychmiast (zmierzone: mediana 47 ms), wiec bez `transition`
   nasz ruch jest o rzad wielkosci krotszy niz wzorzec. Domykanie w ~900 ms trzyma
   krzywa polozenia jako zrodlo prawdy i dodaje jej dlugosc. */

.tyrka-odslon {
	opacity: var(--tyrka-odslona, 0);
	transform: translateY(calc((1 - var(--tyrka-odslona, 0)) * 28px));
	transition: opacity 900ms var(--tyrka-ruch), transform 900ms var(--tyrka-ruch);
	will-change: opacity, transform;
}

.tyrka-odslon.tyrka-zatrzask {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Bez skryptu (albo zanim wystartuje) tresc musi byc widoczna — niewidoczna tresc
   przy wylaczonym JS to nie animacja, tylko brak strony. */
html:not(.tyrka-ruch-zywy) .tyrka-odslon {
	opacity: 1;
	transform: none;
}

/* Wydruk i kazdy render bez przewijania (zrzut calej strony, podglad czytnika) nie dostaje
   zadnego zdarzenia scrolla, wiec tresc ponizej pierwszego ekranu zostalaby na kryciu 0.
   Zmierzone: kaptura zywa bez realnego przemiatu oddawala puste pasy sekcji przy poprawnym
   HTML-u — sekcje byly w zrodle, a na obrazie nie bylo ich wcale. */
@media print {
	.tyrka-odslon,
	.tyrka-odslon.tyrka-zatrzask {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tyrka-odslon,
	.tyrka-odslon.tyrka-zatrzask {
		opacity: 1;
		transform: none;
		transition: none;
	}

	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- telefon --- */

@media (max-width: 781px) {
	.tyrka-nawigacja {
		gap: var(--wp--preset--spacing--20);
	}

	.tyrka-display {
		max-width: none;
	}

	.tyrka-hero-kadr img {
		aspect-ratio: 4 / 3;
	}
}

/* =====================================================================
   PODSTRONY — kierunek jasny (kremowy / tusz / zloto)
   =====================================================================

   Kontrakt zdjety 1:1 z projektu Claude Design `Podszkolenia.dc.html`
   (projekt 0adafb53-2060-41d2-8531-6980bc29bc63). Kierunek jest INNY niz
   strona glowna: tam powierzchnia to taupe #7a6047, tutaj krem #FAF8EB
   z atramentem #121015. Oba zestawy stoja obok siebie SWIADOMIE i tymczasowo —
   strona glowna czeka na przeniesienie z `Start.dc.html`. Prefiks `pod-` trzyma
   granice: zadna regula ponizej nie dotyka klas `tyrka-`.

   Ruch idzie natywnymi osiami CSS (`animation-timeline`), tak jak w projekcie.
   Przegladarka bez ich obslugi odtwarza animacje raz przy wczytaniu i zostawia
   stan koncowy (`animation-fill-mode: both`) — tresc jest widoczna zawsze. */

.pod-naglowek,
.pod-stopka,
.pod-strona,
.pod-kurtyna {
	--pod-ruch: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pod-ruch-wejscie: cubic-bezier(0.16, 1, 0.3, 1);
	--pod-ruch-spokojny: cubic-bezier(0.22, 1, 0.36, 1);
	--pod-pas: 1200px;
	--pod-bok: clamp(18px, 3vw, 40px);
	font-family: var(--wp--preset--font-family--manrope);
	/* Strona glowna jedzie na interlinii 1,5 z theme.json, projekt podstron nie ustawia
	   jej wcale. Roznica jest mala i wszedzie: etykiety rosly o 2 px, pas czterech faktow
	   o 5 px, numer w stopce o 4 px — razem 11 px na wysokosci dokumentu wobec wzorca.
	   Elementy, ktore w projekcie MAJA wlasna interlinie (lead, wstep, opisy kart,
	   naglowki), trzymaja ja nizej wlasnymi regulami. */
	line-height: normal;
}

/* Powierzchnia calego dokumentu, nie tylko `main` — inaczej spod naglowka
   i zza stopki wychodzi taupe strony glownej. */
body:has(.pod-strona) {
	background: var(--wp--preset--color--kremowy);
	color: var(--wp--preset--color--tusz);
}

.pod-strona {
	display: block;
	padding: 92px 0 0;
	background: var(--wp--preset--color--kremowy);
	color: var(--wp--preset--color--tusz);
}

.pod-strona a,
.pod-naglowek a {
	color: var(--wp--preset--color--tusz);
	text-decoration: none;
}

.pod-strona a:hover,
.pod-naglowek a:hover {
	color: var(--wp--preset--color--tusz);
}

.pod-strona img {
	display: block;
}

/* Kontur fokusu liczony wobec kremu, a nie wobec taupe — regula ogolna wyzej
   maluje go kremem, ktory na kremowym tle jest niewidoczny. */
.pod-strona a:focus-visible,
.pod-naglowek a:focus-visible,
.pod-strona button:focus-visible {
	outline: 2px solid var(--wp--preset--color--tusz);
	outline-offset: 3px;
}

.pod-stopka a:focus-visible {
	outline: 2px solid var(--wp--preset--color--zloto);
	outline-offset: 3px;
}

/* --- odstep blokowy rdzenia zdejmowany w pojemnikach projektu ---

   WordPress dokłada `margin-block-start: var(--wp--style--block-gap)` KAŻDEMU
   kolejnemu dziecku bloku grupy — także wtedy, gdy pojemnik jest u nas siatką albo
   kolumną fleksową z własnym `gap`. Wtedy odstęp liczy się dwa razy.
   Zmierzone wobec wzorca z projektu: karty 2 i 3 zjeżdżały o 24 px w dół, pierwsza
   rozciągała się do 224 px zamiast 200, sekcja „Zakres" rosła o 55 px, a `main`
   zaczynał się 24 px niżej. Odstępy w tych pojemnikach niesie `gap`, nie marginesy. */

.wp-site-blocks > .pod-naglowek,
.wp-site-blocks > .pod-strona,
.wp-site-blocks > .pod-stopka,
.wp-site-blocks > .wp-block-template-part,
.pod-strona > *,
.pod-strona .wp-block-post-content > *,
.pod-hero__pas > *,
.pod-hero__tresc > *,
.pod-karty > *,
.pod-karta > *,
.pod-fakty > *,
.pod-fakt > *,
.pod-galeria__siatka > *,
.pod-zapisy__pas > *,
.pod-zapisy__tresc > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --- kurtyna wejsciowa --- */

.pod-kurtyna {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
}

.pod-kurtyna__gora,
.pod-kurtyna__dol {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background: var(--wp--preset--color--tusz);
}

.pod-kurtyna__gora {
	top: 0;
	animation: pod-kurtyna-gora 1.96s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.pod-kurtyna__dol {
	bottom: 0;
	animation: pod-kurtyna-dol 1.96s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.pod-kurtyna__napis {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pod-kurtyna__napis span {
	font-size: 26px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kremowy);
	background: var(--wp--preset--color--tusz);
	padding: 6px 14px;
	animation: pod-znak-in 1.96s ease both;
}

/* --- pasek postepu przewijania --- */

.pod-postep {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 90;
	background: var(--wp--preset--color--zloto);
	transform-origin: left center;
	animation: pod-pasek 1.4s linear both;
	animation-timeline: scroll(root);
}

/* --- naglowek --- */

.pod-naglowek {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	background: color-mix(in srgb, var(--wp--preset--color--kremowy) 92%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--tusz) 10%, transparent);
	padding: 0;
}

.admin-bar .pod-naglowek {
	top: 32px;
}

.pod-naglowek__pas {
	max-width: var(--pod-pas);
	margin: 0 auto;
	padding: 10px var(--pod-bok);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.pod-nawigacja {
	display: flex;
	align-items: center;
	gap: 4px;
}

.pod-nawigacja--lewa {
	justify-self: start;
}

.pod-nawigacja--prawa {
	justify-self: end;
}

.pod-nawigacja a {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color 0.9s var(--pod-ruch-spokojny);
}

.pod-nawigacja a:hover {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--tusz) 35%, transparent);
}

.pod-nawigacja a.pod-nawigacja__biezaca,
.pod-nawigacja a.pod-nawigacja__biezaca:hover {
	border-bottom-color: var(--wp--preset--color--zloto);
}

.pod-nawigacja__kreska {
	width: 1px;
	height: 20px;
	background: color-mix(in srgb, var(--wp--preset--color--tusz) 18%, transparent);
	margin: 0 6px;
}

.pod-nawigacja a.pod-ikona {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	justify-content: center;
	transition: background 0.9s var(--pod-ruch-spokojny), transform 0.9s var(--pod-ruch);
}

.pod-nawigacja a.pod-ikona:hover {
	background: color-mix(in srgb, var(--wp--preset--color--tusz) 7%, transparent);
	transform: translateY(-2px);
}

.pod-nawigacja a.pod-pigulka {
	margin-left: 8px;
	border: 0;
	border-radius: 60px;
	gap: 10px;
	background: var(--wp--preset--color--tusz);
	color: var(--wp--preset--color--kremowy);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: none;
	padding: 0 20px;
	transition: transform 0.91s var(--pod-ruch), background 0.9s var(--pod-ruch-spokojny);
}

.pod-nawigacja a.pod-pigulka:hover {
	transform: translateY(-3px);
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--kremowy);
}

.pod-znak {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	transition: transform 1.01s var(--pod-ruch);
}

.pod-znak:hover {
	transform: translateY(-2px);
}

/* Czesc szablonu jest statycznym HTML-em, wiec adres znaku nie moze isc przez
   `get_theme_file_uri()`. Tlo z arkusza rozwiazuje sciezke wzglednie wobec pliku CSS,
   dzieki czemu dziala tez na instalacji w podkatalogu. */
.pod-znak__logo {
	width: 62px;
	height: 33px;
	background: url("../assets/logo-znak.png") center / contain no-repeat;
}

.pod-znak span {
	font-size: 13px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- hero --- */

.pod-hero {
	background: var(--wp--preset--color--tusz);
	color: var(--wp--preset--color--kremowy);
}

.pod-hero__pas {
	max-width: var(--pod-pas);
	margin: 0 auto;
	padding: clamp(56px, 9vh, 104px) var(--pod-bok);
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.pod-hero__tresc {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pod-hero .pod-etykieta {
	animation: pod-szeroko 1.4s ease both 1.26s;
}

.pod-tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 300;
	font-size: clamp(24px, 3.6vw, 54px);
	line-height: 1.09;
	letter-spacing: normal;
	color: var(--wp--preset--color--kremowy);
	animation: pod-wjazd 1.4s var(--pod-ruch-wejscie) both 1.33s;
}

.pod-tytul__druga {
	color: var(--wp--preset--color--piasek);
}

.pod-lead {
	margin: 0;
	max-width: 46ch;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(250, 248, 235, 0.78);
	animation: pod-wjazd-miekki 1.4s ease both 1.54s;
}

.pod-przyciski {
	animation: pod-wjazd-miekki 1.4s ease both 1.68s;
}

.pod-hero__kadr {
	margin: 0;
	overflow: hidden;
	background: #2a2a2a;
	animation: pod-wjazd 1.54s var(--pod-ruch-wejscie) both 1.4s;
}

.pod-hero__kadr img {
	width: 100%;
	height: clamp(300px, 46vh, 480px);
	object-fit: cover;
	transition: transform 2.64s var(--pod-ruch);
}

.pod-hero__kadr:hover img {
	transform: scale(1.05);
}

/* --- przycisk telefoniczny --- */

.pod-przycisk .wp-block-button__link {
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--tusz);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 16px 24px;
	border: 0;
	border-radius: 0;
	transition: transform 0.91s var(--pod-ruch);
}

.pod-przycisk .wp-block-button__link:hover {
	transform: translateY(-3px);
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--tusz);
}

/* --- etykiety i naglowki sekcji --- */

.pod-etykieta {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oliwka);
}

.pod-etykieta--zloto {
	color: var(--wp--preset--color--zloto);
}

.pod-etykieta--rozstrzelona {
	font-size: 10px;
	letter-spacing: 0.3em;
}

.pod-zakres {
	max-width: var(--pod-pas);
	margin: 0 auto;
	padding: clamp(56px, 9vh, 104px) var(--pod-bok);
}

.pod-naglowek-sekcji {
	margin: 18px 0 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 300;
	font-size: clamp(21px, 3.02vw, 42px);
	line-height: 1.09;
	animation: pod-wjazd 1.3s var(--pod-ruch-wejscie) both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.pod-wstep {
	margin: 18px 0 0;
	max-width: 54ch;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(18, 16, 21, 0.72);
}

/* --- karty zakresu --- */

.pod-karty {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pod-karta {
	background: var(--wp--preset--color--atrament);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--tusz) 12%, transparent);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 200px;
	transition: transform 1.8s var(--pod-ruch-spokojny), border-color 1.6s var(--pod-ruch-spokojny), background 1.6s var(--pod-ruch-spokojny);
	animation: pod-pojaw 1.8s var(--pod-ruch-spokojny) both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.pod-karty .pod-karta:nth-child(2) {
	animation-delay: 0.11s;
}

.pod-karty .pod-karta:nth-child(3) {
	animation-delay: 0.22s;
}

.pod-karta:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--zloto);
	background: color-mix(in srgb, var(--wp--preset--color--piasek) 22%, transparent);
}

.pod-karta__numer {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--oliwka);
}

.pod-karta__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 300;
	font-size: 26px;
	line-height: 1.2;
}

.pod-karta__opis {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(18, 16, 21, 0.7);
}

/* --- cztery fakty --- */

.pod-fakty {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pod-fakt {
	border-top: 1px solid var(--wp--preset--color--zloto);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	animation: pod-pojaw 1.8s var(--pod-ruch-spokojny) both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.pod-fakty .pod-fakt:nth-child(2) {
	animation-delay: 0.08s;
}

.pod-fakty .pod-fakt:nth-child(3) {
	animation-delay: 0.17s;
}

.pod-fakty .pod-fakt:nth-child(4) {
	animation-delay: 0.25s;
}

.pod-fakt__etykieta {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oliwka);
}

.pod-fakt__wartosc {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
}

/* --- galeria --- */

.pod-galeria {
	background: var(--wp--preset--color--atrament);
}

.pod-galeria__siatka {
	max-width: var(--pod-pas);
	margin: 0 auto;
	padding: 0 var(--pod-bok) clamp(52px, 9vh, 100px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 230px;
	gap: 12px;
}

.pod-kadr {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--piasek);
	animation: pod-pojaw 1.8s var(--pod-ruch-spokojny) both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.pod-kadr--szeroki {
	grid-column: span 2;
}

.pod-galeria__siatka .pod-kadr:nth-child(2) {
	animation-delay: 0.11s;
}

.pod-galeria__siatka .pod-kadr:nth-child(3) {
	animation-delay: 0.2s;
}

.pod-galeria__siatka .pod-kadr:nth-child(4) {
	animation-delay: 0.28s;
}

.pod-kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 2.64s var(--pod-ruch);
}

.pod-kadr:hover img {
	transform: scale(1.06);
}

/* --- wezwanie do zapisu --- */

.pod-zapisy {
	background: var(--wp--preset--color--piasek);
}

.pod-zapisy__pas {
	max-width: var(--pod-pas);
	margin: 0 auto;
	padding: clamp(48px, 7vh, 88px) var(--pod-bok);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pod-zapisy__tresc {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pod-zapisy__tytul {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 300;
	font-size: clamp(28px, 3.6vw, 48px);
	line-height: 1.09;
}

.pod-zapisy__numer {
	margin: 0;
}

.pod-zapisy__numer a {
	display: inline-block;
	font-size: clamp(22px, 2.57vw, 36px);
	padding: 4px 10px;
	transition: background 0.9s var(--pod-ruch-spokojny), color 0.9s var(--pod-ruch-spokojny);
}

.pod-zapisy__numer a:hover {
	background: var(--wp--preset--color--tusz);
	color: var(--wp--preset--color--kremowy);
}

/* --- stopka --- */

.pod-stopka {
	background: var(--wp--preset--color--tusz);
	color: var(--wp--preset--color--kremowy);
	padding: 56px var(--pod-bok) 28px;
}

.pod-stopka__pas {
	max-width: var(--pod-pas);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pod-stopka__znak {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pod-stopka__logo {
	width: 66px;
	height: 35px;
	background: url("../assets/logo-znak.png") center / contain no-repeat;
	filter: invert(1);
}

.pod-stopka__znak span {
	font-size: 20px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pod-stopka__nawigacja {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pod-stopka a {
	color: var(--wp--preset--color--kremowy);
	text-decoration: none;
}

.pod-stopka__nawigacja a {
	padding: 9px 15px;
	border-radius: 2px;
	transition: background 0.9s var(--pod-ruch-spokojny), color 0.9s var(--pod-ruch-spokojny);
}

.pod-stopka__nawigacja a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--kremowy) 14%, transparent);
	color: var(--wp--preset--color--kremowy);
}

.pod-stopka__nawigacja a.pod-stopka__fb {
	color: var(--wp--preset--color--piasek);
}

.pod-stopka__nawigacja a.pod-stopka__fb:hover {
	background: color-mix(in srgb, var(--wp--preset--color--piasek) 18%, transparent);
	color: var(--wp--preset--color--piasek);
}

.pod-stopka__telefon {
	font-size: 28px;
	transition: transform 1.01s var(--pod-ruch), color 0.9s var(--pod-ruch-spokojny);
}

.pod-stopka__telefon:hover {
	transform: translateX(8px);
	color: var(--wp--preset--color--zloto);
}

/* --- klatki ruchu --- */

@keyframes pod-wjazd {
	from { opacity: 0; transform: translateY(38px); }
	to   { opacity: 1; transform: none; }
}

@keyframes pod-wjazd-miekki {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes pod-pojaw {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

@keyframes pod-kurtyna-gora {
	0%, 45% { transform: translateY(0); }
	100%    { transform: translateY(-101%); }
}

@keyframes pod-kurtyna-dol {
	0%, 45% { transform: translateY(0); }
	100%    { transform: translateY(101%); }
}

@keyframes pod-znak-in {
	0%        { opacity: 0; }
	20%, 45%  { opacity: 1; }
	100%      { opacity: 0; }
}

@keyframes pod-szeroko {
	from { letter-spacing: 0.7em; opacity: 0; }
	to   { letter-spacing: 0.12em; opacity: 1; }
}

@keyframes pod-pasek {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --- telefon i tablet --- */

@media (max-width: 900px) {
	.pod-naglowek__pas {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 8px;
	}

	.pod-nawigacja--lewa,
	.pod-nawigacja--prawa {
		justify-self: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.pod-znak {
		order: -1;
	}

	/* Projekt nie ma warstwy telefonicznej, wiec ta decyzja jest nasza i zapisana wprost:
	   nawigacja lamie sie tu na trzy wiersze i przyklejony naglowek mierzy 181 px, czyli
	   21% ekranu 844 px na stale. Do tego kazde odgorne dopelnienie `main` musialoby
	   zgadywac te wysokosc — zmierzone 168 px chowalo hero pod paskiem o 13 px.
	   Naglowek nieprzyklejony znosi obie rzeczy naraz. */
	.pod-naglowek {
		position: static;
	}

	.admin-bar .pod-naglowek {
		top: auto;
	}

	.pod-strona {
		padding-top: 0;
	}

	.pod-hero__pas {
		grid-template-columns: 1fr;
	}

	.pod-karty,
	.pod-fakty {
		grid-template-columns: repeat(2, 1fr);
	}

	.pod-galeria__siatka {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
	}
}

@media (max-width: 560px) {
	.pod-karty,
	.pod-fakty,
	.pod-galeria__siatka {
		grid-template-columns: 1fr;
	}

	.pod-kadr--szeroki {
		grid-column: span 1;
	}
}

/* --- odnosnik pomijajacy nawigacje ---
   Rdzen WordPressa wstawia go do `body`, poza `main`, wiec nie obejmuja go reguly
   `.pod-strona a`. Bez tego dziedziczy krem z theme.json i na kremowym tle znika. */

body:has(.pod-strona) .skip-link {
	color: var(--wp--preset--color--tusz);
	background: var(--wp--preset--color--kremowy);
}