/* ═══════════════════════════════════════════════════════════════════════════
   Cart Launch — Homepage TEMPLATE 3 · "THE SHOWROOM WALL"
   Full re-cut 2026-07-28i (owner: "rebuild 3 to something super super cool
   and make it awesome"). The Minimal Cinematic single-photo hero is gone;
   the hero is now a full-viewport, slowly drifting WALL of the dealer's
   inventory photos under a dark overlay, with a light band sweeping across
   it like a showroom spotlight. Loaded only when homepage.template = 3,
   after cl-home.css. EVERY selector is scoped under .cl-home--t3.

   ONE-SENTENCE LAYOUT: "A full-viewport, slowly drifting wall of the
   dealer's inventory photos — a living mural under a dark overlay — with
   the lockup set on top of it and a light sweep gliding across."

   THE WALL MECHANICS:
     • .cl-hero-3__wall is a 4×3 grid sized 128% × 128% and offset -14% both
       axes, so its 15s diagonal drift (transform-only, alternate) never
       exposes an edge. The root's overflow:hidden clips it — the oversize
       can never cause page scroll. Oversize and drift are a matched pair:
       raising the travel without raising the oversize uncovers a corner.
     • Photos repeat round-robin when the dealer has fewer than 12; with 3+
       distinct photos the repetition reads as rhythm, not error (below 3
       the PHP falls back to the single-photo tier, class --single).
     • .cl-hero-3__sweep is a soft light band crossing every 9s — the
       "showroom spotlight". Pure gradient, transform-only.
     • ALL motion stops under prefers-reduced-motion.

   TIERS (classes set by hero-3.php): --wall (3+ photos) · --single (the
   classic one-photo hero, media div + inline bg) · --nobg (brand gradient,
   never a grey box).

   SCOPE OF THIS FILE = THE HERO ONLY. Not a single .mgc-hp-* selector, ever.
   The four department cards and everything below stay template 1's shared
   light baseline from front-page-cl.php.

   Browser budget: no :has(), no color-mix(), no overflow:clip.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-home--t3 {
	--t3-mortar: #0a0e14; /* the grout between wall tiles                       */
}

/* ── The stage ─────────────────────────────────────────────────────────────── */

.cl-home--t3 .cl-hero-3 {
	position: relative;
	overflow: hidden; /* clips the oversized wall — no horizontal page scroll   */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 640px; /* fallback for engines without clamp() */
	min-height: clamp(600px, 80vh, 780px);
	padding: 0;
	background: var(--t3-mortar);
	/* The seam: a brand-red rule fused to the hero's bottom edge, so the wall
	   meets the light department section on a deliberate hard line. */
	border-bottom: 5px solid var(--cl-red, #DD0000);
	isolation: isolate;
}

/* ── TIER 1 · the wall ─────────────────────────────────────────────────────── */

.cl-home--t3 .cl-hero-3__wall {
	position: absolute;
	/* 2026-08-06 (owner: "increase the scroll speed on template 3 so you can
	   actually tell its moving"). The wall used to be 120% of the hero offset
	   -10%, which left 10% of slack on each edge and capped how far it could
	   travel before an uncovered corner appeared. 128% offset -14% gives 14%
	   of slack, which is the headroom the faster drift below needs. */
	top: -14%;
	left: -14%;
	width: 128%;
	height: 128%;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	/* Speed is distance over time and the old setting was short on both: 2.5%
	   of travel spread over 36 seconds came out around 1.4 pixels a second on a
	   desktop, which reads as a still photo. 9% over 15 seconds is about 13
	   pixels a second, roughly nine times faster, plainly moving without
	   tipping into distraction. Travel stays inside the 14% slack above, so no
	   edge is exposed at either end of the cycle. */
	animation: cl-h3-drift 15s ease-in-out infinite alternate;
}
@keyframes cl-h3-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-9%, -6%, 0); }
}
.cl-home--t3 .cl-hero-3__cell {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: #182130; /* settles while a tile decodes                        */
}
.cl-home--t3 .cl-hero-3__cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.94);
}

/* The showroom spotlight: a soft light band crossing the wall. */
.cl-home--t3 .cl-hero-3__sweep {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 58%);
	transform: translateX(-100%);
	animation: cl-h3-sweep 9s linear infinite;
	pointer-events: none;
}
@keyframes cl-h3-sweep {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* ── TIER 2 · single photo (classic full-bleed) ────────────────────────────── */

.cl-home--t3 .cl-hero-3__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}

/* ── TIER 3 · brand field (fresh clone, nothing to show) ───────────────────── */

.cl-home--t3 .cl-hero-3--nobg {
	background:
		radial-gradient(1000px 560px at 82% 16%, rgba(var(--cl-red-rgb, 221, 0, 0), .3), transparent 62%),
		linear-gradient(135deg, #0d1b2a 0%, #182636 55%, #0a0f16 100%);
}

/* ── Overlay: left-weighted for the lockup, gentle on the right ────────────── */

.cl-home--t3 .cl-hero-3__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(100deg, rgba(8, 11, 16, .8) 0%, rgba(8, 11, 16, .52) 45%, rgba(8, 11, 16, .26) 75%, rgba(8, 11, 16, .34) 100%),
		radial-gradient(120% 90% at 50% 110%, rgba(8, 11, 16, .35) 0%, transparent 55%);
	pointer-events: none;
}

/* ── The lockup ────────────────────────────────────────────────────────────── */

.cl-home--t3 .cl-hero-3__inner {
	position: relative;
	z-index: 3;
	width: min(1140px, 100%);
	margin: 0 auto;
	text-align: left;
	color: #fff;
	padding: 96px 28px 88px;
}

.cl-home--t3 .cl-hero-3__eyebrow {
	display: inline-block;
	font: 700 12px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	border-left: 3px solid var(--cl-red, #DD0000);
	padding: 2px 0 2px 12px;
	margin: 0 0 20px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

.cl-home--t3 .cl-hero-3__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-weight: 800;
	font-size: clamp(40px, 4.8vw, 66px);
	line-height: 1.06;
	letter-spacing: -.015em;
	text-transform: none; /* sentence case — slab caps are t4/t5's voice        */
	color: #fff;
	margin: 0 0 18px;
	max-width: 13em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
/* Accent word: red type only (house rule) — cl_hp_rich() output. */
.cl-home--t3 .cl-hero-3__title span,
.cl-home--t3 .cl-hero-3__title strong,
.cl-home--t3 .cl-hero-3__title b,
.cl-home--t3 .cl-hero-3__title em,
.cl-home--t3 .cl-hero-3__title i,
.cl-home--t3 .cl-hero-3__title a {
	color: var(--cl-red, #DD0000);
	background: none;
	text-decoration: none;
	padding: 0;
	font-style: normal;
}

.cl-home--t3 .cl-hero-3__sub {
	font-size: clamp(16px, 1.35vw, 18.5px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
	margin: 0 0 32px;
	max-width: 600px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.cl-home--t3 .cl-hero-3__btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font: 800 15px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
	background: var(--cl-red, #DD0000);
	padding: 19px 34px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.cl-home--t3 .cl-hero-3__btn-arrow { width: 17px; height: 17px; flex: 0 0 auto; }
.cl-home--t3 .cl-hero-3__btn:hover {
	background: var(--cl-red-dark, var(--cl-red-hover, #bb0000));
	transform: translateY(-2px);
	color: #fff;
}
.cl-home--t3 .cl-hero-3__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ── Trust strip (shared block, t3 skin) ───────────────────────────────────── */

.cl-home--t3 .cl-hero-3__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px 26px;
	margin: 26px 0 0;
	font: 600 13.5px/1.4 var(--cl-font, 'Montserrat', sans-serif);
	color: rgba(255, 255, 255, .8);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.cl-home--t3 .cl-hero-3__trust-item { display: inline-flex; align-items: center; gap: 8px; }
.cl-home--t3 .cl-hero-3__stars { color: #f5a623; letter-spacing: 2px; font-size: 14px; line-height: 1; }
.cl-home--t3 .cl-hero-3__trust-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cl-red, #DD0000); }

/* ── Motion off ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cl-home--t3 .cl-hero-3__wall { animation: none; }
	.cl-home--t3 .cl-hero-3__sweep { display: none; }
}

/* ── Small screens ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.cl-home--t3 .cl-hero-3 { min-height: clamp(560px, 82vh, 720px); }
	.cl-home--t3 .cl-hero-3__wall {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 7px;
	}
	.cl-home--t3 .cl-hero-3__cell { border-radius: 8px; }
	/* 2×3 wall on a phone = 6 cells; drop the rest or they'd stack invisible
	   implicit rows below the clip (and lazy-load images nobody sees). */
	.cl-home--t3 .cl-hero-3__cell:nth-child(n+7) { display: none; }
	.cl-home--t3 .cl-hero-3__inner { padding: 72px 20px 64px; }
	.cl-home--t3 .cl-hero-3__title { font-size: clamp(33px, 9.2vw, 44px); }
	.cl-home--t3 .cl-hero-3__sub { font-size: 15.5px; margin-bottom: 26px; }
	.cl-home--t3 .cl-hero-3__btn { padding: 17px 30px; font-size: 14px; }
	.cl-home--t3 .cl-hero-3__trust { gap: 8px 18px; font-size: 12.5px; }
	.cl-home--t3 .cl-hero-3__trust-icon { width: 16px; height: 16px; }
}