/* ── benefits-v1: сетка «пять преимуществ клиники» ──────────────────────────
   Общий компонент двух секций редизайна. Разметка и тексты — в
   template-parts/benefits-v1.php; здесь геометрия.

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

   Расстановка на десктопе явная, а не auto-flow: третий пункт занимает всю
   ширину третьего ряда, и авторазмещение переставило бы остальные.
   ─────────────────────────────────────────────────────────────────────────── */

.benefits-v1 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    column-gap: 0;
    row-gap: 30px;
}

.benefits-v1__item:nth-child(1) { grid-row: 1; grid-column: 1; }      /* brain     */
.benefits-v1__item:nth-child(2) { grid-row: 2; grid-column: 1; }      /* incognito */
.benefits-v1__item:nth-child(3) { grid-row: 3; grid-column: 1 / -1; } /* laptop    */
.benefits-v1__item:nth-child(4) { grid-row: 1; grid-column: 2; }      /* calendar  */
.benefits-v1__item:nth-child(5) { grid-row: 2; grid-column: 2; }      /* phone     */

.benefits-v1__item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefits-v1__icon {
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    border-radius: 10px;
    background: linear-gradient(121.49deg, var(--color-sage) 0%, #8DA175 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-v1__icon img {
    display: block;
}

.benefits-v1__text {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text-main-color);
}

/* Высота строки — в пикселях, а не множителем. Figma округляет её до целого:
   16px × 1.15 = 18.4 → рисует 18, 18px × 1.15 = 20.7 → рисует 21. Множитель
   даёт браузеру 18.4px, лишняя доля копится по колонке и к пятому ряду
   разводит вёрстку с макетом на 10px. Проверено на выгрузке .fig. */

/* ── Вариант lg — uslugihero-v1 ── */

.benefits-v1--lg { grid-template-columns: repeat(2, 312px); }
.benefits-v1--lg .benefits-v1__text { font-size: 18px; line-height: 21px; }

/* max-width = ширина текстового фрейма в Figma: она задаёт точку переноса строк */
.benefits-v1--lg .benefits-v1__item:nth-child(1) .benefits-v1__text { max-width: 225px; }
.benefits-v1--lg .benefits-v1__item:nth-child(2) .benefits-v1__text { max-width: 210px; }
.benefits-v1--lg .benefits-v1__item:nth-child(3) .benefits-v1__text { max-width: 311px; }
.benefits-v1--lg .benefits-v1__item:nth-child(4) .benefits-v1__text { max-width: 253px; }
.benefits-v1--lg .benefits-v1__item:nth-child(5) .benefits-v1__text { max-width: 234px; }

/* ── Вариант md — leoinfo-v1 ── */

/* Вторая колонка — остаток, а не фиксированные 265px: в макете шаг колонок 265,
   но текстовые фреймы шире него (напр. 210 при доступных 265−49−15=201) и просто
   вылезают вправо, где пусто. Жёсткий трек резал бы их на лишнюю строку. */
.benefits-v1--md { grid-template-columns: 265px minmax(0, 1fr); }
.benefits-v1--md .benefits-v1__text { font-size: 16px; line-height: 18px; }

.benefits-v1--md .benefits-v1__item:nth-child(1) .benefits-v1__text { max-width: 192px; } /* Figma 189 + запас: LorenzoSans шире */
.benefits-v1--md .benefits-v1__item:nth-child(2) .benefits-v1__text { max-width: 210px; }
.benefits-v1--md .benefits-v1__item:nth-child(3) .benefits-v1__text { max-width: 255px; } /* Figma 248 + запас */
.benefits-v1--md .benefits-v1__item:nth-child(4) .benefits-v1__text { max-width: 218px; }
.benefits-v1--md .benefits-v1__item:nth-child(5) .benefits-v1__text { max-width: 206px; }

/* ══ Mobile ══════════════════════════════════════════════════════════════════
   Один столбец в порядке разметки; десктопная расстановка сбрасывается.
   Размеры в vw от 400px-макета (1vw = 4px), кегль в px.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .benefits-v1 {
        grid-template-columns: 1fr;
        row-gap: 5vw;
    }

    .benefits-v1__item:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
    }

    /* По верху, а не по центру: у трёхстрочных пунктов ряд выше плашки, и
       центрирование опускало бы иконку на 6px — в макете она стоит вровень
       с первой строкой текста. На десктопе текст всегда ниже плашки, там
       центрирование остаётся. */
    .benefits-v1__item {
        gap: 3.75vw;
        align-items: flex-start;
    }

    .benefits-v1__icon {
        flex-basis: 10.5vw;
        width: 10.5vw;
        height: 10.5vw;
        border-radius: 2.5vw;
    }

    .benefits-v1__item:nth-child(1) .benefits-v1__icon img { width: 5.5vw; height: 5.5vw; }
    .benefits-v1__item:nth-child(2) .benefits-v1__icon img { width: 7vw;   height: 7vw; }
    .benefits-v1__item:nth-child(3) .benefits-v1__icon img { width: 5.5vw; height: 5.5vw; }
    .benefits-v1__item:nth-child(4) .benefits-v1__icon img { width: 6vw;   height: 6vw; }
    .benefits-v1__item:nth-child(5) .benefits-v1__icon img { width: 7.5vw; height: 7.5vw; }

    .benefits-v1--lg .benefits-v1__text,
    .benefits-v1--md .benefits-v1__text {
        font-size: 16px;
        line-height: 18px;
    }

    .benefits-v1--lg .benefits-v1__item:nth-child(1) .benefits-v1__text { max-width: 50.25vw; }
    .benefits-v1--lg .benefits-v1__item:nth-child(2) .benefits-v1__text { max-width: 52.5vw; }
    .benefits-v1--lg .benefits-v1__item:nth-child(3) .benefits-v1__text { max-width: 50.25vw; }
    .benefits-v1--lg .benefits-v1__item:nth-child(4) .benefits-v1__text { max-width: 60.75vw; }
    .benefits-v1--lg .benefits-v1__item:nth-child(5) .benefits-v1__text { max-width: 52.5vw; }

    .benefits-v1--md .benefits-v1__item:nth-child(1) .benefits-v1__text { max-width: 48vw; } /* Figma 189 + запас */
    .benefits-v1--md .benefits-v1__item:nth-child(2) .benefits-v1__text { max-width: 52.5vw; }
    .benefits-v1--md .benefits-v1__item:nth-child(3) .benefits-v1__text { max-width: 50.25vw; }
    .benefits-v1--md .benefits-v1__item:nth-child(4) .benefits-v1__text { max-width: 47.25vw; }
    .benefits-v1--md .benefits-v1__item:nth-child(5) .benefits-v1__text { max-width: 52.5vw; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Сетка внутри колонки статьи — гашение типографики .articles-typical__content

   Добавлено 2026-08-24 вместе с узким вариантом leoinfo-v1: этот компонент
   попадает в колонку статьи вместе с ним. Разметка — <ul>/<li>/<img>, а статья
   задаёт им маркеры-точки, свои отступы и `img { height: auto }`.
   Специфичность её правил 0,1,1, поэтому селекторы записаны парой.
   ══════════════════════════════════════════════════════════════════════════ */

.benefits-v1.benefits-v1 {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: normal;
}

.benefits-v1 .benefits-v1__item {
    padding: 0;
    margin: 0;
    list-style: none;
}

.benefits-v1 .benefits-v1__item::before,
.benefits-v1 .benefits-v1__item::marker {
    content: none;
}

.benefits-v1 .benefits-v1__icon img {
    max-width: none;
}