/**
 * [HP] Template 7 — "STILL HERO" (cinematic, photograph). Every selector is
 * scoped under .cl-home--t7, so nothing leaks onto templates 1-6. The two-class
 * scope (0,2,0) out-specifies the shared inline #mgc-home-redesign block (0,1,0).
 * States: --still (photo) / --no-img (gradient). There is no --video state.
 * Safari budget: no :has(), no color-mix(), no overflow:clip.
 *
 * 2026-08-25 (owner ask: "Hero 7 and its the same as hero 6 its just an image
 * instead of a video the same setup and layout though"). This file is a direct
 * port of cl-home-t6.css with the same geometry, type scale, scrim, entrance
 * animations, trust strip, red bottom rule and responsive rules — so the two
 * templates stay visually identical below the media layer. The ONLY things
 * dropped are the video branch's flat brand-dark floor, the <video> fade
 * (.is-js/.is-vshown) and the reduced-motion rule that froze the footage,
 * because parts/hero-7.php never emits a <video> element for them to style.
 *
 * KEEPING THE TWO IN SYNC: if hero 6's geometry, scrim or type is re-cut, re-cut
 * this file the same way. They are deliberately the same composition — the
 * difference is the media, not the design. Anything you change in only one of
 * them is a bug in the other.
 *
 * Like t6 this file styles the HERO AND NOTHING ELSE. Every section below the
 * hero renders from the shared light baseline in front-page-cl.php, exactly as
 * template 1 does.
 */

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

.cl-home--t7 .cl-hero-7 {
	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-h7-head is the hero's OWN measured document offset (hero-7.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-h7-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--t7 .cl-hero-7::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 photograph, not a page background. */
.cl-home--t7 .cl-hero-7__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: #0a1018;
}

/* No hero photo set -> a rich, intentional brand gradient, so a freshly cloned
   site never shows an empty box. The modifier is `--no-img`, matching hero-5,
   hero-6 and cl-home-stubs.css:23; the stub's own gradient lands on the
   <section>, which this opaque __stage covers. */
.cl-home--t7 .cl-hero-7--no-img .cl-hero-7__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--t7 .cl-hero-7--no-img .cl-hero-7__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 hero in this template — the only media layer there is, and
   the LCP element (parts/hero-7.php marks it fetchpriority="high"). In t6 the
   box rules below were shared with the <video>; here they belong to the photo
   alone, so the two rules are merged. */
.cl-home--t7 .cl-hero-7__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
	transform: scale(1.05);
	animation: cl7-drift 30s ease-in-out infinite alternate;
}

@keyframes cl7-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--t7 .cl-hero-7__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%);
}

/* ── NOTHING IS DRAWN OVER THE PHOTOGRAPH but the scrim. Template 6 carried a
   hairline inset "film frame" until 2026-08-06 (owner: "remove the thin line
   around the video") — it read as a hard box drawn on top of the picture. This
   template was cut from t6 after that removal and never had one. Do not add a
   border, an inset rule or an outline to the stage. ───────────────────────── */

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

.cl-home--t7 .cl-hero-7__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: cl7-rise .8s cubic-bezier(.16, .84, .34, 1) both;
}
@keyframes cl7-rise {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}

/* Eyebrow — glass pill with a live brand dot */
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cl-red, #DD0000);
	animation: cl7-pulse 2.4s ease-out infinite;
}
@keyframes cl7-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--t7 .cl-hero-7__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--t7 .cl-hero-7__title span,
.cl-home--t7 .cl-hero-7__title strong,
.cl-home--t7 .cl-hero-7__title b,
.cl-home--t7 .cl-hero-7__title em,
.cl-home--t7 .cl-hero-7__title i,
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__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--t7 .cl-hero-7__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform .16s ease;
}
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__btn--primary:hover,
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__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--t7 .cl-hero-7__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

/* ── NO MEDIA CONTROL. Template 6 had a round glass play/pause chip here until
   2026-08-06 (owner: "Remove the play pause button on homepage 6"). This
   template has no media element to control at all — the only motion is the slow
   drift on the photograph, which prefers-reduced-motion stops outright at the
   foot of this file. ─────────────────────────────────────────────────────── */

/* 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--t7 .cl-hero-7 {
		min-height: calc(100svh - var(--cl-h7-head, 12vh) - 56px);
		height: auto;
		max-height: none;
	}
	.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__inner {
		padding-top: clamp(56px, 9vh, 88px);
		padding-bottom: clamp(84px, 12vh, 112px);
	}
	.cl-home--t7 .cl-hero-7__title {
		font-size: clamp(34px, 10.4vw, 50px);
		max-width: 100%;
		letter-spacing: -.02em;
	}
	.cl-home--t7 .cl-hero-7__sub { font-size: 16.5px; margin-bottom: 26px; }
	.cl-home--t7 .cl-hero-7__eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 18px; }
	.cl-home--t7 .cl-hero-7__cta { flex-direction: column; align-items: stretch; }
	.cl-home--t7 .cl-hero-7__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-7),
   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--t7 .cl-hero-7__inner {
		padding-top: 34px;
		padding-bottom: 54px;
	}
}

/* ═══ REDUCED MOTION — the photo holds still ═════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	/* No video in this template, so the only motion to suppress is the slow
	   Ken Burns drift on the photograph plus the entrance animations. The photo
	   itself is never hidden — it IS the hero, and hiding it would leave a
	   reduced-motion visitor staring at a flat colour panel. */
	.cl-home--t7 .cl-hero-7__photo { animation: none; transform: scale(1.02); }
	.cl-home--t7 .cl-hero-7__inner { animation: none; }
	.cl-home--t7 .cl-hero-7__dot { animation: none; }
	.cl-home--t7 .cl-hero-7__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-7__inner, so it renders whether or not a hero photo is set
   and survives with JS off. The truck is an inline SVG in the markup - the
   child theme never enqueues Font Awesome.                                   */
.cl-home--t7 .cl-hero-7__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--t7 .cl-hero-7__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-home--t7 .cl-hero-7__stars {
	color: #f5a623;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
}
.cl-home--t7 .cl-hero-7__trust-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--cl-red, #DD0000);
}

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