/*
  CONE · Vehicles theme
  - Intentionally more "motors" / tech
  - Uses the same token system as app.css (CSS variables)
*/

body[data-category="vehicles"]{
  /* Keep the global tokens, but add a stronger motorsport atmosphere */
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(var(--accent-rgb), .28), transparent 62%),
    radial-gradient(760px 460px at 92% 10%, rgba(var(--accent2-rgb), .18), transparent 58%),
    radial-gradient(circle at top left, #202746 0, var(--bg) 55%) fixed;
}

/* Light mode should still feel "vehicles", but not stay dark. */
:root[data-theme="light"] body[data-category="vehicles"]{
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(var(--accent-rgb), .12), transparent 62%),
    radial-gradient(760px 460px at 92% 10%, rgba(var(--accent2-rgb), .12), transparent 58%),
    radial-gradient(circle at top left, #e8eeff 0, var(--bg) 55%) fixed;
}

body[data-category="vehicles"] .topbar{
  border-bottom-color: rgba(var(--accent-rgb), .18);
}

body[data-category="vehicles"] .topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:.45;
  pointer-events:none;
}

body[data-category="vehicles"] .vehicles-hero{
  background:
    url('/assets/img/vehicles-hero.svg') center/cover no-repeat,
    radial-gradient(900px 450px at 10% 0%, rgba(var(--accent-rgb),.22), transparent 60%),
    radial-gradient(800px 420px at 90% 20%, rgba(var(--accent2-rgb),.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-blend-mode: screen, normal, normal, normal;
}

/* Make the active category pill feel like a "tab" */
body[data-category="vehicles"] .catPill.is-active{
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .22);
}

/* Vehicles v13: compact hero with transparent filters inside the image area. */
body[data-category="vehicles"] .vehicle-market-hero__stage{
  position:relative!important;
  overflow:hidden!important;
  min-height:430px!important;
  border-radius:34px!important;
  border:1px solid rgba(15,23,42,.12)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.38)),var(--vehicle-hero-bg, transparent)!important;
  box-shadow:0 24px 60px rgba(15,23,42,.16)!important;
}
body[data-category="vehicles"] .vehicle-market-hero__visual{
  position:absolute!important;inset:0!important;z-index:0!important;opacity:1!important;
}
body[data-category="vehicles"] .vehicle-market-hero__visual img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}
body[data-category="vehicles"] .vehicle-market-hero__stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.50) 33%,rgba(255,255,255,.16) 70%,rgba(255,255,255,.04) 100%);
}
body[data-category="vehicles"] .vehicle-market-hero__content,
body[data-category="vehicles"] .vehicle-market-hero__stats{
  position:relative!important;z-index:2!important;
}
body[data-category="vehicles"] .vehicle-market-hero__headlineRow h1{
  white-space:nowrap!important;max-width:900px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  font-size:clamp(42px,5vw,74px)!important;line-height:.95!important;
}
body[data-category="vehicles"] .vehicle-market-quick--belowHero{
  margin-top:-120px!important;position:relative!important;z-index:4!important;
  width:calc(100% - 34px)!important;margin-left:auto!important;margin-right:auto!important;
  background:rgba(255,255,255,.78)!important;border:1px solid rgba(15,23,42,.10)!important;
  backdrop-filter:blur(18px)!important;border-radius:28px!important;box-shadow:0 18px 48px rgba(15,23,42,.16)!important;
}
body[data-category="vehicles"] .vehicle-market-hero + .vehicle-market-quick--belowHero + *{margin-top:28px!important;}
:root:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-hero__stage,
html:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-hero__stage{
  background:linear-gradient(90deg,rgba(4,9,22,.76),rgba(4,9,22,.26)),var(--vehicle-hero-bg, transparent)!important;
  border-color:rgba(255,255,255,.10)!important;
}
:root:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-hero__stage::after,
html:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-hero__stage::after{
  background:linear-gradient(90deg,rgba(4,9,22,.82) 0%,rgba(4,9,22,.50) 38%,rgba(4,9,22,.10) 100%)!important;
}
:root:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-quick--belowHero,
html:not([data-theme="light"]) body[data-category="vehicles"] .vehicle-market-quick--belowHero{
  background:rgba(7,17,31,.64)!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important;
}
@media (max-width:900px){
  body[data-category="vehicles"] .vehicle-market-hero__stage{min-height:360px!important;border-radius:26px!important;}
  body[data-category="vehicles"] .vehicle-market-hero__headlineRow h1{white-space:normal!important;font-size:clamp(36px,10vw,58px)!important;}
  body[data-category="vehicles"] .vehicle-market-quick--belowHero{margin-top:-70px!important;width:calc(100% - 18px)!important;border-radius:22px!important;}
}