/* ============================================================
   Первый экран (hero) — переработка по ТЗ:
   - Акцентная тёмно-синяя панель слева (заголовок/подзаголовок —
     без изменений по содержанию) + рейтинги.
   - Лид-форма справа (самое важное, чего не хватало).
   - Преимущества — отдельной строкой снизу, в один ряд на ПК.
   - Вся секция подобрана так, чтобы помещаться на экране ПК и
     телефона без скролла на большинстве распространённых разрешений.

   Форму обрабатывает assets/js/hero-form.js (тот же паттерн, что и
   assets/js/stoimost.js — POST в mail.php с CSRF-токеном).
   Файл вне frontend/build — пересборка Astro его не затронет.
   ============================================================ */

.hero2 {
    padding-top: 20px;
    /* Отступ до следующего блока («Когда стоит обратиться в ФАЗ») —
       было 20px, заголовок упирался в ряд преимуществ. */
    padding-bottom: 48px;
}

/* ---------- Общая «сцена»: одно фото на весь hero, форма плавает
   поверх него справа (как на референсе) — а не два раздельных блока
   с разрывом между ними. ---------- */
.hero2__stage {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    /* Затемнение уже вшито в саму картинку (см. скрипт генерации в
       assets/img — sharp attention-crop + мягкий SVG-градиент слева),
       поэтому здесь только сама картинка, без дублирующего CSS-градиента. */
    background: url("../img/hero-team.jpg") center center / cover no-repeat, var(--blue);
    border-radius: 24px;
    padding: 36px 44px;
    min-height: 420px;
    box-shadow: 0 24px 50px -28px rgba(10, 18, 45, 0.55);
}

.hero2__content {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}

.hero2__title {
    font-family: "Vela Sans";
    font-weight: 800;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
    max-width: 15ch;
    /* Заголовок частично выходит за синий нахлёст на само фото —
       плотная тень держит его читаемым поверх снимка. */
    text-shadow: 0 2px 24px rgba(6, 12, 30, 0.7), 0 1px 4px rgba(6, 12, 30, 0.5);
}

.hero2__subtitle {
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 14px;
    max-width: 34ch;
    text-shadow: 0 1px 16px rgba(6, 12, 30, 0.6);
}

.hero2__ratings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero2__rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.2s ease;
}
.hero2__rating:hover {
    background-color: rgba(255, 255, 255, 0.24);
}
.hero2__rating-logo {
    height: 18px;
    /* Цветные логотипы (красный Яндекс, зелёный 2ГИС) плохо читались
       на тёмной плашке — приводим к белому силуэту. */
    filter: brightness(0) invert(1);
}
.hero2__rating-star {
    color: #ffc043;
    font-size: 14px;
}
.hero2__rating-score {
    font-family: "Vela Sans";
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.hero2__rating-count {
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Мобильный дубль плашек рейтинга (см. front-page.php) — скрыт на
   ПК/планшете, показывается только на телефоне (см. медиа-запрос ниже). */
.hero2__ratings--below-form {
    display: none;
}

/* ---------- Форма справа — плавает белой карточкой поверх фото ---------- */
.hero2__form-card {
    flex: 0 0 420px;
    width: 420px;
    background-color: #fff;
    border-radius: 24px;
    padding: 28px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 30px 60px -20px rgba(6, 12, 30, 0.45);
}

.hero2__form-title {
    font-family: "Vela Sans";
    font-weight: 800;
    font-size: 21px;
    line-height: 1.3;
    color: var(--graphite);
}

.hero2__form-text {
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-slate-400);
    margin-top: 6px;
    margin-bottom: 14px;
}

.hero2__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero2__form .input {
    gap: 8px;
}

.hero2__form .input__pole {
    padding: 13px 18px;
}

.hero2__form-submit {
    justify-content: center;
    width: 100%;
    margin-top: 2px;
}

.hero2__form .checkbox {
    width: 100%;
}

/* Инлайн-сообщение об успешной отправке (создаётся JS) */
.hero2__form-success {
    display: none;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 12px 0;
}
.hero2__form-success.is-visible {
    display: flex;
}
.hero2__form-success-title {
    font-family: "Vela Sans";
    font-weight: 800;
    font-size: 18px;
    color: var(--graphite);
}
.hero2__form-success-text {
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 14px;
    color: var(--color-slate-400);
}

/* ---------- Преимущества снизу — один ряд ---------- */
.hero2__benefits {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-slate-200);
}

/* На десктопе/планшете трек «прозрачен» для раскладки — преимущества
   остаются прямыми флекс-детьми .hero2__benefits. На телефоне трек
   становится flex-лентой и плавно ездит туда-обратно (см. ниже). */
.hero2__benefits-track {
    display: contents;
}

.hero2__benefit {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.hero2__benefit-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.hero2__benefit p {
    margin: 0;
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--graphite);
}

/* ============================================================
   Планшет / laptop
   ============================================================ */
@media (max-width: 1279px) {
    .hero2__stage {
        gap: 28px;
        padding: 36px 38px;
        min-height: 400px;
    }
    .hero2__title {
        font-size: 30px;
    }
    .hero2__form-card {
        flex-basis: 360px;
        width: 360px;
        padding: 28px 30px;
    }
}

@media (max-width: 1023px) {
    .hero2 {
        padding-top: 20px;
        padding-bottom: 36px;
    }
    .hero2__stage {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 32px;
        min-height: 0;
        background-position: center center;
    }
    .hero2__form-card {
        flex-basis: auto;
        width: 100%;
    }
    .hero2__benefits {
        flex-wrap: wrap;
    }
    .hero2__benefit {
        flex: 1 1 calc(50% - 12px);
    }
}

/* ============================================================
   Телефон — максимально компактно, чтобы влезть на экран
   ============================================================ */
@media (max-width: 767px) {
    .hero2 {
        padding-top: 10px;
        padding-bottom: 28px;
    }
    /* На телефоне общий фон-фото на всю сцену съедал бы слишком много
       высоты попусту (за плашкой формы фото всё равно не видно) —
       фото/градиент переносим на .hero2__content отдельным блоком,
       а форма ниже — обычная белая карточка на всю ширину. */
    .hero2__stage {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0;
        min-height: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .hero2__content {
        /* Градиент уже вшит в hero-team-mobile.jpg. Карточку сделали
           выше и сместили фокус кадра к верху (center top вместо
           center center), чтобы лица не обрезались сверху. */
        background: url("../img/hero-team-mobile.jpg") center top / cover no-repeat, var(--blue);
        border-radius: 16px;
        padding: 18px 18px;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        /* По ТЗ: заголовок/подзаголовок — вниз карточки, чтобы сверху
           было видно лица на фото (раньше блок центрировался и текст
           перекрывал верх снимка). */
        justify-content: flex-end;
        box-shadow: 0 24px 50px -28px rgba(10, 18, 45, 0.55);
    }
    /* Рейтинги внутри фото прячем на телефоне — их дубль показываем
       отдельным блоком под формой, см. .hero2__ratings--below-form. */
    .hero2__content .hero2__ratings {
        display: none;
    }
    .hero2__form-card {
        flex-basis: auto;
        width: 100%;
        /* На ПК карточка «плавает» над фото, там сильная тень уместна.
           На телефоне под ней уже нет фото — только фон страницы, и та
           же тень выглядит слишком тяжёлым, явным «нависанием». Но и
           совсем без тени всё сливается в одно сплошное пятно — нужен
           лёгкий, но заметный объём. */
        box-shadow: 0 12px 28px -14px rgba(6, 12, 30, 0.32);
    }
    /* Мобильный дубль плашек рейтинга — светлая карточка под формой
       (на фото они были полупрозрачно-белыми, здесь фон другой). */
    .hero2__ratings--below-form {
        display: flex;
        flex-direction: row;
        /* Раньше был flex-wrap:wrap — суммарная ширина двух плашек чуть
           превышала ширину экрана, и вторая падала на новую строку.
           Держим их в одну строку и делим ширину поровну. */
        flex-wrap: nowrap;
        gap: 8px;
    }
    .hero2__ratings--below-form .hero2__rating {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 5px;
        background-color: #fff;
        border: 1px solid var(--color-slate-300);
        box-shadow: 0 6px 14px -8px rgba(6, 12, 30, 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 7px 6px;
        border-radius: 10px;
    }
    .hero2__ratings--below-form .hero2__rating:hover {
        background-color: var(--color-slate-100, #eef1f6);
    }
    .hero2__ratings--below-form .hero2__rating-logo {
        height: 13px;
        /* Здесь фон светлый — возвращаем логотипам их обычные цвета. */
        filter: none;
    }
    /* Звезда тут декоративна (оценку и так видно по "5.0"), а места в
       узкой плашке впритык — на телефоне убираем, чтобы не обрезалось
       "отзывов". */
    .hero2__ratings--below-form .hero2__rating-star {
        display: none;
    }
    .hero2__ratings--below-form .hero2__rating-score {
        font-size: 12px;
        color: var(--graphite);
    }
    .hero2__ratings--below-form .hero2__rating-count {
        font-size: 10px;
        color: var(--color-slate-400);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero2__title {
        font-size: 24px;
    }
    .hero2__subtitle {
        font-size: 13px;
        margin-top: 8px;
    }
    .hero2__ratings {
        margin-top: 12px;
        gap: 8px;
    }
    .hero2__rating {
        padding: 7px 10px;
        border-radius: 10px;
    }
    .hero2__rating-logo {
        height: 14px;
    }
    .hero2__rating-score {
        font-size: 12px;
    }
    .hero2__rating-count {
        font-size: 10px;
    }
    .hero2__form-card {
        padding: 16px 16px;
        border-radius: 16px;
    }
    .hero2__form-title {
        font-size: 17px;
    }
    .hero2__form-text {
        font-size: 12px;
        margin-top: 4px;
        margin-bottom: 10px;
    }
    .hero2__form {
        gap: 8px;
    }
    .hero2__form .input {
        gap: 6px;
    }
    .hero2__form .input__pole {
        padding: 11px 14px;
        font-size: 14px;
    }
    .hero2__form label {
        font-size: 13px;
    }
    .hero2__form-submit {
        padding: 13px 20px;
        font-size: 14px;
    }
    .hero2__benefits {
        /* По ТЗ: на телефоне ряд преимуществ скрыт (не удалён — просто
           не показывается). Остальные правила ниже больше не влияют
           на раскладку, но оставлены нетронутыми на случай, если блок
           снова понадобится показать. */
        display: none;
        /* Вьюпорт «бегущей строки»: прячем всё, что выезжает за края.
           overflow-x: auto оставляем как фолбэк, если JS не сработал —
           тогда ленту можно просто пролистать пальцем. */
        overflow-x: auto;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .hero2__benefits::-webkit-scrollbar {
        display: none;
    }
    /* Трек становится реальной flex-лентой шириной по содержимому. */
    .hero2__benefits-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: max-content;
    }
    .hero2__benefit {
        flex: 0 0 auto;
        width: 168px;
    }
    .hero2__benefit-icon {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .hero2__benefit p {
        font-size: 12px;
        line-height: 1.35;
    }

    /* Автопрокрутка туда-обратно. Класс is-marquee и величину сдвига
       (--benefits-shift) выставляет JS, только когда лента реально не
       влезает на экран. Движение плавное (ease-in-out) с короткими
       паузами на краях. */
    .hero2__benefits.is-marquee {
        overflow-x: hidden;
    }
    .hero2__benefits.is-marquee .hero2__benefits-track {
        animation: heroBenefitsPingPong 28s ease-in-out infinite;
        /* Выносим ленту на отдельный GPU-слой, чтобы движение было
           гладким и без поддёргиваний при перерисовке. */
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    @keyframes heroBenefitsPingPong {
        0%,
        8% {
            transform: translate3d(0, 0, 0);
        }
        50%,
        58% {
            transform: translate3d(calc(-1 * var(--benefits-shift, 0px)), 0, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero2__benefits.is-marquee .hero2__benefits-track {
            animation: none;
        }
    }
}

@media (max-width: 400px) {
    .hero2__title {
        font-size: 23px;
    }
}

/* Совсем невысокие экраны (короткие телефоны вроде iPhone SE) —
   ещё немного ужимаем вертикальные отступы поверх телефонного набора. */
@media (max-width: 767px) and (max-height: 700px) {
    .hero2 {
        padding-top: 6px;
        padding-bottom: 18px;
    }
    .hero2__stage {
        gap: 8px;
    }
    .hero2__content {
        padding: 14px 16px;
        min-height: 160px;
    }
    .hero2__title {
        font-size: 21px;
    }
    .hero2__subtitle {
        margin-top: 6px;
    }
    .hero2__ratings {
        margin-top: 8px;
    }
    .hero2__form-card {
        padding: 12px 16px;
    }
    .hero2__form-title {
        font-size: 15px;
    }
    .hero2__form-text {
        margin-top: 2px;
        margin-bottom: 8px;
    }
    .hero2__form {
        gap: 6px;
    }
    .hero2__form .input__pole {
        padding: 9px 12px;
    }
    .hero2__form-submit {
        padding: 11px 20px;
    }
    .hero2__benefits {
        margin-top: 6px;
        padding-top: 6px;
    }
    .hero2__benefit {
        width: 150px;
    }
}

/* ---------- Предупреждение ФАС под баннером ---------- */
.hero2__notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 20px;
    border-radius: 14px;
    background-color: var(--color-slate-100, #f1f5f9);
    border: 1px solid var(--color-slate-200);
}

.hero2__notice-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-slate-400);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero2__notice-text {
    margin: 0;
    font-family: "Vela Sans";
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-slate-400);
}

@media (min-width: 1024px) {
    .hero2__notice-text {
        flex: 1 1 auto;
        text-align: justify;
        text-align-last: left;
    }
}

@media (max-width: 767px) {
    .hero2__notice {
        align-items: flex-start;
        gap: 10px;
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    .hero2__notice-icon {
        width: 18px;
        height: 18px;
        margin-top: 1px;
    }
    .hero2__notice-icon svg {
        width: 10px;
        height: 10px;
    }
    .hero2__notice-text {
        font-size: 11px;
        line-height: 1.45;
    }
}