/**
 * VU Homepage
 *
 * Page-assembly CSS for the production homepage (WEB-05), front-page.php.
 * Reuses existing WEB-03 primitives from components.css wherever possible
 * (.vu-section, .vu-container, .vu-eyebrow, .vu-heading-section,
 * .vu-section-desc, .vu-btn*, .vu-card--service, .vu-grid--hairline,
 * .vu-feature, .vu-media, .vu-cta-band). Following the same division used
 * by page-templates.css (WEB-06), this file only adds what components.css
 * does not already cover: the hero (explicitly deferred to WEB-04/05 per
 * the WEB-03 scope note and the reserved --vu-text-display-lg token), a
 * two-column media+content split layout, and a small responsive grid for
 * the diesel/applications feature rows.
 */

/* ---------- Hero ---------- */

.vu-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 92vh;
	min-height: 580px;
	overflow: hidden;
}
.vu-hero__media {
	position: absolute;
	inset: 0;
}
.vu-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vu-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(var(--vu-color-bg-rgb), .25) 0%,
		rgba(var(--vu-color-bg-rgb), .15) 40%,
		rgba(var(--vu-color-bg-rgb), .78) 68%,
		rgba(var(--vu-color-bg-rgb), .98) 100%
	);
}
.vu-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 60px;
}
/*
 * a-2's original translucent-red badge (red-alpha bg, #E57070 text) read
 * as low-contrast once placed over a real, visually busy workshop photo
 * instead of the mockup's flat dark background. Switched to a near-opaque
 * light background with a solid brand-red border and dark-red text, which
 * stays legible against any part of the photo regardless of what's behind
 * it, while keeping the same compact size/shape.
 */
.vu-hero__badge {
	display: inline-flex;
	margin-bottom: 18px;
	padding: 6px 14px;
	background: rgba(var(--vu-color-white-rgb), .92);
	border: 1px solid var(--vu-color-red);
	border-radius: 2px; /* a-2 exact value — sharper than --vu-radius */
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vu-color-red-dark);
}
.vu-heading-hero {
	max-width: 15ch;
	margin-bottom: 18px;
	font-family: var(--vu-font-display);
	font-weight: 400; /* Bebas Neue ships one weight only; Kadence's global h1-h6 default (700) has no matching face — see tokens.css */
	font-size: var(--vu-text-display-lg);
	line-height: .95;
	letter-spacing: .01em;
	color: var(--vu-color-white);
	/* Subtle separation from the workshop photo behind it — inherited by
	   the .em (red) portion too. Soft/blurred on purpose, not a hard
	   outline or glow. */
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.vu-heading-hero em {
	font-style: normal;
	color: var(--vu-color-red);
}
.vu-hero__lead {
	max-width: 60ch;
	margin-bottom: 30px;
	font-size: var(--vu-text-xl);
	color: rgba(var(--vu-color-white-rgb), .68);
}
.vu-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * Diesel/applications truck photo only. The 4:5 container (.vu-media--4-5,
 * components.css) crops significant width out of the 1600x900 source, so
 * a plain center crop would either lose the truck's front end or the open
 * workshop bay behind it. This position was chosen by visually comparing
 * several crops of the actual asset: it keeps the full truck (grille,
 * hood, cab, wheel) in frame while still showing the open bay door and
 * workshop interior on the right.
 */
.vu-home-diesel-media {
	object-position: 58% 45%;
}

/* ---------- Media + content split (two-column feature section) ---------- */
/* Source order controls left/right placement — no reverse modifier needed. */

.vu-media-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

/* ---------- Feature rows grid ---------- */
/* .vu-feature (components.css) styles each row and is already
   display:flex, so it needs no override when used as an <a> instead of a
   <div>; this only arranges several of them responsively for the
   diesel/applications section. */

.vu-features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 36px;
}

/* ---------- Spacing utilities ---------- */
/* .vu-btn is already display:inline-block (components.css); these only
   add the top spacing needed after a preceding paragraph/grid. */

/*
 * .vu-grid--hairline (components.css) is designed for a fully-populated
 * grid: its background/border show through the 1px gaps as hairline
 * dividers, which only works cleanly when the last row is complete. With
 * 7 cards in that auto-fill grid, the incomplete last row left an empty
 * cell that visibly showed the container's hairline background/border as
 * a blank box. Rather than change the shared primitive (still valid for
 * a fully-populated grid elsewhere), this overrides it for the homepage's
 * 7-card case only: an explicit 4-column track (so the layout is exactly
 * 4+3, never auto-fill-dependent) with a transparent container and each
 * card carrying its own border instead of relying on background peeking
 * through gaps — so an incomplete row has nothing left to visibly show.
 */
.vu-home-services-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	background: transparent;
	border: none;
	margin-top: 52px;
}
.vu-home-services-grid .vu-card--service {
	border: 1px solid var(--vu-color-border);
}
.vu-home-cta-link {
	margin-top: 28px;
}

/*
 * Trust-section feature rows only (front-page.php's "Tout est fait sous
 * le même toit" block) — .vu-feature's default padding/flex-start
 * alignment is tuned for potentially multi-line text; these rows are
 * short single lines, so flex-start plus a fixed dot margin-top left the
 * box feeling padded/empty with the marker sitting slightly high.
 * Centering both and tightening padding/gap makes the rows compact and
 * keeps the marker visually centered on the text. Scoped to
 * .vu-feature-stack only — the diesel/applications .vu-features-grid
 * rows are untouched.
 */
.vu-feature-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}
.vu-feature-stack .vu-feature {
	align-items: center;
	padding: 12px 16px;
}
.vu-feature-stack .vu-feature__dot {
	margin-top: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.vu-media-split {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.vu-home-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.vu-features-grid {
		grid-template-columns: 1fr;
	}
	.vu-home-services-grid {
		grid-template-columns: 1fr;
	}
}