/*
  cards-compact.css — CarServicesLTD
  Scales down post/advert/listing card sizes site-wide.
  Loaded via header_blue.ejs on every page.
  Uses !important only where inline or higher-specificity rules exist.
*/

/* ==========================================================
   1. CARD IMAGE HEIGHTS — compact & consistent
   ========================================================== */

/* Main listing images (posts.css sets 200px, responsive-complete-fix.css sets 220px) */
.card-img-top,
.card-img-wrapper img,
.card-img-wrapper,
.card-img-placeholder {
  height: 160px !important;
  max-height: 160px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Service card photo (marketplace.ejs inline: 140px) */
.service-card-photo,
.service-card-photo img {
  height: 130px !important;
  max-height: 130px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Vehicle card photo (commercial-vehicles-hub: 180px) */
.vehicle-card-photo,
.vehicle-card-photo img {
  height: 150px !important;
  max-height: 150px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Post card images (my-posts.ejs inline) */
.post-card-image {
  height: 140px !important;
  max-height: 140px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px 10px 0 0;
}

/* Store card — keep 16:9 aspect ratio approach but make it smaller */
.store-media::before {
  padding-top: 52% !important; /* slightly less than 56.25% = taller but shorter card */
}

/* Parts marketplace (parts-marketplace.ejs inline: 180px) */
.part-card .card-img-wrapper,
.part-card .card-img-wrapper img {
  height: 150px !important;
  max-height: 150px !important;
}

/* Chauffeur, driver, business profile cards */
.chauffeur-card-img,
.driver-card-img,
.profile-card-img {
  height: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
}

/* Blog — already uses aspect-ratio which is better; just cap the max */
.blog-card-img-wrapper {
  max-height: 200px !important;
  min-height: 160px !important;
}

/* ==========================================================
   2. CARD BODY PADDING — tighter
   ========================================================== */
.card-body {
  padding: 14px 16px !important;
}

.service-card-body {
  padding: 14px !important;
}

.vehicle-card-body {
  padding: 14px !important;
}

.store-body {
  padding: 12px 14px !important;
}

.blog-card-body {
  padding: 1rem 1.1rem !important;
}

/* ==========================================================
   3. CARD GAPS — tighter grids
   ========================================================== */
.service-grid {
  gap: 16px !important;
}

.vehicle-grid {
  gap: 16px !important;
}

.stores-grid {
  gap: 14px !important;
}

.posts-grid {
  gap: 14px !important;
}

/* Bootstrap row cards — reduce mb-4 spacing */
.row .card,
.row > [class*="col-"] .card {
  margin-bottom: 16px !important;
}

/* ==========================================================
   4. CARD TITLE & BODY TEXT — slightly smaller
   ========================================================== */
.card-title,
.service-card-title,
.vehicle-card-title {
  font-size: 1rem !important;
  line-height: 1.35;
}

.card-text,
.service-card-desc,
.vehicle-card-desc {
  font-size: 0.85rem !important;
}

.card-footer,
.service-card-footer,
.vehicle-card-footer {
  padding: 10px 14px !important;
  font-size: 0.82rem !important;
}

/* ==========================================================
   5. CARD BORDER RADIUS — consistent
   ========================================================== */
.card,
.service-card,
.vehicle-card,
.store-card,
.part-card,
.blog-card,
.post-card {
  border-radius: 12px !important;
  overflow: hidden;
}

/* ==========================================================
   6. CSS GRID minmax — allow cards to be narrower
   Reduces minimum card width so more fit per row on medium screens.
   ========================================================== */
.service-grid,
.vehicle-grid,
.listings-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
}

/* ==========================================================
   7. MOBILE — extra compact on phones
   ========================================================== */
@media (max-width: 768px) {
  .card-img-top,
  .card-img-wrapper,
  .card-img-wrapper img,
  .card-img-placeholder {
    height: 140px !important;
    max-height: 140px !important;
  }

  .service-card-photo,
  .service-card-photo img {
    height: 120px !important;
    max-height: 120px !important;
  }

  .vehicle-card-photo,
  .vehicle-card-photo img,
  .post-card-image {
    height: 130px !important;
    max-height: 130px !important;
  }

  .card-body {
    padding: 12px !important;
  }

  .service-card-body,
  .vehicle-card-body {
    padding: 10px 12px !important;
  }

  .card-title,
  .service-card-title {
    font-size: 0.92rem !important;
  }

  .service-grid,
  .vehicle-grid {
    gap: 12px !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }

  .stores-grid {
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .card-img-top,
  .card-img-wrapper,
  .card-img-wrapper img {
    height: 120px !important;
    max-height: 120px !important;
  }

  .service-card-photo,
  .service-card-photo img,
  .vehicle-card-photo,
  .vehicle-card-photo img,
  .post-card-image {
    height: 110px !important;
    max-height: 110px !important;
  }

  .card-body {
    padding: 10px 11px !important;
  }

  .service-grid,
  .vehicle-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 10px !important;
  }

  .card-title {
    font-size: 0.88rem !important;
  }

  .card-text {
    font-size: 0.78rem !important;
  }
}

/* ==========================================================
   8. IMAGE DISPLAY QUALITY
   Ensures images never stretch, blur, or break their containers.
   ========================================================== */
.card img,
.service-card img,
.vehicle-card img,
.store-card img,
.part-card img,
.blog-card img,
.post-card img {
  max-width: 100%;
  object-fit: cover;
  /* Smooth rendering on retina/HiDPI screens */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Prevent layout shift while image loads */
img[loading="lazy"] {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 100%);
}

/* Broken image fallback */
img::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8edf3 0%, #d1d9e6 100%);
}