/* ==========================================================================
   Jeleni Szlak — arkusz glowny
   Tokeny > reset > typografia > uklad > naglowek > sekcje > stopka > telefon
   ========================================================================== */

:root {
	/* --- Kolor ---------------------------------------------------------- */
	--len: #F3EEE4;
	--len-ciepły: #EFE8DA;
	--len-glebszy: #E7DFCE;
	--las: #0E2A1D;
	--las-glebia: #071510;
	--las-jasny: #17392A;

	/* Bursztyn w trzech rolach, wartosci dobrane pomiarem kontrastu:
	   --bursztyn na bieli 5,48 i na lnie 4,83; hover na bieli 7,12;
	   --bursztyn-jasny na lesnej zieleni 5,41. */
	--bursztyn: #9C5820;
	--bursztyn-hover: #84491A;
	--bursztyn-jasny: #D08A46;

	--tekst: #16201A;
	--tekst-cichy: #4C5850;
	--mech: #8A9A80;
	--biel: #FDFCF9;

	/* Jasne odcienie na ciemnej zieleni. Na --las kolejno 13,5 / 11,2 / 7,8. */
	--jasny-0: #EDF1EE;
	--jasny-1: #D6DED8;
	--jasny-2: #AFBCB2;

	--linia-jasna: rgba(22, 32, 26, 0.12);
	--linia-ciemna: rgba(253, 252, 249, 0.16);

	/* --- Szerokosci ----------------------------------------------------- */
	--w-content: min(100% - 3rem, 78rem);
	--w-wide: min(100% - 2.5rem, 94rem);

	/* --- Odstepy, siatka 4 px ------------------------------------------ */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	--sekcja: clamp(3.5rem, 6vw, 6.5rem);
	--sekcja-duza: clamp(4.5rem, 8vw, 8rem);

	/* --- Typografia ----------------------------------------------------- */
	/* Proba na zyczenie klientki (7.08): prostszy, geometryczny krój
	   zamiast szeryfowego. Powrot do DM Serif + DM Sans to zmiana tych
	   dwoch linii i jednej w fonty.css — pliki zostaja na serwerze. */
	--font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
	--font-tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-h1: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem);
	--fs-h2: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
	--fs-h3: clamp(1.3rem, 1.2rem + 0.55vw, 1.65rem);
	--fs-lead: clamp(1.1rem, 1.04rem + 0.36vw, 1.375rem);
	--fs-body: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);
	--fs-maly: 0.9375rem;
	--fs-drobny: 0.8125rem;
	--fs-mikro: 0.6875rem;

	/* --- Cienie warstwowe ----------------------------------------------- */
	--cien-sm:
		0 1px 1px rgba(7, 21, 16, 0.04),
		0 2px 2px rgba(7, 21, 16, 0.04),
		0 4px 4px rgba(7, 21, 16, 0.04);
	--cien-md:
		0 1px 1px rgba(7, 21, 16, 0.035),
		0 2px 2px rgba(7, 21, 16, 0.035),
		0 4px 4px rgba(7, 21, 16, 0.035),
		0 8px 8px rgba(7, 21, 16, 0.035),
		0 16px 16px rgba(7, 21, 16, 0.035);
	--cien-lg:
		0 2px 2px rgba(7, 21, 16, 0.03),
		0 4px 4px rgba(7, 21, 16, 0.03),
		0 8px 8px rgba(7, 21, 16, 0.03),
		0 16px 16px rgba(7, 21, 16, 0.03),
		0 32px 32px rgba(7, 21, 16, 0.04);

	/* --- Ruch ------------------------------------------------------------ */
	--spring: cubic-bezier(0.22, 1, 0.36, 1);
	--snappy: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 240ms;
	--dur-szybko: 130ms;

	--dur-wolno: 420ms;

	--promien: 2px;
	--promien-duzy: 3px;
	--header-h: 84px;

	/* --- Role stanow i komponentow ---------------------------------------- */
	--blad: #A6321E;      /* kontrast na lnie 6,1 */
	--sukces: #2F6B45;    /* kontrast na lnie 5,3 */
	--czern-podgladu: #051610;

	--btn-h: 56px;        /* przyciski w tresci */
	--btn-h-maly: 44px;   /* przyciski w naglowku — rowne minimum dotyku WCAG */
	--pole-h: 56px;       /* pola formularza — ta sama wysokosc co przyciski */
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	background: var(--len);
	color: var(--tekst);
	font-family: var(--font-tekst);
	font-size: var(--fs-body);
	line-height: 1.7;
	overflow-x: clip;
}

::selection { background: var(--bursztyn); color: var(--biel); }

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	/* Montserrat w wadze zwyklej jest za lekki na naglowek — 600 daje ten
	   sam ciezar optyczny co szeryf w 400. */
	font-weight: 600;
	/* 1,08 dawalo zlepione wiersze w dwuliniowych naglowkach sekcji.
	   Hero ma wlasna, ciasniejsza wartosc. */
	line-height: 1.16;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

p { margin: 0 0 var(--space-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-color: rgba(140, 140, 140, 0.5); text-underline-offset: 0.24em; }
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--bursztyn);
	outline-offset: 4px;
	border-radius: 1px;
}

.jsz-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--bursztyn);
	color: var(--biel);
	padding: var(--space-3) var(--space-6);
}
.jsz-skip:focus { left: var(--space-4); top: var(--space-4); }

/* Ziarno: zdejmuje plaskosc z duzych plaszczyzn zieleni. */
.jsz-ziarno::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.055;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Uklad i elementy wspolne
   ========================================================================== */

.container { width: var(--w-content); margin-inline: auto; }

.jsz-sekcja { position: relative; padding-block: var(--sekcja); }
.jsz-sekcja--len { background: var(--len); color: var(--tekst); }
.jsz-sekcja--las { background: var(--las); color: var(--biel); }
.jsz-sekcja--las a { color: var(--biel); }

/* Numer sekcji: zwykle cyfry, bez ozdobnikow i bez kreski obok. */
.jsz-numer {
	display: block;
	margin-bottom: var(--space-4);
	font-family: var(--font-tekst);
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.32em;
	color: var(--bursztyn);
}
.jsz-sekcja--las .jsz-numer { color: var(--bursztyn-jasny); }

.jsz-sekcja__naglowek { margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.jsz-sekcja__naglowek--waski { text-align: left; }

.jsz-naglowek { font-size: var(--fs-h2); }

.jsz-sekcja__opis {
	margin-top: var(--space-6);
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--tekst-cichy);
}
.jsz-sekcja--las .jsz-sekcja__opis { color: var(--jasny-1); }

.jsz-proza p { margin-bottom: var(--space-5); }
.jsz-proza p:last-child { margin-bottom: 0; }

/* Ikona rysunkowa jako maska — kolor z currentColor, plik w cache. */
.jsz-ikona {
	display: block;
	width: var(--jsz-ikona-rozmiar, 40px);
	height: var(--jsz-ikona-rozmiar, 40px);
	background-color: currentColor;
	-webkit-mask: var(--jsz-ikona) center / contain no-repeat;
	mask: var(--jsz-ikona) center / contain no-repeat;
}

/* --- Przyciski -------------------------------------------------------- */

.jsz-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--btn-h);
	padding: 0 var(--space-8);
	border: 1px solid transparent;
	cursor: pointer;
	border-radius: var(--promien);
	font-size: var(--fs-maly);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition:
		background var(--dur-szybko) var(--snappy),
		color var(--dur-szybko) var(--snappy),
		border-color var(--dur-szybko) var(--snappy),
		transform var(--dur) var(--spring),
		box-shadow var(--dur) var(--spring);
}
/* Docisniecie i stan nieaktywny. Bez tego przycisk formularza w trakcie
   wysylki wygladal identycznie jak gotowy do klikniecia. */
.jsz-btn:active { transform: translateY(1px); }
.jsz-btn--maly { min-height: var(--btn-h-maly); padding-inline: var(--space-6); }
.jsz-btn[disabled],
.jsz-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	pointer-events: none;
}

.jsz-btn--akcent {
	background: var(--bursztyn);
	color: var(--biel);
	box-shadow:
		0 1px 2px rgba(132, 73, 26, 0.2),
		0 2px 4px rgba(132, 73, 26, 0.16),
		0 6px 12px rgba(132, 73, 26, 0.12);
}
.jsz-btn--akcent:hover {
	background: var(--bursztyn-hover);
	transform: translateY(-2px);
	box-shadow:
		0 1px 2px rgba(132, 73, 26, 0.22),
		0 4px 8px rgba(132, 73, 26, 0.18),
		0 12px 24px rgba(132, 73, 26, 0.16);
}

/* Cichy przycisk: sama linia u dolu, bez ramki dookola. */
.jsz-btn--cichy {
	padding-inline: var(--space-2);
	background: transparent;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}
.jsz-btn--cichy svg { transition: transform var(--dur) var(--spring); }
.jsz-btn--cichy:hover { color: var(--bursztyn); }
.jsz-sekcja--las .jsz-btn--cichy:hover,
.jsz-hero .jsz-btn--cichy:hover { color: var(--bursztyn-jasny); }
.jsz-btn--cichy:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Naglowek strony
   ========================================================================== */

.jsz-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: transparent;
	transition: background var(--dur) var(--spring), box-shadow var(--dur) var(--spring);
	/* Bez backdrop-filter: tworzy blok zawierajacy dla potomkow z position:fixed,
	   przez co menu telefonu (inset: 0) przycinalo sie do wysokosci naglowka. */
}
.jsz-header::before {
	content: "";
	position: absolute;
	inset: 0 0 -60px 0;
	background: linear-gradient(180deg, rgba(7, 21, 16, 0.88) 0%, rgba(7, 21, 16, 0.62) 45%, rgba(7, 21, 16, 0.18) 80%, rgba(7, 21, 16, 0));
	pointer-events: none;
	transition: opacity var(--dur) var(--spring);
}
.jsz-header.jest-przewinieta {
	background: rgba(14, 42, 29, 0.95);
	box-shadow: 0 12px 32px -26px rgba(0, 0, 0, 0.9);
}
.jsz-header.jest-przewinieta::before { opacity: 0; }

.jsz-header__inner {
	position: relative;
	width: var(--w-wide);
	margin-inline: auto;
	min-height: var(--header-h);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-6);
}

.jsz-header__logo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--biel);
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-header__logo:hover { color: var(--bursztyn-jasny); }

.jsz-header__znak { width: auto; height: 48px; object-fit: contain; transition: transform var(--dur) var(--spring); }
.jsz-header__logo:hover .jsz-header__znak { transform: scale(1.05); }

.jsz-header__lockup { display: grid; gap: 2px; }
.jsz-header__nazwa {
	font-family: var(--font-display);
	font-size: 1.375rem;
	line-height: 1;
	letter-spacing: 0.005em;
}
.jsz-header__miejsce {
	font-size: var(--fs-mikro);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--jasny-2);
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-header__logo:hover .jsz-header__miejsce { color: var(--bursztyn-jasny); }

/* Menu wysrodkowane wzgledem strony, nie wzgledem wolnego miejsca. */
.jsz-nav { justify-self: center; }
.jsz-nav__lista { display: flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-8)); }

.jsz-nav__link {
	position: relative;
	display: inline-block;
	padding: var(--space-2) 0;
	color: var(--jasny-1);
	font-size: var(--fs-maly);
	text-decoration: none;
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--bursztyn-jasny);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur) var(--spring);
}
.jsz-nav__link:hover,
.jsz-nav__link.jest-aktywny { color: var(--biel); }
.jsz-nav__link:hover::after,
.jsz-nav__link.jest-aktywny::after { transform: scaleX(1); transform-origin: left; }

.jsz-nav__stopka { display: none; }

.jsz-header__akcje { display: flex; align-items: center; gap: var(--space-5); }

.jsz-header__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	gap: var(--space-2);
	color: var(--biel);
	font-size: var(--fs-maly);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-header__tel svg { color: var(--bursztyn-jasny); }
.jsz-header__tel:hover { color: var(--bursztyn-jasny); }

.jsz-header__cta { min-height: var(--btn-h-maly); padding-inline: var(--space-6); }

.jsz-burger {
	display: none;
	width: 46px;
	height: 46px;
	padding: var(--space-3) 11px;
	background: transparent;
	border: 1px solid rgba(253, 252, 249, 0.34);
	border-radius: var(--promien);
}
.jsz-burger span {
	display: block;
	height: 1px;
	background: var(--biel);
	transition: transform var(--dur) var(--spring), opacity var(--dur-szybko) var(--snappy);
}
.jsz-burger span + span { margin-top: 6px; }
.jsz-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jsz-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jsz-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Pierwszy ekran
   ========================================================================== */

.jsz-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Dosuniecie do dolu przez `margin-top: auto` na pierwszym dziecku
	   (regula nizej), nie przez `justify-content: flex-end`. Gdy tresc nie
	   miesci sie w pojemniku, flexbox przy `flex-end` wypycha ja GORA poza
	   pojemnik — przy 320 px caly pierwszy ekran wchodzil pod przyklejony
	   naglowek i nadtytul znikal. Z `margin-top: auto` nadmiar idzie w dol. */
	justify-content: flex-start;
	min-height: 100svh;
	padding-top: calc(var(--header-h) + var(--space-16));
	background: var(--las-glebia);
	color: var(--biel);
	overflow: hidden;
}

.jsz-hero > .jsz-hero__tresc { margin-top: auto; }

.jsz-hero__tlo { position: absolute; inset: 0; overflow: hidden; }
.jsz-hero__tlo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Zdjecie stoi nieruchomo. Powolne zblizenie ladnie wygladalo na
	   zrzucie, ale przez 26 s podmienialo tlo pod tekstem i psulo kazdy
	   pomiar kontrastu opartu o roznice kadrow. */
}
.jsz-hero__tlo::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Ciemnienie tylko u gory, pod przezroczystym naglowkiem strony: logo
	   i menu to bialy tekst na zdjeciu i bez tego spadaja ponizej progu.
	   Dol byl przyciemniony, gdy wyszukiwarka stala przy dolnej krawedzi
	   zdjecia. Po jej przeniesieniu w tresc nie ma czego zaslaniac, a
	   klientka prosila, zeby zdjecie bylo lepiej widoczne (7.08). Zostaje
	   ledwie zaznaczona winieta, zeby zdjecie nie konczylo sie cieciem. */
	background:
		linear-gradient(180deg, rgba(7, 21, 16, 0.44) 0%, rgba(7, 21, 16, 0.04) 22%, rgba(7, 21, 16, 0) 60%, rgba(7, 21, 16, 0.14) 100%);
}

.jsz-hero__tresc {
	position: relative;
	z-index: 2;
	padding-bottom: clamp(var(--space-10), 5vh, var(--space-16));
}
/* Zaslona pod samym blokiem tekstu. Gradienty na calym zdjeciu nie
   wystarczaly: naglowek trafial na jasna sciane domu i kontrast spadal
   do 4,4 na duzym ekranie i do 2,9 na telefonie (pomiar pod glifami,
   _tools/kontrast_na_zdjeciu.py). */
.jsz-hero__tresc::before {
	content: "";
	position: absolute;
	/* Zaslona trzyma sie bloku tekstu, a nie calego zdjecia: w pionie gasnie
	   pod przyciskami, w poziomie konczy sie tam, gdzie konczy sie tekst.
	   Wartosci dobrane pomiarem kontrastu pod glifami — nizej nie schodzimy,
	   bo naglowek spada ponizej progu 4,50. */
	inset: -46% -8% -4% -8%;
	background: linear-gradient(
		180deg,
		rgba(7, 21, 16, 0) 0%,
		rgba(7, 21, 16, 0.52) 16%,
		rgba(7, 21, 16, 0.84) 38%,
		rgba(7, 21, 16, 0.84) 72%,
		rgba(7, 21, 16, 0.30) 100%
	);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.45) 66%, transparent 82%);
	mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.45) 66%, transparent 82%);
	pointer-events: none;
}
.jsz-hero__tresc > .container { position: relative; }

.jsz-hero__nadtytul {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--bursztyn-jasny);
}

.jsz-hero__nadtytul::before {
	content: "";
	flex: none;
	width: clamp(28px, 4vw, 56px);
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.jsz-hero__naglowek {
	font-size: var(--fs-h1);
	line-height: 0.98;
	letter-spacing: -0.028em;
	text-shadow: 0 2px 40px rgba(7, 21, 16, 0.4);
}
.jsz-hero__naglowek-1 { display: block; }
.jsz-hero__naglowek-2 {
	display: block;
	margin-top: 0.06em;
	padding-left: 0.06em;
	font-weight: 500;
	font-size: 0.62em;
	letter-spacing: -0.006em;
	color: var(--jasny-1);
}

.jsz-hero__lead {
	margin-top: var(--space-8);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--jasny-0);
}

.jsz-hero__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	margin-top: var(--space-10);
}
.jsz-hero .jsz-btn--cichy { color: var(--biel); }

/* Okno do wnetrza: male zdjecie w prawym dolnym rogu pierwszego ekranu.
   Gosc od razu widzi, co wynajmuje, a nie tylko las dookola. Pojawia sie
   tylko tam, gdzie jest na nie miejsce obok bloku tekstu. */
.jsz-hero__karta { display: none; }
@media (min-width: 1200px) {
	.jsz-hero__karta {
		position: absolute;
		right: 0;
		bottom: 0;
		display: block;
		width: min(360px, 27vw);
		padding: var(--space-3);
		background: rgba(253, 252, 249, 0.94);
		border-radius: var(--promien);
		box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
		outline: 1px solid transparent;
		outline-offset: -1px;
		color: var(--tekst);
		transition: background var(--dur) var(--snappy), outline-color var(--dur) var(--snappy), box-shadow var(--dur) var(--snappy);
	}
	.jsz-hero__karta:hover {
		background: var(--biel);
		outline-color: var(--bursztyn);
		box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9);
	}
	/* Podniesienie na wewnetrznym elemencie: karta ma animacje wejscia
	   z fill-mode forwards, a ta wygrywa z transformem z hoveru. */
	/* Kolaz: szeroki kadr u gory, pod nim dwa kwadraty. Trzy zdjecia z domkow
	   mowia o ofercie wiecej niz jedno, a uklad nadal jest spokojny. */
	.jsz-hero__karta-siatka {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2);
		transition: transform var(--dur) var(--spring);
	}
	.jsz-hero__karta--1 .jsz-hero__karta-siatka { grid-template-columns: minmax(0, 1fr); }
	.jsz-hero__karta-siatka > :first-child { grid-column: 1 / -1; }
	.jsz-hero__karta:hover .jsz-hero__karta-siatka { transform: translateY(-6px); }
	.jsz-hero__karta-foto {
		display: block;
		overflow: hidden;
		border-radius: calc(var(--promien) - 6px);
	}
	.jsz-hero__karta-foto img {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		transition: transform 700ms var(--spring);
	}
	.jsz-hero__karta-siatka > :first-child img { aspect-ratio: 4 / 3; }
	.jsz-hero__karta--1 .jsz-hero__karta-foto img { aspect-ratio: 4 / 5; }
	.jsz-hero__karta:hover .jsz-hero__karta-foto img { transform: scale(1.05); }
	.jsz-hero__karta-podpis {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-2) var(--space-1);
		font-size: var(--fs-drobny);
		letter-spacing: 0.02em;
	}
	.jsz-hero__karta-podpis svg { flex: none; color: var(--bursztyn); }
	.jsz-hero__karta:hover .jsz-hero__karta-podpis svg { transform: translateX(3px); transition: transform var(--dur) var(--spring); }
}

/* Pas wyszukiwarki przyklejony do dolnej krawedzi zdjecia. */
/* Wyszukiwarka terminow stoi w tresci pierwszego ekranu, nad przyciskami —
   to jest kanal sprzedazy, wiec nie chowa sie na dole zdjecia.

   Sam pasek, bez ciemnej karty i bez tytulu nad nim: klientka poprosila
   o wyglad jak na starej stronie („malutki, bez ramki"), zeby zdjecie bylo
   lepiej widoczne. Szerokosc 1050 px to nie kaprys — ponizej okolo 1000 px
   widget RoomAdmina lamie pola do dwoch rzedow i rosnie ze 110 do 154 px
   (pomiar na szesciu szerokosciach). */
.jsz-hero__pas {
	position: relative;
	z-index: 3;
	display: grid;
	width: min(1050px, 100%);
	margin-block: var(--space-8);
}

/* Widget centruje w swojej ramce kolumne o stalej szerokosci, wiec jasny
   pasek zaczynal sie kilkadziesiat pikseli od lewej krawedzi ramki i nie
   stal w jednej linii z tekstem. Cofamy ramke o polowe tej roznicy.

   Szerokosc kolumny zmienia sie skokowo (pomiar na dziesieciu szerokosciach):
   ramka >= 992 px -> kolumna 940 px, ramka 772-991 px -> 720 px,
   ramka < 772 px -> kolumna wypelnia ramke (odstep 2 px). */
/* Przesuwamy sama ramke, a jej przezroczyste boki przycinamy opakowaniem
   o szerokosci widocznej kolumny. Wczesniej przesuwal sie caly pasek i przy
   1024-1280 px wystawal 31-104 px poza ekran — niewidocznie, bo strona ma
   przyciete przewijanie w bok, ale audyt „tresc ucieta" slusznie to lapal. */
.jsz-hero__pas-widget { overflow: hidden; }

/* Szerokosc ustawiamy na pojemniku wtyczki, nie na ramce: wtyczka wpisuje
   ramce `width: 100%` stylem w znaczniku, a taki zapis wygrywa z arkuszem
   (pomiar po pierwszej probie: ramka zwezila sie do 940 px i widget przelaczyl
   sie na uklad dwurzedowy). */
@media (min-width: 1040px) {
	.jsz-hero__pas-widget { width: 940px; max-width: 100%; }
	.jsz-hero__pas-widget .ra-search-engine-container {
		width: min(1050px, calc(100vw - 3rem));
		margin-left: calc((940px - min(1050px, calc(100vw - 3rem))) / 2);
	}
}

@media (min-width: 820px) and (max-width: 1039.98px) {
	.jsz-hero__pas-widget { width: 720px; max-width: 100%; }
	.jsz-hero__pas-widget .ra-search-engine-container {
		width: calc(100vw - 3rem);
		margin-left: calc((720px - (100vw - 3rem)) / 2);
	}
}
/* Napis „Wolne terminy" nad wyszukiwarka znika razem z ciemna karta —
   pasek ma wygladac tak jak na starej stronie, czyli sam z siebie.
   Style tekstu zostaja na wypadek powrotu. */
.jsz-hero__pas-tytul { display: none; }

/* Ramka dostaje wlasne biale tlo: rozwiniety kalendarz wychodzi ponizej
   pola i bez tego wisial na ciemnym pasie. */
/* Bez wlasnego tla: widget ma juz swoj jasny panel (parametr
   `color_panel_body`), a nasze tlo dokladalo bialy margines dookola niego. */
.jsz-hero__pas-widget {
	background: transparent;
	border-radius: var(--promien-duzy);
	overflow: hidden;
	/* Miejsce zarezerwowane z gory. Skrypt RoomAdmina ustawia ramce wlasna
	   wysokosc w dwoch krokach (90 px, potem 248 px na telefonie) i robil tym
	   skok calego pierwszego ekranu o 154 px — CLS 0,18. Ramka rosnie teraz
	   wewnatrz gotowego pudelka. */
	min-height: 110px;
}
.jsz-hero__pas-widget iframe {
	display: block;
	width: 100%;
	border: 0;
	/* Wysokosc dokladnie taka, jaka ustawia sobie skrypt RoomAdmina
	   (pomiar: 110 px na duzym ekranie, 248 px na telefonie). Gdy nasza
	   wartosc byla nizsza, ramka rosla sekunde po starcie i spychala cala
	   tresc pod soba — na telefonie dawalo to CLS 0,19. */
	height: 110px;
}

/* ==========================================================================
   O nas
   ========================================================================== */

.jsz-onas__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(var(--space-10), 6vw, var(--space-24));
	align-items: center;
}

.jsz-onas__foto { position: relative; margin: 0; }
.jsz-onas__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--promien-duzy);
	box-shadow: var(--cien-lg);
}
/* Cienka ramka przesunieta wzgledem zdjecia — jedyny ozdobnik w tej sekcji. */
.jsz-onas__foto::before {
	content: "";
	position: absolute;
	inset: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-6);
	border: 1px solid rgba(156, 88, 32, 0.35);
	border-radius: var(--promien-duzy);
	pointer-events: none;
}
.jsz-onas__foto img { position: relative; z-index: 1; }

.jsz-onas__tekst .jsz-naglowek { margin-bottom: var(--space-8); }

.jsz-onas__fakty {
	display: grid;
	gap: 0;
	margin-top: var(--space-10);
	border-top: 1px solid var(--linia-jasna);
}
.jsz-onas__fakty li {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--linia-jasna);
	font-size: var(--fs-maly);
	color: var(--tekst-cichy);
}

/* ==========================================================================
   Obiekty
   ========================================================================== */

.jsz-obiekty { overflow: hidden; }

.jsz-obiekty__lista { display: grid; gap: clamp(var(--space-10), 6vw, var(--space-16)); }

/* Karta obiektu na obszarach: zdjecie zajmuje calą kolumnę, obok niego
   naglowek i opis. Na telefonie kolejnosc to naglowek, zdjecia, opis —
   dzieki temu zdjecia stoja pod nazwa swojego obiektu, a nie pod zdjeciami
   poprzedniego (zgloszenie klientki 7.08). */
.jsz-obiekt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"foto naglowek"
		"foto tresc";
	grid-template-rows: auto minmax(0, 1fr);
	column-gap: clamp(var(--space-8), 4vw, var(--space-12));
	row-gap: var(--space-5);
	align-items: stretch;
	scroll-margin-top: calc(var(--header-h) + 32px);
}
.jsz-obiekt:nth-child(even) {
	grid-template-areas:
		"naglowek foto"
		"tresc foto";
}
.jsz-obiekt__kolumna-foto { grid-area: foto; }
.jsz-obiekt__naglowek { grid-area: naglowek; align-self: end; }
.jsz-obiekt__tresc { grid-area: tresc; }
.jsz-obiekt__naglowek { display: flex; flex-direction: column; gap: var(--space-3); }
/* Kolumna zdjecia: glowne zdjecie i pasek miniatur wypelniaja te sama
   wysokosc co kolumna z tekstem — bez tego karty wygladaly na przekrzywione. */
.jsz-obiekt__kolumna-foto,
.jsz-obiekt__tresc { display: flex; flex-direction: column; gap: var(--space-3); }
.jsz-obiekt__kolumna-foto { min-width: 0; }
.jsz-obiekt__foto { flex: 1 1 auto; min-height: 0; margin: 0; }
/* Szerokosc musi byc podana wprost. Przy samym `height: 100%` przegladarka
   nie zna proporcji, dopoki plik sie nie wczyta, i figura ma przez chwile
   zero szerokosci — przycisk „Powieksz", ustawiony wzgledem niej, ladowal
   wtedy 114 px poza ekranem (audyt „tresc ucieta" na 1024 px). */
.jsz-obiekt__foto img { width: 100%; height: 100%; }
.jsz-obiekt__tresc { justify-content: flex-start; }
/* Kolejnosc w kolumnie zdjecia jest stala: zdjecie glowne, pod nim miniatury.
   Zamiana stron dotyczy calej kolumny, nigdy elementow w srodku. */
.jsz-obiekt__foto { order: 0; }
.jsz-obiekt__miniatury { order: 1; }

.jsz-obiekt__foto { position: relative; margin: 0; }
.jsz-obiekt__foto img {
	width: 100%;
	height: 100%;
	min-height: 21rem;
	object-fit: cover;
	border-radius: var(--promien-duzy);
}

.jsz-obiekt__lupa {
	position: absolute;
	left: 0;
	bottom: var(--space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-5);
	background: var(--las-glebia);
	color: var(--biel);
	border: 0;
	border-radius: 0 var(--promien) var(--promien) 0;
	font-size: var(--fs-drobny);
	letter-spacing: 0.08em;
	text-transform: lowercase;
	transition: background var(--dur-szybko) var(--snappy), padding var(--dur) var(--spring);
}
.jsz-obiekt__lupa span { font-family: var(--font-display); font-size: 1.05rem; }
.jsz-obiekt__lupa:hover { background: var(--bursztyn); padding-right: var(--space-8); }

.jsz-obiekt__numer {
	display: block;
	margin-bottom: var(--space-5);
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	line-height: 1;
	color: rgba(253, 252, 249, 0.18);
}

.jsz-obiekt__nazwa { font-size: var(--fs-h3); }

.jsz-obiekt__adres {
	margin: var(--space-3) 0 var(--space-6);
	font-size: var(--fs-maly);
	color: var(--jasny-2);
}

.jsz-obiekt__dane {
	margin: 0 0 var(--space-6);
	padding-block: var(--space-4);
	border-top: 1px solid var(--linia-ciemna);
	border-bottom: 1px solid var(--linia-ciemna);
	font-size: var(--fs-maly);
	letter-spacing: 0.02em;
	color: var(--jasny-0);
}

.jsz-obiekt__opis { color: var(--jasny-1); }

.jsz-obiekt__wyroznik {
	margin-top: var(--space-5);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.45;
	color: var(--bursztyn-jasny);
}

.jsz-obiekt__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }
.jsz-obiekt .jsz-btn--cichy { color: var(--biel); }

/* ==========================================================================
   Wyposazenie
   ========================================================================== */

.jsz-udogodnienia__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--linia-jasna);
	border: 1px solid var(--linia-jasna);
}

.jsz-udogodnienie {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: clamp(var(--space-6), 3vw, var(--space-10));
	background: var(--len);
	color: var(--tekst);
	transition: background var(--dur) var(--spring), color var(--dur) var(--spring);
}
.jsz-udogodnienie:hover { background: var(--len-glebszy); color: var(--bursztyn); }
.jsz-udogodnienie .jsz-ikona { color: var(--bursztyn); transition: transform var(--dur) var(--spring); }
.jsz-udogodnienie:hover .jsz-ikona { transform: translateY(-3px); }

.jsz-udogodnienie__nazwa { font-size: var(--fs-maly); line-height: 1.45; color: var(--tekst); }
.jsz-udogodnienie:hover .jsz-udogodnienie__nazwa { color: var(--tekst); }

.jsz-udogodnienia__info {
	margin-top: var(--space-8);
	font-size: var(--fs-maly);
	color: var(--tekst-cichy);
}

/* ==========================================================================
   Galeria
   ========================================================================== */

.jsz-galeria__naglowek { margin-bottom: var(--space-8); }

/* Pasek filtrow i podpis w jednej linii: podpis dosuniety do prawej
   krawedzi siatki zdjec. */
.jsz-galeria__filtry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}
.jsz-galeria__podpis {
	margin: 0 0 0 auto;
	font-size: var(--fs-maly);
	color: var(--jasny-2);
	text-align: right;
}

.jsz-filtr {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-2) 0;
	background: transparent;
	border: 0;
	color: var(--jasny-2);
	font-size: var(--fs-maly);
	letter-spacing: 0.02em;
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-filtr::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--bursztyn-jasny);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur) var(--spring);
}
.jsz-filtr:hover { color: var(--biel); }
.jsz-filtr--aktywny { color: var(--biel); }
.jsz-filtr:hover::after,
.jsz-filtr--aktywny::after { transform: scaleX(1); transform-origin: left; }

.jsz-galeria__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 12.5rem;
	grid-auto-flow: dense;
	gap: var(--space-3);
}

.jsz-galeria__kafel {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--las-glebia);
	border-radius: var(--promien);
	overflow: hidden;
	outline: 0 solid var(--bursztyn-jasny);
	outline-offset: -3px;
	transition: outline-width var(--dur-szybko) var(--snappy);
}
.jsz-galeria__kafel--duzy { grid-column: span 2; grid-row: span 2; }

.jsz-galeria__kafel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--spring), opacity var(--dur) var(--snappy);
}
.jsz-galeria__kafel:hover { outline-width: 2px; }
.jsz-galeria__kafel:hover img { transform: scale(1.045); opacity: 0.92; }
.jsz-galeria__kafel[hidden] { display: none; }

/* Znak powiekszenia pojawia sie po najechaniu. */
.jsz-galeria__zoom {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	width: 36px;
	height: 36px;
	border: 1px solid rgba(253, 252, 249, 0.7);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring);
}
.jsz-galeria__zoom::before,
.jsz-galeria__zoom::after {
	content: "";
	position: absolute;
	background: var(--biel);
}
.jsz-galeria__zoom::before { inset: 50% 10px auto 10px; height: 1px; }
.jsz-galeria__zoom::after { inset: 10px auto 10px 50%; width: 1px; }
.jsz-galeria__kafel:hover .jsz-galeria__zoom { opacity: 1; transform: scale(1); }

.jsz-galeria__wiecej { display: flex; justify-content: center; margin-top: var(--space-10); }
.jsz-galeria__wiecej .jsz-btn--cichy { color: var(--biel); }
.jsz-galeria__wiecej [hidden] { display: none; }

/* Lightbox */
.jsz-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-6);
	/* Pelne krycie. Przy 0,96 strona pod spodem przebijala na tyle, ze
	   podglad wygladal jak polprzezroczysta nakladka, a nie jak podglad. */
	background: var(--czern-podgladu);
}
.jsz-lightbox[hidden] { display: none; }

.jsz-lightbox__figura { margin: 0; display: grid; place-items: center; gap: var(--space-4); min-width: 0; }
.jsz-lightbox__figura img {
	max-height: 74svh;
	max-width: 100%;
	width: auto;
	border-radius: var(--promien);
	transition: opacity 160ms var(--snappy);
}
/* Podczas pobierania nowego kadru przygaszamy poprzedni zamiast zostawiac
   puste miejsce — inaczej przy strzalce ekran mrugal czernia. */
.jsz-lightbox.jest-ladowany .jsz-lightbox__figura img { opacity: 0.45; }

/* Pasek miniatur pod zdjeciem: widac, ile jest zdjec i gdzie sie jest. */
.jsz-lightbox__pasek {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	padding-bottom: var(--space-2);
	scroll-behavior: smooth;
}
.jsz-lightbox .jsz-lightbox__mini {
	flex: none;
	width: 92px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: calc(var(--promien) - 4px);
	overflow: hidden;
	/* Ciemne tlo pod miniatura: zanim plik dojdzie, kafel nie swieci
	   jasna dziura w czarnym podgladzie. */
	background: rgba(255, 255, 255, 0.06);
	opacity: 0.62;
	outline: 0 solid var(--bursztyn-jasny);
	outline-offset: -2px;
	transition: opacity var(--dur-szybko) var(--snappy), outline-width var(--dur-szybko) var(--snappy), transform var(--dur) var(--spring);
}
.jsz-lightbox .jsz-lightbox__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsz-lightbox .jsz-lightbox__mini:hover { opacity: 0.85; transform: none; background: transparent; }
.jsz-lightbox .jsz-lightbox__mini.jest-wybrana { opacity: 1; outline-width: 2px; }
.jsz-lightbox .jsz-lightbox__mini:focus-visible { opacity: 1; outline: 3px solid var(--bursztyn-jasny); outline-offset: 2px; }
.jsz-lightbox__podpis { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-drobny); letter-spacing: 0.06em; }

.jsz-lightbox button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: var(--biel);
	width: 54px;
	height: 54px;
	font-size: 1.6rem;
	line-height: 1;
	transition: background var(--dur-szybko) var(--snappy), transform var(--dur) var(--spring);
}
.jsz-lightbox button:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.05); }
.jsz-lightbox__zamknij { position: absolute; top: var(--space-6); right: var(--space-6); }

/* ==========================================================================
   Okolica
   ========================================================================== */

.jsz-okolica__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(var(--space-10), 6vw, var(--space-20));
	align-items: start;
}
.jsz-okolica__naglowek { position: sticky; top: calc(var(--header-h) + var(--space-10)); }

.jsz-okolica__lista { border-top: 1px solid var(--linia-jasna); }

.jsz-atrakcja {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--linia-jasna);
	transition: padding-left var(--dur) var(--spring);
}
.jsz-atrakcja:hover { padding-left: var(--space-3); }
.jsz-atrakcja .jsz-ikona { color: var(--bursztyn); }

.jsz-atrakcja__nazwa { font-size: 1.3rem; margin-bottom: var(--space-2); }
.jsz-atrakcja__opis { margin: 0; font-size: var(--fs-maly); color: var(--tekst-cichy); }

/* ==========================================================================
   Rezerwacja
   ========================================================================== */

.jsz-rezerwacja__naglowek { margin-bottom: var(--space-10); }

/* Karta z wyszukiwarka: ramka RoomAdmin dostaje wlasne tlo i podpis,
   zeby nie wisiala jako obce okienko na ciemnej zieleni. */
.jsz-wyszukiwarka {
	background: var(--biel);
	border-radius: var(--promien-duzy);
	box-shadow: var(--cien-lg);
	color: var(--tekst);
}
/* Naglowek karty: etykieta z lewej, informacja o platnosci z prawej.
   Wczesniej informacja byla osobnym kremowym pasem tej samej wysokosci
   co pola — zapis prawny wazyl tyle, co sama rezerwacja. */
.jsz-wyszukiwarka__gora {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	padding: var(--space-5) var(--space-6) 0;
}
.jsz-wyszukiwarka__info {
	margin: 0;
	font-size: var(--fs-drobny);
	color: var(--tekst-cichy);
}
.jsz-wyszukiwarka__info a { color: var(--bursztyn); text-underline-offset: 0.2em; }
.jsz-wyszukiwarka__info a:hover { color: var(--bursztyn-hover); }
.jsz-wyszukiwarka__tytul {
	margin: 0;
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tekst-cichy);
}
.jsz-wyszukiwarka__ramka {
	padding: var(--space-4) var(--space-6) var(--space-5);
	border-radius: var(--promien-duzy);
	overflow: hidden;
}
/* Gdy Tab wejdzie do srodka widgetu, sama ramka nie jest juz :focus,
   tylko :focus-within — bez drugiego selektora ring gasnie po 180 ms. */
.jsz-wyszukiwarka iframe:focus,
.jsz-wyszukiwarka iframe:focus-within,
.jsz-wyszukiwarka__ramka:focus-within,
.jsz-hero__pas-widget:focus-within,
.jsz-hero__pas-widget iframe:focus,
.jsz-hero__pas-widget iframe:focus-within {
	outline: 2px solid var(--bursztyn);
	outline-offset: 2px;
}
.jsz-wyszukiwarka iframe {
	display: block;
	width: 100%;
	border: 0;
	/* To samo co w pierwszym ekranie: stala wysokosc zwinietego widgetu,
	   bez przejscia na wysokosci. */
	height: 82px;
}
.jsz-rezerwacja__kroki {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-6), 3vw, var(--space-10));
	margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
.jsz-rezerwacja__kroki li { padding-top: var(--space-5); border-top: 1px solid var(--linia-ciemna); }
.jsz-rezerwacja__numer {
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--bursztyn-jasny);
}
.jsz-rezerwacja__kroki h3 { font-family: var(--font-tekst); font-size: var(--fs-maly); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.jsz-rezerwacja__kroki p { margin: 0; font-size: var(--fs-maly); color: var(--jasny-1); }

.jsz-rezerwacja__telefon { margin-top: var(--space-8); font-size: var(--fs-maly); color: var(--jasny-1); }
.jsz-rezerwacja__telefon a { color: var(--bursztyn-jasny); text-decoration: none; }
.jsz-rezerwacja__telefon a:hover { text-decoration: underline; }
.jsz-kropka { color: var(--jasny-2); margin-inline: var(--space-2); }

/* ==========================================================================
   Pytania
   ========================================================================== */

.jsz-faq__lista--dwie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4) clamp(var(--space-6), 3vw, var(--space-10));
}

.jsz-faq__item {
	background: var(--biel);
	border: 1px solid rgba(138, 154, 128, 0.28);
	border-radius: var(--promien-duzy);
	transition: border-color var(--dur) var(--spring), box-shadow var(--dur) var(--spring);
}
.jsz-faq__item:hover { border-color: rgba(156, 88, 32, 0.4); box-shadow: var(--cien-sm); }
.jsz-faq__item[open] { border-color: rgba(156, 88, 32, 0.5); box-shadow: var(--cien-md); }

.jsz-faq__pytanie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
	min-height: 64px;
	font-family: var(--font-display);
	font-size: 1.05rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-faq__pytanie::-webkit-details-marker { display: none; }
.jsz-faq__pytanie:hover { color: var(--bursztyn); }

/* Znak plus w kolku — jedyny ozdobnik, zmienia sie w minus po otwarciu. */
.jsz-faq__znak {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(156, 88, 32, 0.35);
	border-radius: 50%;
	transition: background var(--dur) var(--spring), border-color var(--dur) var(--spring);
}
.jsz-faq__znak::before,
.jsz-faq__znak::after {
	content: "";
	position: absolute;
	inset: 50% 8px auto 8px;
	height: 1px;
	background: var(--bursztyn);
	transition: transform var(--dur) var(--spring), background var(--dur) var(--spring);
}
.jsz-faq__znak::after { transform: rotate(90deg); }
.jsz-faq__item[open] .jsz-faq__znak { background: var(--bursztyn); border-color: var(--bursztyn); }
.jsz-faq__item[open] .jsz-faq__znak::before,
.jsz-faq__item[open] .jsz-faq__znak::after { background: var(--biel); }
.jsz-faq__item[open] .jsz-faq__znak::after { transform: rotate(0deg); }

.jsz-faq__odpowiedz {
	padding: 0 var(--space-6) var(--space-6);
	font-size: var(--fs-maly);
	line-height: 1.65;
	color: var(--tekst-cichy);
}
.jsz-faq__item:not([open]) .jsz-faq__odpowiedz { display: none; }

/* ==========================================================================
   Kontakt
   ========================================================================== */

.jsz-kontakt__naglowek { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }

.jsz-kontakt__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(var(--space-10), 6vw, var(--space-20));
	align-items: start;
}

/* Dane jako spis: etykieta drobnym pismem, wartosc pelnym. */
.jsz-dane { margin: 0; border-top: 1px solid var(--linia-ciemna); }

.jsz-dane__wiersz {
	display: grid;
	grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: baseline;
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--linia-ciemna);
}
.jsz-dane dt {
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bursztyn-jasny);
}
.jsz-dane dd { margin: 0; font-size: var(--fs-maly); line-height: 1.6; color: var(--jasny-0); }
.jsz-dane a { text-decoration: none; transition: color var(--dur-szybko) var(--snappy); }
.jsz-dane a:hover { color: var(--bursztyn-jasny); }
.jsz-dane__mocne { font-family: var(--font-display); font-size: 1.65rem; letter-spacing: 0.01em; }
.jsz-dane__drobne { font-size: var(--fs-drobny); color: var(--jasny-2); }

.jsz-kontakt .jsz-link-strzalka { color: var(--bursztyn-jasny); }

/* Mapa pelna szerokoscia pod sekcja, jako domkniecie strony. */
.jsz-kontakt__mapa {
	margin-top: var(--space-8);
	border-radius: var(--promien-duzy);
	overflow: hidden;
	background: var(--las-jasny);
}
.jsz-kontakt__mapa iframe {
	display: block;
	width: 100%;
	height: clamp(240px, 22vw, 320px);
	border: 0;
	filter: grayscale(0.3) contrast(1.04);
}

.jsz-form {
	padding: clamp(var(--space-8), 4vw, var(--space-12));
	background: var(--biel);
	border-radius: var(--promien-duzy);
	box-shadow: var(--cien-lg);
	color: var(--tekst);
}

.jsz-form__tytul {
	margin: 0 0 var(--space-8);
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--tekst);
}

.jsz-form__pole { margin-bottom: var(--space-6); }
.jsz-form__dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-5); }

.jsz-form label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-drobny);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tekst-cichy);
}
.jsz-form label span { color: var(--bursztyn); }

.jsz-form input[type="text"],
.jsz-form input[type="email"],
.jsz-form input[type="tel"],
.jsz-form textarea {
	width: 100%;
	min-height: var(--pole-h);
	/* Bez wciecia poziomego: tekst pola musi startowac dokladnie pod
	   etykieta, inaczej lewa krawedz formularza faluje. */
	padding: var(--space-3) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(22, 32, 26, 0.2);
	border-radius: 0;
	font: inherit;
	color: inherit;
	transition: border-color var(--dur-szybko) var(--snappy);
}
.jsz-form textarea { min-height: 120px; resize: vertical; }
/* Focus: sama zmiana koloru cienkiej kreski byla ledwo widoczna. Dokladamy
   delikatne tlo i grubsza linie, zeby bylo jasne, w ktorym polu sie stoi. */
.jsz-form input:focus,
.jsz-form textarea:focus {
	border-color: var(--bursztyn);
	border-bottom-width: 2px;
	background: rgba(156, 88, 32, 0.05);
	outline: none;
}
/* Klawiatura potrzebuje wyraznego pierscienia, nie samej grubszej kreski.
   Przy `outline: none` audyt macierzy pokazywal szesc pol bez widocznego
   fokusu — i mial racje: zmiana szerokosci obramowania o jeden piksel to
   za slaby sygnal, gdy ktos przechodzi formularz tabulatorem. */
.jsz-form input:focus-visible,
.jsz-form textarea:focus-visible {
	outline: 3px solid var(--bursztyn);
	outline-offset: 2px;
}

/* Pole z bledem i pole poprawne — klasy nadaje skrypt po probie wyslania. */
.jsz-form__pole--blad input,
.jsz-form__pole--blad textarea { border-color: var(--blad); border-bottom-width: 2px; }
/* Komunikat zgody stoi przy przycisku, a nie zaraz za polem (miedzy nimi
   jest ukryta pulapka na roboty), wiec pokazuje go klasa na formularzu. */
.jsz-form__pole--blad .jsz-form__komunikat,
.jsz-form.ma-blad-zgody .jsz-form__komunikat--zgoda { display: block; }
.jsz-form__pole--blad input[type="checkbox"] { outline: 2px solid var(--blad); outline-offset: 3px; }
.jsz-form__komunikat--zgoda { margin-top: calc(var(--space-6) * -1); margin-bottom: var(--space-5); }
.jsz-form__komunikat {
	display: none;
	margin-top: var(--space-2);
	font-size: var(--fs-drobny);
	color: var(--blad);
}
.jsz-form input::placeholder,
.jsz-form textarea::placeholder { color: var(--tekst-cichy); opacity: 0.7; }

.jsz-form__zgoda { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-8); }
.jsz-form__zgoda input { flex: none; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--bursztyn); }
.jsz-form__zgoda label {
	font-size: var(--fs-drobny);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tekst-cichy);
	margin: 0;
}

.jsz-form__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jsz-form__wyslij { width: 100%; }

.jsz-form__status { margin: var(--space-5) 0 0; font-size: var(--fs-maly); min-height: 1.5em; }
.jsz-form__status--blad { color: var(--blad); }
.jsz-form__status--ok { color: var(--sukces); }

/* ==========================================================================
   Strona statyczna i 404
   ========================================================================== */

.jsz-strona { padding-top: calc(var(--header-h) + var(--sekcja)); }
.jsz-strona__naglowek { margin-bottom: var(--space-10); }
.jsz-strona .jsz-proza h2 { font-size: var(--fs-h3); margin: var(--space-12) 0 var(--space-4); }
.jsz-strona .jsz-proza ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--space-5); }

.jsz-404 { padding-top: calc(var(--header-h) + var(--sekcja-duza)); }

/* ==========================================================================
   Stopka
   ========================================================================== */

.jsz-stopka { background: var(--las-glebia); color: var(--jasny-1); font-size: var(--fs-maly); }

.jsz-stopka__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6) var(--space-10);
	padding-block: var(--space-10);
}

.jsz-stopka__marka { display: flex; align-items: center; gap: var(--space-4); }
.jsz-stopka__znak { width: auto; height: 46px; object-fit: contain; }
.jsz-stopka__nazwa { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--biel); }
.jsz-stopka__drobne { margin: 0; font-size: var(--fs-drobny); color: var(--jasny-2); }

.jsz-stopka__kolumna { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jsz-stopka__kolumna p { margin: 0; }
.jsz-stopka__kropka { color: var(--jasny-2); }

.jsz-stopka a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-stopka a:hover { color: var(--bursztyn-jasny); }

.jsz-stopka__social { display: flex; align-items: center; gap: var(--space-4); }
.jsz-stopka__social a { justify-content: center; min-width: 44px; min-height: 44px; }
/* Wyjatek dla ostatniego odnosnika zdejmowal minimalna szerokosc, bo
   ostatni byl link tekstowy do Bookinga. Po jego usunieciu ostatnia stala
   sie ikona Instagrama i pole dotyku spadlo do 20 px. Tekstowemu linkowi
   44 px nie przeszkadza — jest szerszy z natury. */

.jsz-stopka__dol { border-top: 1px solid rgba(253, 252, 249, 0.1); }
.jsz-stopka__dol .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	padding-block: var(--space-4);
	font-size: var(--fs-drobny);
	color: var(--jasny-2);
}
.jsz-stopka__dol p { margin: 0; }

/* ==========================================================================
   Telefon i ciasteczka
   ========================================================================== */

.jsz-tel-plywajacy {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 95;
	display: none;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--bursztyn);
	color: var(--biel);
	border-radius: 50%;
	box-shadow: 0 10px 30px -12px rgba(7, 21, 16, 0.7);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring);
}
/* Niewidoczna sluchawka nadal lapala tapniecia: przezroczystosc 0 nie
   wylacza zdarzen. Pomiar elementFromPoint w rogu wyszukiwarki trafial
   w telefon, ktorego na ekranie nie bylo. */
.jsz-tel-plywajacy { pointer-events: none; }
.jsz-tel-plywajacy.jest-widoczny { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Przy otwartej wyszukiwarce sluchawka lezy dokladnie na prawym dolnym
   rogu widgetu i przechwytuje tapniecia (pomiar elementFromPoint: punkt
   342/778 trafial w sluchawke, nie w ramke). Na czas rezerwacji znika. */
body.ma-wyszukiwarke .jsz-tel-plywajacy {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}
.jsz-tel-plywajacy svg { position: relative; z-index: 2; }

.jsz-tel-plywajacy__puls {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--bursztyn);
	pointer-events: none;
	animation: jsz-puls 3s var(--spring) infinite;
}
@keyframes jsz-puls {
	0% { transform: scale(1); opacity: 0.5; }
	70% { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

.jsz-cookies {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 96;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: min(26rem, calc(100vw - 2 * var(--space-5)));
	padding: var(--space-3) var(--space-4);
	background: rgba(7, 21, 16, 0.97);
	border: 1px solid var(--linia-ciemna);
	border-radius: var(--promien-duzy);
	box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.8);
	color: var(--jasny-1);
	font-size: var(--fs-drobny);
	line-height: 1.45;
	transform: translateY(140%);
	transition: transform 420ms var(--spring);
}
.jsz-cookies.jest-widoczny { transform: translateY(0); }
.jsz-cookies[hidden] { display: none; }
.jsz-cookies__tekst { margin: 0; }
.jsz-cookies__tekst a { color: var(--bursztyn-jasny); }
.jsz-cookies__ok {
	flex: none;
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--bursztyn);
	border: 0;
	border-radius: var(--promien);
	color: var(--biel);
	font-size: var(--fs-drobny);
	letter-spacing: 0.03em;
	transition: background var(--dur-szybko) var(--snappy);
}
.jsz-cookies__ok:hover { background: var(--bursztyn-hover); }

/* ==========================================================================
   Ruch
   ========================================================================== */

.jsz-anim {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 700ms var(--spring), transform 700ms var(--spring);
}
.jsz-anim.jest-widoczna { opacity: 1; transform: none; }

/* Pierwszy ekran: sekwencja w czystym CSS, bez czekania na JavaScript.
   Wczesniej naglowek mial opacity 0 do czasu odpalenia obserwatora i LCP
   siegalo czterech sekund, mimo ze zdjecie bylo juz na miejscu. */
/* Wejscie pierwszego ekranu. Krotkie z premedytacja: naglowek jest
   elementem LCP, a kazda milisekunda przezroczystosci to milisekunda
   doliczona do wyniku (pomiar: przy 720 ms z opoznieniem LCP wychodzil
   1,0-3,8 s zamiast czasu samego renderu). */
.jsz-wejscie {
	opacity: 0;
	transform: translateY(10px);
	animation: jsz-wejscie 380ms var(--spring) forwards;
}
.jsz-hero__nadtytul.jsz-wejscie { animation-delay: 0ms; }
.jsz-hero__naglowek.jsz-wejscie { animation-delay: 30ms; }
.jsz-hero__lead.jsz-wejscie { animation-delay: 110ms; }
.jsz-hero__akcje.jsz-wejscie { animation-delay: 180ms; }
.jsz-hero__karta.jsz-wejscie { animation-delay: 240ms; }

@keyframes jsz-wejscie {
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1080px) {
	:root { --header-h: 72px; }

	.jsz-header__cta,
	.jsz-header__tel span { display: none; }

	.jsz-header__inner { grid-template-columns: auto 1fr; }
	/* Przyciski dosuniete do prawej krawedzi. Na telefonie siatka ma dwie
	   kolumny i pojemnik z przyciskami rozciaga sie na cala druga, a jego
	   zawartosc stala przy lewej krawedzi: hamburger konczyl sie 63 px przed
	   krawedzia strony i wygladal na zawieszony w polowie. */
	.jsz-header__akcje { justify-content: flex-end; }
	.jsz-burger { display: block; }

	.jsz-nav {
		position: fixed;
		inset: 0;
		/* Szerokosc podana wprost. Przy samym `inset: 0` menu bralo szerokosc
		   srodkowej kolumny siatki naglowka (216 px na ekranie 375 px) i przez
		   boki przebijalo zdjecie z pierwszego ekranu. `justify-self: center`
		   z ukladu na duzym ekranie dziedziczylo sie tutaj i ustawialo je
		   posrodku tej kolumny zamiast na calym ekranie. */
		justify-self: stretch;
		width: 100%;
		max-width: none;
		z-index: 99;
		display: grid;
		/* Trzy pasy: miejsce na naglowek, odnosniki, telefon przy dolnej
		   krawedzi. Wczesniej wszystko bylo wysrodkowane w jednej kolumnie
		   i nad pierwszym odnosnikiem zostawala dziura na 190 px. */
		grid-template-rows: var(--header-h) 1fr auto;
		gap: 0;
		padding: 0 var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom));
		background: var(--las);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-12px);
		transition: opacity 240ms var(--spring), transform 320ms var(--spring), visibility 0s linear 320ms;
	}
	.jsz-nav.jest-otwarte {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity 200ms var(--spring), transform 280ms var(--spring), visibility 0s;
	}
	/* Tlo menu zajmuje caly ekran takze wtedy, gdy pasek adresu iOS chowa
	   sie w trakcie przewijania. `100vh` zostawialoby pasek zdjecia u dolu. */
	@supports (height: 100dvh) {
		.jsz-nav { height: 100dvh; }
	}

	/* Logo i krzyzyk zostaja nad rozwinietym menu — inaczej nie ma czym
	   go zamknac poza klawiszem Escape, ktorego na telefonie nie ma. */
	.jsz-header__logo,
	.jsz-header__akcje { position: relative; z-index: 101; }

	/* Odnosniki: jeden rytm od gory do dolu, bez dziury pod naglowkiem.
	   Kreska pod kazdym daje wyrazny obszar dotkniecia i pokazuje, ze lista
	   sie konczy. */
	.jsz-nav__lista {
		/* Wiersz podany wprost: pierwszy pas jest pusty i robi miejsce na
		   naglowek, ktory zostaje nad menu. Bez tego lista weszlaby w niego. */
		grid-row: 2;
		/* Wysrodkowana w wolnym pasie. Przy wyrownaniu do gory pod ostatnim
		   odnosnikiem zostawalo 300 px pustki i menu wygladalo na urwane. */
		align-self: center;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.jsz-nav__lista li + li { border-top: 1px solid rgba(245, 240, 230, 0.12); }
	.jsz-nav__link {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: var(--space-3) 0;
		font-size: 1.5rem;
		font-family: var(--font-display);
		line-height: 1.2;
	}
	.jsz-nav__link::after { display: none; }

	.jsz-nav__stopka { grid-row: 3; display: grid; align-self: end; gap: var(--space-3); }
	.jsz-nav__tel {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		width: 100%;
		min-height: 56px;
		padding: 0 var(--space-6);
		background: var(--bursztyn);
		border-radius: var(--promien);
		color: var(--biel);
		font-size: var(--fs-body);
		text-decoration: none;
	}

	.jsz-tel-plywajacy { display: grid; }
	.jsz-cookies {
		right: var(--space-4);
		bottom: var(--space-4);
		left: var(--space-4);
		max-width: none;
	}
	/* Pływająca słuchawka ustępuje karcie ciasteczek, dopóki ta wisi. */
	body.ma-cookies .jsz-tel-plywajacy { bottom: calc(var(--space-4) + 92px); }

	.jsz-onas__grid,
	.jsz-obiekt,
	.jsz-okolica__grid,
	.jsz-rezerwacja__grid,
	.jsz-kontakt__grid,
	.jsz-galeria__naglowek { grid-template-columns: minmax(0, 1fr); }

	.jsz-okolica__naglowek { position: static; }
	.jsz-onas__foto img { aspect-ratio: 3 / 2; }
	.jsz-onas__foto::before { display: none; }

	/* Na malym ekranie wyszukiwarka nie miesci sie juz w pierwszym oknie.
	   Hero rosnie z trescia, pas ladnie laduje pod nim. */
	.jsz-hero { min-height: 0; padding-bottom: 0; }
	/* Dosuniecie tresci do dolu robi `margin-top: auto` na pierwszym dziecku,
	   nie `justify-content: flex-end` na pojemniku. Przy 320 px naglowek
	   lamie sie na trzy wiersze, tresc przestaje sie miescic w 80svh
	   i przy `flex-end` wychodzi GORA poza pojemnik: nadtytul ladowal na
	   y = 32 px, czyli pod przyklejonym naglowkiem, i bylo go widac tylko
	   jako cien pod jego przezroczystym tlem. Przy `margin-top: auto`
	   nadmiar rosnie w dol, a gorna krawedz zostaje tam, gdzie ma byc. */
	.jsz-hero__tresc {
		min-height: 80svh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: var(--space-4);
	}
	.jsz-hero__tresc > :first-child { margin-top: auto; }


	.jsz-galeria__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 10rem; }

	.jsz-stopka__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Telefon
   ========================================================================== */

@media (max-width: 640px) {
	:root { --w-content: min(100% - 2.25rem, 78rem); }

	.jsz-hero { min-height: 96svh; }
	.jsz-hero__akcje { gap: var(--space-4); }
	.jsz-hero__akcje .jsz-btn--akcent { flex: 1 1 100%; }
	.jsz-hero__naglowek-2 { font-size: 0.7em; }

	.jsz-obiekt__numer { font-size: 2.4rem; }
	.jsz-obiekt__lupa { left: auto; right: 0; border-radius: var(--promien) 0 0 var(--promien); }

	.jsz-galeria__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8.5rem; gap: var(--space-2); }
	.jsz-galeria__kafel--duzy { grid-column: span 2; grid-row: span 2; }
	.jsz-galeria__filtry { gap: var(--space-4); }

	.jsz-faq__odpowiedz { padding-right: 0; }

	/* Wiersze pod tresc, a caly zestaw wysrodkowany. Przy wierszu 1fr
	   zdjecie stalo u gory, a miedzy podpisem a miniaturami zostawala
	   pusta przestrzen na 200 px. */
	.jsz-lightbox { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: var(--space-4); align-content: center; gap: var(--space-5); }
	/* Na telefonie zdjecie bierze cala szerokosc; wczesniej stalo male
	   posrodku pustego ekranu (192 px wysokosci na 844 px okna). */
	.jsz-lightbox__figura { grid-row: 1; width: 100%; align-content: center; }
	.jsz-lightbox__figura img { width: 100%; height: auto; max-height: 60svh; object-fit: contain; }
	.jsz-lightbox__pasek { grid-row: 2; grid-column: 1; }
	/* Obie strzalki w tej samej komorce, tylko przy przeciwnych krawedziach.
	   Bez `grid-column` druga strzalka zakladala nowa, niejawna kolumne
	   i zjadala 54 px szerokosci zdjecia (pomiar: 288 px zamiast 358 px). */
	.jsz-lightbox__poprzedni { grid-row: 3; grid-column: 1; justify-self: start; }
	.jsz-lightbox__nastepny { grid-row: 3; grid-column: 1; justify-self: end; }
	.jsz-lightbox .jsz-lightbox__mini { width: 72px; height: 52px; }

	.jsz-stopka__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.jsz-stopka__dol .container { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.jsz-anim,
	.jsz-wejscie { opacity: 1; transform: none; animation: none; }
	.jsz-hero__tlo img { animation: none; }
}

/* ==========================================================================
   Domkniecia po pierwszym przegladzie v2
   ========================================================================== */

/* Wyposazenie: na tablecie dwie kolumny, na telefonie jedna — inaczej
   przy szesciu pozycjach zostawaly puste pola siatki. */
@media (max-width: 1080px) {
	.jsz-udogodnienia__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Ikony z Magnific maja wlasny margines wewnetrzny, wiec w kwadracie 68 px
   rysunek zajmuje okolo 50 px. Komorki dostaja przez to mniej pionowego luzu. */
.jsz-udogodnienie { padding: clamp(var(--space-5), 2.4vw, var(--space-8)); gap: var(--space-4); }

/* Kursywa DM Serif ma ciasne swiatlo miedzy wyrazami — przy krotkiej linii
   "w Bieszczadach" litery zlewaly sie w jedno slowo. */
.jsz-hero__naglowek-2 { word-spacing: 0.06em; }

/* Aktywny filtr tez musi reagowac na najechanie — bez tego jedyny element
   bez odzewu w calej galerii. */
.jsz-filtr--aktywny:hover { color: var(--bursztyn-jasny); }

/* Nadtytul hero bialy, nie bursztynowy: na jasnym letnim zdjeciu bursztyn
   schodzil do 1,8 przy progu 4,50 i zadna rozsadna zaslona tego nie ratowala.
   Kolor marki zostaje w przycisku. */
.jsz-hero__nadtytul { color: var(--jasny-0); }

@media (max-width: 1080px) {
	/* Na waskim ekranie tekst zajmuje cala szerokosc, wiec zaslona tez musi
	   byc pelna i pionowa. Radialna plama z wersji na duzy ekran zostawiala
	   10% powierzchni glifow ponizej progu kontrastu. */
	.jsz-hero__tresc::before {
		/* Zaslona zaczyna sie wyzej i szybciej ciemnieje: po powrocie do
		   zdjecia ze starej strony nadtytul schodzil na telefonie do 4,38
		   przy progu 4,50 (pomiar pod glifami, 2,1% powierzchni liter). */
		inset: -26% -10% -6% -10%;
		/* Na waskim ekranie nie ma miejsca na odslanianie zdjecia obok tekstu,
		   wiec maska z wersji na duzy ekran musi zniknac — inaczej tnie
		   w polowie napisu (pomiar: nadtytul 2,92 przy progu 4,50). */
		-webkit-mask-image: none;
		mask-image: none;
		width: auto;
		/* Mocno tam, gdzie leza litery; ponizej, przy wyszukiwarce i
		   przyciskach, tekst ma juz wlasne ciemne tlo, wiec zaslona gasnie
		   i widac zdjecie. */
		background: linear-gradient(
			180deg,
			rgba(7, 21, 16, 0) 0%,
			rgba(7, 21, 16, 0.22) 12%,
			rgba(7, 21, 16, 0.72) 26%,
			rgba(7, 21, 16, 0.9) 40%,
			rgba(7, 21, 16, 0.9) 62%,
			rgba(7, 21, 16, 0.42) 100%
		);
	}
}

/* ==========================================================================
   Domkniecia po przebudowie kontaktu
   ========================================================================== */

/* Pola dotyku w spisie danych — telefon i adres to najczesciej dotykane
   miejsca na stronie noclegowej. */
.jsz-dane a,
.jsz-kontakt .jsz-link-strzalka {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.jsz-dane__mocne { min-height: 48px; }

/* Link z Instagramem musi reagowac na najechanie sam, nie tylko strzalka. */
.jsz-link-strzalka { transition: color var(--dur-szybko) var(--snappy); }
.jsz-link-strzalka:hover { color: var(--bursztyn); }
.jsz-sekcja--las .jsz-link-strzalka:hover,
.jsz-kontakt .jsz-link-strzalka:hover { color: var(--biel); }

/* Naglowek na telefonie: nazwa firmy nie moze sie lamac.
   Przy 320 px „Jeleni Szlak" schodzilo do dwoch wierszy, „USTRZYKI DOLNE"
   do kolejnych dwoch, naglowek rosl do 150 px i nazwa wchodzila pod ikone
   telefonu. Kolumna z nazwa dostaje `min-width: 0`, zeby moc sie skurczyc
   zamiast rozpychac siatke. */
@media (max-width: 640px) {
	/* Karta obiektu: na telefonie odstepy z ukladu dwukolumnowego robily sie
	   za duze. Miedzy opisem a wyroznikiem bylo 52 px, miedzy wyroznikiem
	   a przyciskami 64 px, a cala karta miala 1182 px wysokosci. */
	.jsz-obiekt__wyroznik { margin-block: var(--space-2); }
	.jsz-obiekt__akcje { margin-top: var(--space-4); }

	.jsz-header__inner { gap: var(--space-4); }
	/* Logo to odnosnik do strony glownej, wiec musi miec pelne pole dotyku.
	   Po zmniejszeniu znaku do 40 px mial 169 x 40 px, czyli ponizej progu. */
	.jsz-header__logo { min-width: 0; min-height: 44px; }
	.jsz-header__lockup { min-width: 0; }
	.jsz-header__nazwa {
		font-size: 1.125rem;
		line-height: 1.15;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.jsz-header__miejsce {
		font-size: 0.625rem;
		letter-spacing: 0.18em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.jsz-header__znak { height: 40px; }
	.jsz-header.jest-przewinieta .jsz-header__znak { height: 34px; }
	.jsz-header__akcje { gap: var(--space-2); }
}

@media (max-width: 380px) {
	/* Przy 320 px menu wystawalo o 5 px poza ekran. */
	.jsz-nav { padding-inline: var(--space-5); }
	.jsz-nav__tel { padding-inline: var(--space-5); }
	.jsz-nav__link { font-size: 1.35rem; }
	/* Miejscowosc pod nazwa to ozdoba. Na najwezszych ekranach ustepuje,
	   zeby nazwa firmy i przyciski mialy komplet miejsca. */
	.jsz-header__miejsce { display: none; }
	.jsz-header__nazwa { font-size: 1.0625rem; }
}

/* Adres e-mail to jeden ciag bez spacji — przy 320 px wystawal o 5 px
   poza ekran i dawal przewijanie w bok. */
.jsz-dane dd,
.jsz-dane a,
.jsz-stopka a { overflow-wrap: anywhere; }

/* ==========================================================================
   Uzupelnienia v4
   ========================================================================== */

/* --- Naglowek: cienka linia postepu czytania i kurczenie sie przy scrollu -- */
.jsz-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: var(--jsz-postep, 0%);
	background: var(--bursztyn-jasny);
	transition: width 120ms linear;
}
.jsz-header.jest-przewinieta .jsz-header__inner { min-height: 64px; }
.jsz-header.jest-przewinieta .jsz-header__znak { height: 40px; }
.jsz-header__inner,
.jsz-header__znak { transition: min-height var(--dur) var(--spring), height var(--dur) var(--spring); }

/* --- Pas z wyszukiwarka w hero: tytul rowno z polami ---------------------- */

/* --- Miniatury galerii w kartach obiektow --------------------------------- */
.jsz-obiekt__miniatury {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-2);
}
.jsz-obiekt__mini {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--las-glebia);
	border-radius: var(--promien);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	outline: 0 solid var(--bursztyn-jasny);
	outline-offset: -2px;
	transition: outline-width var(--dur-szybko) var(--snappy);
}
.jsz-obiekt__mini img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--spring), opacity var(--dur) var(--snappy); }
.jsz-obiekt__mini:hover { outline-width: 2px; }
/* Wlasny outline miniatury zjadal globalny ring focusu — z klawiatury nie
   bylo widac, ktora miniatura jest wybrana. Ring rysujemy na zewnatrz kafla. */
.jsz-obiekt__mini:focus-visible {
	outline: 3px solid var(--bursztyn-jasny);
	outline-offset: 3px;
}
.jsz-obiekt__mini:hover img { transform: scale(1.08); opacity: 0.9; }

.jsz-obiekt__mini--wiecej {
	display: grid;
	place-content: center;
	gap: 2px;
	background: var(--las-jasny);
	color: var(--biel);
	font-size: var(--fs-mikro);
	letter-spacing: 0.08em;
	text-transform: lowercase;
}
.jsz-obiekt__mini--wiecej span { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0; }
.jsz-obiekt__mini--wiecej:hover { background: var(--bursztyn); }

/* --- Justowanie tam, gdzie akapit ma wiecej niz trzy wiersze --------------- */
/* Punkty lamania uzywane w calym pliku: 380 (waski telefon), 640 (telefon),
   900 (dwie kolumny na jedna), 1080 (tablet), 1200 (kolaz w pierwszym ekranie).
   Innych nie dodajemy — kazdy nowy to kolejne miejsce, gdzie uklad moze
   rozjechac sie tylko na jednej szerokosci. */
@media (min-width: 1080px) {
	.jsz-proza p {
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
	}
}

/* --- Wyposazenie: rowniejszy rytm i wiekszy oddech ------------------------- */
.jsz-udogodnienie .jsz-ikona { flex: none; }
.jsz-udogodnienie__nazwa { font-size: var(--fs-maly); line-height: 1.5; max-width: none; }
.jsz-udogodnienia__info {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-8);
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--linia-jasna);
	border-radius: 999px;
	background: var(--biel);
}

@media (max-width: 900px) {
	.jsz-rezerwacja__kroki { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.jsz-faq__lista--dwie { grid-template-columns: minmax(0, 1fr); }
	.jsz-obiekt__miniatury { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* Jedna kolumna: nazwa obiektu, pod nia jego zdjecia, potem opis. */
	.jsz-obiekt,
	.jsz-obiekt:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"naglowek"
			"foto"
			"tresc";
		grid-template-rows: auto auto auto;
	}
	.jsz-obiekt__foto img { min-height: 0; aspect-ratio: 16 / 11; }
	.jsz-wyszukiwarka iframe { height: 222px; }
	.jsz-hero__pas { padding-bottom: var(--space-5); }
}

@media (max-width: 640px) {
	.jsz-obiekt__miniatury { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jsz-proza p { text-align: left; }
	.jsz-stopka__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Naglowek: telefon z etykieta, kreska przed akcjami ------------------- */
.jsz-header__tel-tekst { display: grid; gap: 1px; text-align: left; }
.jsz-header__tel-etykieta {
	font-size: var(--fs-mikro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--jasny-2);
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-header__tel-numer { font-size: var(--fs-maly); line-height: 1.1; }
.jsz-header__tel:hover .jsz-header__tel-etykieta { color: var(--bursztyn-jasny); }

.jsz-header__akcje::before {
	content: "";
	width: 1px;
	height: 30px;
	background: rgba(253, 252, 249, 0.2);
	margin-right: var(--space-1);
}

/* --- Wyposazenie: rowniejszy rytm pozycji --------------------------------- */
.jsz-udogodnienie { padding-block: var(--space-6); }
.jsz-udogodnienie .jsz-ikona { width: 44px; height: 44px; }

@media (max-width: 1080px) {
	.jsz-header__akcje::before { display: none; }
}

/* Odnosniki przy wyszukiwarce i w linii z telefonem: kontrast i pole dotyku. */
.jsz-wyszukiwarka__info a,
.jsz-rezerwacja__telefon a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bursztyn-hover);
	transition: color var(--dur-szybko) var(--snappy);
}
.jsz-wyszukiwarka__info a:hover { color: var(--tekst); }
.jsz-rezerwacja__telefon a { color: var(--bursztyn-jasny); }
.jsz-rezerwacja__telefon a:hover { color: var(--biel); }

/* ==========================================================================
   Uzupelnienia v5
   ========================================================================== */

/* --- Mapa: pelna szerokosc z panelem adresu i trasa -------------------- */
.jsz-mapa { position: relative; margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
/* Mapa konczy sekcje kontaktu, wiec zdejmujemy jej dolne wypelnienie —
   inaczej miedzy mapa a stopka wisial pusty pas 86 px. */
.jsz-kontakt--z-mapa { padding-bottom: 0; }
.jsz-mapa__ramka { background: var(--las-jasny); }
.jsz-mapa iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 520px);
	border: 0;
	filter: grayscale(0.25) contrast(1.04);
}
.jsz-mapa__panel {
	position: absolute;
	left: 50%;
	bottom: var(--space-8);
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	width: var(--w-content);
	padding: var(--space-5) var(--space-8);
	background: rgba(7, 21, 16, 0.94);
	border-radius: var(--promien-duzy);
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.jsz-mapa__adres { margin: 0; font-size: var(--fs-maly); line-height: 1.5; color: var(--jasny-0); }

/* --- Karta obiektu: przycisk powiekszenia na zdjeciu glownym ------------ */
.jsz-obiekt__foto { position: relative; }
.jsz-obiekt__foto img { transition: opacity 220ms var(--snappy); }

.jsz-obiekt__powieksz {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	background: rgba(7, 21, 16, 0.82);
	backdrop-filter: blur(4px);
	color: var(--biel);
	border: 1px solid rgba(253, 252, 249, 0.24);
	border-radius: var(--promien);
	font-size: var(--fs-drobny);
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring), background var(--dur-szybko) var(--snappy);
}
.jsz-obiekt__foto:hover .jsz-obiekt__powieksz,
.jsz-obiekt__powieksz:focus-visible { opacity: 1; transform: translateY(0); }
.jsz-obiekt__powieksz:hover { background: var(--bursztyn); border-color: var(--bursztyn); }
.jsz-obiekt__powieksz svg { flex: none; }

/* Na dotyku nie ma najechania — przycisk musi byc widoczny od razu. */
@media (hover: none) {
	.jsz-obiekt__powieksz { opacity: 1; transform: none; }
}

/* Miniatura wybrana zostaje podswietlona. */
.jsz-obiekt__mini.jest-wybrana { outline-width: 2px; }
.jsz-obiekt__mini.jest-wybrana img { opacity: 0.75; }

/* Na telefonie miniatury zawsze pod zdjeciem glownym. */
@media (max-width: 1080px) {
	.jsz-obiekt__kolumna-foto { display: flex; flex-direction: column; }
	.jsz-obiekt__foto { order: 0; }
	.jsz-obiekt__miniatury { order: 1; }
	.jsz-mapa__panel {
		position: static;
		transform: none;
		width: var(--w-content);
		margin: var(--space-6) auto 0;
	}
}

/* ==========================================================================
   Domkniecia kolejnosci

   Te reguly musza stac na koncu pliku: przy rownej specyficznosci wygrywa
   ostatnia, a blok tabletu lezy nizej niz blok telefonu.
   ========================================================================== */

@media (max-width: 640px) {
	.jsz-udogodnienia__lista { grid-template-columns: minmax(0, 1fr); }
}

/* Rezerwacja miejsca na wyszukiwarke, band po bandzie.

   Widget zmienia uklad wraz z szerokoscia wlasnej ramki: jeden rzad pol
   przy 992 px i wiecej, dwa rzedy do 772 px, trzy ponizej. Miejsce
   rezerwujemy z gory, inaczej ramka rosnie sekunde po starcie i spycha
   cala tresc (CLS 0,18 przy pierwszej probie). Wysokosci z pomiaru. */
@media (max-width: 1039.98px) {
	.jsz-hero__pas-widget { min-height: 154px; }
	.jsz-hero__pas-widget iframe { height: 154px; }
}

@media (max-width: 819.98px) {
	.jsz-hero__pas-widget { min-height: 248px; }
	.jsz-hero__pas-widget iframe { height: 248px; }
}