/* ===== СЕТКА СПИСКА ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:20px;
  padding:20px 0 0;
}

/* Мобильная галерея скрыта на десктопе */
.pro-gallery{ display:none; }

/* ===== КАРТОЧКА ===== */
.car-link{ text-decoration:none; color:inherit; display:block; }

.car-card{
  --pad-x:16px;
  width:100%;
  min-height:460px;
  background:#1c1c1c;
  color:#fff;
  border-radius:2px;
  box-shadow:0 4px 10px rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  transition:background-color .2s ease;
}
.car-card:hover{ background:#0e0e0e; }

.car-title{    font-size:18px; padding:10px var(--pad-x) 4px; }
.car-subtitle{ font-size:12px; color:#aaa; padding:0 var(--pad-x) 0; }
.car-price{    font-size:18px; font-weight:700; padding:16px var(--pad-x) 10px; }

/* По умолчанию — скрываем плашку */
.price-badge { display: none; }

.image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  background:#111;
  overflow:hidden;
}
.image-wrapper.bg-cover{
  background-image: var(--img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.car-card .image-wrapper > img.car-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.preloader{ position:absolute; inset:0; background:transparent; display:none; }

.car-specs{
  width:100%;
  font-size:14px;
  border-collapse:collapse;
  margin-bottom:auto;
}
.car-specs td{ padding:4px var(--pad-x); vertical-align:top; }
.car-specs td:first-child{ color:#ccc; width:50%; }
.car-specs td:last-child{  color:#fff; }

/* Скрываем мобильные характеристики на десктопе */
.car-specs-mobile {
  display: none !important;
}

.card-footer{
  font-size:13px;
  color:#aaa;
  padding:8px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  min-height:28px;
}

.card-footer .card-city {
  white-space: nowrap;
  text-align: left;
  padding-left:15px;   /* 👈 отступ слева */
}

.card-footer .card-date {
  white-space: nowrap;
  text-align: right;
  padding-right:15px;  /* 👈 отступ справа */
}


@media (min-width: 769px){
  .car-card .image-wrapper{
    order:-1;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    width: calc(100% + (2 * var(--pad-x)));
  }
}