/**
 * Homepage hero: background video, heading/copy, and donation panel
 * placement (the panel component itself is in donation-panel.css).
 */

.hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	background-color: var(--color-primary); /* shows while the video/poster load, and if neither exists yet */
	overflow: hidden;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(var(--color-primary-rgb), 0.68) 0%,
		rgba(var(--color-primary-rgb), 0.55) 60%,
		rgba(var(--color-primary-rgb), 0.4) 100%
	);
}

.hero__inner {
	position: relative;
	width: 100%;
	max-width: 1480px; /* 1400px content + 2×2.5rem inner padding, to align with sections that pad before centering */
	margin: 0 auto;
	padding: 4rem 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

/* Heading / copy */

.hero__content {
	color: var(--color-white);
	max-width: 620px;
	flex: 1 1 480px;
}

.hero__eyebrow {
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 400;
	margin: 0 0 0.75rem;
}

.hero__heading {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-weight: 700;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1.15;
	margin: 0 0 1.75rem;
}

.hero__quote {
	margin: 0;
	max-width: 480px;
	padding: 1.25rem 1.5rem;
	background-color: rgba(var(--color-primary-rgb), 0.45);
	border-radius: var(--radius-base);
}

.hero__quote p {
	margin: 0 0 0.5rem;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.5;
}

.hero__quote cite {
	display: block;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.9375rem;
	opacity: 0.85;
}

/* Donation panel placement (the panel's own look lives in
   assets/css/donation-panel.css, shared with the truck-sponsor section) */

.donation-panel {
	flex: 0 1 480px;
	width: 100%;
	max-width: 480px;
}

/* Below 768px the hero video never renders (see the <source media> in
   hero.php) — only the poster + this stacked layout show. */

@media (max-width: 768px) {
	.hero {
		min-height: 0;
	}

	.hero__inner {
		padding: 3rem 1.25rem;
	}

	.hero__content {
		flex-basis: 100%;
	}

	.donation-panel {
		flex-basis: 100%;
		max-width: 100%;
	}
}