/* ═══════════════════════════════════════════════════════════════════════════
   Cart Launch — Homepage TEMPLATE 5 · "THE RIDGELINE"
   Fourth re-cut 2026-07-28g. Owner on the 28f Iron Ribbon: "the golf cart
   dealers are still gonna say too boring, needs to be more image driven.
   Maybe like that but image driven up top and white on the trust badges."
   So the rugged trim stays and the construction flips: the photo IS the hero
   (type on it, under its dark overlay — the one dark the owner allows), the
   trust plates go WHITE, and the divider grows a profile: THE RIDGE, a
   shaped bottom edge with a red weld tracing it into the white page.
   Loaded only when homepage.template = 5, after cl-home.css + cl-home-stubs.css.
   EVERY selector is scoped under .cl-home--t5.

   ONE-SENTENCE LAYOUT: "A full-bleed photo hero in rugged trim — slab caps
   and white steel-plate trust badges on the image — cut off at the bottom by
   a ridged, red-welded divider into the white page."

   THE RIDGE GEOMETRY (the signature — do not straighten it):
     • Two bottom-anchored layers share one 128px box. The WHITE fill is
       clipped to the ridge profile — left edge mid-height, rising to a peak
       ~58% across, then a harder fall to the right edge:
         polygon(0 48%, 58% 12%, 100% 68%, 100% 100%, 0 100%)
     • The RED seam uses the SAME points lifted a constant 12px (calc), so
       the weld traces the whole profile at uniform thickness. Seam stacks
       under the white fill; only the 12px lift shows.
     • The white fill is the page ground — the hero pours through it into
       the white department-cards section. No straight diagonal: the ridge
       (two slopes + a peak) is what makes the edge a SHAPE, per the brief.

   RUGGED DETAILING (carried over from 28f, owner-approved direction):
   chamfered red tag, hazard-stripe grit chip, flat plate button with a cut
   corner, chamfered plate badges — no border-radius anywhere here. Shadows
   on clipped elements use filter: drop-shadow (box-shadow dies on clip-path).

   STUB OVERRIDE NOTE: cl-home-stubs.css ships UNSCOPED .cl-hero-5* rules
   (dark flex-centred root, 88px padding, centred 820px inner, pill eyebrow,
   12px-radius buttons). This file keeps the shared names it still uses
   (__title/__sub/__cta/__btn) and RESETS every stub property it disagrees
   with — the .cl-home--t5 scope out-ranks the stubs' bare selectors and this
   sheet loads after them (deps).

   SCOPE OF THIS FILE = THE HERO ONLY. Not a single .mgc-hp-* selector, ever.
   The department cards stay template 1's plain white baseline.

   Browser budget: no :has(), no color-mix(), no overflow:clip. clip-path
   basic polygons with calc() are inside the Safari budget.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-home--t5 {
	--t5-ink:   #161b23; /* plate badge text                                   */
	--t5-ridge: 128px;   /* ridge strip height (desktop)                       */
	--t5-weld:  12px;    /* red seam thickness along the ridge                 */
}

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

.cl-home--t5 .cl-hero-5 {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(600px, 82vh, 780px);
	padding: 0;                      /* stub reset (was 88px 24px)               */
	background-color: #202835;       /* settles while the photo decodes          */
}

.cl-home--t5 .cl-hero-5__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	/* 28h KEN BURNS: the photo breathes. transform-only (GPU), alternate so
	   there is never a snap. Off under prefers-reduced-motion below. */
	animation: cl-h5-kb 22s ease-in-out infinite alternate;
}
@keyframes cl-h5-kb {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
	.cl-home--t5 .cl-hero-5__media { animation: none; }
}

/* The one dark the owner allows: the photograph's own overlay. Left-weighted
   for the copy, mild on the right so the image stays the star. */
.cl-home--t5 .cl-hero-5__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(10, 14, 20, .74) 0%, rgba(10, 14, 20, .46) 45%, rgba(10, 14, 20, .22) 72%, rgba(10, 14, 20, .32) 100%);
}

/* Fresh clone, no photo: a bold brand-red field with faint diagonal grain —
   never a grey hole, never a dark panel. (PHP omits media+overlay.) */
.cl-home--t5 .cl-hero-5--nobg,
.cl-home--t5 .cl-hero-5.cl-hero-5--nobg {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 30px),
		linear-gradient(135deg, #c40404 0%, #e51212 100%);
}

/* ── The lockup (on the image) ─────────────────────────────────────────────── */

.cl-home--t5 .cl-hero-5__inner {
	position: relative;
	z-index: 2;
	width: min(1140px, 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(--t5-ridge) + 34px);
}

/* Chamfered red tag — the eyebrow, worn like a cut sticker. */
.cl-home--t5 .cl-hero-5__tag {
	display: inline-block;
	font: 800 11.5px/1 var(--cl-font, 'Montserrat', sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--cl-red, #DD0000);
	padding: 10px 18px;
	margin: 0 0 22px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.cl-home--t5 .cl-hero-5__title {
	font-family: var(--cl-font, 'Montserrat', sans-serif) !important;
	font-weight: 800;                /* stub reset (was 700)                     */
	font-size: clamp(40px, 5.2vw, 72px);
	line-height: 1.0;
	letter-spacing: -.01em;
	text-transform: uppercase;       /* slab caps — rugged                       */
	color: #fff;
	margin: 0 0 6px;
	max-width: 13em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .42);
}
/* Accent word: red type only (house rule) — cl_hp_rich() output. */
.cl-home--t5 .cl-hero-5__title span,
.cl-home--t5 .cl-hero-5__title strong,
.cl-home--t5 .cl-hero-5__title b,
.cl-home--t5 .cl-hero-5__title em,
.cl-home--t5 .cl-hero-5__title i,
.cl-home--t5 .cl-hero-5__title a {
	color: var(--cl-red, #DD0000);
	background: none;
	text-decoration: none;
	padding: 0;
	font-style: normal;
}

/* Hazard-stripe grit chip — a standalone motif, never applied to words. */
.cl-home--t5 .cl-hero-5__grit {
	display: block;
	width: 126px;
	height: 10px;
	margin: 14px 0 20px;
	background: repeating-linear-gradient(135deg, var(--cl-red, #DD0000) 0 4px, transparent 4px 11px);
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
}

.cl-home--t5 .cl-hero-5__sub {
	font-size: clamp(16px, 1.3vw, 18.5px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .92); /* stub-adjacent but explicit               */
	margin: 0 0 30px;                /* stub reset (was 0 auto 32px, centred)    */
	max-width: 620px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.cl-home--t5 .cl-hero-5__cta {
	display: flex;
	justify-content: flex-start;     /* stub reset (was center)                  */
	gap: 0;
}
/* Chamfered corner, flat face, no radius — a plate, not a pill. */
.cl-home--t5 .cl-hero-5__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 36px;
	border-radius: 0;                /* stub reset (was 12px)                    */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
	text-decoration: none;
	box-shadow: none;                /* box-shadow dies on clip-path             */
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35));
	transition: background .15s ease, transform .15s ease;
}
.cl-home--t5 .cl-hero-5__btn--primary svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cl-home--t5 .cl-hero-5__btn--primary:hover {
	background: var(--cl-red-dark, var(--cl-red-hover, #bb0000));
	transform: translateY(-2px);
	color: #fff;
}
.cl-home--t5 .cl-hero-5__btn--primary:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ── Trust: WHITE steel plates on the image (owner directive) ──────────────── */

.cl-home--t5 .cl-hero-5__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin: 32px 0 0;
	justify-content: flex-start;
}
.cl-home--t5 .cl-hero-5__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 700 14px/1.3 var(--cl-font, 'Montserrat', sans-serif);
	color: var(--t5-ink);
	background: #fff;
	padding: 14px 20px;
	clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .32));
}
.cl-home--t5 .cl-hero-5__stars {
	color: #f5a623;
	letter-spacing: 2px;
	font-size: 15px;
	line-height: 1;
}
.cl-home--t5 .cl-hero-5__truck {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--cl-red, #DD0000);
}

/* ── 28h · THE SHARDS (angled photo plates, right side, ≥1100px only) ──────── */

/* Each shard = a red plate (the weld edge) with the photo inset 5px, both cut
   to the same skewed polygon. Rotations are slight and alternating so the fan
   reads hand-stacked, not generated. Decorative — pointer-events none. */
.cl-home--t5 .cl-hero-5__shards {
	display: none;
	position: absolute;
	top: 50%;
	right: max(28px, calc((100% - 1240px) / 2));
	transform: translateY(-54%);
	width: 430px;
	height: 470px;
	z-index: 2;
	pointer-events: none;
}
@media (min-width: 1100px) {
	.cl-home--t5 .cl-hero-5__shards { display: block; }
	/* Keep the slab clear of the fan — only when the fan actually renders.
	   Cap the size a notch too, or the narrower measure runs to 5 lines and
	   shoves the button + badges under the fold. */
	.cl-home--t5 .cl-hero-5--shards .cl-hero-5__title { max-width: 11.5em; font-size: clamp(38px, 4.6vw, 58px); }
	.cl-home--t5 .cl-hero-5--shards .cl-hero-5__sub { max-width: 520px; }
}
.cl-home--t5 .cl-hero-5__shard {
	position: absolute;
	background: var(--cl-red, #DD0000);
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));
}
.cl-home--t5 .cl-hero-5__shard img {
	position: absolute;
	inset: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	object-fit: cover;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.cl-home--t5 .cl-hero-5__shard--1 { width: 300px; height: 212px; top: 0;     right: 44px; transform: rotate(-3deg);  z-index: 1; }
.cl-home--t5 .cl-hero-5__shard--2 { width: 262px; height: 186px; top: 152px; right: 0;    transform: rotate(2.5deg); z-index: 2; }
.cl-home--t5 .cl-hero-5__shard--3 { width: 232px; height: 162px; top: 296px; right: 96px; transform: rotate(-2deg);  z-index: 3; }

/* ── THE RIDGE (the section divider) ───────────────────────────────────────── */

.cl-home--t5 .cl-hero-5__ridge-seam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--t5-ridge);
	z-index: 4;
	background: var(--cl-red, #DD0000);
	clip-path: polygon(0 calc(48% - var(--t5-weld)), 58% calc(12% - var(--t5-weld)), 100% calc(68% - var(--t5-weld)), 100% 100%, 0 100%);
	pointer-events: none;
}
.cl-home--t5 .cl-hero-5__ridge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--t5-ridge);
	z-index: 5;
	/* SYNC POINT (owner, 2026-07-28: "make the gray fill in all the way up to
	   the angled red line"; owner, 2026-08-06: "the space under the hero
	   section to sync with the band color in the theme settings. There is a
	   two color difference").

	   The ridge fill IS the top of the first section below the hero, so it has
	   to be that section's colour exactly. It used to be hardcoded #f2f6fb to
	   match a since-removed .mgc-hp-dept override. The tinted band is now a
	   Theme Editor setting (homepage.section_tint), printed by front-page-cl.php
	   as --cl-hp-tint on .cl-home, so a hardcoded value here is wrong twice
	   over: it was two shades off the stock tint (#f2f6fb vs #f4f7fb), and it
	   ignored the dealer's own colour entirely — on the demo, set to #E7EDF6,
	   the seam under the hero was visibly a different grey to the section it
	   poured into.

	   Reading the same custom property means this follows the setting forever
	   and there is nothing left to keep in sync by hand. The fallback repeats
	   the PHP fallback so the two cannot drift. */
	background: var(--cl-hp-tint, #f4f7fb);
	clip-path: polygon(0 48%, 58% 12%, 100% 68%, 100% 100%, 0 100%);
	pointer-events: none;
}

/* ── DOCUMENTED EXCEPTION to the hero-only rule (owner, 2026-07-28: "there
   is still a thin line, I don't want that line there"): the shared light
   baseline gives .mgc-hp-dept a 1px #e6ecf3 top border as a section divider.
   On every other template that hairline sits against a photo/white edge and
   reads as intentional; on t5 the ridge pours the SAME tint (--cl-hp-tint) into
   the section, so the border is a stray line across an otherwise seamless
   surface. This is a one-property, t5-scoped seam fix — it restyles no card
   and nothing else in the section. !important because the inline baseline
   rule it overrides is !important; the extra scope out-ranks it. */
.cl-home--t5 .mgc-hp-dept { border-top: 0 !important; }

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

@media (max-width: 640px) {
	.cl-home--t5 { --t5-ridge: 84px; --t5-weld: 9px; }
	.cl-home--t5 .cl-hero-5 { min-height: clamp(560px, 84vh, 720px); }
	.cl-home--t5 .cl-hero-5__inner { padding: 72px 20px calc(var(--t5-ridge) + 28px); }
	.cl-home--t5 .cl-hero-5__title { font-size: clamp(34px, 9.6vw, 46px); }
	.cl-home--t5 .cl-hero-5__sub { font-size: 15.5px; margin-bottom: 26px; }
	.cl-home--t5 .cl-hero-5__btn--primary { padding: 17px 30px; font-size: 14px; }
	.cl-home--t5 .cl-hero-5__badges { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }
	.cl-home--t5 .cl-hero-5__badge { font-size: 13px; padding: 11px 15px; }
}