/* /css/inventory-cards.css */

/* =========================
   Inventory tools (Carfax-ish)
========================= */
.inventory-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
  margin-bottom:14px;
}

.inv-pill{
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(2,19,60,.18);
  background:#fff;
  padding:10px 14px;
  font-family:Montserrat, sans-serif;
  font-weight:800;
  font-size:13px;
  color:#02133c;
  border-radius:10px;
  transition:all .15s ease;
  text-decoration:none;
}
.inv-pill:hover{ transform:translateY(-1px); }
.inv-pill.is-active{
  background:#02133c;
  color:#fff;
  border-color:#02133c;
}

.inv-pill-count{
  opacity:.75;
  font-weight:900;
}

.inv-search{
  min-width:280px;
  flex:1;
  border:1px solid rgba(2,19,60,.18);
  border-radius:10px;
  padding:12px 14px;
  font-family:Montserrat, sans-serif;
  font-weight:700;
  outline:none;
}

/* =========================
   Inventory grid
   ✅ 3 columns desktop
   ✅ 2 columns tablet
   ✅ 1 column mobile
========================= */
.inv-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  margin-top:18px;
  margin-bottom:26px; /* ✅ ensures section has breathing room before next section */
}

@media (max-width: 1080px){
  .inv-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .inv-grid{ grid-template-columns:1fr; }
}

/* =========================
   Card
========================= */
.inv-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.inv-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* =========================
   Square thumbnail
========================= */
.inv-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;   /* ✅ perfect square */
  background:#f3f5f7;
  text-decoration:none;
  overflow:hidden;
}

/* fallback */
@supports not (aspect-ratio: 1 / 1){
  .inv-thumb{ padding-top:100%; }
}

/* Default: make the photo fill the square (no empty margins) */
.inv-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;

  object-fit: cover;          /* ✅ fills the square */
  object-position: 50% 50%;   /* center by default (your inline focus can override) */

  background:#f3f5f7;
}

/* no longer needed (optional to keep for compatibility) */
.inv-img.is-cover{
  object-fit: cover;
}

/* Optional: tiny zoom if "contain" feels too small */
.inv-img.is-contain-zoom{
  transform: scale(1.04);
  transform-origin: center center;
}

/* =========================
   Badges / overlays
========================= */
.inv-ribbon{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(0,0,0,.70);
  color:#fff;
  font-family:Montserrat, sans-serif;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
}

.inv-heart{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#111;
  font-size:18px;
  line-height:1;
}
.inv-heart:active{ transform:scale(.98); }

.inv-photos{
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-family:Montserrat, sans-serif;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
}

/* =========================
   Body
========================= */
.inv-body{
  padding:14px 16px 16px;
}

.inv-title{
  display:block;
  text-decoration:none;
  font-family:Montserrat, sans-serif;
  font-weight:900;
  font-size:22px;
  line-height:26px;
  color:#0b63ce;
  margin-bottom:6px;
}
.inv-title:hover{ text-decoration:underline; }

.inv-meta{
  font-family:Montserrat, sans-serif;
  font-weight:600;
  color:#4b4b4b;
  font-size:13px;
  margin-bottom:10px;
}

.inv-price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.inv-price{
  font-family:Montserrat, sans-serif;
  font-weight:900;
  font-size:28px;
  color:#111;
}
.inv-small{
  font-family:Montserrat, sans-serif;
  font-weight:700;
  color:#4b4b4b;
  font-size:13px;
}

.inv-flags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 8px;
}
.inv-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:Montserrat, sans-serif;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
}
.inv-flag.good{ background:#e6f7ea; border-color:#bde7c6; color:#116b2d; }
.inv-flag.reliable{ background:#efe9ff; border-color:#d6c8ff; color:#4b2bbd; }

.inv-features{
  margin:10px 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
}
.inv-features li{
  font-family:Montserrat, sans-serif;
  font-weight:700;
  font-size:12px;
  color:#2c2c2c;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.inv-features i{
  color:#137333;
  margin-top:2px;
  font-size:14px;
}

.inv-btn{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  background:#137333;
  color:#fff;
  border-radius:12px;
  padding:14px 12px;
  font-family:Montserrat, sans-serif;
  font-weight:900;
  font-size:14px;
  letter-spacing:.3px;
  transition:filter .15s ease, transform .05s ease;
}
.inv-btn:hover{ filter:brightness(0.95); }
.inv-btn:active{ transform:translateY(1px); }

/* =========================
   "See more" button (centered, adds bottom spacing)
========================= */
.inv-more-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 18px 0 40px; /* ✅ prevents next section overlap */
  width:100%;
}
.inv-more-btn{
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:14px 18px;
  font-family:Montserrat, sans-serif;
  font-weight:900;
  background:#02133c;
  color:#fff;
  box-shadow:0 10px 28px rgba(2, 19, 60, .18);
  transition:transform .12s ease, opacity .12s ease, filter .15s ease;
}
.inv-more-btn:hover{ filter:brightness(.95); transform:translateY(-1px); }
.inv-more-btn:active{ transform:translateY(0px); opacity:.92; }

/* =========================
   Modal (All cars) — HUGE catalog
========================= */
.inv-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.55);
  padding:18px;
  align-items:center;
  justify-content:center;
}

.inv-modal__panel{
  width: min(1320px, calc(100vw - 26px));
  height: min(92vh, 980px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 28px 90px rgba(0,0,0,.35);
}

.inv-modal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.inv-modal__title{
  font-family:Montserrat, sans-serif;
  font-weight:900;
  color:#0b1b34;
  font-size:16px;
}

.inv-modal__close{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:22px;
  line-height:1;
}

.inv-modal__tools{
  padding:12px 16px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  background:#fff;
}

.inv-modal__body{
  flex:1;
  overflow:auto;
  padding:16px;
  background: rgba(2,19,60,.02);
}

/* Keep modal grid tight */
#invGridModal.inv-grid{
  margin-top:0;
  margin-bottom:0;
}

/* ================================
   INVENTORY SECTION: FIX OVERLAP / FLEX HEIGHT
   (prevents Inventory from sliding under Finance)
================================ */
#Inventory.services-section,
#Inventory .our-services-div-container{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  position:relative !important;
  z-index:2;
}

/* Mobile modal becomes near full-screen */
@media (max-width: 767px){
  .inv-modal{ padding:10px; }
  .inv-modal__panel{
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    border-radius:14px;
  }
}