/**
 * Purpose: the sections that follow the Drive film (pacts, range, testimonials,
 * Find My Fit, journal, CTA). The film hands over on black; these sections used to
 * restart the page as bordered cards on near-black, which read like a different
 * site. Here they keep their markup but lose the boxes: black ground, hairline
 * rules instead of card borders, type-led blocks, and the theme's own
 * [data-reveal] fade-up for entrances.
 *
 * Scoped to html.js-drive, so a page without the film keeps its original styling.
 * Loaded after home.css (inc/enqueue.php) — see docs/HOME-DRIVE-SPEC.md §10.
 */

/* ---------- one continuous ground ---------- */
html.js-drive .site-main > section.partnership,
html.js-drive .site-main > section.range,
html.js-drive .site-main > section.proof-testimonials,
html.js-drive .site-main > section.find-fit,
html.js-drive .site-main > section.insights,
html.js-drive .site-main > section.final-cta {
	background-color: #000; /* colour only: ambient.css paints its glow layers (2026-09-21) */
	padding-block: var(--space-24);
}
html.js-drive .site-main > section.final-cta { padding-block: var(--space-32); }

/* ---------- boxes → hairlines ---------- */
html.js-drive .pact,
html.js-drive .review,
html.js-drive .article-card,
html.js-drive .product-card,
html.js-drive .family {
	background: none;
	border: 0;
	border-radius: 0;
}

/* A single rule above each item gives the grid its structure instead of a frame. */
html.js-drive .pact,
html.js-drive .review,
html.js-drive .article-card,
html.js-drive .family {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--space-6, 1.5rem);
}

/* Media keeps its shape, loses the rounded card corner. */
html.js-drive .article-card__media,
html.js-drive .product-card__media {
	border-radius: 0;
	border: 0;
}

/* Certifications read as one quiet line, not a row of chips. */
html.js-drive .cert-pill {
	background: none;
	border: 0;
	border-radius: 0;
	padding-inline: 0;
	margin-inline-end: var(--space-6, 1.5rem);
	color: var(--color-text-muted);
	letter-spacing: 0.08em;
}

/* Find My Fit stays a panel — it is a form and needs the affordance — but the red
 * outline competes with the film's accent, so it drops to a soft surface. */
html.js-drive .find-fit__form-wrap {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
}

/* Product badges keep the brand red, at label weight rather than button weight. */
html.js-drive .product-card__badge {
	border-radius: 0;
	background: none;
}

/* ---------- rhythm ---------- */
html.js-drive .proof-testimonials__head,
html.js-drive .insights__head,
html.js-drive .find-fit__content {
	margin-bottom: var(--space-16);
}

/* Phones: the hairlines carry the structure, so the stacked cards need air. */
@media (max-aspect-ratio: 1/1) {
	html.js-drive .site-main > section.partnership,
	html.js-drive .site-main > section.range,
	html.js-drive .site-main > section.proof-testimonials,
	html.js-drive .site-main > section.find-fit,
	html.js-drive .site-main > section.insights,
	html.js-drive .site-main > section.final-cta {
		padding-block: var(--space-16);
	}
	html.js-drive .pact,
	html.js-drive .review,
	html.js-drive .article-card,
	html.js-drive .family {
		padding-top: var(--space-5, 1.25rem);
	}
}

/* ---------- grouping ----------
 * Dropping the card frames left the page reading as one undifferentiated black
 * field: nothing said where a block started or which items belonged together.
 * Structure comes back without boxes — a rule under each section head, a faint
 * surface on the things that are objects (devices, articles), and gaps that are
 * wider between groups than inside them. */

html.js-drive .site-main > section.partnership .container > *:first-child,
html.js-drive .proof-testimonials__head,
html.js-drive .insights__head,
html.js-drive .range__head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding-bottom: var(--space-6, 1.5rem);
	margin-bottom: var(--space-10, 2.5rem);
}

/* Devices and articles are objects: a barely-there surface separates them from the
 * ground without drawing a frame. */
html.js-drive .product-card,
html.js-drive .article-card {
	background: rgba(255, 255, 255, 0.022);
	padding: var(--space-5, 1.25rem);
}
html.js-drive .article-card { border-top: 0; }
html.js-drive .product-card:hover,
html.js-drive .article-card:hover { background: rgba(255, 255, 255, 0.04); }

/* Quotes and pacts stay frameless — the rule above each is the separator — but the
 * gap between them has to beat the gap inside them. */
html.js-drive .proof-testimonials__grid,
html.js-drive .insights__grid,
html.js-drive .partnership__pacts,
html.js-drive .range__families {
	gap: var(--space-10, 2.5rem);
}
/* The carousel sizes its cards from --grid-gap, so widen that, not just the gap. */
html.js-drive .proof-testimonials__grid { --grid-gap: var(--space-10, 2.5rem); }
html.js-drive .pact,
html.js-drive .review { padding-top: var(--space-5, 1.25rem); }

/* The head already carries its own rule + margin; the container's column gap on
 * top of that doubled the air (user, 2026-09-16). */
html.js-drive .partnership__container { gap: 0; }

/* The film hands over on its last frame, so the first section after it starts on a
 * gradient rather than a hard black edge. */
html.js-drive .site-main > section.partnership {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), #000 42%);
}

/* ---------- the closing ----------
 * The page used to stop on flat black, which read as the content running out rather
 * than ending. The last section now carries the film's light: a low red glow rising
 * from the bottom (the tail-light bar, one last time), a hairline that opens the
 * block, and a thin red edge that closes the page. */
html.js-drive .site-main > section.final-cta {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	/* Kept low and weak: the glow sits under the content, never behind the type —
	 * a stronger wash greyed out the headline and flattened the primary button. */
	background:
		radial-gradient(90% 46% at 50% 118%, rgba(255, 0, 18, 0.20), rgba(255, 0, 18, 0.05) 45%, transparent 72%),
		linear-gradient(180deg, #000 0%, #000 62%, #050506 100%);
}
html.js-drive .site-main > section.final-cta::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 0, 18, 0.55), transparent);
}
html.js-drive .final-cta__container { position: relative; }

/* ============================================================
   Range + article cards: bring back a frame, matching the films on
   the Series page — hairline border, soft radius, dark gradient
   ground. Both rest at the same border so the hover reads the same.
   This deliberately overrides the frameless drive-film treatment
   above. (user, 2026-09-16)
   ============================================================ */
html.js-drive .product-card,
html.js-drive .article-card {
	border: 1px solid #2a2a2e;
	border-top: 1px solid #2a2a2e;
	border-radius: var(--radius-xl);
	background: linear-gradient(160deg, #1c1c20, #0c0c0e);
	padding: var(--space-5, 1.25rem);
	overflow: hidden;
	transition: border-color var(--duration-base) var(--ease-out),
		box-shadow var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out),
		background var(--duration-base) var(--ease-out);
}
html.js-drive .product-card:hover,
html.js-drive .article-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-glow);
	background: linear-gradient(160deg, #202024, #101012);
	transform: translateY(-4px);
}
html.js-drive .product-card--featured { border-color: var(--color-primary); }

/* The card already carries its own inset, so the body must not add a second one
   on the sides — every width, not just phones. No bottom inset either.
   (user, 2026-09-16) */
.product-card__body,
.article-card__body,
.product-card__footer,
html.js-drive .product-card__body,
html.js-drive .article-card__body,
html.js-drive .product-card__footer { padding-inline: 8px; }

.product-card__footer,
.article-card__body,
html.js-drive .product-card__footer,
html.js-drive .article-card__body { padding-bottom: 0; }

/* Read time + date sit on the card's bottom edge whatever the excerpt runs to,
   so the row lines up across a grid of cards. (user, 2026-09-16) */
.article-card__body,
html.js-drive .article-card__body { flex: 1 1 auto; }

.article-card__footer,
html.js-drive .article-card__footer { margin-top: auto; padding-top: var(--space-5); }


/* ---------- Card media zoom ----------------------------------------------
   Same settle as the mega menu's media pane (scale 1.03 -> 1 on the slower
   easing), reworked as a hover so product and series imagery reads as one
   language across the site. (user, 2026-09-17) */
.product-card__media,
.article-card__media { overflow: hidden; }

.product-card__media img,
.product-card__media video,
.article-card__media img,
.article-card__media video {
	transition: transform var(--duration-slower) var(--ease-out);
	will-change: transform;
}

.product-card:hover .product-card__media img,
.product-card:hover .product-card__media video,
.article-card:hover .article-card__media img,
.article-card:hover .article-card__media video { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.product-card__media img,
.product-card__media video,
.article-card__media img,
.article-card__media video { transition: none; }
	.product-card:hover .product-card__media img,
.product-card:hover .product-card__media video,
.article-card:hover .article-card__media img,
.article-card:hover .article-card__media video { transform: none; }
}


/* ---------- Section rhythm on home -----------------------------------------
   Each section pairs 96px of its own padding with the next one's, so adjacent
   blocks stacked ~192px of dead air between the certifications band and "The
   Performance Lab", the range cards and "Owner voices", and so on. Trim the
   padding; the 100vh one-beat-per-screen min-height stays as it is.
   (user, 2026-09-17) */
@media (min-width: 1024px) {
	body.home .site-main > section.section { padding-block: var(--space-16); }
	body.home .site-main > section.final-cta { padding-block: var(--space-20); }

	/* Sections shorter than a full screen (Find My Fit, the closing CTA) were
	   being centred inside 100vh, which padded them out with ~140px of slack top
	   and bottom. 86vh keeps the one-beat-per-screen read while cutting that.
	   Sections taller than this are content-driven and do not move. */
	body.home .site-main > section.section { min-height: 74vh; }
}


/* The arrows sit in the second grid column of the title row, so the head's rule
   used to stop at the copy. Give the controls the same rule and baseline and the
   separator reads as one full-width line. (user, 2026-09-17) */
html.js-drive .carousel-block > .range__controls {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding-bottom: var(--space-6, 1.5rem);
	margin-bottom: var(--space-10, 2.5rem);
}
@media (max-width: 767px) {
	/* Below the cards on phones — no rule, no baseline to share. */
	html.js-drive .carousel-block > .range__controls {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}


/* Partnership when it carries only the pacts row: no forced viewport height,
   and its own block padding. (user, 2026-09-17) */
.site-main > section.partnership--pacts-only,
body.home .site-main > section.partnership--pacts-only { min-height: 0; }

@media (min-width: 768px) {
	.site-main > section.partnership--pacts-only,
	body.home .site-main > section.partnership--pacts-only { padding-block: 88px; }
}