/*
 * Hero-слайд «Карбамид» с вертикальным мешком-стопкой (assets/photos/urea-stack*.webp).
 *
 * Подключается после основных стилей (см. resources/views/site/home.blade.php) и переопределяет правила
 * «Hero: карбамид» из modern.css, рассчитанные на широкую картинку FON_karb3.png.
 * Правила действуют только если в баннере указана картинка urea-stack*, поэтому старые значения
 * поля «Дополнительные слои» в админке продолжают отображаться по-старому.
 */

/* Десктоп: мешок слева, текст справа */
@media (min-width: 1024px) {
    .hero-urea .hero-stage .hero-product[src*="urea-stack"] {
        left: 1.5%;
        bottom: 80px; /* над пилюлей переключателя слайдов */
        width: auto;
        height: 84%;
        max-width: 47%;
        object-fit: contain;
        object-position: left bottom;
        filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .38));
    }
}

/* Планшет и телефон: мешок над текстом, по центру */
@media (max-width: 1023px) {
    .hero-urea .hero-stage:has(.hero-product[src*="urea-stack"]) {
        max-width: min(420px, 100%);
    }
    .hero-urea .hero-stage .hero-product[src*="urea-stack"] {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: clamp(260px, 84vw, 420px);
        object-fit: contain;
        object-position: center bottom;
        transform: none;
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .4));
    }
}

/*
 * Картинка слайда берётся из карточки продукта «Карбамид» (класс hero-product--catalog, см. App\Support\HeroImage).
 * Ширина ограничена так, чтобы мешки не заходили под текст; высота считается от пропорций картинки.
 * Анимация ureaIn использует transform, поэтому позиционируем через left/bottom, а не translate.
 */
@media (min-width: 1024px) {
    .hero-urea .hero-stage .hero-product.hero-product--catalog {
        left: 1.5%;
        bottom: 15%;
        width: 48%;
        height: auto;
        max-width: none;
        max-height: 78%;
        object-fit: contain;
        object-position: left bottom;
        filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .38));
    }
}

@media (max-width: 1023px) {
    .hero-urea .hero-stage:has(.hero-product--catalog) {
        max-width: min(520px, 100%);
    }
    .hero-urea .hero-stage .hero-product.hero-product--catalog {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center bottom;
        transform: none;
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .4));
    }
}