/**
 * Global Page Hero component — see template-parts/components/page-hero.php.
 * Not the homepage hero (out of scope this phase); a reusable banner for
 * inner pages.
 */

.page-hero {
	position: relative;
	background-color: var(--color-primary-700);
	background-size: cover;
	background-position: center;
	color: var(--color-text-inverse);
}

.page-hero--has-overlay .page-hero__overlay {
	background-color: rgba(13, 47, 42, 0.55);
}

.page-hero__inner {
	padding-block: var(--space-16);
	text-align: center;
}

.page-hero .breadcrumb {
	justify-content: center;
	margin-block-end: var(--space-4);
}

.page-hero .breadcrumb__list,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
	color: inherit;
}

.page-hero__title {
	margin: 0 0 var(--space-4);
	color: inherit;
	font-size: var(--font-size-4xl);
}

.page-hero__subtitle {
	max-width: 40rem;
	margin: 0 auto var(--space-6);
	font-size: var(--font-size-lg);
	color: inherit;
	opacity: 0.92;
}

.page-hero__cta {
	margin-block-start: var(--space-2);
}

@media (max-width: 48rem) {
	.page-hero__inner {
		padding-block: var(--space-10);
	}

	.page-hero__title {
		font-size: var(--font-size-3xl);
	}
}