/**
 * [HP] Template 6 — "VIDEO HERO" (cinematic). Every selector is scoped under
 * .cl-home--t6, so nothing leaks onto templates 1-5. The two-class scope (0,2,0)
 * out-specifies the shared inline #mgc-home-redesign block (0,1,0).
 * States: --video (muted looped <video>) / --still (photo) / --no-img (gradient).
 * Safari budget: no :has(), no color-mix(), no overflow:clip.
 *
 * 2026-07-28b revision: this file now styles the HERO AND NOTHING ELSE. Every
 * rule that darkened or re-toned a shared section below the hero — the page
 * background, the department cards, "This Week's Deals", the CTA band, the
 * section-heading overrides — has been deleted so the shared light baseline in
 * front-page-cl.php renders those sections exactly as template 1 does.
 *
 * 2026-07-28c revision — DE-POSTER. Owner: "On the video header I dont want it
 * to have a fallback image because it creates a flash of the fallback image
 * first." So in the --video state there is NO still image at all (no <img>, no
 * poster attribute — see parts/hero-6.php): the layer under the footage is a
 * flat brand-dark field, and the video fades up over it once it genuinely has
 * frames. Colour -> footage is not a flash; image -> different image is.
 * The --still state (no video configured) keeps its photograph on purpose —
 * there the photo IS the hero and nothing ever replaces it.
 */

/* ═══ THE STAGE ═══════════════════════════════════════════════════════════ */

.cl-home--t6 .cl-hero-6 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
	/* No JS: a tall, cinematic block. With JS: exactly the viewport below the
	   header minus a sliver, so the department cards peek underneath.
	   --cl-h6-head is the hero's OWN measured document offset (hero-6.php), so
	   it already accounts for the header at whatever height the dealer's logo
	   has made it, plus any announcement bar sitting above it.

	   2026-08-14 (owner: "when I make the mobile header bigger because of the
	   logo it cuts off the hero section … how do I fix that so that the hero
	   starts at the bottom of the menu no matter what"). Two changes, and the
	   pair is the fix — neither alone is enough:

	   1. min-height, not height. A fixed height plus overflow:hidden means any
	      content taller than the box gets silently cut off at BOTH ends by the
	      flex centring. Neither a headline's length nor a phone's height is
	      under our control, so the box has to be free to grow.
	   2. no fixed floor. `min-height: 660px` (600px on phones) is what actually
	      broke it: a floor taller than what the screen has left is not a floor,
	      it is an overflow. Measured on the fixture, a 375x667 phone put the
	      hero 114px past the fold at a 160px logo — and 4px past it even at the
	      default 46px logo, so this was already slightly wrong before anyone
	      touched a logo. The calc IS the floor now; on a short screen the hero
	      is simply shorter, which is the honest answer and keeps the peek. */
	min-height: calc(100svh - var(--cl-h6-head, 12vh) - 58px);
	height: auto;
	max-height: none;
}
/* Full-bleed brand rule fused to the bottom edge — a hard, deliberate seam
   between the dark hero and the light page. No gradient bleeds past it. */
.cl-home--t6 .cl-hero-6::after {
	content: "";
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: var(--cl-red, #DD0000);
}

/* The media layer. Its own dark base only ever shows through the hero rect —
   it is the backdrop for the photo/video, not a page background. */
.cl-home--t6 .cl-hero-6__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: #0a1018;
}

/* ── THE VIDEO BRANCH'S FLOOR ──────────────────────────────────────────────
   A SOLID DEEP BRAND-DARK FIELD — no photograph, ever. This is what a visitor
   sees for the fraction of a second before the footage has frames, and it is
   the whole point of the 2026-07-28c fix: a flat colour giving way to footage
   reads as the video starting, not as one picture being swapped for another.
   Do not put a background-image (or a `poster`) back here. */
.cl-home--t6 .cl-hero-6--video .cl-hero-6__stage {
	background-color: #070d14;
	background-image:
		radial-gradient(78% 62% at 50% 108%, rgba(var(--cl-red-rgb, 221, 0, 0), .2), transparent 68%),
		linear-gradient(168deg, #101d2c 0%, #0a121c 52%, #060a11 100%);
}

/* No photo and no video at all -> a rich, intentional brand gradient. The
   modifier is `--no-img`, matching hero-5 and cl-home-stubs.css:23; the stub's
   own gradient lands on the <section>, which this opaque __stage covers.
   PHP only ever adds `--no-img` in the still branch, so this can never fight
   the video floor above. */
.cl-home--t6 .cl-hero-6--no-img .cl-hero-6__stage {
	background:
		radial-gradient(66% 58% at 82% 4%, rgba(var(--cl-red-rgb, 221, 0, 0), .95), transparent 66%),
		radial-gradient(88% 76% at 6% 100%, rgba(38, 96, 160, .9), transparent 66%),
		linear-gradient(152deg, #16324f 0%, #1b3d5e 46%, #0a1523 100%);
}
/* The photo scrim would flatten the gradient — lighten it for this state only. */
.cl-home--t6 .cl-hero-6--no-img .cl-hero-6__scrim {
	background:
		linear-gradient(180deg, rgba(4, 9, 16, .42) 0%, rgba(4, 9, 16, .18) 30%, rgba(4, 9, 16, .3) 62%, rgba(4, 9, 16, .82) 100%),
		radial-gradient(100% 78% at 50% 46%, rgba(4, 9, 16, 0) 0%, rgba(4, 9, 16, .34) 100%);
}

/* `__photo` is the STILL-BRANCH photograph (renamed from `__poster` on
   2026-07-28c so nobody reads "poster" and reintroduces one in the video
   branch — it is never emitted when a video is configured). */
.cl-home--t6 .cl-hero-6__photo,
.cl-home--t6 .cl-hero-6__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
}

.cl-home--t6 .cl-hero-6__photo {
	z-index: 0;
	transform: scale(1.05);
	animation: cl6-drift 30s ease-in-out infinite alternate;
}

/* The video sits over the brand-dark field — NOT over an image; there is no
   image in this branch. The fade below is REAL, not decorative: the hero script
   adds .is-js the moment it runs (so the video goes back to transparent) and
   adds .is-vshown from the element's OWN loadeddata/playing events, i.e. only
   once it truly has a frame to paint.
   .is-vshown is one-way and is NOT removed on pause: fading back to the flat
   colour when the visitor hits pause would be a second visible swap, and a
   paused <video> keeps painting its current frame anyway.
   With JS disabled neither class exists, the --video rule stands, and the video
   is simply visible from first paint (the correct no-JS render). */
.cl-home--t6 .cl-hero-6__video {
	z-index: 1;
	opacity: 0;
	transition: opacity .7s ease;
}
.cl-home--t6 .cl-hero-6--video .cl-hero-6__video { opacity: 1; }
.cl-home--t6 .cl-hero-6--video.is-js .cl-hero-6__video { opacity: 0; }
.cl-home--t6 .cl-hero-6--video.is-js.is-vshown .cl-hero-6__video { opacity: 1; }

@keyframes cl6-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.11) translate3d(0, -1.2%, 0); }
}

/* ── Cinematic scrim: even mid-tone darkening + heavy top/bottom + vignette,
   sized so white type clears 4.5:1 even over a blown-out sky. ───────────── */
.cl-home--t6 .cl-hero-6__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	display: block;
	background:
		linear-gradient(180deg, rgba(4, 9, 16, .62) 0%, rgba(4, 9, 16, .42) 26%, rgba(4, 9, 16, .44) 58%, rgba(4, 9, 16, .9) 100%),
		radial-gradient(104% 82% at 50% 44%, rgba(4, 9, 16, 0) 0%, rgba(4, 9, 16, .4) 100%),
		radial-gradient(58% 52% at 50% 116%, rgba(var(--cl-red-rgb, 221, 0, 0), .28), transparent 70%);
}

/* ── The film frame is GONE (owner, 2026-08-06: "remove the thin line around
   the video"). It was a hairline inset rule, 1px of white at 20% set in about
   14 to 30 pixels from every edge, meant to read as a film frame around the
   footage. On real dealer video it read as a hard box drawn on top of the
   picture instead, so the footage now runs edge to edge with nothing over it
   but the scrim. The <span class="cl-hero-6__frame"> is removed from
   parts/hero-6.php as well, so there is no orphan element left behind and no
   rule here waiting to repaint it. Do not reintroduce it. ─────────────────── */

/* ═══ CONTENT — centered, film-poster ═════════════════════════════════════ */

.cl-home--t6 .cl-hero-6__inner {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: clamp(84px, 12vh, 132px) clamp(22px, 5vw, 64px) clamp(96px, 13vh, 150px);
	text-align: center;
	color: #fff;
	animation: cl6-rise .8s cubic-bezier(.16, .84, .34, 1) both;
}
@keyframes cl6-rise {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Eyebrow — glass pill with a live brand dot */
.cl-home--t6 .cl-hero-6__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 9px 18px 9px 14px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.cl-home--t6 .cl-hero-6__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cl-red, #DD0000);
	animation: cl6-pulse 2.4s ease-out infinite;
}
@keyframes cl6-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--cl-red-rgb, 221, 0, 0), .7); }
	70%  { box-shadow: 0 0 0 10px rgba(var(--cl-red-rgb, 221, 0, 0), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--cl-red-rgb, 221, 0, 0), 0); }
}

/* Headline — huge, ALL CAPS (uppercased here, never in PHP) */
.cl-home--t6 .cl-hero-6__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-size: clamp(36px, 5.1vw, 70px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.024em;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
	margin: 0 auto 20px;
	max-width: 23ch;
	text-shadow: 0 6px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}
/* The accent word(s). OWNER DECISION 2026-07-28: the solid brand slab that
   used to sit behind these words is gone — no highlight, no underline, red
   type only. Every inline tag cl_hp_rich()'s kses set allows is covered
   (span/strong/b/em/i/a — see front-page-cl.php:66-77), so a dealer who bolds
   or links the accent word still gets the accent. <br> is excluded on purpose.
   NOTE: the accent can only arrive through the Site Content rich field; a
   Theme Editor `homepage.hero.headline` override is esc_html()'d and renders
   plain — identical to hero-4 and hero-5, deliberately not diverged. */
.cl-home--t6 .cl-hero-6__title span,
.cl-home--t6 .cl-hero-6__title strong,
.cl-home--t6 .cl-hero-6__title b,
.cl-home--t6 .cl-hero-6__title em,
.cl-home--t6 .cl-hero-6__title i,
.cl-home--t6 .cl-hero-6__title a {
	background: none;
	color: var(--cl-red, #DD0000);
	padding: 0;
	margin: 0;
	border-radius: 0;
	font-style: normal;
	font-weight: inherit;
	text-decoration: none;
}

.cl-home--t6 .cl-hero-6__sub {
	font-size: clamp(16.5px, 1.55vw, 20px);
	line-height: 1.55;
	font-weight: 400;
	color: rgba(255, 255, 255, .9);
	margin: 0 auto 34px;
	max-width: 640px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

/* ── CTAs ────────────────────────────────────────────────────────────────── */
.cl-home--t6 .cl-hero-6__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.cl-home--t6 .cl-hero-6__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 62px;
	padding: 20px 38px;
	border-radius: 4px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.cl-home--t6 .cl-hero-6__btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform .16s ease;
}
.cl-home--t6 .cl-hero-6__btn--primary {
	background: var(--cl-red, #DD0000);
	color: #fff;
	box-shadow: 0 20px 44px -14px rgba(var(--cl-red-rgb, 221, 0, 0), .75), 0 4px 14px rgba(0, 0, 0, .35);
}
.cl-home--t6 .cl-hero-6__btn--primary:hover,
.cl-home--t6 .cl-hero-6__btn--primary:focus {
	background: var(--cl-red-hover, var(--cl-red-dark, #b70000));
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 28px 56px -16px rgba(var(--cl-red-rgb, 221, 0, 0), .85), 0 6px 18px rgba(0, 0, 0, .4);
}
.cl-home--t6 .cl-hero-6__btn--primary:hover svg { transform: translateX(4px); }
/* --ghost (the old "Get Financing" button) was removed 2026-07-28 on the
   owner's instruction — the hero has ONE call to action. Its rules are gone
   with it; do not reintroduce them. */
.cl-home--t6 .cl-hero-6__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

/* ── The video play/pause chip is GONE (owner, 2026-08-06: "Remove the play
   pause button on homepage 6"). It was a round glass button the hero script
   built in the bottom right corner whenever a video was configured. Its rules
   lived here; the script that created it is removed from parts/hero-6.php, so
   nothing builds the element any more and nothing here would style it.

   WHAT STILL HOLDS THE MOTION: the video is muted, looped and decorative, and
   a visitor who has asked their device to reduce motion still gets a still
   picture, because the script continues to stop the video on its first decoded
   frame under prefers-reduced-motion. That behaviour is the reason removing
   the button is safe, so it is not optional and must not be dropped as dead
   code later. Do not reintroduce the button. ─────────────────────────────── */

/* Everything below the hero — department cards, deals, reviews, why, CTA band —
   is intentionally NOT styled here. The shared light baseline owns it. */

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	/* Same correction as the desktop rule above, and this is the width the
	   owner reported it on: the phone header is the one that grows, because
	   the phone logo height is a dealer setting. */
	.cl-home--t6 .cl-hero-6 {
		min-height: calc(100svh - var(--cl-h6-head, 12vh) - 56px);
		height: auto;
		max-height: none;
	}
	.cl-home--t6 .cl-hero-6__scrim {
		background:
			linear-gradient(180deg, rgba(4, 9, 16, .8) 0%, rgba(4, 9, 16, .52) 24%, rgba(4, 9, 16, .58) 56%, rgba(4, 9, 16, .95) 100%),
			radial-gradient(110% 70% at 50% 46%, rgba(4, 9, 16, .32) 0%, rgba(4, 9, 16, .76) 100%);
	}
}

@media (max-width: 620px) {
	.cl-home--t6 .cl-hero-6__inner {
		padding-top: clamp(56px, 9vh, 88px);
		padding-bottom: clamp(84px, 12vh, 112px);
	}
	.cl-home--t6 .cl-hero-6__title {
		font-size: clamp(34px, 10.4vw, 50px);
		max-width: 100%;
		letter-spacing: -.02em;
	}
	.cl-home--t6 .cl-hero-6__sub { font-size: 16.5px; margin-bottom: 26px; }
	.cl-home--t6 .cl-hero-6__eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 18px; }
	.cl-home--t6 .cl-hero-6__cta { flex-direction: column; align-items: stretch; }
	.cl-home--t6 .cl-hero-6__btn { width: 100%; padding: 19px 22px; }
	/* The phone-width tightening of the film frame and the repositioning of the
	   pause chip both went with the elements themselves on 2026-08-06. */
}

/* Short phone, tall header. 2026-08-14: the phone logo setting goes up to
   160px, which leaves a 667px-tall phone about 450px for the hero. The hero
   itself now shrinks to fit rather than clipping (see the note on .cl-hero-6),
   but its own breathing room does not, and up to 200px of vertical padding on a
   450px budget is what puts the buttons under the fold.

   Keyed on HEIGHT, not on the logo: the squeeze is identical whether it came
   from a big logo, an announcement bar, or a small phone held in landscape.
   Placed after the 620px block on purpose — that block re-declares the same two
   properties at the same specificity, so anything earlier loses to it. */
@media (max-width: 900px) and (max-height: 730px) {
	.cl-home--t6 .cl-hero-6__inner {
		padding-top: 34px;
		padding-bottom: 54px;
	}
}

/* ═══ REDUCED MOTION — the video's own first frame holds still ═══════════ */

@media (prefers-reduced-motion: reduce) {
	/* There is no poster to fall back to any more, so hiding the video here
	   would leave a reduced-motion visitor staring at a flat colour panel. The
	   script instead PAUSES the video on its first decoded frame (see
	   parts/hero-6.php): still footage, no second image.
	   All that is suppressed is the fade itself, which snaps instead.
	   2026-08-06: this is now the ONLY thing that stops the motion, because the
	   on-screen pause button was removed at the owner's request. Keep it. */
	.cl-home--t6 .cl-hero-6__video { transition: none !important; }
	.cl-home--t6 .cl-hero-6__photo { animation: none; transform: scale(1.02); }
	.cl-home--t6 .cl-hero-6__inner { animation: none; }
	.cl-home--t6 .cl-hero-6__dot { animation: none; }
	.cl-home--t6 .cl-hero-6__btn { transition: none !important; }
}

/* == Trust strip ==========================================================
   Owner, 2026-07-28: "add the hundreds of happy neighbors and delivery
   available to all of these." Same two claims as template 1, restyled for
   light-on-dark. Location-free by construction (no store, phone, address or
   hours), so §1 of HOMEPAGE-REVISION-2026-07-28c.md still holds.

   Centred to match the t6 lockup, and static markup inside
   .cl-hero-6__inner, so it renders in BOTH the video and no-video branches
   and survives with JS off. The truck is an inline SVG in the markup - the
   child theme never enqueues Font Awesome.                                   */
.cl-home--t6 .cl-hero-6__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
	margin: 24px 0 0;
	font: 600 13.5px/1.4 var(--cl-font, 'Montserrat', sans-serif);
	color: rgba(255, 255, 255, .78);
}
.cl-home--t6 .cl-hero-6__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-home--t6 .cl-hero-6__stars {
	color: #f5a623;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
}
.cl-home--t6 .cl-hero-6__trust-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--cl-red, #DD0000);
}

@media (max-width: 560px) {
	.cl-home--t6 .cl-hero-6__trust { gap: 8px 18px; margin-top: 20px; font-size: 12.5px; }
	.cl-home--t6 .cl-hero-6__trust-icon { width: 16px; height: 16px; }
}