/**
* [HP] Template 2 - SEARCH HERO. Loaded only when homepage.template = 2 (or in
* admin preview), after cl-home.css. EVERY selector is scoped under
* .cl-home--t2 - nothing can leak to templates 1/3/4/5/6.
*
* Redesign 2026-07-28 (HOMEPAGE-DESIGN-BRIEF-2026-07-28.md): full-bleed
* dealership photo, cinematic scrim, oversized ALL-CAPS headline (uppercased
* HERE, never in PHP), one subtitle line, and the real inventory search as a
* bold solid slab.
*
* Revision 2026-07-28b (HOMEPAGE-REVISION-2026-07-28b.md): the hero above is
* approved and unchanged; EVERYTHING BELOW IT IS THE SHARED LIGHT DEFAULT. The
* dark department band, the photo-backed dept cards and the dark/typographic
* re-tones of the shared sections were all deleted so front-page-cl.php's
* #mgc-home-redesign baseline renders them exactly as template 1 does. This
* file is therefore hero-only - it must never match anything outside .cl-hero-2.
* Safari budget (from cl-home.css): no :has(), no color-mix(), no overflow:clip.
*/
/* Tokens - scoped, not :root. Hero-only; nothing here feeds the page body. */
.cl-home--t2 { --t2-ink:#070c13; --t2-slab:#101823; --t2-slab-2:#18202c; --t2-line:rgba(255,255,255,.14); }
/* == HERO ================================================================ */
.cl-home--t2 .cl-hero-2 {
position:relative; display:flex; align-items:center; justify-content:center;
min-height:78vh; padding:56px 24px 48px; overflow:hidden; isolation:isolate;
background-color:var(--t2-ink); background-size:cover; background-position:center 46%; background-repeat:no-repeat;
}
/* No photo anywhere -> deliberate brand gradient, never a grey box. The only
chromatic accent is the brand red; the counter-light is a neutral white wash
(same device as template 3) so a dealer whose brand is not red never gets a
second, foreign hue mixed into their hero. */
.cl-home--t2 .cl-hero-2--no-img {
background-image:
radial-gradient(78% 96% at 74% 4%, rgba(var(--cl-red-rgb,221,0,0),.55), transparent 62%),
radial-gradient(90% 88% at 8% 104%, rgba(255,255,255,.07), transparent 64%),
linear-gradient(158deg,#12263c 0%,#0b1520 52%,#05090f 100%);
}
/* Scrim: dark top (nav legibility), darker bottom (contrast under the search
slab), brand cross-light. Text clears ~4.5:1 on a sky-heavy photo. The
gradient ends INSIDE the hero, so the light section below starts clean. */
.cl-home--t2 .cl-hero-2__scrim {
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(62% 74% at 84% 2%, rgba(var(--cl-red-rgb,221,0,0),.30), transparent 64%),
radial-gradient(84% 78% at 50% 38%, rgba(4,8,14,.64), transparent 74%),
linear-gradient(180deg, rgba(5,9,15,.72) 0%, rgba(5,9,15,.40) 30%, rgba(5,9,15,.60) 66%, var(--t2-ink) 100%);
}
/* THE SEAM (revision section 4): the hero's own bottom edge is a hard cut into
the light page, finished with a brand rule so the transition reads as a
deliberate design decision rather than a gradient bleeding into white. */
.cl-home--t2 .cl-hero-2::after {
content:""; position:absolute; left:0; right:0; bottom:0; height:5px; z-index:3;
background:var(--cl-red,#DD0000); pointer-events:none;
}
.cl-home--t2 .cl-hero-2__inner { position:relative; z-index:2; width:100%; max-width:1080px; margin:0 auto; text-align:center; color:#fff; }
/* Eyebrow - caps kicker between two brand rules. The whole is omitted in
PHP when the value is blank (a :empty rule could never match here: the
always has a child), so the two rules can never orphan. */
.cl-home--t2 .cl-hero-2__eyebrow {
display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 18px;
font:800 12.5px/1 var(--cl-font,'Montserrat',sans-serif); letter-spacing:.26em; text-transform:uppercase; color:#fff;
}
.cl-home--t2 .cl-hero-2__eyebrow span { text-shadow:0 2px 14px rgba(0,0,0,.7); }
.cl-home--t2 .cl-hero-2__eyebrow::before,
.cl-home--t2 .cl-hero-2__eyebrow::after { content:""; width:46px; height:4px; background:var(--cl-red,#DD0000); box-shadow:0 4px 16px rgba(var(--cl-red-rgb,221,0,0),.6); }
/* Headline - big, tight, ALL CAPS via CSS. */
.cl-home--t2 .cl-hero-2__title {
font-family:var(--cl-font,'Montserrat',sans-serif) !important; font-weight:900;
font-size:clamp(34px,4.5vw,62px); line-height:1.04; letter-spacing:-.022em;
text-transform:uppercase !important; color:#fff; margin:0 auto 16px;
max-width:20ch; text-wrap:balance; text-shadow:0 8px 40px rgba(0,0,0,.62);
}
/* Accent word from cl_hp_rich(). OWNER DECISION 2026-07-28: no marker
highlight, no underline — the accent is red type and nothing else. Covers
every tag the kses set allows (see front-page-cl.php), not just . */
.cl-home--t2 .cl-hero-2__title span,
.cl-home--t2 .cl-hero-2__title strong,
.cl-home--t2 .cl-hero-2__title b,
.cl-home--t2 .cl-hero-2__title em,
.cl-home--t2 .cl-hero-2__title i,
.cl-home--t2 .cl-hero-2__title a {
color:var(--cl-red,#DD0000); background:none; padding:0; margin:0; border-radius:0;
box-shadow:none; font-style:normal; font-weight:inherit; text-decoration:none;
}
.cl-home--t2 .cl-hero-2__sub {
font-size:clamp(16.5px,1.45vw,20px); font-weight:500; line-height:1.5; color:rgba(255,255,255,.90);
margin:0 auto 24px; max-width:660px; text-shadow:0 2px 18px rgba(0,0,0,.66);
}
/* == SEARCH SLAB - the primary action ===================================== */
.cl-home--t2 .cl-hero-2__panel {
max-width:1000px; margin:0 auto; text-align:left; background:var(--t2-slab);
border-top:6px solid var(--cl-red,#DD0000); border-radius:5px; overflow:hidden;
box-shadow:0 48px 90px -34px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.07);
}
.cl-home--t2 .cl-hero-2__panel-head {
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px;
padding:13px 20px; background:var(--t2-slab-2); border-bottom:1px solid var(--t2-line);
}
.cl-home--t2 .cl-hero-2__panel-label { font:900 13px/1 var(--cl-font,'Montserrat',sans-serif); letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.cl-home--t2 .cl-hero-2__panel-count { font:700 12.5px/1 var(--cl-font,'Montserrat',sans-serif); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.cl-home--t2 .cl-hero-2__panel-count strong { color:var(--cl-red,#DD0000); font-weight:900; }
.cl-home--t2 .cl-hero-2__form { display:block; margin:0; padding:18px; }
.cl-home--t2 .cl-hero-2__bar { display:flex; align-items:stretch; gap:10px; }
.cl-home--t2 .cl-hero-2__keyword { position:relative; flex:1 1 300px; min-width:0; display:flex; align-items:center; }
.cl-home--t2 .cl-hero-2__keyword-icon { position:absolute; left:17px; width:21px; height:21px; color:#6d7c8e; pointer-events:none; }
.cl-home--t2 .cl-hero-2__keyword input[type="text"] {
width:100%; height:62px; margin:0; border:2px solid transparent; border-radius:4px; box-shadow:none;
background:#fff; color:#101823; font:600 16.5px/1.2 var(--cl-font,'Montserrat',sans-serif); padding:0 16px 0 48px;
}
.cl-home--t2 .cl-hero-2__keyword input[type="text"]::placeholder { color:#7b8898; opacity:1; }
/* Make / max-price selects - solid, same weight as the keyword field. */
.cl-home--t2 .cl-hero-2__field { flex:0 1 172px; min-width:0; display:flex; }
.cl-home--t2 .cl-hero-2__field select {
width:100%; height:62px; margin:0; border:2px solid rgba(255,255,255,.16); border-radius:4px;
background-color:#1d2735; color:#fff; font:700 15px/1.2 var(--cl-font,'Montserrat',sans-serif);
padding:0 38px 0 16px; appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
.cl-home--t2 .cl-hero-2__field select option { color:#101823; background:#fff; }
.cl-home--t2 .cl-hero-2__field select:hover { border-color:rgba(255,255,255,.32); }
.cl-home--t2 .cl-hero-2__keyword input[type="text"]:focus,
.cl-home--t2 .cl-hero-2__field select:focus { outline:none; border-color:var(--cl-red,#DD0000); box-shadow:0 0 0 4px rgba(var(--cl-red-rgb,221,0,0),.35); }
/* Submit - two classes so it outranks Motors' button[type=submit] rules. */
.cl-home--t2 .cl-hero-2__submit {
flex:0 0 auto; width:auto; max-width:none; min-width:0; margin:0;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
height:62px; border:0; border-radius:4px; background:var(--cl-red,#DD0000); color:#fff;
font:900 15.5px/1 var(--cl-font,'Montserrat',sans-serif); letter-spacing:.09em; text-transform:uppercase;
padding:0 34px; cursor:pointer; white-space:nowrap;
box-shadow:0 14px 30px -8px rgba(var(--cl-red-rgb,221,0,0),.62);
transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cl-home--t2 .cl-hero-2__submit svg { width:17px; height:17px; flex:0 0 auto; }
.cl-home--t2 .cl-hero-2__submit:hover {
background:var(--cl-red-dark,var(--cl-red-hover,#bb0000)); color:#fff; transform:translateY(-2px);
box-shadow:0 20px 38px -10px rgba(var(--cl-red-rgb,221,0,0),.72);
}
/* Condition segment - fused under the bar. A fieldset's rendered