/* ============================================================
   Главный экран: слайдер с плавной сменой кадров (fade) + 2 баннера
   (Акции / Распродажа) справа. Накладывается поверх .first.
   Scoped под .est-hero-v2. est-hero v1.0.0
   ============================================================ */

/* Контейнер-полоса: убираем скругление/обрезку (у карточек своё) и тяг под хедер
   (для карточек нужен чистый отступ, а не -11vw как у прежнего full-bleed). */
.est-hero-v2.first {
    border-radius: 0;
    overflow: visible;
    background: transparent;
    margin-top: 1.5vw;
    height: auto;
}

/* 2-колоночная сетка: слева карусель, справа колонка из 2 баннеров.
   Высота — под видимую область (точно подгоняется скриптом estFitHero). */
.est-hero-v2 .est-hero__grid {
    display: grid;
    grid-template-columns: 2.05fr 1fr;
    gap: 0.9vw;
    width: 100%;
    /* высота первого экрана — заметная, но не на весь вьюпорт (иначе баннеры слишком
       высокие и картинки в них плохо кадрируются) */
    height: min(40vw, 64vh);
    min-height: 340px;
    box-sizing: border-box;
    padding: 0 7vw;
}

/* ---------- ЛЕВО: карусель ---------- */
.est-hero-v2 .est-hero__main {
    position: relative;
    height: 100%;
    border-radius: 1.6vw;
    overflow: hidden;
    background: #e4e1db;
}
.est-hero-v2 .est-hero__main .swiper-container.first-swiper { width: 100%; height: 100%; }
.est-hero-v2 .est-hero__main .swiper-slide { display: block; }

/* до инициализации Swiper показываем только первый слайд (без наложения 3 заголовков).
   Swiper 5.x вешает на контейнер класс swiper-container-initialized. */
.est-hero-v2 .first-swiper:not(.swiper-container-initialized) .swiper-slide { display: none; }
.est-hero-v2 .first-swiper:not(.swiper-container-initialized) .swiper-slide:first-child { display: block; }

/* фон слайда — в пределах карточки (был во всю ширину экрана) */
.est-hero-v2 .first__slide { position: relative; width: 100%; height: 100%; padding-top: 0; }
.est-hero-v2 .first__bg { z-index: 0; width: 100%; height: 100%; }
.est-hero-v2 .first__bg .main-bg { width: 100%; height: 100%; object-fit: cover; }
.est-hero-v2 .first__bg .second-bg { width: 100%; height: 100%; }

/* затемнение снизу для читаемости текста */
.est-hero-v2 .first__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%);
}

/* контент слайда — внизу слева, вписан в карточку */
.est-hero-v2 .first__slide .wrapper {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 2.6vw 2.4vw;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.est-hero-v2 .first__title {
    max-width: none;
    font-size: 2.35vw;
    line-height: 1.16;
    margin-bottom: 1vw;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.est-hero-v2 .first__text { margin-bottom: 1.3vw; }
.est-hero-v2 .first__text p {
    font-size: 1.05vw;
    line-height: 1.45;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.est-hero-v2 .first__bullets,
.est-hero-v2 .first__text .dots { display: none; }
/* убираем «бликовую» диагональ (.md-main-color-btn::after) у кнопок hero — на телефоне ломалась */
.est-hero-v2 .first__buttons-btn::after { display: none !important; }
.est-hero-v2 .first__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8vw; }

/* ---------- ПРАВО: 2 баннера ---------- */
.est-hero-v2 .est-hero__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.9vw;
    height: 100%;
    min-width: 0;
}
.est-hero__banner {
    position: relative;
    display: block;
    border-radius: 1.6vw;
    overflow: hidden;
    text-decoration: none;
    min-height: 0;
}
.est-hero__banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.est-hero__banner:hover .est-hero__banner-img { transform: scale(1.06); }
.est-hero__banner-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(165deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.72) 100%);
}
.est-hero__banner--actions .est-hero__banner-scrim {
    background: linear-gradient(160deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.72) 100%);
}
.est-hero__banner-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.3vw 1.5vw;
    display: flex;
    flex-direction: column;
    gap: 0.45vw;
}
.est-hero__banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    align-self: flex-start;
    background: #e3342f;
    color: #fff;
    font-weight: 700;
    font-size: 0.76vw;
    line-height: 1;
    padding: 0.34vw 0.7vw;
    border-radius: 0.45vw;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.est-hero__banner-badge svg { width: 0.78vw; height: auto; }
.est-hero__banner-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.3vw;
    line-height: 1.2;
    text-shadow: 0 1px 5px rgba(0,0,0,.55);
}
.est-hero__banner-sub {
    color: rgba(255,255,255,.92);
    font-size: 0.86vw;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* ============ ПЛАНШЕТ 768–1024 ============ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* отменяем планшетный -45.1vh / фиксированную 45vh — высота под видимую область */
    .est-hero-v2.first {
        margin-top: 1.5vw;
        min-height: 0;
        max-height: none;
        height: auto;
    }
    .est-hero-v2 .est-hero__grid { padding: 0 4vw; gap: 1.2vw; grid-template-columns: 1.9fr 1fr; height: min(62vw, 64vh); min-height: 320px; }
    .est-hero-v2 .est-hero__main { border-radius: 2vw; }
    .est-hero-v2 .first__slide .wrapper { padding: 0 3vw 3vw; }
    .est-hero-v2 .first__title { font-size: 3.1vw; margin-bottom: 1.4vw; }
    .est-hero-v2 .first__text { display: none; }
    .est-hero__banner { border-radius: 2vw; }
    .est-hero__banner-body { padding: 1.6vw; }
    .est-hero__banner-badge { font-size: 1.3vw; padding: 0.6vw 1.1vw; border-radius: 0.8vw; }
    .est-hero__banner-badge svg { width: 1.3vw; }
    .est-hero__banner-title { font-size: 2.1vw; }
    .est-hero__banner-sub { display: none; }
}

/* ============ ТЕЛЕФОН ≤768 (стек: карусель → 2 баннера) ============ */
@media only screen and (max-width: 768px) {
    .est-hero-v2.first {
        height: auto;
        min-height: 0;
        max-height: none;
        /* мобильный хедер position:fixed высотой 17vw — опускаем карточку ниже него,
           иначе верх карусели уходит под хедер и «обрезается» */
        margin-top: 19.5vw;
        padding-bottom: 0;
        border-radius: 0;
    }
    .est-hero-v2 .est-hero__grid {
        grid-template-columns: 1fr;
        gap: 3vw;
        height: auto;
        padding: 0 4vw;
    }
    .est-hero-v2 .est-hero__main {
        height: 158vw;
        border-radius: 4vw;
    }
    /* усиленное затемнение снизу — под объёмный контент */
    .est-hero-v2 .first__slide::after {
        background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.82) 100%);
    }
    .est-hero-v2 .first__slide .wrapper {
        padding: 0 6.5vw 13vw;
        align-items: stretch;
        text-align: left;
    }
    .est-hero-v2 .first__title {
        font-size: 5.7vw;
        line-height: 1.25;
        text-align: left;
        width: 100%;
        max-width: none;
        margin-bottom: 3.5vw;
    }
    .est-hero-v2 .first__text { display: block; margin-bottom: 5.5vw; text-align: left; }
    .est-hero-v2 .first__text p { font-size: 3.6vw; line-height: 1.5; text-align: left; }
    .est-hero-v2 .first__buttons { flex-direction: column; align-items: stretch; gap: 3.5vw; width: 100%; }
    .est-hero-v2 .first__buttons-btn { width: 100%; justify-content: center; padding: 4vw 4vw; box-sizing: border-box; }

    .est-hero-v2 .est-hero__side {
        grid-template-rows: none;
        grid-auto-rows: 52vw;
        gap: 3.5vw;
        height: auto;
    }
    .est-hero__banner { border-radius: 4vw; }
    .est-hero__banner-body { padding: 5.5vw; gap: 2.2vw; }
    .est-hero__banner-badge {
        font-size: 3.1vw;
        padding: 1.6vw 3vw;
        border-radius: 1.8vw;
        gap: 1.4vw;
    }
    .est-hero__banner-badge svg { width: 3.1vw; }
    .est-hero__banner-title { font-size: 4.9vw; line-height: 1.22; }
    .est-hero__banner-sub { font-size: 3.5vw; line-height: 1.4; }
}

/* ---------- Ручное управление слайдером (стрелки + точки) ---------- */
.est-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 2.7vw;
    height: 2.7vw;
    max-width: 52px;
    max-height: 52px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.86);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, opacity .2s ease;
}
.est-hero__nav:hover { background: #fff; }
.est-hero__nav--prev { left: 1vw; }
.est-hero__nav--next { right: 1vw; }
.est-hero__nav svg { width: 45%; height: 45%; }
.est-hero__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

.est-hero__dots {
    position: absolute;
    bottom: 1.3vw;
    right: 1.6vw;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5vw;
    width: auto;
}
.est-hero__dots .swiper-pagination-bullet {
    width: 0.65vw;
    height: 0.65vw;
    max-width: 11px;
    max-height: 11px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    opacity: 1;
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
.est-hero__dots .swiper-pagination-bullet-active {
    background: #fff;
    width: 1.8vw;
    max-width: 28px;
    min-width: 20px;
}

/* Телефон: стрелки убираем (есть свайп + точки), точки — внизу по центру под кнопками */
@media only screen and (max-width: 768px) {
    .est-hero__nav { display: none; }
    .est-hero__dots {
        top: auto;
        bottom: 5vw;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: 2.5vw;
    }
    .est-hero__dots .swiper-pagination-bullet {
        width: 2.2vw; height: 2.2vw; min-width: 0; min-height: 0;
        background: rgba(255,255,255,.55);
    }
    .est-hero__dots .swiper-pagination-bullet-active { width: 6vw; max-width: none; }
}