/* =====================================================================
   HERO PODSTRON - ta sama konstrukcja co hero glowne, tylko nizsza.
   Zdjecie na calosc + granatowa maska nachodzaca od lewej, z tym samym
   lukiem w ksztalcie S. Rozne wzgledem hero glownego: polowa wysokosci
   ekranu, brak modulow z ikonami, brak bialej kurtyny wejsciowej.
   Zmienne --odsun / --bark / --dol sa przeskalowane proporcjonalnie do
   nizszej sekcji, zeby luk mial ten sam charakter co na stronie glownej.
   ===================================================================== */

.page-hero {
	position: relative;
	display: flex;
	min-height: clamp(460px, 78vh, 940px);
	overflow: hidden;
	color: #fff;
	background: var(--wp--preset--color--accent);   /* pod zdjeciem: nigdy nie mignie biel */
	isolation: isolate;
}

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

/* --- przyciemnienie ---
   Poziomy gradient sprawia, ze maska nie odcina sie ostro od zdjecia.
   Gradient u gory trzyma czytelnosc menu. */
.page-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) 34%),
		rgba(15, 20, 28, .24);
}

/* --- maska: identyczny luk co w hero glownym --- */
.page-hero__mask {
	/* wartosci 1:1 z .hero__mask w front.css - luk ma byc identyczny */
	--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;
	width: clamp(17rem, 39%, 44rem);
	background: var(--wp--preset--color--accent);
}
/* dolna, szersza czesc + wypukle domkniecie barku */
.page-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 (patrz komentarz przy .hero__mask w front.css) */
.page-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 --- */
.page-hero__inner {
	position: relative; z-index: 3;
	flex: 1;
	display: flex; flex-direction: column; justify-content: center;
	padding-inline: var(--gutter);
	padding-block:
		calc(var(--header-h, 76px) + clamp(1rem, 3vh, 2rem))
		clamp(1.6rem, 4vh, 2.8rem);
}

.page-hero__badge {
	display: block;
	margin: 0 0 clamp(.6rem, 1.4vh, 1rem);
	margin-left: .14em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(.74rem, 1.2vw, .92rem);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #efeae2;
}
/* naglowek w kolorze akcentu, jak drugi wiersz hero glownego */
.page-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.3rem, 4.8vw, 4.4rem);
	line-height: .98; letter-spacing: -.015em;
	text-transform: uppercase;
	color: #efeae2;
}
.page-hero__lead {
	margin: clamp(.9rem, 2vh, 1.4rem) 0 0;
	/* limit zalezny takze od okna, zeby tekst nie wyszedl poza maske */
	max-width: min(30rem, 31vw);
	font-size: clamp(.98rem, 1.25vw, 1.12rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}
.page-hero__actions { margin-top: clamp(1.4rem, 3.2vh, 2.2rem); align-self: flex-start; }

/* --- wejscie: lekkie, bez kurtyny z hero glownego --- */
@media (prefers-reduced-motion: no-preference) {
	.page-hero__badge   { opacity: 0; animation: fw-fade-up .75s var(--ease-out) .1s both; }
	.page-hero__title   { opacity: 0; animation: fw-fade-up .75s var(--ease-out) .2s both; }
	.page-hero__lead    { opacity: 0; animation: fw-fade-up .75s var(--ease-out) .32s both; }
	.page-hero__actions { opacity: 0; animation: fw-fade-up .75s var(--ease-out) .44s both; }
}

/* --- wariant produktowy ---
   Wysokosc i szerokosc maski zostaja takie same jak na pozostalych
   podstronach, zeby luk wypadal w tym samym miejscu. Dluzszy H1 miesci sie
   dzieki mniejszemu stopniowi pisma, a nie dzieki szerszej masce. */
.page-hero--produkt .page-hero__title {
	font-size: clamp(1.75rem, 2.7vw, 2.6rem);
	line-height: 1.08;
	text-transform: none;
	max-width: 14ch;
}
.page-hero--produkt .page-hero__lead { max-width: min(34rem, 38vw); }
.page-hero--produkt .page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
/* przyciski musza zmiescic sie w masce, inaczej wyjda na zdjecie.
   Tylko na szerokich ekranach - na waskich maska jest pelnej szerokosci. */
@media (min-width: 901px) {
	.page-hero--produkt .page-hero__actions { max-width: min(30rem, 32vw); }
}
/* Kontakt: naglowek zostaje wersalikami jak OFERTA i GALERIA, ale para
   przyciskow zachowuje sie tak samo jak na podstronach produktowych. */
.page-hero--kontakt .page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
@media (min-width: 901px) {
	.page-hero--kontakt .page-hero__actions { max-width: min(30rem, 32vw); }
}

/* oba przyciski w hero maja miec ten sam ksztalt - rozni je tylko kolor */
.page-hero--produkt .page-hero__actions .btn,
.page-hero--kontakt .page-hero__actions .btn {
	border-radius: 10px 10px clamp(20px, 2.4vw, 32px) 10px;
	padding: 1.1rem 1.9rem;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
}

/* Header nad ciemnym hero podstrony: ta sama ciemna pastylka co na stronie
   glownej (zamiast jasnej), zeby nie odcinal sie od tla. */
body:has(.page-hero) .site-header:not(.is-scrolled) { color: #fff; }
body:has(.page-hero) .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);
}
body:has(.page-hero) .site-header:not(.is-scrolled) .brand-logo--light { display: block; }
body:has(.page-hero) .site-header:not(.is-scrolled) .brand-logo--dark { display: none; }

/* =====================================================================
   RESPONSYWNOSC - jak w hero glownym: zdjecie pasem u gory, granatowy
   panel pod nim, luk przenosi sie na gorna krawedz panelu.
   ===================================================================== */
@media (max-width: 900px) {
	/* Wszystkie hero podstron zachowuja sie tak samo: pelny ekran, wyzszy pas
	   ze zdjeciem i gleboki luk, zeby badge mial oddech. Wysokosc liczona
	   w dvh, bo vh chowa dol pod paskiem przegladarki. */
	.page-hero { min-height: 100dvh; height: auto; }

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

	.page-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%);
	}

	.page-hero__mask {
		inset: 40vh 0 0 0;
		width: auto;
		border-top-left-radius: 100% clamp(3rem, 16vw, 6rem);
	}
	/* panel jest pelnej szerokosci, wiec bark z desktopu odpada */
	.page-hero__mask::before, .page-hero__mask::after { display: none; }

	.page-hero__inner {
		justify-content: flex-start;
		/* gorny odsun przepuszcza pas zdjecia ORAZ caly luk maski */
		padding-block:
			calc(40vh + clamp(5.4rem, 27vw, 9rem))
			calc(clamp(4.5rem, 16vw, 6.5rem) + env(safe-area-inset-bottom, 0px));
	}
	.page-hero__lead { max-width: 38rem; }
}

@media (max-width: 620px) {
	/* align-self musi nadpisac flex-start z desktopu, inaczej kontener zwezi
	   sie do tresci i przycisk nie bedzie pelnej szerokosci */
	.page-hero__actions { align-self: stretch; }
	.page-hero__actions .btn { width: 100%; }
}