/* Собрано build.php из reviews/assets/*.css — править там, не здесь. */
:root { --brand: var(--color-brand-1); --brand-2: var(--color-brand-2); --text: var(--color-text-dark); --gray: var(--color-text-gray); --line: var(--color-border-grey); --dark: var(--color-header-background); }
    /* ============ ВАРИАНТ 2.2: чище карточка, плотнее текст ============ */
    .v22 { background: var(--dark); padding: 56px 0 60px; color: #fff; }

    /* Размер и начертание — как у «Пришлите ваш запрос на почту» в соседней секции:
       .fs-lg-display-xs = 1.563rem (25px), fw-bold, line-height 115%, трекинг -0.5px. */
    .v22 h3 {
        margin: 0; font-size: 1.563rem; font-weight: 700;
        letter-spacing: -.5px; line-height: 1.15; color: #fff;
    }

    .v22 .proof {
        display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
        height: 66px; padding: 0 22px; margin: 20px 0 30px;
        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    }
    .v22 .proof .score { display: flex; align-items: center; gap: 14px; }
    .v22 .proof .num { font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
    .v22 .proof .count { font-size: 13px; font-weight: 600; }
    .v22 .proof .divider { width: 1px; height: 26px; background: rgba(255,255,255,.12); }
    .v22 .proof .fine { font-size: 12.5px; color: rgba(255,255,255,.4); }
    /* Источник назван один раз — здесь: иконка Карт стоит вплотную к ссылке на них,
       а не отдельной строкой над заголовком. В карточках подписи «Яндекс Карты» нет:
       четыре повтора одного и того же добавляли шума, а не доверия. */
    .v22 .proof .maps { margin-left: auto; display: inline-flex; align-items: center; gap: 11px; }
    .v22 .proof .maps img { width: 30px; height: 30px; display: block; border-radius: 6px; }
    .v22 .proof .cta {
        display: inline-flex; align-items: center; gap: 7px;
        color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;
    }
    .v22 .proof .cta:hover { color: var(--brand); border-color: var(--brand); }
    .v22 .proof .cta:hover svg path { stroke: var(--brand); }

    .v22 .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .v22 .card {
        background: #fff; color: var(--text); padding: 22px;
        height: 322px; display: flex; flex-direction: column; gap: 12px;
        border: 1px solid transparent; cursor: pointer;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .v22 .card > * { flex: none; }
    /* Вся карточка открывает отзыв, поэтому нужен отклик на наведение — но деликатный:
       рамка и тень, без движения и смены цвета фона. */
    .v22 .card:hover { border-color: rgba(255,0,46,.35); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

    .v22 .card-head { display: flex; gap: 12px; align-items: center; }
    .v22 .name { font-size: 15px; font-weight: 600; line-height: 1.2; }
    /* nowrap: на широкой карточке «★★★★★ 25 февраля 2026» иначе переносится
       на вторую строку и ломает высоту шапки. */
    .v22 .meta {
        display: flex; align-items: center; gap: 7px; margin-top: 3px;
        font-size: 12px; color: var(--gray); white-space: nowrap;
    }

    /* Начертание текста отзыва — как в таблице характеристик товарной страницы
       Bronze Gym: .params .product-params .parent = 13px, line-height 16px, вес 400.
       Мельче и легче прежних 14px/500 — в ту же высоту входит восемь строк. */
    .v22 .text {
        font-size: 13px; line-height: 16px; font-weight: 400;
        margin: 0; -webkit-line-clamp: 8; height: 128px;
    }
    .v22 .more {
        align-self: flex-start; background: none; border: 0; padding: 0; font: inherit;
        font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; margin-top: -4px;
    }
    .v22 .more:hover { color: var(--brand-2); text-decoration: underline; }

    .v22 .photos { display: flex; gap: 6px; margin-top: auto; }
    .v22 .photos img { width: 52px; height: 52px; object-fit: cover; border-radius: 5px; display: block; }
    .v22 .photos .rest {
        width: 52px; height: 52px; border-radius: 5px; background: #f0f0f2; color: var(--gray);
        display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
    }

    .v22 .more-row { display: flex; justify-content: center; margin-top: 26px; }
    .v22 .more-btn {
        display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 26px;
        border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: none;
        color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .v22 .more-btn:hover { background: rgba(255,255,255,.08); }
    .v22 .hidden { display: none; }

    /* Модалка 2.2: крестик, больше воздуха, свободнее строки. Ширину не трогаем —
       текущая читается комфортно. */
    .rev2 { border: 0; padding: 0; max-width: 580px; width: calc(100% - 32px); }
    .rev2::backdrop { background: rgba(0,0,0,.72); }
    .rev2 .inner { padding: 34px 36px 28px; position: relative; }
    /* Крестик — как в базовой модалке сайта: две линии stroke-width 2 с круглыми
       концами, светло-серые (#e3e3e3), 25px, без подложки. В теме он собран маской
       из спрайта (--icon-static-cross), здесь та же геометрия нарисована напрямую. */
    .rev2 .x {
        position: absolute; top: 22px; right: 24px; width: 25px; height: 25px;
        display: block; padding: 0; background: none; border: 0; cursor: pointer;
        color: #e3e3e3; transition: color .15s ease;
    }
    .rev2 .x:hover { color: #b5b5b5; }
    .rev2 .x svg { display: block; width: 25px; height: 25px; }
    .rev2 .card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
    .rev2 .name { font-size: 16px; font-weight: 600; }
    .rev2 .meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; color: var(--gray); }
    .rev2 .full { font-size: 15px; line-height: 1.65; margin: 0 0 20px; white-space: pre-line; }
    .rev2 .shots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
    .rev2 .shots img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
    .rev2 .foot {
        display: flex; align-items: center; gap: 16px;
        border-top: 1px solid var(--line); padding-top: 18px;
    }
    .rev2 .open-link {
        display: inline-flex; align-items: center; gap: 7px;
        color: var(--brand); text-decoration: none; font-size: 13px; font-weight: 600;
    }
    .rev2 .open-link:hover { color: var(--brand-2); text-decoration: underline; }
    .rev2 .close { background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--gray); cursor: pointer; }
    .rev2 .close:hover { color: var(--text); }


@media (max-width: 1100px) {
    .v22 .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
        .v22 .rail {
            display: flex; grid-template-columns: none; overflow-x: auto;
            scroll-snap-type: x mandatory; gap: 12px;
            margin: 0 -20px; padding: 0 20px 6px;
            scrollbar-width: none;
        }
        .v22 .rail::-webkit-scrollbar { display: none; }
        .v22 .card { flex: 0 0 84vw; scroll-snap-align: start; }
        .v22 .card.hidden { display: flex; }
        .v22 .more-row { display: none; }
        .v22 .proof { height: auto; padding: 16px 18px; gap: 12px; }
        .v22 .proof .cta { margin-left: 0; }
        .v22 .proof .divider { display: none; }
        .v22 .proof .maps { margin-left: 0; }
        /* На сайте это тот же класс темы (.fs-text-2xl = 3.582rem), но там rem резиновый
           и на телефоне равен ~6,3px — то есть ~23px. В превью резиновой сетки нет,
           поэтому эквивалент задан в пикселях, иначе заголовок раздувается до 57px. */
        .v22 h3 { font-size: 23px; line-height: 1.1; }
}
/* Мелочи, общие для карточек: звёзды, аватар, обрезка текста.
   В витрине вариантов они объявлены глобально, для сайта нужны отдельно. */
.yrev22 .stars, .v22 .stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.v22 .ava { border-radius: 50%; object-fit: cover; flex: none; display: block; }
.v22 .ava-txt {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ececec; color: #4a4a4a; font-weight: 700;
}
.rev2 .ava { border-radius: 50%; object-fit: cover; flex: none; display: block; }
.rev2 .ava-txt {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ececec; color: #4a4a4a; font-weight: 700;
}
.rev2 .stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.v22 .clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.v22 .wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 3.563rem; }
.v22 { border-bottom: 1px solid rgba(255,255,255,.08); }