/* =====================================================================
   FUTURE WOOD - uklad frontu: header + mega-menu + hero
   Ladowany tylko na froncie (nie w edytorze).
   ===================================================================== */

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

:root {
	--header-h: 76px;
	--ease-out: cubic-bezier(.19, 1, .22, 1);
	--container: 1400px;
	--gutter: clamp(1.25rem, 5vw, 4rem);
}

/* =====================================================================
   HEADER
   ===================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	color: var(--wp--preset--color--contrast);
	padding: clamp(.6rem, 1.4vw, 1rem) clamp(1rem, 3vw, 2rem) 0;
	transition: color .35s ease;
}
.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;      /* nawigacja do prawej */
	gap: 1.5rem;
	min-height: 3.4rem;
	padding-block: .7rem;
	padding-inline: clamp(1.2rem, 2vw, 1.9rem);
	max-width: 1200px;
	margin-inline: auto;
}
/* WAZNE: efekt szkla siedzi na pseudoelemencie, NIE na .site-header__inner.
   backdrop-filter na rodzicu tworzy nowy uklad odniesienia dla position: fixed,
   przez co menu mobilne pozycjonowaloby sie wzgledem pastylki zamiast ekranu
   (wystajace tlo po prawej, brak pokrycia ekranu na telefonie). */
.site-header__inner::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	border-radius: 100px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: 0 10px 30px rgba(20, 26, 34, .10);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
	pointer-events: none;
}
.site-header__inner > * { position: relative; z-index: 1; }
.site-header__brand { margin-right: auto; }  /* pcha nawigacje w prawo */

/* --- Na hero (strona glowna, u gory): ciemny glass, biale napisy --- */
body.home .site-header:not(.is-scrolled) { color: #fff; }
body.home .site-header:not(.is-scrolled) .site-header__inner::before {
	background: rgba(18, 24, 33, .28);
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}


/* =====================================================================
   NAWIGACJA (desktop)
   ===================================================================== */

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 2.4vw, 2.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	padding-block: .4rem;
	position: relative;
}
/* podkreslenie hover (tylko urzadzenia z kursorem) */
.primary-nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--ease-out);
}
@media (hover: hover) {
	.primary-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}
.primary-nav__chev { transition: transform .3s ease; margin-top: 1px; }

/* Wiersz "Oferta": osobny link (nawiguje) i osobny przycisk ze strzalka
   (rozwija podmenu). Bez tego na dotyku nie da sie wejsc na strone Oferty. */
.primary-nav__row { display: inline-flex; align-items: center; gap: .3rem; }
.primary-nav__expand {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .4rem .2rem; margin: 0;
	background: none; border: none; color: inherit; cursor: pointer;
}


/* =====================================================================
   MEGA-MENU (Oferta)
   ===================================================================== */

.primary-nav__item--mega { position: relative; }

.mega {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: 14px;               /* mostek pod hover, brak dziury */
	min-width: 340px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .3s ease, transform .35s var(--ease-out), visibility 0s linear .35s;
	z-index: 10;
}
.mega__inner {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(20, 26, 34, .16);
	padding: 1.5rem 1.4rem;
}
.mega__label {
	margin: 0 0 .9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__link {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .8rem;
	border-radius: 9px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	transition: background-color .25s ease, color .25s ease, padding-left .25s ease;
}
.mega__link::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .25s ease, transform .25s ease;
}
@media (hover: hover) {
	.mega__link:hover {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--accent);
		padding-left: 1rem;
	}
	.mega__link:hover::before { opacity: 1; transform: scale(1); }
}

/* Otwieranie: hover, focus-within (klawiatura) oraz .is-open (dotyk/JS) */
@media (hover: hover) and (min-width: 901px) {
	.primary-nav__item--mega:hover .mega,
	.primary-nav__item--mega:focus-within .mega {
		opacity: 1; visibility: visible; transform: translateY(0);
		pointer-events: auto; transition-delay: 0s;
	}
	.primary-nav__item--mega:hover .primary-nav__chev { transform: rotate(180deg); }
}
.primary-nav__item--mega.is-open .mega {
	opacity: 1; visibility: visible; transform: translateY(0);
	pointer-events: auto; transition-delay: 0s;
}
.primary-nav__item--mega.is-open .primary-nav__chev { transform: rotate(180deg); }

/* =====================================================================
   HAMBURGER (mobile) - domyslnie ukryty
   ===================================================================== */

.nav-toggle {
	display: none;
	align-items: center;
	gap: .6rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: .4rem 0;
}
.nav-toggle__label {
	font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.nav-toggle__box { position: relative; width: 26px; height: 12px; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 2px;
	background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s ease;
}
.nav-toggle__bar { top: 5px; }
.nav-toggle__bar::before { top: -5px; }
.nav-toggle__bar::after { top: 5px; }

/* =====================================================================
   HERO - zdjecie na calosc + granatowa maska nachodzaca od lewej.
   Maska to zwykly prostokat z OGROMNYM zaokragleniem prawego gornego rogu:
   dzieki temu jest wezsza u gory i rozszerza sie ku dolowi, a jej prawa
   krawedz konczy sie lukiem (ten sam jezyk zaokraglen co reszta strony).
   ===================================================================== */

/* Drugi selektor jest dla podstron: ich szablony wstawiaja gole <main> bez
   klasy, a WordPress dokleja mu odstep miedzyblokowy. Bez tego nad ciemnym
   hero podstrony prześwituje bialy pasek. */
.site-main,
.wp-site-blocks > main { margin: 0; }

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	overflow: hidden;
	color: #fff;
	background: var(--wp--preset--color--accent);   /* pod zdjeciem: nigdy nie mignie biel */
	isolation: isolate;
}

/* --- zdjecie --- */
.hero__media, .hero__img { position: absolute; inset: 0; z-index: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }

/* --- przyciemnienie ---
   Poziomy gradient sprawia, ze maska nie odcina sie ostro od zdjecia, tylko
   wychodzi z juz pociemnionego tla. Gradient u gory trzyma czytelnosc menu. */
.hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, rgba(38, 53, 71, .92) 0%, rgba(38, 53, 71, .70) 34%, rgba(38, 53, 71, .16) 64%, rgba(38, 53, 71, 0) 86%),
		linear-gradient(180deg, rgba(15, 20, 28, .46) 0%, rgba(15, 20, 28, 0) 24%),
		rgba(15, 20, 28, .24);
}

/* --- maska ---
   Prawa krawedz to lezaca litera S: pionowa przez wieksza czesc wysokosci,
   nizej odchyla sie barkiem w prawo i przy dolnej krawedzi WRACA DO PIONU.
   Sklada sie z dwoch lukow stykajacych sie stycznie (oba poziome w miejscu
   zlaczenia), wiec przejscie jest gladkie, bez kanta:
     ::after  - luk wklesly (gorna polowa S)
     ::before - luk wypukly (dolna polowa S) + szersza czesc przy dole
   --odsun = calkowite rozszerzenie, --bark = wysokosc polowy S,
   --dol = na jakiej wysokosci konczy sie zawijanie. */
.hero__mask {
	--odsun: clamp(55px, 7.5vw, 160px);
	--bark: clamp(55px, 9svh, 130px);
	--dol: clamp(110px, 20svh, 280px);

	position: absolute; z-index: 2;
	inset-block: 0; left: 0;
	/* szerokosc musi pomiescic "NA WYMIAR" na kazdej rozdzielczosci */
	width: clamp(17rem, 39%, 44rem);
	background: var(--wp--preset--color--accent);
}
/* dolna, szersza czesc + wypukle domkniecie barku */
.hero__mask::before {
	content: "";
	position: absolute; left: 0; right: calc(-1 * var(--odsun)); bottom: 0;
	height: var(--dol);
	background: var(--wp--preset--color--accent);
	border-top-right-radius: calc(var(--odsun) / 2) var(--bark);
}
/* wkleste wejscie w bark: elipsa wpisana w ten prostokat ze srodkiem w jego
   prawym GORNYM rogu, wnetrze przezroczyste. Zwykly border-radius dalby tu
   luk odwrocony (ostry zwrot u gory, prosta ukosna nizej). */
.hero__mask::after {
	content: "";
	position: absolute; left: 100%; bottom: var(--dol);
	width: calc(var(--odsun) / 2);
	height: var(--bark);
	background: radial-gradient(ellipse 100% 100% at 100% 0,
		transparent 0 98.6%, var(--wp--preset--color--accent) 99.7%);
}

/* --- kolumna z trescia --- */
.hero__inner {
	position: relative; z-index: 3;
	flex: 1;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-inline: var(--gutter);
	padding-block: clamp(7rem, 15vh, 10rem) clamp(2rem, 5vh, 3.4rem);
}

.hero__title { margin: 0 0 clamp(1rem, 2vh, 1.5rem); display: block; }
.hero__badge {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(.76rem, 1.3vw, .95rem);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #efeae2;
	margin-bottom: clamp(.7rem, 1.6vh, 1.1rem);
	margin-left: .14em;
}
.hero__headline {
	display: flex; flex-direction: column;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	/* wspolczynnik vw dobrany tak, zeby "NA WYMIAR" zawsze miescilo sie
	   w masce, na kazdej szerokosci okna */
	font-size: clamp(2.6rem, 5.8vw, 6rem);
	line-height: .96;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: #fff;
}
/* drugi wiersz w kolorze wypelnienia przycisku */
.hero__headline-alt { color: #efeae2; }

.hero__sub {
	margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
	/* akapit nie moze wyjsc poza maske, wiec limit jest tez zalezny od okna */
	max-width: min(30rem, 31vw);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

.hero__actions { margin-bottom: clamp(2.2rem, 6vh, 3.8rem); align-self: flex-start; }

/* --- przycisk hero: jasne wypelnienie, mocniejszy rog w prawym dolnym --- */
.btn--hero {
	background: #efeae2;
	border-color: #efeae2;
	color: var(--wp--preset--color--accent);
	border-radius: 10px 10px clamp(20px, 2.4vw, 32px) 10px;
	padding: 1.1rem 1.9rem;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
}
.btn--hero::before { background: var(--wp--preset--color--accent); }
@media (hover: hover) {
	.btn--hero:hover { color: #efeae2; border-color: #efeae2; }
}

/* --- cztery moduly z lekkimi separatorami --- */
.hero__usp {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 42rem;
}
/* ikona i podpis wysrodkowane w swojej kolumnie */
.hero__usp li {
	display: flex; flex-direction: column; align-items: center; gap: .75rem;
	padding-inline: clamp(.7rem, 1.5vw, 1.3rem);
	text-align: center;
}
.hero__usp li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.hero__usp-ico { color: rgba(255, 255, 255, .85); }
/* 30 px, nie 26: ikony od klienta maja wiecej detalu niz wczesniejsze
   placeholdery i przy 26 px gubily czytelnosc */
.hero__usp-ico svg { width: 30px; height: 30px; display: block; }
.hero__usp-txt {
	font-size: clamp(.8rem, .95vw, .88rem);
	line-height: 1.35;
	color: rgba(255, 255, 255, .78);
}

/* --- Wipe: biala kurtyna zjezdza z gory na dol i odslania hero --- */
.hero__wipe {
	position: absolute; inset: 0; z-index: 6;
	background: #fff;
	transform: translateY(101%);   /* domyslnie schowana (bez animacji brak bialego) */
	pointer-events: none;
}

/* --- Animacja odslaniania --- */
.reveal { display: block; overflow: hidden; }
.hero__headline .reveal { padding-bottom: .08em; }
.reveal__i { display: block; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
	.hero__wipe { animation: fw-wipe .8s cubic-bezier(.76, 0, .24, 1) both; }

	/* badge: jednolity reveal */
	.hero__badge .reveal__i { transform: translateY(115%); animation: fw-reveal-up .9s var(--ease-out) .5s both; }

	/* naglowek: kontur -> wypelnienie (stroke to fill) + reveal */
	.hero__headline .reveal__i { transform: translateY(115%); -webkit-text-stroke: 1.2px #fff; color: transparent; }
	.hero__headline .reveal__i.hero__headline-alt { -webkit-text-stroke-color: #efeae2; }
	.hero__headline .reveal:nth-child(1) .reveal__i { animation: fw-reveal-up .9s var(--ease-out) .62s both, fw-fill .55s ease 1.18s both; }
	.hero__headline .reveal:nth-child(2) .reveal__i { animation: fw-reveal-up .9s var(--ease-out) .74s both, fw-fill-alt .55s ease 1.28s both; }

	.hero__sub     { opacity: 0; animation: fw-fade-up .8s var(--ease-out) .98s both; }
	.hero__actions { opacity: 0; animation: fw-fade-up .8s var(--ease-out) 1.1s both; }
	.hero__usp     { opacity: 0; animation: fw-fade-up .8s var(--ease-out) 1.22s both; }
}

/* Desktop: zamiast wspolnego pojawienia sie, kazdy modul podskakuje osobno,
   po kolei od lewej do prawej. Animujemy zawartosc (ikona + podpis), a nie
   cale <li>, zeby pionowe separatory zostaly nieruchome.
   Opoznienie jedzie przez zmienna, bo animation-delay sam sie nie dziedziczy. */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
	.hero__usp { opacity: 1; animation: none; }
	.hero__usp li:nth-child(1) { --podskok: 1.15s; }
	.hero__usp li:nth-child(2) { --podskok: 1.27s; }
	.hero__usp li:nth-child(3) { --podskok: 1.39s; }
	.hero__usp li:nth-child(4) { --podskok: 1.51s; }
	.hero__usp li > * { animation: fw-hop .65s ease-out var(--podskok) both; }
}
@keyframes fw-hop {
	0%   { opacity: 0; transform: translateY(16px); }
	45%  { opacity: 1; transform: translateY(-9px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes fw-wipe { from { transform: translateY(0); } to { transform: translateY(101%); } }
@keyframes fw-reveal-up { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes fw-fill     { to { color: #fff; } }
@keyframes fw-fill-alt { to { color: #efeae2; } }
@keyframes fw-fade-up  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   RESPONSYWNOSC - mobile / tablet (<= 900px)
   ===================================================================== */

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }

	.primary-nav {
		position: fixed;
		inset: 0;
		height: 100dvh;
		background: var(--wp--preset--color--accent);
		color: #fff;
		display: flex;
		transform: translateX(100%);
		transition: transform .45s var(--ease-out);
		pointer-events: none;
		z-index: 120;
	}
	body.nav-open .primary-nav { transform: translateX(0); pointer-events: auto; }

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		width: 100%;
		margin: 0;
		padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(4rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		user-select: none;
	}
	.primary-nav__link {
		font-size: 1.1rem;
		letter-spacing: .06em;
		padding-block: .9rem;
		border-bottom: 1px solid rgba(255,255,255,.14);
		justify-content: space-between;
		width: 100%;
	}
	.primary-nav__link::after { display: none; }

	/* wiersz "Oferta" na calą szerokosc: tekst nawiguje, strzalka rozwija */
	.primary-nav__row {
		display: flex; align-items: center; justify-content: space-between;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,.14);
	}
	.primary-nav__row .primary-nav__link { border-bottom: none; flex: 1 1 auto; }
	.primary-nav__expand { min-width: 44px; min-height: 44px; padding: .9rem .4rem .9rem 1rem; }

	.nav-cta { margin-top: 1.4rem; width: 100%; justify-content: center; }

	/* Mega jako akordeon.
	   Rozwijamy przez grid-template-rows 0fr -> 1fr, a nie max-height.
	   max-height wymaga zgadniecia wysokosci z gory: przy zanizonej wartosci
	   lista zostaje ucieta, a przy zawyzonej animacja rusza z opoznieniem. */
	.mega {
		position: static;
		padding-top: 0;
		min-width: 0;
		opacity: 1;
		visibility: hidden;
		transform: none;
		pointer-events: auto;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .4s var(--ease-out), visibility 0s linear .4s;
	}
	.mega > * { min-height: 0; overflow: hidden; }
	.primary-nav__item--mega.is-open .mega {
		visibility: visible;
		grid-template-rows: 1fr;
		transition: grid-template-rows .45s var(--ease-out);
	}
	/* Wypelnienie MUSI siedziec glebiej niz element, ktory zwijamy: min-height
	   nie kasuje wypelnienia, wiec zamkniete podmenu zostawialo 20,8 px i
	   Oferta byla o tyle wyzsza od pozostalych pozycji menu. */
	.mega__inner { background: transparent; border: 0; box-shadow: none; padding: 0; }
	.mega__list { padding: .3rem 0 1rem; }
	.mega__label { color: rgba(255,255,255,.6); }
	.mega__link { color: #fff; font-size: 1rem; padding: .6rem .2rem; }
	.mega__link::before { background: #fff; }

	/* hamburger -> X */
	body.nav-open .nav-toggle { position: fixed; right: var(--gutter); top: 1.4rem; z-index: 130; color: #fff; }
	body.nav-open .nav-toggle__bar { transform: rotate(45deg); }
	body.nav-open .nav-toggle__bar::before { top: 0; transform: rotate(90deg); }
	body.nav-open .nav-toggle__bar::after { opacity: 0; }

	body.nav-open { overflow: hidden; }
}

/* =====================================================================
   HERO - mobile: zdjecie pasem u gory, granatowy panel pod nim.
   Ten sam jezyk zaokraglen, tylko luk biegnie teraz po gornej krawedzi
   panelu i lekko wchodzi na zdjecie.
   ===================================================================== */
@media (max-width: 900px) {
	.hero { min-height: 100svh; height: auto; }

	.hero__media { inset: 0 0 auto 0; height: 46vh; }
	.hero__img { object-position: center 50%; }

	.hero__scrim {
		inset: 0 0 auto 0; height: 46vh;
		background: linear-gradient(180deg, rgba(15, 20, 28, .58) 0%, rgba(15, 20, 28, .12) 34%, rgba(15, 20, 28, 0) 62%);
	}

	.hero__mask {
		/* panel schodzi nizej niz wczesniej: zdjecie kuchni bylo zaslonione
		   niemal w calosci, a zostawal na nie tylko waski pas pod headerem */
		inset: 36vh 0 0 0;
		width: auto;
		border-top-right-radius: 0;
		border-top-left-radius: 100% clamp(3rem, 16vw, 6rem);
	}
	/* panel jest pelnej szerokosci, wiec bark z desktopu odpada */
	.hero__mask::before, .hero__mask::after { display: none; }

	.hero__inner {
		/* tresc zostaje przy dolnej krawedzi tak samo jak na desktopie:
		   wolna przestrzen zbiera sie nad napisami, nie pod modulami */
		justify-content: flex-end;
		/* gorny padding musi przepuscic pas ze zdjeciem + luk maski,
		   dolny zostawia zapas na pasek gestow Androida */
		/* gorny odsun musi przepuscic pas zdjecia ORAZ caly luk maski,
		   inaczej badge lezy tuz na krzywiznie */
		padding-block:
			calc(36vh + clamp(4.2rem, 22vw, 7rem))
			calc(clamp(1.6rem, 5vw, 2.4rem) + env(safe-area-inset-bottom, 0px));
	}
	/* odstepy ciasniejsze niz na desktopie: caly hero razem z modulami
	   ma zmiescic sie na jednym ekranie telefonu. Kazdy odzyskany piksel
	   idzie na wyzszy pas ze zdjeciem. */
	.hero__headline { font-size: clamp(2.15rem, 5.8vw, 6rem); }
	.hero__sub { max-width: 38rem; margin-bottom: 1rem; }
	.hero__actions { margin-bottom: 1.35rem; }
	.hero__usp { max-width: 34rem; }
	.hero__usp li { gap: .55rem; }
	.hero__usp-ico svg { width: 26px; height: 26px; }
}

/* Telefon: moduly 2 x 2 (na tablecie cztery kolumny jeszcze sie miesza)
   i przycisk na cala szerokosc, zeby byl wygodny pod kciuk. */
@media (max-width: 620px) {
	/* align-self musi nadpisac flex-start z desktopu, inaczej kontener zwezi
	   sie do tresci i przycisk nie bedzie pelnej szerokosci */
	.hero__actions { align-self: stretch; }
	.hero__actions .btn { width: 100%; }

	.hero__usp { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
	/* rowny padding po obu stronach, zeby tresc zostala wysrodkowana */
	.hero__usp li { padding-inline: clamp(.6rem, 3vw, 1.1rem); }
	.hero__usp li + li { border-left: 0; }
	.hero__usp li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .2); }
	.hero__usp li:nth-child(n+3) {
		margin-top: clamp(.9rem, 4vw, 1.4rem);
		padding-top: clamp(.9rem, 4vw, 1.4rem);
		border-top: 1px solid rgba(255, 255, 255, .2);
	}
}

/* Niskie telefony: tekst zajmuje tyle samo miejsca co na wyzszych, wiec to pas
   ze zdjeciem i odstepy musza ustapic - inaczej ostatni rzad modulow zostaje
   uciety dolna krawedzia ekranu. */
@media (max-width: 900px) and (max-height: 800px) {
	.hero__mask {
		inset-block-start: 30vh;
		border-top-left-radius: 100% clamp(2.4rem, 13vw, 4.5rem);
	}
	.hero__inner { padding-block-start: calc(30vh + clamp(3.4rem, 19vw, 5.6rem)); }
	.hero__sub { margin-bottom: .85rem; }
	.hero__actions { margin-bottom: 1.1rem; }
	.hero__usp li:nth-child(n+3) { margin-top: .8rem; padding-top: .8rem; }
}

/* Bardzo niskie ekrany (stare Androidy): tekst i odstepy schodza jeszcze
   nizej, bo inaczej dolny rzad modulow wypada pod krawedz. */
@media (max-width: 900px) and (max-height: 680px) {
	.hero__mask {
		inset-block-start: 25vh;
		border-top-left-radius: 100% clamp(1.8rem, 10vw, 3.2rem);
	}
	.hero__inner { padding-block-start: calc(25vh + clamp(2.6rem, 14vw, 4.2rem)); }
	.hero__headline { font-size: 1.9rem; }
	.hero__sub { font-size: .94rem; margin-bottom: .7rem; }
	.hero__actions { margin-bottom: .9rem; }
	.hero__usp li { gap: .4rem; }
	.hero__usp-ico svg { width: 22px; height: 22px; }
	.hero__usp li:nth-child(n+3) { margin-top: .6rem; padding-top: .6rem; }
}



/* =====================================================================
   STOPKA - ciemniejszy granat, by odciac sie od granatowej sekcji Oferta
   (roszada tonalna sekcji; separacja bez twardej linii)
   ===================================================================== */
.site-footer.has-accent-background-color {
	background-color: var(--wp--preset--color--accent-strong) !important;
}

/* Bez odstepu (blockGap) miedzy main a stopka - sekcje maja stykac sie bez bialej przerwy */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0 !important; }

/* napis-logo (tymczasowy, do czasu pliku logo) - dziedziczy kolor headera */
.site-header__brand {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em;
	color: inherit; text-decoration: none;
}

/* logo (obraz) w headerze - przelaczanie wersji zaleznie od stanu */
.site-header__brand { display: inline-flex; align-items: center; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-logo--light { display: none; }   /* domyslnie (jasny header, podstrony): granat */
.brand-logo--dark { display: block; }
body.home .site-header:not(.is-scrolled) .brand-logo--light { display: block; }  /* hero: bialy */
body.home .site-header:not(.is-scrolled) .brand-logo--dark { display: none; }

/* --- Przycisk telefonu w naglowku (najkrotsza droga do kontaktu) --- */
.header-tel { flex: 0 0 auto; letter-spacing: .01em; }
.header-tel .btn__icon svg { width: 17px; height: 17px; }
.header-tel .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* CTA nawigacji korzysta z systemu; na ciemnym naglowku bierze wariant jasny */
body.home .site-header:not(.is-scrolled) .header-tel,
body.home .site-header:not(.is-scrolled) .nav-cta {
	background: #fff; border-color: #fff; color: var(--wp--preset--color--accent);
}
@media (hover: hover) {
	body.home .site-header:not(.is-scrolled) .header-tel:hover,
	body.home .site-header:not(.is-scrolled) .nav-cta:hover {
		background: var(--wp--preset--color--accent); color: #fff; border-color: #fff;
	}
}

/* Mobile: telefon zostaje w naglowku jako kolko z ikona (kciuk, jedna reka).
   Kolko stoi posrodku paska, a przycisk menu przy prawej krawedzi.
   Srodek bierzemy z pozycjonowania bezwzglednego, a nie z automatycznych
   marginesow: logo i przycisk menu maja rozne szerokosci, wiec przy zwyklym
   ukladzie ikona wypadlaby obok srodka, a nie na nim.
   Przy otwartym menu nakladka ma wyzsza warstwe i zaslania ikone. */
@media (max-width: 900px) {
	.header-tel {
		position: absolute;
		left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		width: 40px; height: 40px; padding: 0; gap: 0;
		display: grid; place-items: center; border-radius: 50%;
	}
	.header-tel .btn__icon { margin: 0; }
	.header-tel__num { display: none; }
	.header-tel .btn__icon svg { width: 19px; height: 19px; }
}

/* Ikona telefonu stoi na sztywno posrodku, wiec na najwezszych telefonach
   (320 px) logo doszlo do niej i zaczelo ja przykrywac. Nizsze logo jest
   proporcjonalnie wezsze i odstep wraca. */
@media (max-width: 400px) {
	.brand-logo { height: 28px; }
}

/* =====================================================================
   MENU MOBILNE - przebudowa: z listy linkow na powierzchnie konwersji.
   Duza typografia, numerowane pozycje, telefon jako najmocniejszy element,
   godziny i social na dole. Desktop nie widzi nic z tego.
   ===================================================================== */
.nav-foot { display: none; }

@media (max-width: 900px) {
	/* zamkniete menu wypada z kolejnosci tabulacji (bylo tylko przesuniete) */
	.primary-nav { visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s linear .45s; }
	body.nav-open .primary-nav { visibility: visible; transition-delay: 0s; }

	.primary-nav {
		flex-direction: column;
		background:
			radial-gradient(120% 80% at 100% 0%, rgba(126, 156, 196, .16), transparent 60%),
			var(--wp--preset--color--accent);
	}
	.primary-nav__list {
		gap: 0;
		padding: calc(var(--header-h) + 1.6rem) var(--gutter) 1.4rem;
		flex: 1 1 auto;
	}

	/* pozycje: wieksze, z numerem porzadkowym */
	.primary-nav__item { counter-increment: navitem; }
	.primary-nav__list { counter-reset: navitem; }
	.primary-nav__link {
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1.5rem, 6.5vw, 2rem);
		font-weight: 600;
		letter-spacing: -.01em;
		text-transform: none;
		padding-block: .72rem;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}
	.primary-nav__link::before {
		content: "0" counter(navitem);
		margin-right: .9rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: .72rem; font-weight: 700; letter-spacing: .1em;
		color: rgba(255, 255, 255, .38);
		align-self: center;
	}
	.primary-nav__row .primary-nav__link::before { margin-right: .9rem; }

	/* CTA "Szybka wycena" jako pelnowymiarowy przycisk, nie pozycja listy */
	.primary-nav__item:has(.nav-cta) { counter-increment: none; }
	.nav-cta { margin-top: 1.6rem; width: 100%; justify-content: center; font-size: 1rem; padding-block: .95rem; }
	.nav-cta::before { content: none; }

	/* --- stopka menu: telefon, godziny, social --- */
	.nav-foot {
		display: block;
		flex: 0 0 auto;
		padding: 1.4rem var(--gutter);
		padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));  /* pasek gestow Androida */
		border-top: 1px solid rgba(255, 255, 255, .14);
		background: rgba(0, 0, 0, .16);
	}
	.nav-foot__tel {
		display: flex; align-items: center; gap: .9rem;
		text-decoration: none; color: #fff;
	}
	.nav-foot__tel-ico {
		flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
		display: grid; place-items: center;
		background: #fff; color: var(--wp--preset--color--accent);
	}
	.nav-foot__tel-ico svg { width: 21px; height: 21px; }
	.nav-foot__tel-txt { display: flex; flex-direction: column; }
	.nav-foot__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
	.nav-foot__num {
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: #fff;
	}
	.nav-foot__hours { margin: 1rem 0 1.2rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }
	/* ikony socialow siedzialy tuz pod numerem, bo blok z godzinami zniknal
	   z menu i zabral ze soba jedyny odstep miedzy nimi */
	.nav-foot__social {
		display: flex; gap: .6rem; list-style: none; padding: 0;
		margin: 1.5rem 0 0;
		padding-top: 1.3rem;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	.nav-foot__social a {
		width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85);
	}
	.nav-foot__social svg { width: 18px; height: 18px; fill: currentColor; }

	/* hamburger: obszar dotyku min. 44 px */
	.nav-toggle { min-height: 44px; padding: .4rem .2rem; }
}

/* Telefon na ciemnym naglowku jest bialy, wiec jego wypelnienie musi byc
   granatowe (domyslne biale dawaloby bialy tekst na bialym tle). */
body.home .site-header:not(.is-scrolled) .header-tel::before {
	background: var(--wp--preset--color--accent);
}

/* =====================================================================
   404 - celowo pusta strona. Jedno zadanie: wrocic na strone glowna.
   Wysokosc w svh, bo na telefonie vh liczy sie razem z paskiem
   przegladarki i tresc zjechalaby pod krawedz ekranu.
   ===================================================================== */
.e404 {
	display: grid; place-items: center;
	min-height: 100svh;
	padding: calc(var(--header-h, 76px) + clamp(2rem, 6vw, 4rem)) var(--gutter) clamp(3rem, 8vw, 5rem);
	background: var(--wp--preset--color--base);
	text-align: center;
}
.e404__inner { display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); }
.e404__kod {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(4rem, 16vw, 9rem);
	line-height: .9; letter-spacing: -.03em;
	color: var(--wp--preset--color--line);
}

/* Logo w naglowku bylo celem o wysokosci 28 px. Wypelnienie w pionie
   powieksza pole dotyku, a naglowek ma wlasna minimalna wysokosc,
   wiec sam pasek nie rosnie. */
@media (max-width: 900px) {
	.site-header__brand { display: inline-flex; align-items: center; padding-block: .45rem; }
}