/* Каталог услуг: /services/ и /service/{slug}/.

   Грузится поверх new_home.css — оттуда --section-gap, .container, .tabs,
   кнопки и сама карточка .services__card. Здесь только то, чем страница
   каталога отличается от Главной: собственный первый экран, навигация по
   разделам, подводка раздела и сетка с переменным числом карточек.

   Разметка и размеры — по вёрстке v2/services_archive.php (секция .screen),
   она же макет Figma «Услуги», узел 1505:8022. */

/* --- Первый экран --------------------------------------------------------- */

/* Заливка первого экрана — розово-жёлто-голубой градиент из макета (узел
   1505:8022, слой bg 1920×992). Позиция и повтор — как в вёрстке: картинка
   в натуральную величину по центру сверху, на экранах шире 1920 по краям
   остаётся белый фон страницы.

   Исходник вёрстки — PNG на 1.7 МБ с альфа-каналом, 99% веса которого
   приходилось именно на прозрачность. Градиент лежит на белом, поэтому
   сведён на белую подложку и пережат в WebP: 9 КБ при том же изображении. */
.services-catalog__screen {
    background-image: url('../img/services_bg.webp');
    background-position: top center;
    background-repeat: no-repeat;
}

/* Заголовок по макету стоит на 220 от верха. В вёрстке здесь 171 — это её
   единственное расхождение с макетом на первом экране (остальные отступы,
   40 и 80, у неё совпадают), идём за макетом. */
.services-catalog h1 {
    margin-top: 220px;
    max-width: 1190px;
}

/* --- Навигация по разделам ------------------------------------------------ */

/* Полоса под заголовком — не вкладки, а ссылки на разделы этой же страницы:
   в макете разделы стоят один под другим (четыре секции с шагом 1049 при
   высоте 929), а не сменяют друг друга на одном экране. Внешне это те же
   пилюли, поэтому класс .tab остаётся общим с Главной.

   На Главной полоса прижата к левому краю, здесь — по центру под заголовком.
   Перенос на вторую строку нужен: разделов может стать больше четырёх, а
   горизонтальный скролл на десктопе выглядит как обрезанный список. */
.services-catalog__nav {
    /* Общий .tabs залипает под шапкой (sticky, top: 100px) — на Главной полоса
       живёт внутри своей секции и уезжает вместе с ней. В каталоге под ней вся
       страница, и прозрачная полоса без фона всю прокрутку висит поверх
       заголовков карточек, перехватывая наведение. Залипание здесь и не нужно:
       к нему есть отдельная претензия в задаче 52776. */
    position: static;

    flex-wrap: wrap;
    justify-content: center;

    margin-top: 40px;
}

/* .tab писался под <button>, здесь это <a>: без сброса ссылка забирает цвет
   темы и подчёркивание, а строчный бокс даёт высоту не 48. */
.services-catalog__nav .tab {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

/* Цвет сбрасывается только у невыбранных. У .tab.selected он белый, но
   специфичность там такая же, как здесь, а этот файл грузится позже — общий
   color: inherit перекрашивал текст на красной пилюле обратно в тёмный. */
.services-catalog__nav .tab:not(.selected) {
    color: inherit;
}

/* Прокрутка к разделу — плавная, но только если пользователь не просил
   систему убрать анимации. Файл грузится лишь на каталоге, поэтому правило
   на html здесь никуда больше не протечёт. */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- Раздел: заголовок и подводка ----------------------------------------- */

/* .container в теме центрирует содержимое (align-items: center) — раздел
   должен занимать всю ширину, иначе сетка карточек сожмётся по контенту
   и уедет к середине. */
.services-catalog__groups,
.services-catalog__group {
    width: 100%;
}

/* Шаг между разделами в макете 120 (секции стоят на 0, 1049, 2098, 3147 при
   высоте 929). До первого от полосы навигации — 80. */
.services-catalog__group + .services-catalog__group {
    margin-top: 120px;
}

/* Заголовок раздела не должен уезжать под шапку, когда к нему прокрутили
   по якорю: шапка перекрывает верхние 100px окна. */
.services-catalog__group {
    scroll-margin-top: 120px;
}

.services-catalog__group-title {
    display: flex;
    flex-direction: column;

    width: 100%;
    margin-top: 80px;

    text-align: start;
}

/* Общий h2 темы — 80px: он для секций Главной, где заголовок стоит один на
   экран. Здесь заголовок раздела, он ниже H1 по иерархии. */
.services-catalog__group-title h2 {
    font-size: 48px;
    line-height: 110%;
    margin: 0;
}

.services-catalog__group-title p {
    max-width: 844px;
    margin: 21px 0 0;

    font-size: 24px;
    line-height: 120%;
}

/* У второго и следующих разделов отступ уже дан margin-top самого раздела —
   второй сверху заголовка сложился бы с ним в 200. */
.services-catalog__group + .services-catalog__group .services-catalog__group-title {
    margin-top: 0;
}

/* --- Сетка карточек ------------------------------------------------------- */

/* .services__grid на Главной задаёт ровно два ряда по 340px — там в каждой
   вкладке пять карточек и это правда. В каталоге их сколько заведут, поэтому
   высота ряда переезжает в grid-auto-rows: явных рядов нет, все одинаковые. */
.services-catalog__grid {
    grid-template-rows: none;
    grid-auto-rows: 340px;

    margin-top: 60px;
}

/* С 960px тема переводит карточку на height: min-content, а ряды сетки — на
   auto (new_home.css, блок ≤960): с этой ширины раскладка живёт по содержимому.
   Фиксированные 340px дают ровно обратное — карточка остаётся короткой, ряд
   держит высоту, и между рядами зияет полторы сотни пикселей пустоты. Ниже 960
   высоту ряда не навязываем. */
@media screen and (max-width: 960px) {
    .services-catalog__grid {
        grid-auto-rows: auto;
    }
}

/* --- Кнопка карточки ------------------------------------------------------- */

/* В макете кнопка есть у каждой карточки, и высота у неё 60 — общий .button-red
   даёт 58 из-за padding. Правим только внутри каталога: на Главной та же кнопка
   называется «Заказать» и там её высота уже сверена отдельно. */
.services-catalog .services__card_footer .button-red {
    height: 60px;
    padding: 0 24px;
}

/* У услуги может не быть ни срока, ни цены («Личные кабинеты», «Разбор
   инцидентов») — тогда блок меты не рисуется вовсе, распорка space-between
   схлопывается и кнопка уезжает в левый угол. В макете она всегда справа. */
.services-catalog .services__card_footer > a:only-child {
    margin-left: auto;
}

/* Узкие карточки: круг 56×56 вместо пилюли — так в макете, там рядом со сроком
   и ценой на подпись места нет.

   Условие в две ветки, потому что тема сама переставляет первую карточку то на
   две колонки, то на одну: замер по факту показал, что шире остальных она
   только от 1281 и в вилке 641–960, а на 1024, 1280 и ≤640 карточки в ряду
   одинаковые. Там узкой карточки нет вовсе, круг бессмыслен, и кнопка остаётся
   обычной пилюлей «Подробнее» — карточки в ряду не должны отличаться друг от
   друга кнопкой, если ничем больше не отличаются. */
@media screen and (min-width: 1281px),
       screen and (min-width: 641px) and (max-width: 960px) {
    .services-catalog .services__card_footer .button-red--round {
        position: relative;
        justify-content: center;

        width: 56px;
        height: 56px;
        padding: 0;
        gap: 0;
    }

    /* Подпись скрыта визуально, а не удалена: `display: none` убрал бы её из
       дерева доступности и круг остался бы кнопкой без имени. */
    .services-catalog .button-red--round .button-red__label {
        position: absolute;

        width: 1px;
        height: 1px;
        overflow: hidden;

        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- Отступ после сетки --------------------------------------------------- */

/* Отступ живёт на первом экране, а не на блоке призыва: блок призыва рисуется
   только когда для него заполнены тексты, и без него сетка карточек упиралась
   бы в подвал. У .want-same-project своих полей нет и на Главной — там зазор
   даёт margin-bottom предыдущей секции. */
.services-catalog__screen {
    padding-bottom: var(--section-gap);
}

/* --- Адаптив первого экрана ----------------------------------------------- */

@media screen and (max-width: 960px) {
    .services-catalog__group-title h2 {
        font-size: 36px;
    }

    .services-catalog__group-title p {
        font-size: 20px;
    }
}

/* Правила кнопки выше стоят на трёх классах и перебивают мобильный блок
   new_home.css (≤390: кнопка 38px). Возвращаем его руками — в вёрстке на этой
   ширине кнопка ужимается до 38 (adaptive.css, .slider-content-btn). Круга
   здесь уже нет: ниже 641 все карточки одной ширины и кнопка везде пилюля. */
@media screen and (max-width: 390px) {
    .services-catalog .services__card_footer .button-red {
        height: 38px;
        padding: 0 16px;
    }
}

@media screen and (max-width: 640px) {
    .services-catalog h1 {
        margin-top: 140px;
    }

    .services-catalog__nav {
        margin-top: 32px;
    }

    .services-catalog__group + .services-catalog__group {
        margin-top: 80px;
    }

    .services-catalog__group-title {
        margin-top: 40px;
    }

    .services-catalog__group-title h2 {
        font-size: 28px;
    }

    .services-catalog__group-title p {
        font-size: 18px;
    }
}