/* === УМНАЯ АДАПТИВНОСТЬ ИЗОБРАЖЕНИЙ === */

/* Глобальные правила для всех изображений */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Основные изображения автомобилей - умная адаптивность */
.main-image,
.car-detail__main-img,
.slider-img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
  background: #f8f9fa;
  transition: object-fit 0.3s ease;
}

/* При наведении показываем полное изображение */
.main-image:hover,
.car-detail__main-img:hover,
.slider-img:hover {
  object-fit: contain !important;
}

/* Изображения в карточках автомобилей - заполняют всю ширину */
.car-card__image {
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
}

.car-card__image img,
.car-image img,
.order-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center;
  transition: transform 0.3s ease;
}

/* При наведении на карточку - легкое увеличение */
.car-card__image:hover img {
  transform: scale(1.05);
}

/* Изображения в галереях - умная адаптивность */
.car-detail__desc-img,
.car-detail__specs-img,
.car-detail__similar-img {
  object-fit: contain !important;
  object-position: center center;
  background: #f8f9fa;
  transition: object-fit 0.3s ease;
}

/* При наведении на изображения в галерее */
.car-detail__desc-img:hover,
.car-detail__specs-img:hover,
.car-detail__similar-img:hover {
  object-fit: cover !important;
}

/* Изображения в админ-панели */
.uploaded-image img,
.featured-car img,
.car-card-image img {
  object-fit: contain !important;
  object-position: center center;
  background: #f8f9fa;
}

/* === АДАПТИВНЫЕ ПРАВИЛА ДЛЯ РАЗНЫХ УСТРОЙСТВ === */

/* Планшеты в альбомной ориентации (1024px - 769px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .car-card__image img {
    object-fit: contain !important;
    background: #f8f9fa;
  }

  .car-card__image:hover img {
    transform: scale(1.02);
    object-fit: contain !important;
  }
}

/* Планшеты в портретной ориентации (768px - 481px) */
@media (max-width: 768px) and (min-width: 481px) {
  .main-image,
  .car-detail__main-img {
    height: 250px;
    object-fit: contain !important;
    background: #f8f9fa;
  }

  .car-detail__desc-img,
  .car-detail__specs-img {
    height: 200px;
    object-fit: contain !important;
    background: #f8f9fa;
  }

  /* На планшетах показываем полное изображение без обрезки */
  .car-card__image img {
    object-fit: contain !important;
    background: #f8f9fa;
  }

  .car-card__image:hover img {
    transform: none;
    object-fit: contain !important;
  }
}

/* Мобильные устройства (480px и меньше) */
@media (max-width: 480px) {
  .main-image,
  .car-detail__main-img {
    height: 200px;
    object-fit: contain !important;
    background: #f8f9fa;
  }

  /* На малых экранах показываем полное изображение без обрезки */
  .car-card__image img {
    height: 180px;
    object-fit: contain !important;
    background: #f8f9fa;
  }

  /* На очень маленьких экранах убираем эффекты наведения */
  .car-card__image:hover img {
    transform: none;
    object-fit: contain !important;
  }
}

/* Исправления для конкретных контейнеров */
.main-image-container {
  overflow: hidden;
  border-radius: 12px;
  background: #f8f9fa;
  position: relative;
}

.main-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, object-fit 0.3s ease;
}

.main-image-container:hover img {
  transform: scale(1.02);
  object-fit: cover;
}

/* Предотвращение растягивания изображений */
.car-detail__gallery img,
.main-gallery img,
.slider img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #f8f9fa;
  transition: object-fit 0.3s ease;
}

/* При наведении на галерею показываем обрезанную версию */
.car-detail__gallery img:hover,
.main-gallery img:hover,
.slider img:hover {
  object-fit: cover !important;
}

/* Специальные правила для разных соотношений сторон */
@media (orientation: landscape) {
  .car-card__image img {
    object-fit: contain !important;
  }
}

@media (orientation: portrait) {
  .car-card__image img {
    object-fit: contain !important;
  }
}

/* Улучшенная адаптивность для широких экранов */
@media (min-width: 1200px) {
  .main-image,
  .car-detail__main-img {
    object-fit: contain !important;
  }

  .main-image:hover,
  .car-detail__main-img:hover {
    object-fit: cover !important;
  }
}