/* hero.css — Section 7 (HERO SPECIFICATION) of MASTER_PROJECT.md
 *
 * Built directly in front-page.php (not the Elementor editor) — same
 * custom-code approach as the rest of the homepage sections, so the whole
 * front page is one reviewable, testable template.
 */

/* confirmed: 7.2 height — Desktop/Tablet 100vh, Mobile "minimum full viewport height".
   100dvh is added as a fallback because mobile browser chrome (address bar)
   makes plain 100vh taller than the visible viewport on many phones. */
.ontop360-hero {
	min-height: 100vh;
	min-height: 100dvh;
}

/* confirmed: mobile must never crop grille, headlights, logo, or front bumper —
   "keep the front of the vehicle visible". The real hero-mercedes.png has
   the G-Class positioned left-of-frame (grille/headlights on the left
   third), so on narrow viewports (where cover-sizing crops the sides, not
   top/bottom) the position needs to bias left, not center/top. */
@media (max-width: 767px) {
	.ontop360-hero {
		background-position: left center;
	}
}

.hero {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--color-white);
	background-color: var(--color-bg); /* fallback shown if hero-mercedes.png is ever missing */
	background-size: cover;
	background-position: left center; /* confirmed: keeps the grille/headlights (left-of-frame) visible */
	overflow: hidden;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	/* confirmed: overlay.png must be used exactly as supplied once available —
	 * this gradient is a temporary stand-in approximating its purpose
	 * (readability over the photo), not a permanent replacement. */
	background: linear-gradient(90deg, rgba(3, 3, 5, 0.85) 0%, rgba(3, 3, 5, 0.45) 55%, rgba(3, 3, 5, 0.1) 100%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 160px 24px 80px; /* TODO: confirm against Figma — top padding clears the fixed header */
}

.hero__title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 48px; /* TODO: confirm against Figma */
	line-height: 1.2;
	margin: 0 0 24px;
	max-width: 640px;
}

.hero__desc {
	font-family: var(--font-primary);
	font-size: 18px; /* TODO: confirm against Figma */
	color: var(--color-text-muted);
	max-width: 520px;
	margin: 0 0 40px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.hero__inner {
		padding-top: 120px;
	}
}