/**
 * Rent a car landing — SPA-canonical styles.
 *
 * Mirrors components/RentACar.jsx#RCLanding exactly. The legacy rules in
 * assets/home-sections.css used a centered, smaller hero pattern; SPA uses
 * a full-bleed image hero with the eyebrow / H1 / lede pushed to the
 * bottom by `marginTop: auto`. This file overrides only what diverges —
 * the rest of the page (search card, trust row, comparison table, help
 * band, testimonials, supplier strip, partner CTAs) keeps the existing
 * styles which already match SPA closely.
 *
 * Loaded after home-sections.css via the va-rentacar enqueue rule in
 * functions.php, so these rules win on specificity ties.
 *
 * SPA breakpoint: window.innerWidth <= 900 → @media (max-width: 900px).
 */

/* ── Hero ──────────────────────────────────────────────────────── */
.va-rentacar-hero {
	position: relative;
	margin-top: -96px;
	height: 78vh;
	min-height: 620px;
	overflow: hidden;
	color: #fff;
	/* SPA places content via absolute inset; the legacy flex+padding from
	   home-sections.css would otherwise compete with the absolute child. */
	padding: 0;
	display: block;
}
.va-rentacar-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.va-rentacar-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(8, 35, 56, 0.5) 0%,
		rgba(8, 35, 56, 0.2) 40%,
		rgba(8, 35, 56, 0.85) 100%);
}
.va-rentacar-hero-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 140px 48px 56px;
	max-width: none;
	z-index: 1;
}
.va-rentacar-hero-eyebrow {
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0;
}
.va-rentacar-hero-title {
	margin: 18px 0 0;
	font-size: clamp(72px, 8.5vw, 140px);
	color: #fff;
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-weight: 400;
}
.va-rentacar-hero-lede {
	/* SPA <p> inherits the browser default margin: 1em 0 — at fontSize 17 that
	   adds a 17px margin-bottom. The flex-end content block is bottom-anchored,
	   so that extra 17px shifts the whole h1+eyebrow+lede stack UP. Mirror it
	   here or the WP block sits 17px lower than SPA's — that was the lingering
	   ~9% pixel diff after every other value matched. */
	margin: 20px 0 17px;
	max-width: 540px;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

/* Mobile branch (SPA window.innerWidth <= 900) */
@media (max-width: 900px) {
	.va-rentacar-hero {
		margin-top: -64px;
		height: 70vh;
		min-height: 560px;
	}
	.va-rentacar-hero-content { padding: 100px 24px 32px; }
	.va-rentacar-hero-title { font-size: clamp(48px, 14vw, 72px); }
	.va-rentacar-hero-lede { font-size: 15px; max-width: 100%; }
}

/* ── Search card (matches SPA overlap-on-desktop / below-on-mobile) ──── */
/* SPA desktop: marginTop -100; mobile: marginTop 16. home-sections.css has
   -64/-32. Tighten to match SPA. */
@media (min-width: 900px) {
	.va-rentacar-search-wrap { margin-top: -100px; }
}
@media (max-width: 900px) {
	.va-rentacar-search-wrap { margin-top: 16px; padding: 0 20px; }
}