/* КАТАЛОГ УСЛУГ — страница-хаб /services/
 * ============================================================================
 *
 * Оформление компонента components/services-index.php: заголовок группы,
 * вводный абзац и сетка карточек, каждая из которых ведёт на свою услугу.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ РАЗДЕЛ В service-pages.css. Тот лист едет
 * на КАЖДУЮ страницу сайта, кроме главной, — их больше трёхсот. Блок,
 * который стоит на одной, лежал бы там мёртвым грузом на всех остальных.
 * То же решение и по той же причине, что у about-us.css и contacts.css.
 *
 * ПРАВИЛА ЭТОГО ФАЙЛА — те же, что у service-pages.css:
 *
 * 1. Свой префикс ролей `--si-*`, чтобы разделы не могли перебить друг друга.
 * 2. В правилах — только роли. Ступени `--fs-*` и `--sp-*` из :root темы
 *    встречаются лишь в объявлении ролей. Адаптив — переопределение ролей.
 * 3. У каждой ступени запасное значение: файл в плагине, шкала в теме.
 * 4. Никаких сокращённых свойств с переменной внутри — движок, который
 *    такое не разбирает, выбрасывает объявление целиком.
 */


.services-index {
    /* Размеры — роли темы: это ровно то, чем набраны соседние блоки
       страницы, и разъезжаться им незачем. */
    --si-fs-title: var(--fs-h2, 1.75rem);
    --si-fs-lead: var(--fs-service-body, 0.875rem);
    --si-fs-name: var(--fs-18, 1.125rem);
    --si-fs-text: var(--fs-service-body, 0.875rem);

    /* Межстрочные — отношением, чтобы пережить смену кегля. */
    --si-lh-title: 1.2;
    --si-lh-text: 1.4;

    /* Ширина полосы — 1140px, контентный контейнер самого сайта:
       `body .elementor-section.elementor-section-boxed > .elementor-container
       { max-width: 1140px }` в main.css. Блок встаёт по той же полосе, что
       и остальные секции страницы, и при правке контейнера поедет вместе
       с ними — не разъедется.

       Ниже 1200 роль не переопределяется: там контейнер сайта и так уже
       уже, а `max-width` просто перестаёт срабатывать. Работать начинает
       боковое поле. */
    --si-max: 71.25rem;
    --si-pad: 0rem;

    /* Ритм. Нижнюю отбивку несёт сам блок: на шаблоне «страница блоками»
       секции лежат в `<main>` подряд, и задавать просвет между ними
       больше некому. То же решение, что у FAQ и галереи. */
    --si-bottom: var(--sp-80, 5rem);
    --si-title-gap: var(--sp-16, 1rem);
    --si-lead-gap: var(--sp-40, 2.5rem);
    --si-lead-max: 42.5rem;

    /* Сетка. `auto-fit` с `minmax` — колонок столько, сколько влезает:
       на вебе три, на планшете две, на телефоне одна. Медиа-запросов
       сетке не нужно вовсе, и порогов, которые придётся сводить
       со шкалой, тоже. 280px — ниже карточка с двумя строками названия
       и тремя строками описания нечитаема. */
    --si-grid-min: 17.5rem;
    --si-gap: var(--sp-24, 1.5rem);

    /* Карточка. Фон и скругление сняты с карточек текстового блока —
       на странице они стоят недалеко друг от друга. */
    --si-card-bg: #f9f9f9;
    --si-card-radius: 0.75rem;
    --si-card-pad: var(--sp-20, 1.25rem);
    --si-name-gap: var(--sp-8, 0.5rem);

    /* Кадр. Соотношение сторон, а не высота: карточки в ряду разной
       ширины не бывает, а вот высота от неё зависит, и фиксированная
       ломала бы ряд на планшете. */
    --si-frame: 16 / 10;

    --si-ink: #000000;
    --si-muted: rgba(0, 0, 0, 0.7);

    /* Обводка фокуса — оранжевый кнопок сайта. */
    --si-focus: #ff6b00;

    /* ШИРИНА ЗАДАНА ЯВНО. В main.css стоит
       `.elementor-widget-shortcode { display: flex; justify-content: center }`.
       Виджет «Шорткод» становится флекс-контейнером, а компонент внутри —
       флекс-элементом, и без своей ширины он ужимается ПО СОДЕРЖИМОМУ.
       Хаб собран не Elementor'ом, но блок может понадобиться и на такой
       странице; заплатка должна ехать вместе с компонентом. */
    width: 100%;
    padding-inline: var(--si-pad);
    margin-bottom: var(--si-bottom);
}

/* Внутри Elementor вертикальный ритм задаёт секция, и своя отбивка блока
   удвоила бы просвет. Боковое поле там тоже лишнее: колонка Elementor
   уже даёт своё. То же правило, что у FAQ и галереи. */
.elementor-widget .services-index {
    --si-pad: 0rem;

    margin-bottom: 0;
}

/* Два уровня в селекторе: `.elementor-kit-225 h2 { font-size: 28px }`
   весит (0,1,1) и одним классом не перебивается. Значение то же, но
   полагаться на совпадение нельзя — сдвинут роль темы, блок должен
   поехать вместе с ней, а не остаться на числе кита. */
.services-index .services-index__title {
    max-width: var(--si-max);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: var(--si-title-gap);
    margin-left: auto;
    font-size: var(--si-fs-title);
    font-weight: 500;
    line-height: var(--si-lh-title);
    text-align: center;
    color: var(--si-ink);
}

/* Полоса вводного абзаца уже полосы сетки и стоит по центру: строка
   в 90–100 знаков читается тяжело, комфортный диапазон 45–75. Ровно
   тем же ограничен ответ в FAQ. */
.services-index .services-index__lead {
    max-width: var(--si-lead-max);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: var(--si-lead-gap);
    margin-left: auto;
    font-size: var(--si-fs-lead);
    line-height: var(--si-lh-text);
    text-align: center;
    color: var(--si-muted);
}

/* Заголовка у группы может не быть — тогда отбивку сверху даёт лид,
   а если нет и его, сетка стоит первой. Обнулять поля списка приходится
   явно: браузер даёт `<ul>` своё верхнее поле и отступ под маркеры. */
.services-index .services-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--si-grid-min), 1fr));
    gap: var(--si-gap);
    max-width: var(--si-max);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-left: 0;
    list-style: none;
}

/* `position: relative` — опора для растянутой ссылки. Без него
   псевдоэлемент искал бы ближайшего позиционированного предка выше
   по дереву и накрыл бы половину страницы.

   `overflow: hidden` обрезает кадр по скруглению карточки: своего
   скругления картинке не задаётся, иначе их пришлось бы держать
   в двух местах одинаковыми. */
.services-index .services-index__item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Поля обнуляются явно: просвет между карточками даёт `gap` сетки,
       а тема и кит Elementor вешают на `li` свои отступы — они сложились
       бы с зазором и разъехались бы по-разному в разных браузерах. */
    margin: 0;
    padding: 0;
    border-radius: var(--si-card-radius);
    background-color: var(--si-card-bg);
}

.services-index .services-index__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--si-frame);
    object-fit: cover;
}

/* Текст занимает всё, что осталось от карточки под кадром. `flex: 1`
   выравнивает низ карточек в ряду: описания разной длины иначе оставили
   бы под собой разный по высоте хвост фона. */
.services-index .services-index__body {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    padding: var(--si-card-pad);
}

.services-index .services-index__name {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--si-name-gap);
    margin-left: 0;
    font-size: var(--si-fs-name);
    font-weight: 600;
    line-height: var(--si-lh-title);
    color: var(--si-ink);
}

/* Подчёркивания нет: в каталоге двадцать ссылок подряд, и подчёркнутыми
   они читаются как сплошная полоса. Что это ссылка, говорит вся карточка
   целиком — курсор, фон и наведение. */
.services-index .services-index__link {
    color: inherit;
    text-decoration: none;
}

/* Кликается ВСЯ карточка, а ссылка в разметке одна — на названии.
   Обратный порядок (обернуть ссылкой всю карточку) дал бы диктору один
   пункт из картинки, заголовка и абзаца, читаемый как одна простыня.

   `z-index` не нужен: у соседей нет своего слоя, и псевдоэлемент лежит
   выше них по порядку в потоке. */
.services-index .services-index__link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Обводка ставится КАРТОЧКЕ, а не ссылке: сама ссылка — строка текста
   внутри, и рамка вокруг неё не сказала бы, что выбрана карточка.
   `:has()` знают Chrome 105+, Safari 15.4+, Firefox 121+; где его нет,
   останется обводка браузера по умолчанию на строке названия —
   некрасиво, но фокус виден. */
.services-index .services-index__item:has(.services-index__link:focus-visible) {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--si-focus);
    outline-offset: 2px;
}

.services-index .services-index__text {
    margin: 0;
    font-size: var(--si-fs-text);
    line-height: var(--si-lh-text);
    color: var(--si-muted);
}

/* Наведение — только кадр. Двигать карточку целиком в сетке из двадцати
   штук значит дёргать соседей на каждом проносе мыши.

   Правило под `@media (hover: hover)`: на телефоне состояние наведения
   залипает после касания, и увеличенный кадр остался бы таким до
   следующего тапа по другому месту. */
@media (hover: hover) {
    .services-index .services-index__image {
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .services-index .services-index__item:hover .services-index__image {
        transform: scale(1.04);
    }
}

/* Читателю, который просил убрать движение, движение и убирается.
   Правило стоит после всех остальных, поэтому перебивает их без флага. */
@media (prefers-reduced-motion: reduce) {
    .services-index .services-index__image {
        transition-duration: 0s;
    }

    .services-index .services-index__item:hover .services-index__image {
        transform: none;
    }
}


/* ==========================================================================
   АДАПТИВ — переопределяются только роли
   ========================================================================== */

/* Ниже 1200 контейнер сайта и так уже 1140px, `max-width` перестаёт
   срабатывать, и работать начинает боковое поле. Ступень та же, что
   у FAQ и галереи, — блоки страницы должны отбиваться от края одинаково. */
@media (max-width: 1199px) {
    .services-index {
        --si-pad: var(--sp-32, 2rem);
        --si-bottom: var(--sp-64, 4rem);
    }
}

@media (max-width: 767px) {
    .services-index {
        --si-pad: var(--sp-16, 1rem);
        --si-lead-gap: var(--sp-24, 1.5rem);

        /* Карточка в одну колонку на всю ширину экрана. Минимум сетки
           опускается, чтобы на узких телефонах (320px за вычетом полей)
           колонка не вылезала за экран: `minmax` с минимумом больше
           доступной ширины растягивает трек, а не сжимает его. */
        --si-grid-min: 100%;
    }
}