/**
 * Hero — two-image cross-fade.
 *
 * Geometry and timing are measured values from the Zilver 2 reference, see
 * docs/VISUAL_AUDIT.md §3. Do not "tidy" these numbers without re-measuring.
 *
 * Reference heights: 540 / 346 / 338 px at 1440 / 1024 / 390.
 * Slightly taller here because SD Cars' hero carries two CTAs plus a trust row.
 */

.sd-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	overflow: hidden;
	background-color: var(--sd-ink);
	isolation: isolate;
}

/* ---------- Media layers ---------- */

.sd-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sd-hero__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* The cross-fade itself. Measured on the reference: 1500ms. */
	transition: opacity 1500ms ease;
	will-change: opacity;
}

.sd-hero__layer.is-active {
	opacity: 1;
}

.sd-hero__layer picture,
.sd-hero__img {
	display: block;
	width: 100%;
	height: 100%;
}

.sd-hero__img {
	object-fit: cover;
	/* The reference uses background-position: 50% 100%. Bottom anchoring means a
	   shorter hero crops the sky, never the cars. */
	object-position: center bottom;
}

/*
 * Framing on wide viewports.
 *
 * Both photographs are 16:9 with the car sitting low in the frame, so the
 * reference's own `50% 100%` is exactly right: the hero is always a wider ratio
 * than the source, the crop is therefore vertical, and anchoring to the bottom
 * keeps the wheels and bumper while trimming sky and rooflines.
 *
 * Narrow viewports do not rely on object-position at all — they load a
 * dedicated 3:4 crop centred on the car instead (see sdcars_hero_picture()).
 */
.sd-hero__img { object-position: 50% 100%; }

/* Gradient scrim.
   The reference has no overlay element — its photographs are already dark on the
   left. SD Cars' two images are a bright studio shot and a daylight showroom
   shot, so white text over them needs an explicit scrim to stay legible.
   This is the one deliberate deviation, documented in the audit. */
.sd-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(15, 17, 19, 0.88) 0%, rgba(15, 17, 19, 0.62) 42%, rgba(15, 17, 19, 0.18) 78%, rgba(15, 17, 19, 0.08) 100%),
		linear-gradient(to top, rgba(15, 17, 19, 0.45) 0%, rgba(15, 17, 19, 0) 45%);
}

/* ---------- Content ---------- */

.sd-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--sd-space-16) var(--sd-space-12);
}

.sd-hero__content {
	max-width: 46rem;
	/* Matches the reference's Elementor "animated fadeIn": 1.25s ease, no travel. */
	animation: sd-hero-fade 1250ms ease both;
}

@keyframes sd-hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sd-hero__eyebrow {
	margin: 0 0 var(--sd-space-3);
	font-family: var(--sd-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.85;
}

.sd-hero__title {
	margin: 0 0 var(--sd-space-4);
	font-family: var(--sd-font-heading);
	/* The reference pins H1 at 35px on every breakpoint, which crowds its own
	   mobile hero. clamp() keeps the same desktop weight without that problem. */
	font-size: clamp(1.875rem, 4.4vw, 3rem);
	font-weight: 800;
	line-height: 1.06;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.sd-hero__lead {
	margin: 0 0 var(--sd-space-8);
	max-width: 34rem;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.sd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-space-3);
	margin-bottom: var(--sd-space-8);
}

.sd-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-space-3) var(--sd-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-hero__trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	/* This row sits lowest in the hero, where the scrim is lightest and the
	   bodywork behind it can be bright orange. The shadow keeps it legible
	   whichever slide is showing. */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.sd-hero__trust .sd-icon {
	flex: none;
	padding: 2px;
	border-radius: 999px;
	background: var(--sd-red);
	color: #fff;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1024px) {
	.sd-hero { min-height: 460px; }
	.sd-hero__inner { padding-block: var(--sd-space-12) var(--sd-space-10); }
	.sd-hero__lead { margin-bottom: var(--sd-space-6); }
	.sd-hero__actions { margin-bottom: var(--sd-space-6); }
}

@media (max-width: 640px) {
	.sd-hero { min-height: 0; }
	/* Extra bottom padding so the car keeps a clear band beneath the trust row
	   instead of sitting directly behind the buttons. Without it the photograph
	   reads as texture rather than as a car. */
	.sd-hero__inner { padding-block: var(--sd-space-8) 7rem; }
	.sd-hero__content { max-width: none; }
	.sd-hero__lead { font-size: 1rem; }

	/* Full-width buttons only where it genuinely helps: a 320px viewport cannot
	   fit both CTAs side by side without wrapping into ragged half-widths. */
	.sd-hero__actions { flex-direction: column; align-items: stretch; }
	.sd-hero__actions .sd-btn { width: 100%; }

	/* Two-up rather than a tall stack of three lines. */
	.sd-hero__trust {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sd-space-2) var(--sd-space-3);
	}
	.sd-hero__trust li:last-child { grid-column: 1 / -1; }
	.sd-hero__trust li { font-size: 0.875rem; }

	/* Vertical scrim: on mobile the copy spans most of the hero, so the gradient
	   runs top-to-bottom instead of left-to-right. It stays heavy where the text
	   is and clears the bottom band so the car is seen, not veiled. */
	.sd-hero__scrim {
		background:
			linear-gradient(180deg,
				rgba(15, 17, 19, 0.82) 0%,
				rgba(15, 17, 19, 0.76) 62%,
				rgba(15, 17, 19, 0.66) 80%,
				rgba(15, 17, 19, 0.18) 100%);
	}

	/* The 3:4 crop is already centred on the car, so no offset is needed —
	   just undo the bottom anchor used on the landscape crop. */
	.sd-hero__img { object-position: 50% 50%; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.sd-hero__layer {
		transition: none;
	}
	/* hero.js does not start the cycle at all under reduced motion, so the first
	   layer simply stays visible. */
	.sd-hero__content {
		animation: none;
	}
}