/**
 * ABOUTME: Styles for the mckees/page-hero block.
 * ABOUTME: Handles image-backed and plain hero variants plus the taller home variant.
 */

.mc-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 350px;
	padding: 0 2rem;
	margin-bottom: 60px;
	text-align: center;
	overflow: hidden;
}

.mc-page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.mc-page-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1.2;
}

.mc-page-hero__tagline {
	margin: 0.75rem 0 0;
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: 0.5px;
}

/* Image variant: featured image with gradient wash, white text */
.mc-page-hero--image .mc-page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.mc-page-hero--image .mc-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba( 43, 103, 140, 0.75 ) 0%,
		rgba( 38, 93, 115, 0.85 ) 100%
	);
	z-index: 1;
}

.mc-page-hero--image .mc-page-hero__title,
.mc-page-hero--image .mc-page-hero__tagline {
	color: var( --wp--preset--color--background );
}

/* Plain variant: warm gray background, brand-color title and tagline.
   Shorter than image variant since there's no visual to anchor it. */
.mc-page-hero--plain {
	background-color: var( --wp--preset--color--surface );
	min-height: 250px;
}

.mc-page-hero--plain .mc-page-hero__title {
	color: var( --wp--preset--color--primary );
}

.mc-page-hero--plain .mc-page-hero__tagline {
	color: var( --wp--preset--color--accent-olive );
}

/* Home variant: taller, allows space for transparent-until-scroll header.
   No bottom margin — next section is full-bleed and should butt against the hero.
   Content is flex-centered so the transparent header overlays the top section without
   needing explicit padding-top to clear it. */
.mc-page-hero--home {
	min-height: 600px;
	margin-bottom: 0;
}

.mc-page-hero--home .mc-page-hero__title {
	font-size: 3.5rem;
}

@media ( max-width: 768px ) {
	.mc-page-hero {
		min-height: 280px;
		padding: 0 1.25rem;
		margin-bottom: 40px;
	}

	.mc-page-hero--plain {
		min-height: 220px;
	}

	.mc-page-hero__title {
		font-size: 2.25rem;
	}

	.mc-page-hero__tagline {
		font-size: 1.05rem;
		letter-spacing: 0.25px;
	}

	.mc-page-hero--home {
		min-height: 480px;
	}

	.mc-page-hero--home .mc-page-hero__title {
		font-size: 2.5rem;
	}
}