/* T3_HEROPHOTO_SKIN_v1 — theme-3 hero photo, option B (full-bleed photo + dark search band).
   Every rule is gated on body.t3-hero-photo, which App.jsx T3_HEROPHOTO_v1 sets only after a hero image loads. */
.t3Hero{display:none}
body.t3-hero-photo .t3Hero{display:block;position:relative;min-height:440px;color:#fff;background:#0d1220 var(--t3-hero-url) right bottom/cover no-repeat} /* T3_HEROPHOTO_SKIN_v2 */
body.t3-hero-photo .t3Hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,13,.88) 0%,rgba(5,7,13,.45) 38%,rgba(5,7,13,0) 62%)}
body.t3-hero-photo .t3HeroText{position:relative;z-index:1;max-width:56%;padding:92px 0 60px 7rem}
body.t3-hero-photo .t3HeroText h2{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.02;font-weight:800;letter-spacing:-.025em;margin:0 0 16px;color:#fff}
body.t3-hero-photo .t3HeroText p{font-size:16px;opacity:.88;max-width:40ch;margin:0 0 26px;line-height:1.5;color:#fff}
body.t3-hero-photo .t3HeroCta{display:inline-block;background:var(--primary-color);color:#fff;font-weight:700;padding:14px 26px;border-radius:6px;text-decoration:none}
/* search fields become the dark band under the photo */
body.t3-hero-photo [class*="_searchInventory_"]{background:#0b1220;padding-top:1.6rem !important;padding-bottom:1.6rem !important}
body.t3-hero-photo [class*="_searchInventory_"] select,body.t3-hero-photo [class*="_searchInventory_"] input{background:#fff}
@media (max-width:1200px){
  body.t3-hero-photo .t3HeroText{padding-left:5rem;max-width:64%}
}
@media (max-width:700px){
  body.t3-hero-photo .t3Hero{min-height:340px;background-position:center}
  body.t3-hero-photo .t3Hero::before{background:linear-gradient(180deg,rgba(5,7,13,.25) 0%,rgba(5,7,13,.35) 45%,rgba(5,7,13,.9) 100%)}
  body.t3-hero-photo .t3HeroText{max-width:100%;padding:150px 18px 26px}
  body.t3-hero-photo .t3HeroText h2{font-size:30px}
  body.t3-hero-photo .t3HeroText p{font-size:14px;margin-bottom:16px}
  body.t3-hero-photo .t3HeroCta{display:block;text-align:center;padding:14px 0}
}
/* T3_HEROPHOTO_SKIN_v3 - phone: taller hero, photo anchored top so the car clears the headline */
@media (max-width:700px){
  body.t3-hero-photo .t3Hero{min-height:380px !important;background-position:top center !important}
  body.t3-hero-photo .t3Hero::before{background:linear-gradient(180deg,rgba(5,7,13,.15) 0%,rgba(5,7,13,.18) 40%,rgba(5,7,13,.82) 62%,rgba(5,7,13,.95) 100%) !important}
  body.t3-hero-photo .t3HeroText{padding:250px 16px 24px !important}
}
/* T3_HEROPHOTO_SKIN_v4 - phone: contain-to-width so the whole car shows, pinned top; taller hero, text below the photo */
@media (max-width:700px){
  body.t3-hero-photo .t3Hero{min-height:440px !important;background-size:100% auto !important;background-position:top center !important;background-repeat:no-repeat !important;background-color:#05070d !important}
  body.t3-hero-photo .t3Hero::before{background:linear-gradient(180deg,rgba(5,7,13,0) 0%,rgba(5,7,13,0) 34%,rgba(5,7,13,.55) 46%,rgba(5,7,13,.95) 60%,#05070d 100%) !important}
  body.t3-hero-photo .t3HeroText{padding:280px 16px 26px !important}
  body.t3-hero-photo .t3HeroText h2{font-size:27px !important}
}
/* T3_HEROPHOTO_SKIN_v5 - phone: the 2:1 photo is always 50vw tall, so anchor height, text and gradient to 50vw instead of the fixed 440/280px that left dead black under it. Fill colour matched to the photo's lower edge. */
@media (max-width:700px){
  body.t3-hero-photo .t3Hero{min-height:calc(50vw + 172px) !important;background-color:#0a1626 !important}
  body.t3-hero-photo .t3Hero::before{background:linear-gradient(180deg,rgba(10,22,38,0) 0%,rgba(10,22,38,0) calc(50vw - 70px),rgba(10,22,38,.55) calc(50vw - 18px),rgba(10,22,38,.95) calc(50vw + 14px),#0a1626 100%) !important}
  body.t3-hero-photo .t3HeroText{padding:calc(50vw + 14px) 16px 22px !important}
}
/* T3_HEROPHOTO_SKIN_v6 - one navy for every surface: hero fill and the desktop search band join the header at #12325c. */
body.t3-hero-photo .t3Hero{background-color:var(--t3-surface,#12325c) !important}
body.t3-hero-photo [class*="_searchInventory_"]{background:var(--t3-surface,#12325c) !important}
@media (max-width:700px){
  body.t3-hero-photo .t3Hero{background-color:var(--t3-deep,#0f2848) !important}
  body.t3-hero-photo .t3Hero::before{background:linear-gradient(180deg,rgba(var(--t3-deep-rgb,15,40,72),0) 0%,rgba(var(--t3-deep-rgb,15,40,72),0) calc(50vw - 70px),rgba(var(--t3-deep-rgb,15,40,72),.55) calc(50vw - 18px),rgba(var(--t3-deep-rgb,15,40,72),.95) calc(50vw + 14px),var(--t3-deep,#0f2848) 100%) !important}
}

/* T3_RAMPVARS_v1: the navy set is now var(--t3-*) with the old hex as fallback; values are derived per dealer from brand_color in App.jsx T3_RAMP_v2. */