/*
 * Okładka (core/cover) w stylu „Baner w ramce”: układ banera śródstronicowego
 * (makieta `page-hero--framed`, „Engineered for clinical performance”).
 * Kolor tekstu, promień i tło są w styles/baner-w-ramce.json, wygląd panelu
 * w styles/panel-granatowy.json. Tutaj stoi to, co arkusz rdzenia okładki
 * i obrazka ustawia wyższą wagą niż klucz `css` (`:where()`): wyrównanie
 * i wcięcie okładki, położenie zdjęcia tła, szerokości dzieci, wysokość
 * obrazka `core/image`.
 *
 * Kolejność dzieci okładki: nagłówek, akapit (wstęp), grupa (obrazek i panel).
 */

.wp-block-cover.is-style-baner-w-ramce {
	align-items: stretch;
	min-height: clamp(28rem, 48vw, 57.5rem);
	padding: clamp(var(--wp--preset--spacing--6), 3.4vw, 4rem);
}

/* Zdjęcie tła przy prawej krawędzi, nie na cały baner: z lewej zostaje
   gradient pod tekstem. */
.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__image-background {
	inset-inline-start: auto;
	inline-size: min(100%, 80.875rem);
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--siatka);
}

/* Dzieci na całą szerokość kolumny. Nowa okładka ma układ „constrained”, który
   daje dzieciom `margin-inline: auto !important`, a we flexie automatyczny
   margines zwęża element do treści i centruje go. Pełna szerokość nie zostawia
   mu miejsca, więc baner działa przy obu układach treści okładki; granice
   wiersza tytułu i wstępu dają wcięcia z prawej, nie `max-width`. */
.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > * {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	margin-block: 0;
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-heading {
	padding-inline-end: max(0px, 100% - 1037 * var(--wp--custom--u));
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > p {
	padding-inline-end: max(0px, 100% - 700 * var(--wp--custom--u));
}

/* Obrazek i panel przy dolnej krawędzi; od tekstu co najmniej `spacing-10`
   (128 px, na telefonie 72), jak odstęp siatki banera w makiecie. */
.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--5);
	margin-block-start: auto;
	padding-block-start: calc(var(--wp--preset--spacing--10) - var(--wp--preset--spacing--siatka));
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group > * {
	margin: 0;
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group > .wp-block-image {
	aspect-ratio: 1;
	inline-size: clamp(9rem, 14vw, 14.4375rem);
	border-radius: var(--wp--preset--border-radius--karta);
	overflow: hidden;
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group > .wp-block-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Panel w banerze: treść przy dolnej krawędzi i szerszy odstęp niż w panelu
   na stronie produktu. */
.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--6);
	inline-size: min(100%, calc(374 * var(--wp--custom--u)));
}

.wp-block-cover.is-style-baner-w-ramce > .wp-block-cover__inner-container > .wp-block-group > .wp-block-group > * {
	margin-block: 0;
}

/*
 * Okładka w stylu „Baner zamykający” (makieta `page-hero--framed --cta`):
 * zdjęcie na całym banerze, panel przy dolnej krawędzi. Położenie panelu
 * (środek, lewa, prawa) to pozycja treści okładki z rdzenia, przyciemnienie
 * całego zdjęcia (`--shade-flat`) to jej nakładka. Wygląd panelu niesie styl
 * grupy „Panel na jasnym szkle”.
 */
.wp-block-cover.is-style-baner-zamykajacy {
	min-height: clamp(28rem, 48vw, 57.5rem);
	padding: clamp(var(--wp--preset--spacing--6), 3.4vw, 4rem);
}

/* Kontener treści jest elementem flex okładki: bez zerowej szerokości
   minimalnej nie skurczyłby się poniżej panelu i przy pozycji z boku panel
   wychodziłby poza baner na wąskim ekranie. */
.wp-block-cover.is-style-baner-zamykajacy > .wp-block-cover__inner-container {
	min-inline-size: 0;
}

/* Panel: 800 px w skali makiety, nie szerszy niż baner. Przy pozycji
   z lewej albo z prawej rdzeń zwęża kontener treści do zawartości, więc
   automatyczny margines nic nie przesuwa; przy środku centruje panel
   w obu układach treści okładki. */
.wp-block-cover.is-style-baner-zamykajacy > .wp-block-cover__inner-container > .wp-block-group {
	box-sizing: border-box;
	inline-size: calc(800 * var(--wp--custom--u));
	max-inline-size: 100%;
	margin-block: 0;
	margin-inline: auto;
}

/* Baner z kaflami (makieta `page-hero--framed --stats`): niższy niż baner
   zamykający (505 px przy 1920, 26,3 procent szerokości), wcięcie 16 do 24 px,
   kafle przy prawej dolnej krawędzi (położenie treści okładki). Kolumna kafli
   ma szerokość z projektu: 851 z 1792 px pola treści. Szerokość stoi na
   siatce, nie na kontenerze treści: przy położeniu treści innym niż środek
   rdzeń daje kontenerowi `width: auto` regułą o pięciu klasach, więc kontener
   bierze szerokość z siatki. */
.wp-block-cover.is-style-baner-z-kaflami {
	min-height: clamp(16rem, 26.3vw, 31.5625rem);
}

/* Baner z panelem (strony produktów w Figmie, „One step support”): pas
   zdjęcia z panelem szklanym przy krawędzi (położenie treści okładki).
   Wcięcie i szerokość kolumny jak w banerze z kaflami, ale wysokość wyznacza
   panel: rdzeń daje okładce 430 px wysokości minimalnej, projekt 295 px przy
   1920. */
.wp-block-cover.is-style-baner-z-panelem {
	min-height: 0;
}

.wp-block-cover:is(.is-style-baner-z-kaflami, .is-style-baner-z-panelem) {
	padding: clamp(var(--wp--preset--spacing--4), 1.67vw, var(--wp--preset--spacing--6));
}

.wp-block-cover:is(.is-style-baner-z-kaflami, .is-style-baner-z-panelem) > .wp-block-cover__inner-container {
	min-inline-size: 0;
}

.wp-block-cover:is(.is-style-baner-z-kaflami, .is-style-baner-z-panelem) > .wp-block-cover__inner-container > * {
	box-sizing: border-box;
	inline-size: calc(851 * var(--wp--custom--u));
	max-inline-size: 100%;
	margin-block: 0;
}

/* Pasmo z cytatem (makieta `.flexisnap-quote`): zdjęcie na całej szerokości
   okna, pod nim granat, wcięcia jak w sekcji, cytat przy lewej krawędzi
   kolumny treści. Kadr zdjęcia ustawia punkt ostrości okładki. */
.wp-block-cover.is-style-pasmo-z-cytatem {
	min-height: 0;
	padding-block: var(--wp--preset--spacing--sekcja-pion);
	padding-inline: var(--wp--style--root--padding-left, 0px) var(--wp--style--root--padding-right, 0px);
}

.wp-block-cover.is-style-pasmo-z-cytatem > .wp-block-cover__inner-container {
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-cover.is-style-pasmo-z-cytatem > .wp-block-cover__inner-container > * {
	margin-block: 0;
}