/* app.css — Roboto Slab forced for headings; nav right; full-width banner */

/* Load the font inside CSS so it works even if the HTML head tag doesn't include the Google link */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;700&display=swap');

:root{
  --brand:#0f1e66; --ink:#111; --muted:#6b7280; --bg:#f8fafc; --card:#fff; --border:#e5e7eb; --accent:#1637ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Typography — FORCE Roboto Slab on headings */
h1,h2,h3,h4,h5{font-family:'Roboto Slab', serif !important}
h1{font-weight:400; font-size:clamp(20px,3.2vw,40px); margin:0; padding:18px 0}
h2{font-weight:400; font-size:clamp(20px,2.2vw,28px); margin:0; padding:10px 0}
h3{font-weight:400; margin:0 0 8px 0}
h4,h5{font-weight:400; margin:0 0 8px 0}
h2{color:#2C3C7E}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.link{font-weight:600}

/* Header: logo left, nav RIGHT */
.site-header{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}
.header-flex{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 16px}
.logo{font-weight:800;color:var(--brand)}
.site-nav{display:flex;gap:18px;flex-wrap:wrap}
.site-nav a{font-weight:600}

/* Full-width banner */
.top-banner{width:100%;background:var(--brand);color:#fff;padding:20px 0 26px;box-shadow:0 1px 0 rgba(17,24,39,.06)}
.top-banner .banner-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.top-banner .tagline{color:#eaf0ff;margin-top:4px}
.top-banner h1{font-family:'Roboto Slab', serif !important; font-weight:400; letter-spacing:.2px}

/* Discover your next vehicle section */
.home-split{padding:24px 0}
.split-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.discover-left{padding-right:10%}
@media(max-width:900px){.split-grid{grid-template-columns:1fr}.discover-left{padding-left:0}}


/* Image placeholder in banner */
.ph-hero{width:100%;min-height:180px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.18));border:2px dashed rgba(255,255,255,.65);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;letter-spacing:.3px}
@media (max-width:900px){.top-banner .banner-grid{grid-template-columns:1fr}.ph-hero{min-height:140px}}

/* Split section */
.home-split{padding:24px 0}
.split-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
@media (max-width:900px){.split-grid{grid-template-columns:1fr}}

/* Search form */
.search-form .search-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.search-form input[type="text"], .search-form input[type="number"]{
  width:100%;height:36px;padding:8px 10px;border:1px solid var(--border);border-radius:5px;
}
.range-wrap{margin:6px 0 12px}
.range-wrap label{display:block;font-weight:700;margin-bottom:6px}
input[type=range]{width:100%;height:6px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent));outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:5px;background:var(--brand);cursor:pointer}
.search-actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:5px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:700}
.btn:hover{opacity:.95}

/* Right downloads card */
.downloads-right .card{background:var(--card);border:1px solid #8F2146 ;border-radius:5px;padding:16px} /*#8F2146 - BLA color - var(--border)*/
.doc-list{margin:0;padding-left:18px}
.doc-list li{margin:6px 0}

/* Preview row: 1x4 cards */
.preview-row{padding:18px 0 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.section-head{display:flex;align-items:center;justify-content:space-between}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.vehicle-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:5px;overflow:hidden}
/* BOT: start preview-thumb-height */
/* BOT: start preview-thumb-height */
.vehicle-card .thumb{background:#eaeef5 center/cover no-repeat;width:100%;padding-top:125%;}
/* BOT: end preview-thumb-height */
/* BOT: end preview-thumb-height */
.vehicle-card .card-body{padding:10px 12px}
.vehicle-title{font-weight:700;line-height:1.2}
.vehicle-price{font-weight:800;margin-top:2px}
.chip{display:inline-block;margin-top:6px;border:1px solid var(--border);border-radius:5px;padding:4px 10px;font-size:12px;color:#fff;background:var(--brand);opacity:.9}

/* Latest listings */
.latest-listings{padding:18px 0}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.site-footer .container{padding:14px 16px}

/* BOT: start preview-thumb-height */
.vehicle-card .thumb{ padding-top:125%; }
/* BOT: end preview-thumb-height */

/* BOT: start preview-carousel-styles */
.vehicle-card .thumb-carousel{position:relative;width:100%;padding-top:125%;background:#eaeef5;overflow:hidden;border-bottom:1px solid var(--border)}
.vehicle-card .thumb-carousel .frames{position:absolute;top:0;left:0;right:0;bottom:0}
.vehicle-card .thumb-carousel .frame{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .28s ease}
.vehicle-card .thumb-carousel .frame.active{opacity:1}
.vehicle-card .thumb-carousel .nav{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.45);color:#fff;width:32px;height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;cursor:pointer}
.vehicle-card .thumb-carousel .nav.prev{left:8px}
.vehicle-card .thumb-carousel .nav.next{right:8px}
.vehicle-card .thumb-carousel:hover .nav{opacity:1}
@media (max-width: 900px){ .vehicle-card .thumb-carousel{padding-top:110%} }
@media (max-width: 600px){ .vehicle-card .thumb-carousel{padding-top:100%} }
/* BOT: end preview-carousel-styles */

/* BOT: start preview-carousel-css-fixes */
.vehicle-card .thumb-carousel .frames{z-index:1}
.vehicle-card .thumb-carousel .nav{z-index:2; pointer-events:auto}
.vehicle-card .thumb-carousel{position:relative}
@media (hover:hover){
  .vehicle-card .thumb-carousel:hover .nav{opacity:1}
}
/* BOT: end preview-carousel-css-fixes */

/* BOT: start preview-carousel-css-v2 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .frames{position:absolute;inset:0;z-index:1}
.vehicle-card .thumb-carousel .nav{z-index:2; pointer-events:auto}
.vehicle-card .thumb-carousel:hover .nav{opacity:1}
@media (hover:none){
  .vehicle-card .thumb-carousel .nav{opacity:1}
}
/* BOT: end preview-carousel-css-v2 */

/* BOT: start preview-carousel-css-v3 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .frames{position:absolute;inset:0;z-index:1}
.vehicle-card .thumb-carousel .nav{z-index:2; pointer-events:auto}
.vehicle-card .thumb-carousel:hover .nav{opacity:1}
/* BOT: end preview-carousel-css-v3 */

/* BOT: start preview-carousel-css-v4 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .frames{position:absolute;inset:0;z-index:1}
.vehicle-card .thumb-carousel .nav{z-index:2; pointer-events:auto}
.vehicle-card .thumb-carousel:hover .nav{opacity:1}
/* BOT: end preview-carousel-css-v4 */

/* BOT: start preview-carousel-css-v6 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .frames{position:absolute;inset:0;z-index:1}
.vehicle-card .thumb-carousel .nav{z-index:2; pointer-events:auto}
.vehicle-card .thumb-carousel:hover .nav{opacity:1}
/* BOT: end preview-carousel-css-v6 */

/* BOT: start preview-meta-overlay */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .meta-lines{
  position:absolute; top:8px; left:8px; text-align:center; z-index:3;
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
}
.vehicle-card .thumb-carousel .meta-lines .meta-line{
  font-size:12px; line-height:1.2; background:rgba(255,255,255,.78);
  padding:4px 6px; border-radius:5px; display:inline-block; max-width:68vw;
}
.vehicle-card .thumb-carousel .meta-lines .price{
  color:var(--brand); font-weight:700;
}
@media (max-width: 600px){
  .vehicle-card .thumb-carousel .meta-lines .meta-line{font-size:11px}
  }
/* BOT: end preview-meta-overlay */

/* BOT: start preview-meta-overlay-v2 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .meta-lines{
  position:absolute; top:0; left:0; right:auto; text-align:left; z-index:3;
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
  background:rgba(15,30,102,.78); /* brand blue with semi-transparency */
  padding:8px 10px;
  border-radius:5px;
}
.vehicle-card .thumb-carousel .meta-lines .meta-line{
  font-size:14px; line-height:1.25; background:transparent;
  padding:0; border-radius:5px; color:#fff; font-weight:600;
  max-width:70vw;
}
.vehicle-card .thumb-carousel .meta-lines .price{
  font-weight:800; color:#fff;
}
@media (max-width: 600px){
  .vehicle-card .thumb-carousel .meta-lines{padding:6px 8px}
  .vehicle-card .thumb-carousel .meta-lines .meta-line{font-size:13px}
  }
/* BOT: end preview-meta-overlay-v2 */

/* BOT: start preview-meta-bar-v3 */
.vehicle-card .thumb-carousel{position:relative}
.vehicle-card .thumb-carousel .meta-bar{
  position:absolute; inset:0 0 auto 0; /* top:0; left:0; right:0 */
  display:flex; align-items:center; width:100%;
  z-index:3; pointer-events:none; /* don't block arrows/clicks */
  border-radius:5px 5px 0 0;
  overflow:hidden;
}
.vehicle-card .thumb-carousel .meta-bar .price-block{
  background:rgba(15,30,102,.78); /* brand blue with current opacity */
  color:#fff; font-weight:800;
  padding:8px 12px; white-space:nowrap; font-size:15px; line-height:1.2;
}
.vehicle-card .thumb-carousel .meta-bar .title-block{
  background:rgba(255,255,255,.78);
  color:var(--brand); font-weight:700;
  padding:8px 12px; font-size:15px; line-height:1.2;
  flex:1 1 auto; min-width:0; /* allow shrink */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 600px){
  .vehicle-card .thumb-carousel .meta-bar .price-block,
  .vehicle-card .thumb-carousel .meta-bar .title-block{
    padding:6px 10px; font-size:14px;
  }
}
/* BOT: end preview-meta-bar-v3 */

/* BOT: start card-body-min-meta */
.vehicle-card .card-body{ padding:12px; }
.vehicle-card .card-body .meta-top.condition{
  color: var(--brand);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.vehicle-card .card-body .meta-sub{
  color: #444;
  font-size: 14px;
  margin-bottom: 10px;
}
/* BOT: end card-body-min-meta */

/* BOT: start card-body-min-meta-v2 */
.vehicle-card .card-body .meta-top.condition{ margin-bottom:4px }
.vehicle-card .card-body .meta-sub{ margin-bottom:10px }
.vehicle-card .card-body .meta-top.condition:empty,
.vehicle-card .card-body .meta-sub:empty{ display:none }
@media (max-width: 640px){
  .vehicle-card .card-body{ padding:10px }
}
/* BOT: end card-body-min-meta-v2 */