/* ЛИСТ СТРАНИЦЫ «О НАС»
 * ============================================================================
 *
 * Отдельный файл, а не раздел в service-pages.css: тот лист ездит на все
 * страницы сайта, кроме главной, и тащить на шестьдесят сервисных страниц
 * оформление блоков, которые стоят ровно на одной, незачем.
 *
 * Сюда переезжает ВСЁ, что относится к /about-us/: и общий ритм страницы,
 * и компоненты, которые из неё постепенно выносятся. Компонентов будет
 * больше — раздел на каждый, нумерация продолжается.
 *
 * ПРАВИЛА ЭТОГО ФАЙЛА — те же, что у сервисного листа:
 *
 * 1. Каждый блок — свой раздел и свой префикс ролей (`--ai-*` у вступления).
 *    Префиксы не пересекаются, поэтому разделы не могут перебить друг друга.
 * 2. В правилах — ТОЛЬКО роли. Ступени `--fs-*` и `--sp-*` из :root темы
 *    встречаются лишь в объявлении ролей. Адаптив — переопределение ролей.
 * 3. У каждой ступени запасное значение: файл в плагине, шкала в теме.
 * 4. Никаких сокращённых свойств с переменной внутри — движок, который
 *    такое не разбирает, выбрасывает объявление целиком.
 *
 * РАЗДЕЛЫ
 *
 *     0. Совместимость с виджетом «Шорткод» Elementor
 *     1. Ритм страницы           расстояние между блоками
 *     2. Вступление              .about-intro
 *     3. Миссия                  .mission
 *     4. Путь студии             .journey
 *     5. Ценности                .values
 */


/* ==========================================================================
   0. СОВМЕСТИМОСТЬ С ВИДЖЕТОМ «ШОРТКОД» ELEMENTOR
   ========================================================================== */

/* В main.css стоит `.elementor-widget-shortcode { display: flex;
   justify-content: center }`. Виджет становится флекс-контейнером, а его
   обёртка `.elementor-shortcode` — флекс-элементом и получает ширину
   ПО СОДЕРЖИМОМУ. Компоненту своей ширины мало: его сто процентов
   считаются от уже сжавшейся обёртки, и блок встаёт не по центру полосы,
   а там, где кончилось содержимое.

   Именно это и случилось с «Миссией»: заголовок и текст стояли по центру
   СВОЕЙ коробки, а сама коробка была смещена влево.

   `display: block` возвращает обычный поток. Приём не наш: так же
   сделано для блоков сервисных страниц в service-pages.css и для наград
   в теме. Здесь перечислены только компоненты этой страницы. */
.elementor-widget-shortcode:has(.about-intro),
.elementor-widget-shortcode:has(.journey),
.elementor-widget-shortcode:has(.mission),
.elementor-widget-shortcode:has(.service-hero),
.elementor-widget-shortcode:has(.values) {
    display: block;
}


/* ==========================================================================
   1. РИТМ СТРАНИЦЫ
   ========================================================================== */

/* ОДИН ПРОСВЕТ МЕЖДУ БЛОКАМИ, И ЗАДАЁТ ЕГО ВЕРХНЕЕ ПОЛЕ.
 *
 * Страница собрана списком шорткодов: блоки лежат прямыми детьми
 * `#content`, и каждый из них — самостоятельный компонент со своими
 * привычками. У ленты логотипов свой нижний отступ в 160px, у формы
 * заявки свой в 96, у первого экрана нет никакого. Сложить это в ровный
 * ритм, договариваясь с каждым, нельзя: сумма двух полей всегда больше
 * нужного, а там, где поля нет ни у кого, блоки слипаются — ровно это
 * и вышло между первым экраном и вступлением.
 *
 * Поэтому расстояние задаётся ОДНИМ правилом на всех и ВЕРХНИМ полем:
 * нижние гасятся до нуля, и просвет между любой парой соседей ровно один.
 * Первому блоку верхнее поле не нужно — над ним шапка, а не блок.
 *
 * ПОЧЕМУ ВЕРХНЕЕ, А НЕ НИЖНЕЕ — тот же довод, что был на элементоровской
 * версии страницы: первый экран это фоновая картинка со своей высотой,
 * и нижнее поле у него оказалось бы внутри картинки.
 *
 * Правило работает только здесь: лист подключается на трёх страницах
 * «О нас» и больше нигде. Поэтому в селекторе нет ни номера записи,
 * ни имён компонентов — их и не должно быть, ритм страницы не обязан
 * знать, из чего она собрана. `body` в начале нужен для веса: у роли
 * компонента (0,1,0), здесь (1,0,1). */
body #content > * {
    margin-top: var(--sp-96, 6rem);
    margin-bottom: 0;
}

body #content > *:first-child {
    margin-top: 0;
}

@media (max-width: 1199px) {
    body #content > * {
        margin-top: var(--sp-80, 5rem);
    }
}

@media (max-width: 767px) {
    body #content > * {
        margin-top: var(--sp-64, 4rem);
    }
}


/* ==========================================================================
   2. ВСТУПЛЕНИЕ
   ========================================================================== */

/* Первый блок под HERO: слева крупный абзац и текст помельче, справа
 * карусель кадров. Разметка — components/about-intro.php, механика —
 * assets/js/about-intro.js.
 *
 * ЧТО БЫЛО ВМЕСТО НЕГО. Три виджета Elementor: heading, text-editor
 * и image-carousel на Swiper. Оформление лежало в пяти местах сразу —
 * поэлементный CSS страницы, кит, `.about-us-slider` в main.css, стили
 * самого Swiper и флаги важности поверх них. Восемь `!important` только
 * на то, чтобы вернуть стрелки под кадр.
 *
 * КАРУСЕЛЬ БЕЗ БИБЛИОТЕКИ. Прокрутку делает сам браузер: лента — обычный
 * блок с `overflow-x: auto` и прилипанием `scroll-snap`. Отсюда сразу
 * и свайп на телефоне, и прокрутка колесом, и работа с клавиатуры, и
 * поведение без скрипта: если он не отработает, кадры останутся
 * пролистываемыми. Скрипту достаётся только то, чего в CSS нет, — стрелки,
 * отметки и автосмена.
 *
 * ЧИСЛА СНЯТЫ С ПРЕЖНЕГО БЛОКА: кружок стрелки 42px с рамкой #a7a7a7,
 * отметка 44×1.5px, между стрелками 55px, ширина полосы 1377px.
 */

.about-intro {
    /* размеры — ступени шкалы, своих чисел здесь нет */
    --ai-fs-lead: var(--fs-22, 1.375rem);
    --ai-fs-text: var(--fs-16, 1rem);

    /* Межстрочные — те же, что у блоков сервисных страниц: 1.2 у крупного
       набора, 1.4 у обычного. Отношением, а не числом: переживёт смену
       кегля. */
    --ai-lh-lead: 1.2;
    --ai-lh-text: 1.4;

    /* Ширина полосы — контентная полоса сайта, 1140px. То же число, что
       у `--faq-max` и `--gl-max`: блок встаёт по той же полосе, что текст
       и заголовки остальных страниц.

       Прежняя секция была шире, 1377px, и задавала это долей ширины окна
       (`.max1377 > div { max-width: 71.71875vw }`): при 1920 выходило 1377,
       при 1440 — 1033. Ни одно из этих чисел на сайте больше нигде
       не встречается. */
    --ai-max: 71.25rem;

    /* ритм */
    --ai-gap: var(--sp-48, 3rem);

    /* Отбивка заголовка от текста. У прежнего блока здесь было 81px —
       44 в настройках виджета плюс 37 межвиджетного зазора кита Elementor.
       С 02.09 одна ступень: подзаголовок читается как продолжение
       заголовка и стоит сразу под ним, а не отдельным блоком. */
    --ai-lead-gap: var(--sp-24, 1.5rem);
    --ai-controls-gap: var(--sp-24, 1.5rem);
    --ai-text-gap: var(--sp-20, 1.25rem);

    /* Пропорция кадра. Не ступень шкалы и быть ею не может: это отношение
       сторон картинки, а не размер. Кадры в наборе разной высоты, и без
       общей пропорции лента прыгала бы при листании. */
    --ai-ratio: 3 / 2;

    /* СТРЕЛКИ — ТЕ ЖЕ, ЧТО У БЛОКА НАГРАД, и числа взяты оттуда же
       (`.awards__arrow` в main.css): кружок 42px, зазор 11px, значок
       1.2rem, рамка #a7a7a7 и #282828 при наведении. Это один и тот же
       орган управления на сайте, и выглядеть он должен одинаково —
       здесь совпадение с соседним блоком важнее ступеней шкалы.

       Когда таких мест станет три, роль стоит поднять в тему: сейчас
       числа продублированы в двух файлах, и это осознанная плата за то,
       что компоненты не знают друг о друге. */
    --ai-arrow: 2.625rem;
    --ai-arrow-gap: 0.6875rem;
    --ai-icon: 1.2rem;

    /* Отметки — свои: у наград на их месте круглые точки, а здесь полосы,
       как было у прежней карусели. Прежние 44px сведены к ступени шкалы,
       толщина 1.5px стала 2 — дробных пикселей на сайте нет нигде. */
    --ai-mark-w: var(--sp-40, 2.5rem);
    --ai-mark-h: 2px;
    --ai-mark-pad: var(--sp-8, 0.5rem);

    /* Цвета держат роли, а не литералы в правилах: цветовых ступеней
       в `:root` темы нет. Числа — от прежнего блока. */
    --ai-ink: #1b1b1b;
    --ai-line: #a7a7a7;
    --ai-line-hover: #282828;
    --ai-arrow-ink: #282828;
    --ai-mark: #d9d9d9;
    --ai-mark-on: #1b1b1b;

    /* Ширина задана явно по той же причине, что у остальных компонентов:
       виджет «Шорткод» в main.css флексовый, и без неё блок ужимается
       по содержимому. */
    width: 100%;
    max-width: var(--ai-max);
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ai-gap);

    /* По верху, а не по центру: заголовок должен начинаться на одной линии
       с верхним краем кадра. При выравнивании по центру текст съезжал вниз
       тем сильнее, чем выше картинка. */
    align-items: start;
}

/* Крупный абзац. Это НЕ заголовок и размечен абзацем — так же, как было
   в прежнем виджете: заголовок раздела на странице один, и он выше. */
.about-intro .about-intro__lead {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--ai-lead-gap);
    margin-left: 0;
    font-size: var(--ai-fs-lead);
    font-weight: 500;
    line-height: var(--ai-lh-lead);
    color: var(--ai-ink);
}

.about-intro .about-intro__body {
    font-size: var(--ai-fs-text);
    font-weight: 400;
    line-height: var(--ai-lh-text);
    color: var(--ai-ink);
}

/* Ритм внутри текста тот же, что у текстового блока сервисных страниц:
   поля сняты, отбивка идёт сверху. */
.about-intro .about-intro__body > * {
    margin: 0;
}

.about-intro .about-intro__body > * + * {
    margin-top: var(--ai-text-gap);
}

/* ЛЕНТА КАДРОВ. `scroll-snap-type` прилипает к кадру, `overscroll-behavior`
   не отдаёт прокрутку странице, когда лента дошла до края. Полосу прокрутки
   прячем: листают стрелками, отметками и свайпом. */
.about-intro .about-intro__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.about-intro .about-intro__viewport::-webkit-scrollbar {
    display: none;
}

.about-intro .about-intro__viewport:focus-visible {
    outline: 2px solid var(--ai-ink);
    outline-offset: 2px;
}

.about-intro .about-intro__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-intro .about-intro__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    list-style: none;
}

/* Кадр держит пропорцию, а не свою высоту: кадры в наборе разного размера,
   и без этого лента прыгала бы по высоте при листании. */
.about-intro .about-intro__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ai-ratio);
    object-fit: cover;
}

/* Управление под кадром: слева отметки, справа стрелки. Прежде и то и другое
   висело `position: absolute` поверх карусели и возвращалось под неё
   восемью флагами важности. Здесь это обычная строка. */
.about-intro .about-intro__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-gap);
    margin-top: var(--ai-controls-gap);
}

.about-intro .about-intro__marks {
    display: flex;
    gap: 0;
}

/* Отметка — кнопка, а не полоска: по ней можно перейти к кадру, и это
   должно быть доступно с клавиатуры. Своя ширина у неё маленькая,
   поэтому область нажатия добирается полем сверху и снизу. */
.about-intro .about-intro__mark {
    width: var(--ai-mark-w);
    padding: var(--ai-mark-pad) 0;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none;
}

.about-intro .about-intro__mark::before {
    content: "";
    display: block;
    height: var(--ai-mark-h);
    background-color: var(--ai-mark);
}

.about-intro .about-intro__mark[aria-current="true"]::before {
    background-color: var(--ai-mark-on);
}

.about-intro .about-intro__mark:focus-visible {
    outline: 2px solid var(--ai-ink);
    outline-offset: 2px;
}

.about-intro .about-intro__arrows {
    display: flex;
    gap: var(--ai-arrow-gap);
}

.about-intro .about-intro__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ai-arrow);
    height: var(--ai-arrow);
    padding: 0;
    background: none;
    color: var(--ai-arrow-ink);
    border-width: 1px;
    border-style: solid;
    border-color: var(--ai-line);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s;
}

.about-intro .about-intro__arrow svg {
    display: block;
    width: var(--ai-icon);
    height: auto;
}

/* Наведение и фокус — как у наград: темнеет рамка. Переход на цвете,
   а не на всей кнопке: анимировать больше нечего. */
.about-intro .about-intro__arrow:hover,
.about-intro .about-intro__arrow:focus-visible {
    border-color: var(--ai-line-hover);
}

/* ЦВЕТ ЗНАЧКА ПРИХОДИТСЯ ЗАЩИЩАТЬ. В main.css стоит
   `.elementor-kit-225 button:hover, …:focus { color: #FFFFFF }` весом (0,2,1) —
   правило кита Elementor для обычных кнопок с заливкой. Стрелка рисуется
   `stroke="currentColor"`, поэтому при наведении она становилась белой
   на белом и пропадала.

   У наград той же беды нет по случайности: там цвет прибит в разметке
   (`stroke="#282828"`), и правило кита до него не дотягивается. Повторять
   этот приём не стал — цвету место в стилях; здесь спор решается весом
   (0,3,0) против (0,2,1).

   `:focus` перечислен наравне с `:focus-visible`: кит бьёт по обоим,
   а `:focus-visible` его не покрывает. */
.about-intro .about-intro__arrow:hover,
.about-intro .about-intro__arrow:focus,
.about-intro .about-intro__arrow:focus-visible {
    color: var(--ai-arrow-ink);
}

.about-intro .about-intro__arrow:focus-visible {
    outline: 2px solid var(--ai-ink);
    outline-offset: 2px;
}

/* ── планшет ── */

@media (max-width: 1199px) {
    .about-intro {
        /* Кружок 40px — то же значение, что у наград на этом пороге. */
        --ai-arrow: var(--sp-40, 2.5rem);

        --ai-fs-lead: var(--fs-20, 1.25rem);
        --ai-gap: var(--sp-32, 2rem);
    }
}

/* ── телефон ── */

@media (max-width: 767px) {
    .about-intro {
        --ai-fs-lead: var(--fs-18, 1.125rem);

        /* Отметок на узкой строке помещается меньше: полоса короче,
           кружок стрелки прежний. */
        --ai-mark-w: var(--sp-24, 1.5rem);

        /* В одну колонку: текст сверху, карусель под ним. */
        grid-template-columns: 1fr;
        row-gap: var(--sp-32, 2rem);
    }
}

/* Кому движение мешает — лента не едет плавно и сама не листает
   (за автосмену отвечает скрипт, он проверяет то же условие). */
@media (prefers-reduced-motion: reduce) {
    .about-intro .about-intro__viewport {
        scroll-behavior: auto;
    }

    .about-intro .about-intro__arrow {
        transition: none;
    }
}


/* ==========================================================================
   3. МИССИЯ
   ========================================================================== */

/* Заголовок, короткий текст под ним и строка цифр. Разметка —
 * components/mission.php.
 *
 * ЧТО ИЗМЕНИЛОСЬ ПРОТИВ ПРЕЖНЕГО ВИДА. Цифры стояли в шести рамках высотой
 * 320px при содержимом в две строки: число сверху, подпись прижата к низу,
 * между ними пустота в две трети карточки. Рамки убраны совсем — строка
 * цифр читается как строка, а не как шесть коробок, — и от них остался
 * один волосок над рядом. Число и подпись стоят вплотную друг к другу:
 * они об одном и том же.
 *
 * СКРИПТА У БЛОКА НЕТ. Прежний виджет вёз свой ради появления цифр
 * по очереди при прокрутке; цена — лишний файл, задержка показа и пустая
 * строка на месте блока, пока он не отработает.
 */

.mission {
    /* размеры */
    --ms-fs-title: var(--fs-h2, 1.75rem);
    --ms-fs-lead: var(--fs-lead, 1.125rem);
    --ms-fs-value: var(--fs-36, 2.25rem);
    --ms-fs-label: var(--fs-14, 0.875rem);

    /* Межстрочные — те же, что у блоков сервисных страниц: 1.2 у крупного
       набора, 1.4 у обычного. Своих чисел здесь нет. */
    --ms-lh-title: 1.2;
    --ms-lh-lead: 1.4;
    --ms-lh-value: 1.2;
    --ms-lh-label: 1.4;

    /* Полоса — контентная полоса сайта, как у остальных блоков. */
    --ms-max: 71.25rem;

    /* Колонка текста под заголовком. 600px — то же число, что у ответа
       в FAQ (`--faq-a-max`): при 18px это около 66 знаков в строке,
       середина комфортного диапазона для чтения. */
    --ms-lead-max: 37.5rem;

    /* ритм */
    --ms-title-gap: var(--sp-24, 1.5rem);
    --ms-stats-gap: var(--sp-64, 4rem);
    --ms-col-gap: var(--sp-32, 2rem);
    --ms-row-gap: var(--sp-48, 3rem);
    --ms-value-gap: var(--sp-8, 0.5rem);

    /* Колонок в ряду: шесть на вебе, три на планшете, две на телефоне.
       Это ЧИСЛО КОЛОНОК, а не размер, и ступени шкалы к нему отношения
       не имеют. Раскладку через `auto-fit` и наименьшую ширину колонки
       не беру намеренно: она потребовала бы своего числа в пикселях,
       которого в шкале нет, и при шести цифрах давала бы то пять
       в ряду, то шесть — как выйдет. */
    --ms-cols: 6;

    /* Цвета держат роли, а не литералы в правилах: цветовых ступеней
       в `:root` темы нет. Числа не выдуманы — это те же значения, что
       у оглавления сервисных страниц: линия `rgba(0, 0, 0, 0.08)`,
       приглушённый текст #666666. */
    --ms-ink: #1b1b1b;
    --ms-ink-label: #666666;
    --ms-line: rgba(0, 0, 0, 0.08);

    width: 100%;
    max-width: var(--ms-max);
    margin-left: auto;
    margin-right: auto;
}

/* Два уровня: `.elementor-kit-225 h2 { font-size: 28px }` весит (0,1,1)
   и одним классом не перебивается. */
.mission .mission__title {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--ms-title-gap);
    margin-left: 0;
    font-size: var(--ms-fs-title);
    font-weight: 500;
    line-height: var(--ms-lh-title);
    text-align: center;
    color: var(--ms-ink);
}

.mission .mission__lead {
    max-width: var(--ms-lead-max);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--ms-fs-lead);
    font-weight: 400;
    line-height: var(--ms-lh-lead);
    text-align: center;
    color: var(--ms-ink);
}

/* Ритм внутри текста тот же, что у остальных блоков: поля сняты, отбивка
   идёт сверху. */
.mission .mission__lead > * {
    margin: 0;
}

.mission .mission__lead > * + * {
    margin-top: var(--sp-20, 1.25rem);
}

/* Строка цифр. */
.mission .mission__stats {
    display: grid;
    grid-template-columns: repeat(var(--ms-cols), 1fr);
    column-gap: var(--ms-col-gap);
    row-gap: var(--ms-row-gap);
    margin-top: var(--ms-stats-gap);
    margin-bottom: 0;
    padding-top: var(--ms-stats-gap);
    padding-left: 0;
    padding-right: 0;
    list-style: none;

    /* Единственная линия блока: она отделяет цифры от текста и заменяет
       собой шесть прежних рамок. */
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--ms-line);
}

/* `list-style` снимается и на пункте: в main.css сброс маркеров висит
   на самом `li`, и наследование от `ul` его не перебивает. */
.mission .mission__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ms-value-gap);
    text-align: center;
    list-style: none;
}

/* Цифры набраны табличными: у «500+» и «10,000+» разное число знаков,
   и без этого они пляшут по ширине относительно подписи. */
.mission .mission__value {
    font-size: var(--ms-fs-value);
    font-weight: 500;
    line-height: var(--ms-lh-value);
    font-variant-numeric: tabular-nums;
    color: var(--ms-ink);
}

.mission .mission__label {
    font-size: var(--ms-fs-label);
    font-weight: 400;
    line-height: var(--ms-lh-label);
    color: var(--ms-ink-label);
}

/* ── планшет ── */

@media (max-width: 1199px) {
    .mission {
        --ms-cols: 3;
        --ms-fs-value: var(--fs-32, 2rem);
        --ms-stats-gap: var(--sp-48, 3rem);
        --ms-row-gap: var(--sp-40, 2.5rem);
    }
}

/* ── телефон ── */

@media (max-width: 767px) {
    .mission {
        --ms-cols: 2;
        --ms-fs-value: var(--fs-28, 1.75rem);
        --ms-fs-lead: var(--fs-16, 1rem);
        --ms-stats-gap: var(--sp-32, 2rem);
        --ms-row-gap: var(--sp-32, 2rem);
        --ms-col-gap: var(--sp-20, 1.25rem);
    }
}


/* ==========================================================================
   4. ПУТЬ СТУДИИ
   ========================================================================== */

/* Лента этапов по годам. Разметка — components/journey.php.
 *
 * ЛИНИЯ — ЭТО ГРАНИЦА СПИСКА, А НЕ ЭЛЕМЕНТ. У прежнего блока в разметке
 * лежал `<svg>` с двумя `<line>`: серой пунктирной и зелёной, которую
 * дорисовывал при прокрутке GSAP. Постепенное появление линии — всё, ради
 * чего там был скрипт. Неподвижная линия рисуется границей и есть сразу.
 *
 * ТОЧКИ — ПСЕВДОЭЛЕМЕНТЫ ПУНКТОВ, тоже без разметки. Последняя покрашена
 * акцентным зелёным: это «сегодня», крайняя запись ленты. Знать, какая
 * из них последняя, CSS умеет сам — `:last-child`.
 *
 * ЗИГЗАГ БЕЗ СЕТКИ. Пункты идут обычным потоком, каждый шириной чуть
 * меньше половины; чётные сдвинуты вправо полем `margin-left: auto`.
 * Сетка здесь была бы хуже: при `grid` два соседних пункта встают
 * в один ряд, и лента перестаёт читаться сверху вниз.
 */

.journey {
    /* размеры */
    --jr-fs-title: var(--fs-h2, 1.75rem);
    --jr-fs-year: var(--fs-24, 1.5rem);
    --jr-fs-text: var(--fs-16, 1rem);

    /* Межстрочные — те же, что у остальных блоков: 1.2 у крупного
       набора, 1.4 у обычного. */
    --jr-lh-title: 1.2;
    --jr-lh-year: 1.2;
    --jr-lh-text: 1.4;

    /* Полоса. У́же контентной: лента из восьми коротких абзацев в две
       колонки по 570px читалась бы как таблица. 900px — это две колонки
       примерно по 55 знаков, ровно та ширина, на которой строка читается
       без усилия. */
    --jr-max: 56.25rem;

    /* ритм */
    --jr-title-gap: var(--sp-64, 4rem);
    --jr-gap: var(--sp-64, 4rem);
    --jr-item-gap: var(--sp-48, 3rem);
    --jr-year-gap: var(--sp-8, 0.5rem);

    /* Линия и точки. Числа от прежнего блока: линия пунктиром цвета
       #c6c6c6, точка 8px белая с той же обводкой. Зелёный — акцент
       сайта, им же покрашена линия в шапке и звёздочки наград. */
    --jr-line: #c6c6c6;
    --jr-dot: var(--sp-8, 0.5rem);
    --jr-dot-now: #abcf39;

    /* Точка встаёт по первой строке года, а не по верху пункта: у года
       над буквами есть просвет, и точка, поставленная по краю коробки,
       читается как съехавшая вверх. */
    --jr-dot-top: 0.5em;

    /* цвета */
    --jr-ink: #1b1b1b;

    width: 100%;
    max-width: var(--jr-max);
    margin-left: auto;
    margin-right: auto;
}

/* Два уровня: `.elementor-kit-225 h2 { font-size: 28px }` весит (0,1,1)
   и одним классом не перебивается. */
.journey .journey__title {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--jr-title-gap);
    margin-left: 0;
    font-size: var(--jr-fs-title);
    font-weight: 500;
    line-height: var(--jr-lh-title);
    text-align: center;
    color: var(--jr-ink);
}

/* Линия проходит по середине списка. `border-left` у самого списка,
   а не отдельный элемент: рисовать линию нечем, кроме границы, и она
   сама тянется ровно на высоту ленты. */
.journey .journey__list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left-width: 1px;
    border-left-style: dashed;
    border-left-color: var(--jr-line);

    /* Граница у левого края, а список сдвинут так, чтобы она оказалась
       по центру полосы. Половина ширины — и есть эта середина. */
    margin-left: 50%;
}

/* Пункт: чуть меньше половины полосы. Нечётные уходят влево от линии,
   чётные остаются справа. */
/* ВНИМАНИЕ, ПРОЦЕНТЫ СЧИТАЮТСЯ ОТ СПИСКА, А НЕ ОТ ПОЛОСЫ. Список сдвинут
   на половину полосы, поэтому его собственная ширина — ровно половина,
   и `100%` здесь это половина ленты. Отсюда `100% - зазор/2` у пункта
   и `-100%` у нечётного: он уходит на свою половину целиком. */
.journey .journey__item {
    position: relative;
    width: calc(100% - var(--jr-gap) / 2);
    margin-left: calc(var(--jr-gap) / 2);
    padding-bottom: var(--jr-item-gap);
    list-style: none;
}

.journey .journey__item:nth-child(odd) {
    margin-left: -100%;
    text-align: right;
}

.journey .journey__item:last-child {
    padding-bottom: 0;
}

/* Точка на линии. Считается от края пункта: половина зазора до линии
   минус половина самой точки — так её центр попадает ровно на линию. */
.journey .journey__item::before {
    content: "";
    position: absolute;
    top: var(--jr-dot-top);
    left: calc(var(--jr-gap) / -2 - var(--jr-dot) / 2);
    width: var(--jr-dot);
    height: var(--jr-dot);
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: var(--jr-line);
    border-radius: 50%;
}

.journey .journey__item:nth-child(odd)::before {
    left: auto;
    right: calc(var(--jr-gap) / -2 - var(--jr-dot) / 2);
}

/* «Сегодня» — крайняя запись ленты. */
.journey .journey__item:last-child::before {
    background-color: var(--jr-dot-now);
    border-color: var(--jr-dot-now);
}

/* Два уровня против кита: `.elementor-kit-225 h3 { font-size: 24px }`
   весит (0,1,1). */
.journey .journey__year {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--jr-year-gap);
    margin-left: 0;
    font-size: var(--jr-fs-year);
    font-weight: 600;
    line-height: var(--jr-lh-year);
    color: var(--jr-ink);
}

.journey .journey__text {
    font-size: var(--jr-fs-text);
    font-weight: 400;
    line-height: var(--jr-lh-text);
    color: var(--jr-ink);
}

/* Ритм внутри текста тот же, что у остальных блоков: поля сняты, отбивка
   идёт сверху. */
.journey .journey__text > * {
    margin: 0;
}

.journey .journey__text > * + * {
    margin-top: var(--sp-20, 1.25rem);
}

/* ── планшет ── */

@media (max-width: 1199px) {
    .journey {
        --jr-title-gap: var(--sp-48, 3rem);
        --jr-gap: var(--sp-48, 3rem);
        --jr-item-gap: var(--sp-40, 2.5rem);
    }
}

/* ── телефон ──
   Зигзаг не помещается: колонка в 130px рвала бы каждое слово. Лента
   становится одной колонкой, линия уходит к левому краю. */

@media (max-width: 767px) {
    .journey {
        --jr-fs-year: var(--fs-20, 1.25rem);
        --jr-title-gap: var(--sp-32, 2rem);
        --jr-gap: var(--sp-24, 1.5rem);
        --jr-item-gap: var(--sp-32, 2rem);
    }

    .journey .journey__list {
        margin-left: 0;
    }

    .journey .journey__item,
    .journey .journey__item:nth-child(odd) {
        width: auto;
        margin-left: var(--jr-gap);
        text-align: start;
    }

    .journey .journey__item::before,
    .journey .journey__item:nth-child(odd)::before {
        left: calc(var(--jr-gap) / -1 - var(--jr-dot) / 2);
        right: auto;
    }
}


/* ==========================================================================
   5. ЦЕННОСТИ
   ========================================================================== */

/* Заголовок, текст под ним и четыре карточки «значок + подзаголовок +
 * абзац». Разметка — components/values.php.
 *
 * ЧТО ИЗМЕНИЛОСЬ ПРОТИВ ПРЕЖНЕГО ВИДА. Каждая карточка была отдельной
 * вложенной секцией Elementor из двух колонок: 20% под значок, 80% под
 * текст. Четыре карточки — четыре секции и восемь колонок, и все размеры
 * в них заданы поштучно долями ширины окна. Здесь одна сетка на все
 * карточки и один набор ролей.
 *
 * СЕТКА В ДВЕ КОЛОНКИ, а не в четыре: у карточки есть абзац в три строки,
 * и в колонке шириной 265px он рвался бы по два слова.
 */

.values {
    /* размеры */
    --vl-fs-title: var(--fs-h2, 1.75rem);
    --vl-fs-lead: var(--fs-lead, 1.125rem);
    --vl-fs-name: var(--fs-24, 1.5rem);
    --vl-fs-text: var(--fs-16, 1rem);

    /* Межстрочные — те же, что у остальных блоков: 1.2 у крупного
       набора, 1.4 у обычного. */
    --vl-lh-title: 1.2;
    --vl-lh-lead: 1.4;
    --vl-lh-name: 1.2;
    --vl-lh-text: 1.4;

    /* Полоса — контентная полоса сайта, как у «Миссии». */
    --vl-max: 71.25rem;

    /* Колонка текста под заголовком — та же, что у «Миссии»: 600px,
       около 66 знаков в строке. */
    --vl-lead-max: 37.5rem;

    /* Значок. 46px — размер из прежней разметки; своей ступени под
       размер картинки в шкале нет, и придумывать её ради одного места
       незачем. */
    --vl-icon: 2.875rem;

    /* ритм */
    --vl-title-gap: var(--sp-24, 1.5rem);
    --vl-list-gap: var(--sp-64, 4rem);
    --vl-col-gap: var(--sp-64, 4rem);
    --vl-row-gap: var(--sp-48, 3rem);
    --vl-icon-gap: var(--sp-24, 1.5rem);
    --vl-name-gap: var(--sp-8, 0.5rem);

    /* Колонок в ряду. Это число колонок, а не размер: ступени шкалы
       к нему отношения не имеют. */
    --vl-cols: 2;

    /* цвета */
    --vl-ink: #1b1b1b;

    width: 100%;
    max-width: var(--vl-max);
    margin-left: auto;
    margin-right: auto;
}

/* Два уровня: `.elementor-kit-225 h2 { font-size: 28px }` весит (0,1,1)
   и одним классом не перебивается. */
.values .values__title {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--vl-title-gap);
    margin-left: 0;
    font-size: var(--vl-fs-title);
    font-weight: 500;
    line-height: var(--vl-lh-title);
    text-align: center;
    color: var(--vl-ink);
}

.values .values__lead {
    max-width: var(--vl-lead-max);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--vl-fs-lead);
    font-weight: 400;
    line-height: var(--vl-lh-lead);
    text-align: center;
    color: var(--vl-ink);
}

.values .values__list {
    display: grid;
    grid-template-columns: repeat(var(--vl-cols), 1fr);
    column-gap: var(--vl-col-gap);
    row-gap: var(--vl-row-gap);
    margin-top: var(--vl-list-gap);
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

/* Карточка: значок слева, текст справа. Значок не сжимается — длинный
   абзац иначе выдавливает его в ноль. */
.values .values__card {
    display: flex;
    align-items: flex-start;
    gap: var(--vl-icon-gap);
    list-style: none;
}

.values .values__icon {
    flex-shrink: 0;
    width: var(--vl-icon);
    height: auto;
}

/* Два уровня против кита: `.elementor-kit-225 h3 { font-size: 24px }`
   весит (0,1,1). */
.values .values__name {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--vl-name-gap);
    margin-left: 0;
    font-size: var(--vl-fs-name);
    font-weight: 500;
    line-height: var(--vl-lh-name);
    color: var(--vl-ink);
}

.values .values__text {
    font-size: var(--vl-fs-text);
    font-weight: 400;
    line-height: var(--vl-lh-text);
    color: var(--vl-ink);
}

/* Ритм внутри текста тот же, что у остальных блоков: поля сняты, отбивка
   идёт сверху. */
.values .values__text > * {
    margin: 0;
}

.values .values__text > * + * {
    margin-top: var(--sp-20, 1.25rem);
}

/* ── планшет ── */

@media (max-width: 1199px) {
    .values {
        --vl-col-gap: var(--sp-48, 3rem);
        --vl-row-gap: var(--sp-40, 2.5rem);
        --vl-list-gap: var(--sp-48, 3rem);
    }
}

/* ── телефон ── */

@media (max-width: 767px) {
    .values {
        --vl-cols: 1;
        --vl-fs-lead: var(--fs-16, 1rem);
        --vl-fs-name: var(--fs-20, 1.25rem);
        --vl-icon-gap: var(--sp-16, 1rem);
        --vl-row-gap: var(--sp-32, 2rem);
        --vl-list-gap: var(--sp-32, 2rem);
    }
}