/* ==========================================================================
   Hero Cover
   Reusable full-bleed cover image with optional title and subtitle overlay.
   The viewport-wide width is achieved via the 100vw + translateX trick so it
   works whether the page uses Astra's Stretched layout or the default
   constrained content layout.
   ========================================================================== */

.hero-cover {
	position: relative;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	background: var(--ph-hero-bg, #e9eef0);
}

.hero-cover__media {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-cover__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position is set inline from the SCF field */
}

/* ---- Heights ------------------------------------------------------------- */

.hero-cover--short  { aspect-ratio: 21 / 7; }
.hero-cover--medium { aspect-ratio: 21 / 9; }
.hero-cover--tall   { aspect-ratio: 16 / 9; }

.hero-cover--short .hero-cover__media,
.hero-cover--medium .hero-cover__media,
.hero-cover--tall .hero-cover__media {
	position: absolute;
	inset: 0;
}

/* Guard against very wide viewports where aspect-ratio would make the hero
   too tall. Cap at viewport height proportions. */
.hero-cover--short  { max-height: 55vh; }
.hero-cover--medium { max-height: 70vh; }
.hero-cover--tall   { max-height: 85vh; }

/* ---- Overlay ------------------------------------------------------------- */

.hero-cover__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.35) 100%
	);
	color: #fff;
}

.hero-cover__inner {
	max-width: var(--ph-maxw, 1160px);
	margin: 0 auto;
	width: 100%;
}

.hero-cover__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-cover__subtitle {
	margin: 0;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 400;
	opacity: 0.95;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* ---- Reduced motion friendly: nothing animates here, no overrides needed - */