/* ── uslugihero-v1: первая секция шаблона отдельной услуги ──────────────────
   Desktop Figma: canvas 1920, контент 1200 (offset 360).
   Mobile  Figma: canvas 400,  контент 300  (поля по 50 = 12.5vw).

   Все размеры ниже — Figma-координаты минус offset. Враппер без боковых
   padding'ов: контентная коробка ровно 1200px, как у остальных секций услуги.

   Вертикаль десктопной колонки (сумма = 633px, высота фото):
     крошки 33 + 29 + заголовок 90 + 30 + преимущества 207 + 40 + карточка 204

   Мобильные структурные размеры — в vw от 400px-макета (300px = 75vw),
   шрифты — в px: тот же паттерн, что в остальных v1-секциях.
   ─────────────────────────────────────────────────────────────────────────── */

.uslugihero-v1 {
    --section-pt: 10px;
    --section-pb: 20px;
    background: #fff;
    padding: var(--section-pt) 0 var(--section-pb);
}

.uslugihero-v1__wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.uslugihero-v1__row {
    display: flex;
    align-items: stretch;
    gap: 46px;
}

.uslugihero-v1__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Крошки ── */

/* По макету фото на 6px выше текста крошек (фото 136, текст 142), а заголовок —
   на 62px ниже фото (198). Отсчёт от текста, а не от растра `image 1`: его
   верх 139 — это край белой подложки, текст внутри неё начинается на 142.
   Верх колонки совпадает с верхом фото, поэтому 6px берёт на себя padding.
   Без min-height: при переносе крошек на вторую строку заголовок уезжает
   ровно на её высоту, а не «съедает» запас подложки. */
.uslugihero-v1__bcr {
    padding-top: 6px;
    margin-bottom: 39px;
}

/* ── Заголовок ── */

/* overflow-wrap — защита от названий без пробелов: такое слово браузеру негде
   разорвать, и оно вылезает за карточку (страницу не разрывает — выше стоит
   overflow-x: hidden, поэтому текст просто обрезается). Обычные заголовки
   правило не трогает: оно срабатывает только когда слово не влезает целиком. */
.uslugihero-v1__title {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.07;
    letter-spacing: -0.01em;
    color: var(--text-main-color);
    max-width: 564px;
    margin: 0;
    overflow-wrap: break-word;
}

/* ── Подзаголовок ── */

/* Необязательный: выводится, только если передан аргумент `subtitle`.
   Кегль заметно крупнее основного текста (20px против 16px) — по заданию
   подзаголовок несёт главный триггер первого экрана и должен читаться,
   а не выглядеть подписью. Ширина — как у заголовка, чтобы строки рвались
   по той же колонке. */
.uslugihero-v1__subtitle {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--text-main-color-85);
    max-width: 564px;
    margin: 20px 0 0;
}

/* ── Преимущества (общий компонент benefits-v1, вариант lg) ── */

.uslugihero-v1 .benefits-v1 {
    margin-top: 30px;
}

/* ── Вариант без преимуществ — `.uslugihero-v1--nobenefits` ──
   Сетку преимуществ занимала середина колонки; без неё карточка-CTA
   заканчивается на 496 при фотографии высотой 633, и под ней остаётся
   137px пустоты.

   Прижимать карточку к низу (`margin-top: auto`) пробовали — низ
   выравнивается с фото, но пустота переезжает в середину и разрывает
   связь «текст → форма». Решение владельца: пустоту забирает сама
   карточка, пропорционально увеличенная. Делается последним шагом,
   после правок кегля по всем экранам (пункт 1.2 задания) — они
   съедают часть этих 137px, и подгонять раньше значит подгонять дважды.

   ВНИМАНИЕ при правке: пара классов даёт (0,2,0) и перебивает мобильное
   `.uslugihero-v1__cta { margin-top: 6.25vw }` с его (0,1,0) при любом
   порядке в файле. Любое правило этого варианта — только внутри
   `@media (min-width: 769px)`, иначе поедет мобильная раскладка. */

/* ── Зелёная карточка-CTA ── */

.uslugihero-v1__cta {
    width: 461px;
    max-width: 100%;
    margin-top: 40px;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 30px;
    background-color: var(--color-sage);
    background-size: cover;
    background-position: center;
}

/* Figma-дамп отдаёт 700 на весь фрейм, но на макете «Отправьте заявку»
   заметно жирнее остального — выделение сделано отдельным слоем, в дамп оно
   не попало. Базовый вес 500, акцент — на <strong>. */
.uslugihero-v1__cta-text {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-white);
    max-width: 436px;
    margin: 0 0 15px;
}

.uslugihero-v1__cta-text strong {
    font-weight: 700;
}

.uslugihero-v1__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 324px;
    max-width: 100%;
    height: 73px;
    border-radius: 100px;
    background: var(--color-golden);
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-speed);
}

.uslugihero-v1__cta-btn:hover {
    opacity: 0.88;
    color: var(--color-white);
}

/* Подпись кнопки в макете различается по брейкпоинтам */
.uslugihero-v1__cta-btn-mobile {
    display: none;
}

/* ── Фото ── */

.uslugihero-v1__media {
    flex: 0 0 525px;
    max-width: 525px;
}

.uslugihero-v1__media picture {
    display: block;
    height: 100%;
}

.uslugihero-v1__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 633px;
    object-fit: cover;
    border-radius: 30px;
}

/* ══ Вариант без фото — `.uslugihero-v1--nophoto` ═══════════════════════════
   Фото не рендерится вовсе (условие в партиале), поэтому колонка получает всю
   ширину контента. Заголовок растягивается, а преимущества и зелёная карточка
   встают в один ряд под ним.

   Разметка та же: колонка переключается с flex-столбца на грид, и четыре её
   прямых потомка расставляются явно. Обёртки вокруг преимуществ и карточки не
   нужны — иначе пришлось бы менять разметку основного варианта.

     ряд 1  крошки       (обе колонки)
     ряд 2  заголовок    (обе колонки)
     ряд 3  преимущества | карточка
   ─────────────────────────────────────────────────────────────────────────── */

.uslugihero-v1--nophoto .uslugihero-v1__col {
    display: grid;
    grid-template-columns: 624px 461px;   /* сетка преимуществ 2×312 + карточка */
    justify-content: space-between;
    align-content: start;
}

.uslugihero-v1--nophoto .uslugihero-v1__bcr,
.uslugihero-v1--nophoto .uslugihero-v1__title {
    grid-column: 1 / -1;
}

/* Заголовок больше не делит строку с фото — ограничение по макету снимается */
.uslugihero-v1--nophoto .uslugihero-v1__title {
    max-width: none;
}

/* Карточка встаёт справа от преимуществ, а не под ними; отступ сверху
   выравнивается с ними, иначе ряд разъезжается по вертикали. */
.uslugihero-v1--nophoto .uslugihero-v1__cta {
    grid-column: 2;
    grid-row: 3;
    margin-top: 30px;
    align-self: start;   /* своя высота, а не растяжка по ряду преимуществ */
}

/* ══ Mobile (Figma canvas 400px) ══════════════════════════════════════════
   Вертикаль: заголовок 54 + 25 + преимущества 302 + 25 + карточка 196
              + 20 + фото 240
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .uslugihero-v1 {
        --section-pt: 0px;
        --section-pb: 10vw;
    }

    .uslugihero-v1__wrap {
        width: 75vw;
        max-width: none;
    }

    .uslugihero-v1__row {
        flex-direction: column;
        gap: 5vw;
    }

    /* Десктопные 6px сверху — компенсация под верх фото, на мобильном фото
       уходит вниз, компенсировать нечего. */
    .uslugihero-v1__bcr {
        padding-top: 0;
        margin-bottom: 5.5vw;
    }

    .uslugihero-v1 .benefits-v1 {
        margin-top: 6.25vw;
    }

    .uslugihero-v1__title {
        font-size: 25px;
        max-width: none;
    }

    .uslugihero-v1__subtitle {
        font-size: 16px;
        max-width: none;
        margin-top: 4vw;
    }

    .uslugihero-v1__cta {
        width: 100%;
        margin-top: 6.25vw;
        padding: 5vw;
        border-radius: 5vw;
    }

    .uslugihero-v1__cta-text {
        font-size: 14px;
        max-width: 61.25vw;
        margin-bottom: 5vw;
    }

    .uslugihero-v1__cta-btn {
        width: 100%;
        height: 15vw;
        font-size: 14px;
    }

    .uslugihero-v1__cta-btn-desktop {
        display: none;
    }

    .uslugihero-v1__cta-btn-mobile {
        display: inline;
    }

    .uslugihero-v1__media {
        flex: 0 0 auto;
        max-width: none;
    }

    .uslugihero-v1__photo {
        min-height: 0;
        height: auto;
        aspect-ratio: 300 / 240;
        border-radius: 5vw;
    }

    /* Без фото на мобильном раскладка не меняется — колонка возвращается
       к обычному столбцу, ряд «преимущества + карточка» здесь не нужен. */
    .uslugihero-v1--nophoto .uslugihero-v1__col {
        display: flex;
    }

    .uslugihero-v1--nophoto .uslugihero-v1__cta {
        margin-top: 6.25vw;
    }
}