/* ═══════════════════════════════════════
   SUB-HERO – slim-banner pod nagłówkiem. Reużywalny, FLAT (zero cieni).
   Markup: template-parts/sub-hero.php. Ładowany automatycznie gdy blok renderuje
   (block.json "style"). Tokeny theme.json (BEM). Mobile-first.
   ═══════════════════════════════════════ */

.sub-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 200px;
	background-color: var(--wp--preset--color--primary);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	isolation: isolate;
}

/* Granatowy gradient: z lewej mocny → z prawej lekki (czytelny tekst na zdjęciu). */
.sub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--wp--preset--color--primary) 88%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 62%, transparent) 60%,
		color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent) 100%
	);
}

/* Bez tła-zdjęcia overlay jest zbędny – wystarcza pełny granat z background-color. */
.sub-hero--plain::before {
	background: none;
}

.sub-hero__inner {
	width: 100%;
	padding-block: var(--wp--preset--spacing--md);
}

/* ── Okruszki ── */
/* Pigułka: stały granatowy scrim pod okruszkami → czytelne na DOWOLNYM zdjęciu
   (biel na jasnym kadrze ginęła). Huguje treść (fit-content), flat – zero cieni. */
.sub-hero__crumbs {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 1rem;
	padding: 0.4rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-radius: 999px;
}
.sub-hero__crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sub-hero__crumb {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.sub-hero__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}
.sub-hero__crumbs a:hover {
	color: var(--wp--preset--color--accent);
}
.sub-hero__crumb [aria-current="page"] {
	font-weight: 600;
}
.sub-hero__sep {
	opacity: 0.6;
}

/* ── Tytuł + lead ── */
.sub-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	line-height: 1.05;
	color: var(--wp--preset--color--base);
}
.sub-hero__lead {
	max-width: 42rem;
	margin: 0.75rem 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: var(--wp--preset--color--base);
	opacity: 0.9;
}
.sub-hero__lead--italic {
	font-style: italic;
}

@media (min-width: 768px) {
	.sub-hero {
		min-height: 300px;
	}
	.sub-hero__inner {
		padding-block: var(--wp--preset--spacing--sm);
	}
}