/* ═══════════════════════════════════════════════════════════════════════════
   Cart Launch — Homepage TEMPLATE 4 · "THE POSTER"
   Full re-cut 2026-07-28d (owner: "make 4 a super badass hero… whatever you
   come up with"). The previous SPLIT MOSAIC construction is gone entirely.
   Loaded only when homepage.template = 4, after cl-home.css + cl-home-stubs.css.
   EVERY selector is scoped under .cl-home--t4, so nothing here can leak onto
   templates 1/2/3/5/6.

   ONE-SENTENCE LAYOUT: "A full-screen photograph under a poster-sized headline,
   one red button, and a red ticker tape scrolling the dealer's tagline along
   the bottom edge."

   STUB OVERRIDE NOTE: cl-home-stubs.css ships UNSCOPED .cl-hero-4* rules
   (padding 88px 24px, __inner max-width 820 centred, pill __eyebrow, 12px-radius
   __btn). This file keeps the .cl-hero-4 class names for graceful degradation
   (stubs still paint something if this sheet ever fails to load) and RESETS
   every stub property it disagrees with — the .cl-home--t4 scope out-ranks the
   stubs' bare class selectors, and this sheet is enqueued after them (deps).
   If you add a new element here, check cl-home-stubs.css for a colliding rule
   first.

   SCOPE OF THIS FILE = THE HERO ONLY. Everything below the hero's bottom edge —
   the four department cards, deals, financing, Cart of the Week, reviews,
   why-us, service, CTA — belongs to the shared LIGHT baseline printed by
   front-page-cl.php. There is deliberately not a single .mgc-hp-* selector in
   this file, and there must never be one.

   THE TICKER (signature element):
     • Solid brand-red band fused to the hero's bottom edge, white caps text
       scrolling right-to-left. Content = the dealer's eyebrow line (editable).
     • Seamless loop: the track holds TWO identical groups and animates
       translateX(-50%) — half the track is exactly one group, so the loop
       point is invisible. Do not change the -50% or the group count alone.
     • width: max-content keeps the track's real width; the band's
       overflow: hidden clips it, so the page can never scroll horizontally
       because of the ticker.
     • prefers-reduced-motion pauses it dead — the band then just reads as a
       static red strip with the tagline, which still works as a design.

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

.cl-home--t4 {
	--t4-ink:   #0a0f16; /* scrim / fallback base — deep neutral, not pure black */
	--t4-band:  46px;    /* ticker band height budget (13px pad ×2 + 14px type + line) */
}

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

.cl-home--t4 .cl-hero-4 {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* 80vh, not taller: the header eats ~150px, and the red ticker band is the
	   design's punchline — it must be INSIDE the first viewport at 1440×900,
	   not a scroll away. 86vh put the band 28px below the fold. */
	min-height: clamp(540px, 80vh, 760px);
	padding: 0;                      /* stub reset (was 88px 24px) — inner pads  */
	background-color: var(--t4-ink); /* under the photo while it loads           */
}

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

/* No photo yet (fresh clone): a deliberate brand field, never a grey box. */
.cl-home--t4 .cl-hero-4--nobg {
	background-image:
		radial-gradient(1000px 560px at 84% 18%, rgba(221, 0, 0, .30), transparent 62%),
		linear-gradient(135deg, #0d1b2a 0%, #182636 55%, #0a0f16 100%);
}

/*
 * Legibility: a left-weighted wash for the poster type plus a light bottom
 * wash so the photo settles into the red band instead of butting against it.
 * The type also carries a soft shadow (belt and braces on busy photos).
 */
.cl-home--t4 .cl-hero-4__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(8, 12, 18, .86) 0%, rgba(8, 12, 18, .58) 38%, rgba(8, 12, 18, .16) 68%, rgba(8, 12, 18, 0) 88%),
		linear-gradient(0deg, rgba(8, 12, 18, .42) 0%, rgba(8, 12, 18, 0) 30%);
}

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

.cl-home--t4 .cl-hero-4__inner {
	position: relative;
	z-index: 2;
	width: min(1220px, 100%);
	max-width: none;                 /* stub reset (was 820px)                   */
	margin: 0 auto;
	text-align: left;                /* stub reset (was center)                  */
	color: #fff;
	padding: 96px 28px calc(var(--t4-band) + 72px);
}

.cl-home--t4 .cl-hero-4__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-weight: 800;                /* stub reset (was 700)                     */
	font-size: clamp(44px, 7vw, 96px);
	line-height: .98;                /* poster leading — stub reset (was 1.03)   */
	letter-spacing: -.015em;
	text-transform: uppercase;       /* stub reset (was none)                    */
	color: #fff;
	margin: 0 0 22px;
	max-width: 12em;                 /* keeps a long headline from running wall-to-wall */
	text-shadow: 0 2px 26px rgba(0, 0, 0, .38);
}
/* Accent word: red type only (house rule) — cl_hp_rich() output. */
.cl-home--t4 .cl-hero-4__title span,
.cl-home--t4 .cl-hero-4__title strong,
.cl-home--t4 .cl-hero-4__title b,
.cl-home--t4 .cl-hero-4__title em,
.cl-home--t4 .cl-hero-4__title i,
.cl-home--t4 .cl-hero-4__title a {
	color: var(--cl-red, #DD0000);
	background: none;
	text-decoration: none;
	padding: 0;
	font-style: normal;
}

.cl-home--t4 .cl-hero-4__sub {
	font-size: clamp(16.5px, 1.4vw, 19px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 34px;                /* stub reset (was 0 auto 32px, centred)    */
	max-width: 560px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* ── The one action ────────────────────────────────────────────────────────── */

.cl-home--t4 .cl-hero-4__cta {
	display: flex;
	justify-content: flex-start;     /* stub reset (was center)                  */
	gap: 0;
}

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

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

.cl-home--t4 .cl-hero-4__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, .78);
	/* Unlike t2/t3 this strip can sit over an UNSCRIMMED bright part of the
	   photo (the wash fades left-to-right), so it carries its own shadow. */
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.cl-home--t4 .cl-hero-4__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-home--t4 .cl-hero-4__stars {
	color: #f5a623;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
}
.cl-home--t4 .cl-hero-4__trust-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--cl-red, #DD0000);
}

/* ── The ticker ────────────────────────────────────────────────────────────── */

.cl-home--t4 .cl-hero-4__ticker {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	overflow: hidden;
	background: var(--cl-red, #DD0000);
	padding: 14px 0;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
.cl-home--t4 .cl-hero-4__ticker-track {
	display: flex;
	width: max-content;
	animation: cl-h4-ticker 30s linear infinite;
}
.cl-home--t4 .cl-hero-4__ticker-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.cl-home--t4 .cl-hero-4__ticker-item {
	font: 800 13.5px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.cl-home--t4 .cl-hero-4__ticker-star {
	color: rgba(255, 255, 255, .55);
	margin: 0 28px;
	font-size: 11px;
	line-height: 1;
}
@keyframes cl-h4-ticker {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cl-home--t4 .cl-hero-4__ticker-track { animation: none; }
}

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

@media (max-width: 640px) {
	/* batch79 (owner: "on mobile its too low. Can we make the bottom of that
	   fit in the view height of the screen?"). 88vh measured the LAYOUT
	   viewport, which on a phone includes the space behind the browser's own
	   bars — so 88vh of hero under the ~72px site header put the red ticker
	   band just below what the visitor can actually see. svh is the SMALL
	   viewport: the screen with the browser chrome showing, exactly what is
	   visible before anyone scrolls. Hero = 100svh minus the header, so the
	   ticker's bottom edge lands at the true fold on load. The vh line stays
	   first as the fallback for engines without svh (they keep the old
	   behavior rather than breaking). Floor drops to 480px so short landscape
	   phones never overflow either. */
	/* 2026-08-14: that 72px was a hardcoded guess at the header, and it stops
	   being true the moment a dealer sets a taller phone logo — the setting
	   goes to 160px, which makes the bar about 181px. --cl-header-h is the real
	   measurement, published by cl-home.js; 72px stays as the fallback so a
	   no-JS render behaves exactly as it did before. */
	.cl-home--t4 .cl-hero-4 { min-height: clamp(480px, 88vh, 760px); min-height: clamp(480px, calc(100svh - var(--cl-header-h, 72px)), 760px); }
	.cl-home--t4 .cl-hero-4__inner { padding: 80px 20px calc(var(--t4-band) + 56px); }
	.cl-home--t4 .cl-hero-4__title { font-size: clamp(40px, 11.5vw, 52px); margin-bottom: 18px; }
	.cl-home--t4 .cl-hero-4__sub { font-size: 15.5px; margin-bottom: 28px; }
	.cl-home--t4 .cl-hero-4__btn--primary { padding: 17px 28px; font-size: 14px; }
	.cl-home--t4 .cl-hero-4__trust { gap: 8px 18px; margin-top: 22px; font-size: 12.5px; }
	.cl-home--t4 .cl-hero-4__trust-icon { width: 16px; height: 16px; }
	.cl-home--t4 .cl-hero-4__ticker { padding: 12px 0; }
	.cl-home--t4 .cl-hero-4__ticker-item { font-size: 12px; }
	.cl-home--t4 .cl-hero-4__ticker-star { margin: 0 20px; }
}