/*
 * Baner otwierający podstrony (`flexisnap/page-hero`, makieta 6.5:
 * `--cover`, `--short`, `--lead-in`, panel `--wide` i `--glass-dark`).
 *
 * Zdjęcie wypełnia cały baner, panel (`__body`) siedzi przy dolnej krawędzi
 * po lewej, od 64rem na połowie szerokości. Kolor tła i tekstu niosą pliki
 * `styles/baner-podstrony*.json`; tutaj układ, którego klucz `css` nie przebije
 * (arkusz bloku ustawia `__body` i medium wagą klasy) i warianty ekranów.
 * Wysokość domyślna to 532 px przy 1920 (27,7 procent szerokości okna).
 */

.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) {
	display: grid;
	align-content: end;
	justify-items: start;
	gap: 0;
	box-sizing: border-box;
	min-block-size: clamp(20rem, 27.7vw, 33.25rem);
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--preset--border-radius--karta);
}

/* Niski: 488 px przy 1920 zamiast 532. */
.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem) {
	min-block-size: clamp(18rem, 25.42vw, 30.5rem);
}

/* Niski na ciemnym szkle (baner produktu w Figmie z 2026-10-20, wszystkie
   cztery produkty Biolevox): 426 px przy 1920. */
.wp-block-flexisnap-page-hero.is-style-baner-podstrony-szklo-niski {
	min-block-size: clamp(18rem, 22.2vw, 26.625rem);
}

/* Z odstępem nad panelem: pełne wcięcie sekcji plus ramka banera, więc
   wysokość daje panel, a nie liczba (684 px w ortopedii, 608
   w stomatologii). */
.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo) {
	padding-block-start: calc(var(--wp--preset--spacing--sekcja-pion) + var(--wp--preset--spacing--4));
}

.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) .flexisnap-page-hero__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--6);
	box-sizing: border-box;
	inline-size: 100%;
	padding: clamp(var(--wp--preset--spacing--6), 3.4vw, var(--wp--preset--spacing--8));
	border-radius: var(--wp--preset--border-radius--karta);
	background-color: var(--wp--preset--color--granat);
}

.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) .flexisnap-page-hero__body > * {
	margin: 0;
}

/* Panel na ciemnym szkle: ta sama warstwa co panel slajdu hero. */
.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) .flexisnap-page-hero__body {
	border: 1px solid var(--wp--custom--kolor--szklo-jasne-ramka);
	background-color: var(--wp--custom--kolor--szklo-ciemne);
	backdrop-filter: blur(20px);
}

/* Panel na połowie banera: udział, nie stała szerokość (912 px przy 1920). */
@media (min-width: 64rem) {

	.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) .flexisnap-page-hero__body {
		inline-size: 50%;
	}

	/* Baner produktu: panel 943 z 1824 px pola banera (Figma). */
	.wp-block-flexisnap-page-hero.is-style-baner-podstrony-szklo-niski .flexisnap-page-hero__body {
		inline-size: calc(943 / 1824 * 100%);
	}
}

/* Niski na ciemnym szkle (baner produktu, makieta `--shade-diagonal`):
   przyciemnienie po skosie nad zdjęciem i pod panelem, więc szkło czyta się
   ciemniej. To nie jest cecha panelu, tylko kadru pod nim. */
.wp-block-flexisnap-page-hero.is-style-baner-podstrony-szklo-niski .flexisnap-page-hero__overlay {
	background-image: var(--wp--preset--gradient--baner-przyciemnienie-skos);
	pointer-events: none;
}

/* Z odcieniem (baner Solutions, makieta `--tint-left`): nakładka barwy na
   połowie z panelem. Tryb `color` bierze z błękitu odcień i nasycenie,
   a jasność zostawia zdjęciu, więc prawie białe tło robi się chłodne zamiast
   niebieskie. Tylko od 64rem: niżej baner nie ma dwóch kolumn, a nakładka
   rozciągnięta na zdjęcie zabarwiałaby packshot. Maluje pusty węzeł `__overlay`
   bloku, który leży nad zdjęciem i pod panelem. */
@media (min-width: 64rem) {

	.wp-block-flexisnap-page-hero.is-style-baner-podstrony-z-odcieniem .flexisnap-page-hero__overlay {
		inset-inline-end: auto;
		inline-size: 50%;
		background-color: var(--wp--custom--kolor--blekit-odcien);
		mix-blend-mode: color;
		pointer-events: none;
	}
}

/* Telefon (prośba klienta z 2026-10-16): zdjęcie na całą szerokość ekranu,
   bez zaokrągleń, wysokie do zgięcia (ekran minus pasek nawigacji), panel na
   pełnym granacie. Baner wychodzi poza wcięcie korzenia przesunięciem, bo
   układ `constrained` daje dzieciom `margin-inline: auto !important`. */
@media (width < 48rem) {

	.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) {
		position: relative;
		inset-inline-start: calc(-1 * var(--wp--style--root--padding-left, 0px));
		inline-size: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
		max-inline-size: none;
		min-block-size: calc(100vh - var(--wp--custom--naglowek--wysokosc-kompakt));
		min-block-size: calc(100svh - var(--wp--custom--naglowek--wysokosc-kompakt));
		padding-block-start: var(--wp--preset--spacing--4);
		border-radius: 0;
	}

	.wp-block-flexisnap-page-hero:is(.is-style-baner-podstrony, .is-style-baner-podstrony-niski, .is-style-baner-podstrony-z-odcieniem, .is-style-baner-podstrony-z-odstepem, .is-style-baner-podstrony-szklo, .is-style-baner-podstrony-szklo-niski) .flexisnap-page-hero__body {
		padding: var(--wp--preset--spacing--8);
		border: 0;
		background-color: var(--wp--preset--color--granat);
		backdrop-filter: none;
	}
}