/* ==========================================================================
   EVXEMS — Page styles: Inventory (§B2+B3) + Vehicle Detail Page (§B4)
   Built from tokens.css; reuses components.css. No values outside the scales.
   ========================================================================== */

/* =========================================================================
   INVENTORY (§B2 Search + §B3 Results — one continuous page)
   ========================================================================= */
.inv-search { padding-block: var(--sp-6); }
.inv-layout { display: grid; grid-template-columns: 3fr 9fr; gap: var(--sp-8); align-items: start; }

/* ---- Filter rail (sticky) ---- */
.filter-rail { position: sticky; top: calc(var(--header-main-h) + var(--header-utility-h) + var(--sp-4)); align-self: start; max-height: calc(100vh - 140px); overflow: auto; padding-right: var(--sp-2); }
.filter-rail__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.filter-rail__head h2 { font: var(--type-heading); color: var(--evx-navy); text-transform: uppercase; margin: 0; }

/* Segmented toggle: Ready to Run / Conversion Project (top of rail) */
.seg-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--evx-navy); border-radius: var(--radius-button); overflow: hidden; margin-bottom: var(--sp-6); }
.seg-toggle button { border: 0; background: var(--evx-white); color: var(--evx-navy); font: var(--type-body-sm); font-weight: 700; min-height: 40px; cursor: pointer; text-transform: uppercase; letter-spacing: .02em; }
.seg-toggle button[aria-pressed="true"] { background: var(--evx-navy); color: var(--evx-white); }

/* Facet group = native <details> for accessible collapse (no JS) */
.facet { border-top: 1px solid var(--grey-100); padding-block: var(--sp-3); }
.facet > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font: var(--type-subheading); color: var(--evx-navy); text-transform: uppercase; padding-block: var(--sp-2); }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: "▾"; color: var(--grey-400); transition: transform var(--motion-fast); }
.facet[open] > summary::after { transform: rotate(180deg); }
.facet__options { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-2); }
.facet-option { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font: var(--type-body-sm); color: var(--grey-700); cursor: pointer; }
.facet-option input { width: 18px; height: 18px; accent-color: var(--evx-navy); }
.facet-option .count { margin-left: auto; color: var(--grey-400); font: var(--type-caption); }
.range-inputs { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); }
.range-inputs input { width: 100%; height: 40px; border: 1px solid var(--grey-400); border-radius: var(--radius-button); padding-inline: var(--sp-3); font: var(--type-body-sm); }
.range-inputs span { color: var(--grey-400); }

/* ---- Applied filter chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--grey-100); border-radius: var(--radius-full); font: var(--type-body-sm); color: var(--evx-navy); }
.chip button { border: 0; background: transparent; color: var(--grey-400); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; min-width: 24px; min-height: 24px; }
.chip--clear { background: transparent; color: var(--evx-cyan); text-decoration: underline; cursor: pointer; border: 0; font: var(--type-body-sm); }

/* ---- Results control bar ---- */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.results-bar__count { font: var(--type-heading); color: var(--evx-navy); text-transform: uppercase; }
.results-bar__controls { display: flex; align-items: center; gap: var(--sp-3); }
.select { height: 40px; border: 1px solid var(--grey-400); border-radius: var(--radius-button); padding-inline: var(--sp-3); font: var(--type-body-sm); color: var(--grey-700); background: var(--evx-white); }
.view-toggle { display: inline-flex; border: 1px solid var(--grey-400); border-radius: var(--radius-button); overflow: hidden; }
.view-toggle button { border: 0; background: var(--evx-white); color: var(--evx-navy); width: 40px; height: 40px; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--evx-navy); color: var(--evx-white); }

/* ---- Results grid / list ---- */
.results.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* D1 fix: results grid must collapse responsively (this selector out-specifies the
   base .grid--3 media rules, so it needs its own). Isolated; no other change. */
@media (max-width: 1023px) { .results.grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .results.grid--3 { grid-template-columns: 1fr; } }
.results--list { display: flex; flex-direction: column; gap: var(--sp-4); }
.results--list .vcard { flex-direction: row; }
.results--list .vcard__media { aspect-ratio: auto; width: 40%; min-height: 200px; }
.results--list .vcard__body { width: 60%; }
@media (max-width: 767px) { .results--list .vcard { flex-direction: column; } .results--list .vcard__media { width: 100%; } .results--list .vcard__body { width: 100%; } }

/* ---- Compare tray (sticky bottom, shown when ≥2 selected) ---- */
.compare-tray { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--evx-navy); color: var(--evx-white); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: var(--shadow-lg); padding: var(--sp-3) var(--sp-4); display: none; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); }
.compare-tray[data-open="true"] { display: flex; }
.compare-tray .count { font: var(--type-subheading); text-transform: uppercase; }

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-button); font: var(--type-body-sm); color: var(--evx-navy); text-decoration: none; border: 1px solid var(--grey-100); }
.pagination [aria-current="page"] { background: var(--evx-navy); color: var(--evx-white); border-color: var(--evx-navy); }

/* ---- Empty state (never a bare 0 results) ---- */
.empty { text-align: center; padding: var(--sp-16) var(--sp-4); }
.empty h3 { font: var(--type-heading); color: var(--evx-navy); text-transform: uppercase; }

/* ---- Mobile: filter drawer + sticky filter/sort bar ---- */
.filter-fab-bar { display: none; }
.filter-drawer__scrim { display: none; }
@media (max-width: 1023px) {
  .inv-layout { grid-template-columns: 1fr; }
  .filter-fab-bar { display: flex; position: sticky; top: var(--header-mobile-h); z-index: var(--z-sticky); background: var(--evx-white); box-shadow: var(--shadow-sm); gap: var(--sp-2); padding: var(--sp-2) 0; margin-bottom: var(--sp-4); }
  .filter-fab-bar .btn { flex: 1; }
  .filter-rail {
    position: fixed; inset: 0 auto 0 0; width: min(92vw, 380px); max-height: none;
    background: var(--evx-white); z-index: var(--z-modal); padding: var(--sp-4);
    transform: translateX(-100%); transition: transform var(--motion-med); box-shadow: var(--shadow-lg);
  }
  .filter-rail[data-open="true"] { transform: translateX(0); }
  .filter-drawer__scrim[data-open="true"] { display: block; position: fixed; inset: 0; background: var(--navy-overlay); z-index: var(--z-overlay); }
  .filter-rail__apply { position: sticky; bottom: 0; background: var(--evx-white); padding-top: var(--sp-3); }
}

/* =========================================================================
   VEHICLE DETAIL PAGE (§B4)
   ========================================================================= */
.vdp-hero { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: start; padding-top: var(--sp-4); }
/* Let grid tracks shrink below content min-size so the thumbnail strip scrolls
   instead of forcing the gallery column wide when a vehicle has many photos. */
.vdp-hero > * { min-width: 0; }

/* ---- Gallery ---- */
.gallery__main { position: relative; aspect-ratio: 16 / 9; background: var(--grey-100); border: 1px solid var(--grey-100); border-radius: var(--radius-card); display: grid; place-items: center; color: var(--grey-400); font: var(--type-caption); overflow: hidden; }
.gallery__main .count { position: absolute; bottom: var(--sp-3); right: var(--sp-3); }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: var(--radius-full); background: rgba(255,255,255,.9); color: var(--evx-navy); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.gallery__nav--prev { left: var(--sp-3); }
.gallery__nav--next { right: var(--sp-3); }
.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); }
.gallery__thumb { flex: 0 0 auto; width: 96px; aspect-ratio: 16/9; background: var(--grey-100); border: 2px solid transparent; border-radius: var(--radius-chip); cursor: pointer; display: grid; place-items: center; color: var(--grey-400); font: var(--type-caption); }
.gallery__thumb[aria-current="true"] { border-color: var(--evx-navy); }
.gallery__tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gallery__tab { font: var(--type-body-sm); color: var(--evx-navy); border: 1px solid var(--grey-400); background: var(--evx-white); border-radius: var(--radius-full); padding: var(--sp-1) var(--sp-3); cursor: pointer; }
.gallery__tab[aria-pressed="true"] { background: var(--evx-navy); color: var(--evx-white); border-color: var(--evx-navy); }

/* ---- Sticky info panel ---- */
.vdp-panel { position: sticky; top: calc(var(--header-main-h) + var(--header-utility-h) + var(--sp-4)); background: var(--evx-white); border: 1px solid var(--grey-100); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.vdp-panel h1 { font: var(--type-display-md); color: var(--evx-navy); margin: 0; }
.vdp-panel__sub { font: var(--type-subheading); color: var(--grey-400); text-transform: uppercase; }
.vdp-panel__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); font: var(--type-body-sm); }
.vdp-panel__facts .k { color: var(--grey-400); }
.vdp-panel__facts .v { color: var(--evx-navy); font-weight: 700; }
.vdp-panel__price { font: var(--type-display-md); color: var(--evx-navy); }
.vdp-panel__ctas { display: flex; flex-direction: column; gap: var(--sp-2); }
.vdp-panel__mini { display: flex; gap: var(--sp-2); }
.vdp-panel__mini .btn { flex: 1; }

/* ---- Sticky section-jump ---- */
.section-jump { position: sticky; top: calc(var(--header-main-h) + var(--header-utility-h)); z-index: var(--z-sticky); background: var(--evx-white); box-shadow: var(--shadow-sm); margin-top: var(--sp-12); }
.section-jump__inner { display: flex; gap: var(--sp-2); overflow-x: auto; }
.section-jump a { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); font: var(--type-subheading); text-transform: uppercase; color: var(--grey-700); border-bottom: 2px solid transparent; text-decoration: none; }
.section-jump a.is-active, .section-jump a:hover { color: var(--evx-navy); border-bottom-color: var(--evx-yellow); }

/* ---- Spec tables (Chassis + Module) ---- */
.spec-group { margin-bottom: var(--sp-8); }
.spec-group h3 { font: var(--type-heading); color: var(--evx-navy); text-transform: uppercase; margin: 0 0 var(--sp-3); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--grey-100); font: var(--type-body-sm); }
.spec-table th { font: var(--type-subheading); text-transform: uppercase; color: var(--evx-navy); background: var(--grey-100); width: 40%; }
.spec-table td { color: var(--grey-700); }

/* ---- Equipment grid ---- */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-6); }
.equip-item { display: flex; align-items: center; gap: var(--sp-2); font: var(--type-body-sm); color: var(--grey-700); }
.equip-item .mark { color: var(--status-success); font-weight: 700; }
.equip-item .mark--no { color: var(--grey-400); }
@media (max-width: 767px) { .equip-grid { grid-template-columns: 1fr; } }

/* ---- Condition / inspection ---- */
.inspection { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: start; }
.grade-badge { background: var(--evx-navy); color: var(--evx-white); border-radius: var(--radius-card); padding: var(--sp-6); text-align: center; min-width: 160px; }
.grade-badge b { display: block; font: var(--type-display-md); }
.grade-badge span { font: var(--type-caption); text-transform: uppercase; letter-spacing: .04em; }
.inspection__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.inspection__row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--grey-100); font: var(--type-body-sm); }
.inspection__row .ok { color: var(--status-success); font-weight: 700; }
@media (max-width: 767px) { .inspection { grid-template-columns: 1fr; } }

/* ---- Documents ---- */
.doc-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- Financing block ---- */
.fin-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); background: var(--grey-100); border-radius: var(--radius-card); padding: var(--sp-6); }
.fin-est b { font: var(--type-display-md); color: var(--evx-navy); }
.fin-est span { font: var(--type-body-sm); color: var(--grey-700); }
@media (max-width: 767px) { .fin-block { grid-template-columns: 1fr; } }

/* ---- Inquiry form ---- */
.inquiry { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field.full { grid-column: 1 / -1; }
.field label { font: var(--type-subheading); text-transform: uppercase; color: var(--evx-navy); }
.field .req { color: var(--evx-yellow); }
.field input, .field select, .field textarea { min-height: 40px; border: 1px solid var(--grey-400); border-radius: var(--radius-button); padding: var(--sp-2) var(--sp-4); font: var(--type-body); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--evx-navy); border-color: var(--evx-navy); }
.field textarea { min-height: 96px; resize: vertical; }
@media (max-width: 767px) { .inquiry { grid-template-columns: 1fr; } }

/* ---- Trade hook ---- */
.trade-hook { background: var(--evx-navy); color: var(--evx-white); border-radius: var(--radius-card); padding: var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.trade-hook h3 { font: var(--type-heading); text-transform: uppercase; margin: 0; }

/* ---- VDP responsive ---- */
.vdp-mobile-bar { display: none; }
@media (max-width: 1023px) {
  .vdp-hero { grid-template-columns: 1fr; }
  .vdp-panel { position: static; }
}
@media (max-width: 767px) {
  .vdp-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); background: var(--evx-white); box-shadow: 0 -2px 12px rgba(0,51,102,.12); padding: var(--sp-2); gap: var(--sp-2); }
  .vdp-mobile-bar .btn { flex: 1; }
  body.has-vdp-bar { padding-bottom: 72px; }
}

/* ---- Icon set (SVG sprite) ---- */
.ico-svg { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Lead form status (progressive enhancement) ---- */
.form-status { grid-column: 1 / -1; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-button); font: var(--type-body-sm); }
.form-status--pending { background: var(--grey-100); color: var(--grey-700); }
.form-status--success { background: #E7F5EC; color: #2E8B57; }
.form-status--error   { background: #FDE7E7; color: var(--evx-beacon-red); }

/* ---- Visually-hidden (screen-reader only) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Legal / policy content pages ---- */
.legal-doc { max-width: 760px; }
.legal-doc h1 { margin: 0 0 var(--sp-2); }
.legal-doc .legal-updated { color: var(--grey-400); font: var(--type-caption); margin: 0 0 var(--sp-6); }
.legal-doc .legal-intro { margin: 0 0 var(--sp-6); }
.legal-doc h2 { font: var(--type-heading); color: var(--evx-navy); margin: var(--sp-8) 0 var(--sp-3); }
.legal-doc h3 { font: var(--type-subheading); margin: var(--sp-5) 0 var(--sp-2); }
.legal-doc p { margin: 0 0 var(--sp-4); }
.legal-doc ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.legal-doc li { margin-bottom: var(--sp-2); }
.legal-doc .legal-contact { background: var(--grey-100); border-radius: var(--radius-card); padding: var(--sp-5); margin: var(--sp-6) 0 0; }
.legal-doc .legal-contact p { margin: 0; }
.legal-doc .legal-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--grey-100); color: var(--grey-400); font: var(--type-caption); }