/*
 * EUROSPACE mobile hero full-height v3.3
 * Исправляет только mobile.
 * Фон теперь покрывает ВСЮ высоту hero, а не только нижнюю часть.
 */

@media (max-width: 768px) {
    .es-render-hero {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        background: #f8f2ec !important;
    }

    /*
     * Ключевое исправление:
     * background-size: auto 100%
     * => каждая копия изображения равна высоте всего hero.
     */
    .es-render-hero::before {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        inset: 0 !important;
        pointer-events: none !important;

        background-image:
            var(--hero-bg),
            var(--hero-bg) !important;

        background-repeat:
            no-repeat,
            no-repeat !important;

        background-size:
            auto 100%,
            auto 100% !important;

        background-position:
            left bottom,
            right bottom !important;

        opacity: .68 !important;

        filter:
            saturate(.88)
            contrast(.94)
            brightness(1.06) !important;
    }

    /*
     * Светлая центральная зона теперь тянется по всей высоте,
     * а по бокам город остаётся видимым от верха до низа.
     */
    .es-render-hero::after {
        content: "" !important;
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 !important;
        pointer-events: none !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,253,250,.14) 0%,
                rgba(255,253,250,.36) 18%,
                rgba(255,253,250,.78) 38%,
                rgba(255,253,250,.90) 50%,
                rgba(255,253,250,.78) 62%,
                rgba(255,253,250,.36) 82%,
                rgba(255,253,250,.14) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255,253,250,.58) 0%,
                rgba(255,253,250,.26) 22%,
                rgba(255,253,250,.12) 55%,
                rgba(255,253,250,.18) 100%
            ) !important;
    }

    .es-render-hero > .container {
        position: relative !important;
        z-index: 2 !important;
    }

    /*
     * Екатеринбург:
     * историческая часть слева и высотки справа.
     */
    .es-render-hero--ekb::before {
        background-position:
            13% bottom,
            87% bottom !important;
    }

    /*
     * Москва:
     * Кремль и собор удерживаем по краям.
     */
    .es-render-hero--msk::before {
        background-position:
            11% bottom,
            89% bottom !important;
    }

    /*
     * Карточки чуть прозрачные:
     * город продолжается за ними, но текст читается.
     */
    .es-render-hero .es-demo-facts > div,
    .es-render-hero .es-demo-offices__summary,
    .es-render-hero .es-demo-offices__content {
        background: rgba(255, 255, 255, .90) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }
}

/*
 * На очень узком телефоне делаем фон чуть ярче:
 * боковые фрагменты иначе становятся слишком узкими.
 */
@media (max-width: 430px) {
    .es-render-hero::before {
        background-size:
            auto 100%,
            auto 100% !important;

        opacity: .72 !important;
    }

    .es-render-hero--ekb::before {
        background-position:
            15% bottom,
            85% bottom !important;
    }

    .es-render-hero--msk::before {
        background-position:
            13% bottom,
            87% bottom !important;
    }
}