/* components/hero-band/hero-band.css
 *
 * Adapted from mvc-parent/components/hero/hero.css — same visual mechanism
 * (full-bleed background image + text overlay), renamed to mvc-hero-band-*
 * so it doesn't collide with the real page hero. See hero-band.php for why
 * this exists as a separate component (H2 vs hero.php's H1).
 */

/* ── Base ───────────────────────────────────────────────────────────────── */
.mvc-hero-band {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	--hero-band-overlay-opacity: 0.4;
}

/* ── Height variants ────────────────────────────────────────────────────── */
.mvc-hero-band--full { min-height: 100dvh; }
.mvc-hero-band--tall { min-height: 75vh; min-height: clamp(480px, 75vh, 800px); }
.mvc-hero-band--md   { min-height: 55vh; min-height: clamp(360px, 55vh, 600px); }
.mvc-hero-band--sm   { min-height: 360px; }

/* ── Background media ───────────────────────────────────────────────────── */
.mvc-hero-band__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.mvc-hero-band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── Overlay ─────────────────────────────────────────────────────────────
 * Direction (bottom/left/right) follows layout so the darker side sits
 * under the text, same logic as hero.php. */
.mvc-hero-band__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mvc-hero-band--overlay-bottom .mvc-hero-band__overlay {
	background: linear-gradient(to top,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 1.4)) 0%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.7)) 50%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.2)) 100%);
}

.mvc-hero-band--overlay-left .mvc-hero-band__overlay {
	background: linear-gradient(to right,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 1.7)) 0%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.9)) 30%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.3)) 60%,
		transparent 100%);
}

.mvc-hero-band--overlay-right .mvc-hero-band__overlay {
	background: linear-gradient(to left,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 1.7)) 0%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.9)) 30%,
		rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.3)) 60%,
		transparent 100%);
}

@media (max-width: 767px) {
	.mvc-hero-band--overlay-left .mvc-hero-band__overlay,
	.mvc-hero-band--overlay-right .mvc-hero-band__overlay {
		background: linear-gradient(to top,
			rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 1.4)) 0%,
			rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.7)) 50%,
			rgba(0,0,0,calc(var(--hero-band-overlay-opacity) * 0.2)) 100%);
	}
}

/* ── Light overlay tint variant — warm off-white wash instead of black ───── */
.mvc-hero-band--overlay-tint-light.mvc-hero-band--overlay-bottom .mvc-hero-band__overlay {
	background: linear-gradient(to top,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 1.8)) 0%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.9)) 50%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.25)) 100%);
}

.mvc-hero-band--overlay-tint-light.mvc-hero-band--overlay-left .mvc-hero-band__overlay {
	background: linear-gradient(to right,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 2.2)) 0%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 1.2)) 30%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.4)) 60%,
		transparent 100%);
}

.mvc-hero-band--overlay-tint-light.mvc-hero-band--overlay-right .mvc-hero-band__overlay {
	background: linear-gradient(to left,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 2.2)) 0%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 1.2)) 30%,
		rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.4)) 60%,
		transparent 100%);
}

@media (max-width: 767px) {
	.mvc-hero-band--overlay-tint-light.mvc-hero-band--overlay-left .mvc-hero-band__overlay,
	.mvc-hero-band--overlay-tint-light.mvc-hero-band--overlay-right .mvc-hero-band__overlay {
		background: linear-gradient(to top,
			rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 1.8)) 0%,
			rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.9)) 50%,
			rgba(250,248,245,calc(var(--hero-band-overlay-opacity) * 0.25)) 100%);
	}
}

/* ── Inner content ──────────────────────────────────────────────────────── */
.mvc-hero-band__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--space-16);
}

.mvc-hero-band__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* ── Layout variants ────────────────────────────────────────────────────── */
.mvc-hero-band--centered .mvc-hero-band__content {
	align-items: center;
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
}

.mvc-hero-band--left .mvc-hero-band__inner,
.mvc-hero-band--right .mvc-hero-band__inner {
	max-width: none;
	padding-inline: var(--space-8);
}

@media (min-width: 1024px) {
	.mvc-hero-band--left .mvc-hero-band__inner,
	.mvc-hero-band--right .mvc-hero-band__inner {
		padding-inline: var(--space-10);
	}
}

.mvc-hero-band--left .mvc-hero-band__content {
	align-items: flex-start;
	max-width: 650px;
}

.mvc-hero-band--right .mvc-hero-band__inner {
	display: flex;
	justify-content: flex-end;
}

.mvc-hero-band--right .mvc-hero-band__content {
	align-items: flex-end;
	text-align: right;
	max-width: 650px;
}

.mvc-hero-band--right .mvc-hero-band__subheadline {
	margin-left: auto;
}

/* ── Extra start padding — pulls content further from the edge on wide
   screens, on top of the base left/right layout padding. ── */
@media (min-width: 1024px) {
	.mvc-hero-band--extra-start-padding.mvc-hero-band--left .mvc-hero-band__inner {
		padding-inline-start: var(--space-20, 5rem);
	}
	.mvc-hero-band--extra-start-padding.mvc-hero-band--right .mvc-hero-band__inner {
		padding-inline-end: var(--space-20, 5rem);
	}
}

.mvc-hero-band--right .mvc-hero-band__ctas {
	justify-content: flex-end;
}

/* ── Text color ─────────────────────────────────────────────────────────── */
.mvc-hero-band--light .mvc-hero-band__headline,
.mvc-hero-band--light .mvc-hero-band__subheadline {
	color: var(--color-text-inverse);
}

.mvc-hero-band--dark .mvc-hero-band__headline,
.mvc-hero-band--dark .mvc-hero-band__subheadline {
	color: var(--color-heading);
}

/* ── Eyebrow ────────────────────────────────────────────────────────────── */
.mvc-hero-band__eyebrow {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvc-color-accent, var(--color-accent));
	margin: 0;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.mvc-hero-band__headline {
	font-size: var(--text-5xl);
	font-weight: var(--mvc-font-weight-heading, var(--font-weight-bold, 700));
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.mvc-hero-band__subheadline {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	max-width: 60ch;
	margin: 0;
}

.mvc-hero-band--centered .mvc-hero-band__subheadline {
	margin-inline: auto;
}

@media (max-width: 767px) {
	.mvc-hero-band__headline { font-size: var(--text-4xl); }
	.mvc-hero-band__subheadline { font-size: var(--text-lg); }
}

@media (max-width: 479px) {
	.mvc-hero-band__headline { font-size: var(--text-3xl); }
}

/* ── CTAs ───────────────────────────────────────────────────────────────── */
.mvc-hero-band__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* .mvc-btn--ghost is always dark text with no dark-background-aware variant
 * (same issue fixed for hero.php's mvc-hero--light) — invert it here too. */
.mvc-hero-band--light .mvc-hero-band__ctas .mvc-btn--ghost {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.6);
}

.mvc-hero-band--light .mvc-hero-band__ctas .mvc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	color: #ffffff !important;
}