/**
 * CutDrill Hero Mobile Fix CSS
 * Исправление Hero-изображений на мобильных устройствах
 * Применяется ТОЛЬКО на проблемных страницах (определяется через классы на body)
 * 
 * Hero IMG selector used: .cd-hero-image-wrapper .cd-hero-image
 * Hero container selector used: .cd-hero-image-wrapper
 */

/* ============================================
   BAD CASES (cropping > 30% OR status != OK)
   ============================================ */
@media (max-width: 768px) {
    /* Мягкий фикс: меняем object-position на center top для лучшей видимости */
    body.cd-hero-fix-bad .cd-hero-image-wrapper .cd-hero-image {
        object-position: center top !important;
    }

    /* Убираем слишком жёсткое ограничение max-height, если оно есть */
    body.cd-hero-fix-bad .cd-hero-image-wrapper {
        max-height: 70vh !important; /* Более мягкое ограничение вместо 60vh/65vh */
    }
}

/* ============================================
   WORST CASES (cropping > 45%)
   ============================================ */
@media (max-width: 768px) {
    /* Сильный фикс: используем contain вместо cover для worst cases */
    body.cd-hero-fix-worst .cd-hero-image-wrapper .cd-hero-image {
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Добавляем нейтральный фон контейнеру, чтобы не было пустот */
    body.cd-hero-fix-worst .cd-hero-image-wrapper {
        background: rgba(0, 0, 0, 0.03) !important;
        max-height: 70vh !important;
    }
}

/* ============================================
   Дополнительные улучшения для мобильных
   ============================================ */
@media (max-width: 768px) {
    /* Убеждаемся, что контейнер не обрезает изображение слишком сильно */
    body.cd-hero-fix-bad .cd-hero-image-wrapper,
    body.cd-hero-fix-worst .cd-hero-image-wrapper {
        /* Сохраняем aspect-ratio, но делаем его более гибким */
        min-height: 200px; /* Минимальная высота для видимости */
    }
}