/* ──────────────────────────────────────────────────────────────────────────
   Волна 2 — возвращаем странице смысл.
   Подключается после wave1.css. Селекторы повторяют тему один в один,
   чтобы побеждать без !important.
   ────────────────────────────────────────────────────────────────────────── */


/* «Когда нужен сайт» — тексты вокруг картинки, как в макете.
   Было: картинка по центру, под ней четыре подписи сеткой 2×2 — композиция
   макета потерялась. Стало: слева две подписи, справа две, картинка между.
   Мобильная раскладка (max-width: 992px в media.css) не трогается. */
@media (min-width: 993px) {

    #section-time_need-content .container {
        display: -ms-grid;
        display: grid;
        grid-template-columns: minmax(200px, 1fr) minmax(340px, 620px) minmax(200px, 1fr);
        grid-template-areas:
            "title  title  title"
            "stitle stitle stitle"
            "t1     image  t2"
            "t3     image  t4"
            "button button button";
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        column-gap: 48px;
        row-gap: 8px;
    }

    #section-time_need-content .title  { grid-area: title; }
    #section-time_need-content .stitle { grid-area: stitle; }
    #section-time_need-content .image  { grid-area: image; }
    #section-time_need-content .button { grid-area: button; }

    /* Обёртка растворяется, и четыре подписи становятся ячейками той же сетки. */
    #section-time_need-content .texts_list {
        display: contents;
    }

    #section-time_need-content .text1 { grid-area: t1; }
    #section-time_need-content .text2 { grid-area: t2; }
    #section-time_need-content .text3 { grid-area: t3; }
    #section-time_need-content .text4 { grid-area: t4; }

    /* Левая колонка прижата к картинке — так подписи читаются парой с ней. */
    #section-time_need-content .text1,
    #section-time_need-content .text3 {
        justify-self: end;
        text-align: right;
    }

    #section-time_need-content .text1,
    #section-time_need-content .text2,
    #section-time_need-content .text3,
    #section-time_need-content .text4 {
        max-width: 300px;
        font-size: 17px;
        line-height: 1.45;
    }

    #section-time_need-content .image img {
        max-width: 100%;
    }
}


/* Сетка логотипов CMS вернулась из макета (img/cms.png — 20 логотипов,
   лежала в теме и нигде не использовалась). Текстовые абзацы под ней
   остаются: там имена CMS словами, они нужны поиску. */
#section-cms-content .cms_logos {
    max-width: 1000px;
    margin: 44px auto 8px;
    padding: 0 24px;
}
#section-cms-content .cms_logos img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    #section-cms-content .cms_logos {
        margin: 28px auto 4px;
        padding: 0 16px;
    }
}


/* Первый экран на мобильном: текст выше картинки, подзаголовок виден.
   В media.css подзаголовок был закрыт display:none, а картинка стояла
   order:1 — до первого обещания приходилось листать почти экран. */
@media (max-width: 992px) {
    #section-hero-content .hero_slider .slide_i .left_block {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    #section-hero-content .hero_slider .slide_i .right_block {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-bottom: 0;
        margin-top: 24px;
    }
    #section-hero-content .hero_slider .slide_i .left_block .text {
        display: block;
        font-size: 15px;
        line-height: 1.55;
        text-align: center;
        margin-bottom: 22px;
    }
    /* Картинка занимала пол-экрана и отодвигала кнопки за сгиб. */
    #section-hero-content .hero_slider .slide_i .right_block img {
        max-width: 74%;
    }
}


/* Плитка тем над блоком «о нас». Собрана из ссылок самого текста —
   те же адреса и анкоры. Текст под ней остаётся целиком, но гео и услуги
   теперь видно, не вчитываясь в абзацы. */
#section-about_us-content .about_tiles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 0 24px;
}
#section-about_us-content .about_tiles a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: var(--g1-ink);
    text-decoration: none;
    background: var(--g1-white);
    border: 1px solid var(--g1-line);
    border-radius: 20px;
    transition: border-color .15s, color .15s;
}
#section-about_us-content .about_tiles a:hover,
#section-about_us-content .about_tiles a:focus-visible {
    border-color: var(--g1-purple);
    color: var(--g1-blue);
}
@media (max-width: 767px) {
    #section-about_us-content .about_tiles {
        gap: 8px;
        margin-bottom: 24px;
        padding: 0 16px;
    }
    #section-about_us-content .about_tiles a {
        font-size: 13px;
        padding: 0 13px;
        min-height: 38px;
    }
}


/* Первый экран: надзаголовок с нишей и гео + три цифры результата.
   Цифры только клиентские, подписи дословно с /cases/, каждая ведёт
   на свой разбор. Блок стоит после слайдера, а не внутри слайда —
   иначе slick клонирует его вместе со слайдами. */
#section-hero-content .hero_eyebrow {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g1-purple);
    margin-bottom: 14px;
}
#section-hero-content .hero_proof {
    margin-top: 8px;
    padding-bottom: 8px;
}
#section-hero-content .hero_proof .proof_lead {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g1-muted);
    margin-bottom: 14px;
}
#section-hero-content .hero_proof .proof_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
}
#section-hero-content .hero_proof .proof_i {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 240px;
    flex: 1 1 240px;
    display: block;
    padding: 18px 22px;
    background: var(--g1-white);
    border: 1px solid var(--g1-line);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
#section-hero-content .hero_proof .proof_i:hover,
#section-hero-content .hero_proof .proof_i:focus-visible {
    border-color: var(--g1-purple);
    box-shadow: 0 6px 20px rgba(42, 43, 75, .07);
}
#section-hero-content .hero_proof .proof_num {
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--g1-ink);
    margin-bottom: 6px;
}
#section-hero-content .hero_proof .proof_num small {
    font-size: 16px;
    font-weight: 700;
    color: var(--g1-muted);
}
#section-hero-content .hero_proof .proof_cap {
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--g1-text);
}
@media (max-width: 767px) {
    #section-hero-content .hero_eyebrow {
        font-size: 11px;
        text-align: center;
        margin-bottom: 10px;
    }
    #section-hero-content .hero_proof .proof_lead {
        text-align: center;
        font-size: 11px;
    }
    #section-hero-content .hero_proof .proof_i {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        padding: 14px 18px;
    }
    #section-hero-content .hero_proof .proof_num {
        font-size: 26px;
    }
}


/* Цифры должны попадать в первый экран, а не начинаться ровно на сгибе.
   У контейнера было 103px сверху и снизу — поджимаем по шкале 64/24
   и ограничиваем высоту иллюстрации. */
@media (min-width: 993px) {
    #section-hero-content .container {
        padding-top: 64px;
        padding-bottom: 24px;
    }
    #section-hero-content .hero_slider .slide_i .right_block img {
        max-height: 400px;
        width: auto;
    }
}


/* Кнопка «наверх» и виджет контактов стояли двумя одинаковыми яркими
   кругами друг над другом — читались как дубль, тем более что иконка
   виджета (самолётик телеграма) в малом размере похожа на стрелку.
   Яркий круг на экране должен быть один, и это тот, что ведёт к контакту.
   «Наверх» уходит на второй план: белый круг, сиреневая стрелка. */
.to-top {
    background: var(--g1-white);
    border: 1px solid var(--g1-line);
    color: var(--g1-purple);
    box-shadow: 0 6px 18px rgba(42, 43, 75, .12);
}
.to-top:hover,
.to-top:focus-visible {
    background: var(--g1-surface);
    border-color: var(--g1-purple);
}
.to-top svg {
    stroke: currentColor;
    fill: none;
}


/* ── Список стран ─────────────────────────────────────────────────────────
   Было: columns:3 и подписи «Продвижение сайта в Великобритании». Длинные
   строки переносились и колонки наезжали друг на друга. Оставили название
   страны, раскладку перевели на сетку — она сама считает число колонок
   по ширине карточки и не ломается. */
.god-geo-list {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 2px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.god-geo-list li {
    margin: 0;
    padding: 0;
}

.god-geo-list li::marker {
    content: "";
}

.god-geo-list a {
    position: relative;
    display: block;
    padding: 7px 0 7px 16px;
    color: var(--g1-text);
    text-decoration: none;
    -webkit-transition: color .15s ease;
    transition: color .15s ease;
}

/* Точка вместо маркера списка: ровно по базовой линии и не съезжает
   при переносе длинных названий вроде «Великобритания». */
.god-geo-list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g1-accent);
    opacity: .5;
}

.god-geo-list a:hover,
.god-geo-list a:focus-visible {
    color: var(--g1-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.god-geo-list a:hover::before,
.god-geo-list a:focus-visible::before {
    opacity: 1;
}

/* Карточка со списком стран занимает обе колонки: 29 названий в узкой
   колонке вытягивались на 632 px, а во всю ширину ложатся в пять колонок
   и шесть строк. Контейнер карточек — многоколоночный, поэтому растягиваем
   через column-span, а не через grid-column. */
.godlf-card:has(.god-geo-list) {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}