/* ОТЗЫВЫ — .reviews
 * ============================================================================
 *
 * Оформление компонента components/reviews.php: заголовок секции, ряд
 * карточек с отзывами Google и Clutch и кнопка на профиль студии.
 * Ставится шорткодом [freedes_reviews] на любую страницу.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ РАЗДЕЛ В service-pages.css. Тот лист едет
 * на `is_page()` и намеренно снят с главных. Блок отзывов метит и на
 * главную тоже, и, влив его туда, мы либо потащили бы на десять главных
 * весь сервисный лист, либо оставили бы блок без оформления. Свой файл
 * подключается только там, где блок действительно стоит. То же решение
 * и по той же причине, что у press.css.
 *
 * ПРАВИЛА ЭТОГО ФАЙЛА — те же, что у service-pages.css:
 *
 * 1. Свой префикс ролей `--rv-*`, чтобы блоки не могли перебить друг друга.
 * 2. В правилах — только роли. Ступени `--fs-*` и `--sp-*` из `:root` темы
 *    встречаются лишь в объявлении ролей. Адаптив — переопределение ролей.
 * 3. У каждой ступени запасное значение: файл лежит в плагине, шкала —
 *    в теме, и при её отсутствии блок не должен рассыпаться.
 * 4. Никаких сокращённых свойств с переменной внутри: движок, который
 *    такое не разбирает, выбрасывает объявление целиком.
 *
 * ЦВЕТА ЗДЕСЬ НЕ САЙТОВЫЕ, И ЭТО НАМЕРЕННО. Серый служебный текст, жёлтые
 * звёзды, тонкая рамка — палитра карточки отзыва, какой её показывают сами
 * площадки. Салатовый акцент сайта (#abcf39) в блоке не участвует: карточка
 * должна читаться как отзыв с Google, а не как наш собственный текст
 * о себе. Ради этого блок и ставят.
 *
 * ЧИСЛО КОЛОНОК НЕ ЗАДАНО НИ ОДНИМ МЕДИА-ЗАПРОСОМ. Сетка берёт столько,
 * сколько влезает по `--rv-col`: на вебе три карточки в ряд, на планшете
 * две, на телефоне одна. Порогов, которые пришлось бы сводить со шкалой
 * темы, у сетки нет вовсе.
 */


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

/* В main.css стоит `.elementor-widget-shortcode { display: flex;
   justify-content: center }`. Виджет становится флекс-контейнером, а блок
   внутри — флекс-элементом и ужимается по содержимому: секция встала бы
   посреди страницы куском в половину ширины. Приём не новый, так же
   вылечены награды, форма заявки и полоса прессы.

   Ширина задана и на самом блоке (`width: 100%` ниже): она работает там,
   где `:has()` не поддержан. */
.elementor-widget-shortcode:has(.reviews) {
    display: block;
}


/* ==========================================================================
   БЛОК
   ========================================================================== */

.reviews {
    /* размеры — ступени темы: блок должен быть набран тем же, чем набраны
       соседние секции страницы */
    --rv-fs-title: var(--fs-h2, 1.75rem);
    --rv-fs-lead: var(--fs-16, 1rem);
    --rv-fs-name: var(--fs-14, 0.875rem);
    --rv-fs-text: var(--fs-14, 0.875rem);
    --rv-fs-avatar: var(--fs-18, 1.125rem);
    --rv-fs-btn: var(--fs-14, 0.875rem);

    /* Мелкая служебная строка: счётчик отзывов, давность, «View on Google».
       В прежнем блоке ссылка была набрана 11px — ступени мельче 12
       в системе нет, поэтому здесь 12. Это единственное расхождение
       с прежним видом. */
    --rv-fs-meta: var(--fs-12, 0.75rem);

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

    /* Полоса — 1140px, контентный контейнер сайта: `body
       .elementor-section.elementor-section-boxed > .elementor-container
       { max-width: 1140px }` в main.css. Блок встаёт по той же полосе,
       что и остальные секции, и при правке контейнера поедет вместе
       с ними — не разъедется. */
    --rv-max: 71.25rem;
    --rv-pad-x: var(--sp-24, 1.5rem);
    --rv-pad-y: var(--sp-64, 4rem);

    /* Нижнюю отбивку несёт сам блок: на шаблоне «страница блоками» секции
       лежат в <main> подряд, и задавать просвет между ними больше некому.
       То же решение, что у FAQ, галереи и каталога услуг. */
    --rv-bottom: 0rem;

    /* сетка: 250px — ниже карточка с именем, звёздами и абзацем текста
       перестаёт читаться */
    --rv-col: 15.625rem;
    --rv-gap: var(--sp-20, 1.25rem);
    --rv-grid-gap: var(--sp-32, 2rem);
    --rv-lead-gap: var(--sp-12, 0.75rem);
    --rv-all-gap: var(--sp-32, 2rem);

    /* Сколько строк текста видно, пока карточка свёрнута. Шесть — это
       примерно 240 знаков на телефоне и 300 на вебе; порог, за которым
       компонент печатает «Read more», равен большему из двух, поэтому
       кнопка появляется только там, где текст свёрнут при любой ширине. */
    --rv-lines: 6;

    /* карточка */
    --rv-card-pad: var(--sp-24, 1.5rem);
    --rv-card-radius: 0.75rem;
    --rv-head-gap: var(--sp-12, 0.75rem);
    --rv-avatar-size: 2.5rem;

    /* палитра площадок */
    --rv-ink: #3c4043;
    --rv-ink-strong: #1a1a1a;
    --rv-ink-mute: #70757a;
    --rv-line: #e8e8e8;
    --rv-line-soft: #f0f0f0;
    --rv-star: #fbbc05;
    --rv-card-bg: #ffffff;

    /* Фон блока прозрачный: секция Elementor под ним может быть любой,
       и белая заливка перекрыла бы её. Карточки при этом белые всегда —
       на светлом фоне их держит рамка, на тёмном они сами и есть фон. */
    width: 100%;
    padding-top: var(--rv-pad-y);
    padding-right: var(--rv-pad-x);
    padding-bottom: var(--rv-pad-y);
    padding-left: var(--rv-pad-x);
    margin-bottom: var(--rv-bottom);
    background: transparent;
}

/* Спрайт со значком Google: <symbol> объявлен один раз, карточки зовут его
   через <use>. Не `display: none` — оно в части браузеров ломает <use>;
   нулевой размер вне потока не влияет на раскладку и работает везде. */
.reviews__sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.reviews__inner {
    max-width: var(--rv-max);
    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================================
   ЗАГОЛОВОК
   ========================================================================== */

/* Два уровня в селекторе — против `.elementor-kit-225 h2` (0,1,1): кит
   Elementor грузится ПОСЛЕ этого файла и при (0,1,0) перебил бы размер.
   Числа у нас и у кита сегодня совпадают, но зависеть от этого нельзя. */
.reviews .reviews__title {
    margin: 0;
    font-size: var(--rv-fs-title);
    font-weight: 500;
    line-height: var(--rv-lh-title);
    color: #000000;
    text-align: center;
}

/* 760px: строка не длиннее ~90 знаков, иначе подпись читается тяжело */
.reviews__lead {
    max-width: 47.5rem;
    margin-top: var(--rv-lead-gap);
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-size: var(--rv-fs-lead);
    font-weight: 400;
    line-height: 1.5;
    color: var(--rv-ink);
    text-align: center;
}


/* ==========================================================================
   СЕТКА И КАРТОЧКА
   ========================================================================== */

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rv-col), 1fr));
    gap: var(--rv-gap);
    margin: var(--rv-grid-gap) 0 0;
    padding: 0;
    list-style: none;
}

/* Пункт списка — флекс, чтобы карточка растянулась на всю высоту ряда.
   Без этого в ряду с отзывами разной длины карточки были бы разной высоты. */
.reviews__item {
    display: flex;
    margin: 0;
}

.reviews__card {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: var(--rv-card-pad);
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-card-radius);
    background: var(--rv-card-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.reviews__head {
    display: flex;
    align-items: center;
    gap: var(--rv-head-gap);
    margin-bottom: var(--rv-head-gap);
}

/* Кружок с первой буквой имени вместо фотографии: снимков авторов у нас нет,
   а пустое место на их месте читается как незагрузившаяся картинка. Цвет
   приходит из данных отзыва инлайновым `--rv-avatar` — это единственное
   инлайновое объявление во всём блоке. Запасной цвет на случай, если
   у отзыва он не задан. */
.reviews__avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--rv-avatar-size);
    height: var(--rv-avatar-size);
    border-radius: 50%;
    background: var(--rv-avatar, var(--rv-ink-mute));
    font-size: var(--rv-fs-avatar);
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
}

/* min-width: 0 — иначе длинное имя раздувает колонку сетки: у флекс-элемента
   минимальная ширина по умолчанию равна содержимому, а не нулю. */
.reviews__author {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.reviews .reviews__name {
    font-size: var(--rv-fs-name);
    font-weight: 600;
    line-height: 1.3;
    color: var(--rv-ink-strong);
    text-decoration: none;
}

.reviews .reviews__name:hover,
.reviews .reviews__name:focus-visible {
    color: var(--rv-ink-strong);
    text-decoration: underline;
}

.reviews__meta {
    font-size: var(--rv-fs-meta);
    line-height: 1.3;
    color: var(--rv-ink-mute);
}

.reviews__rating {
    display: flex;
    align-items: center;
    gap: var(--sp-8, 0.5rem);
    margin-bottom: var(--sp-8, 0.5rem);
}

.reviews__stars {
    font-size: var(--rv-fs-name);
    letter-spacing: 1px;
    color: var(--rv-star);
}

.reviews__date {
    font-size: var(--rv-fs-meta);
    color: var(--rv-ink-mute);
}

/* ПОРЯДОК ЧАСТЕЙ ЗАДАН ЯВНО, и это не украшательство. В разметке
   переключатель стоит ПЕРЕД текстом — только так работает правило
   `[open] ~ .reviews__text--clamp`: соседний селектор смотрит вперёд
   и не умеет назад. На экране же он должен быть ПОД текстом, и местами
   их меняет `order`. Обратный порядок в разметке потребовал бы `:has()`
   на карточке, а там, где его нет, текст остался бы обрезанным навсегда. */
.reviews__head {
    order: 1;
}

.reviews__rating {
    order: 2;
}

.reviews__text {
    order: 3;
    margin: 0;
    font-size: var(--rv-fs-text);
    font-weight: 400;
    line-height: var(--rv-lh-text);
    color: var(--rv-ink);
}

.reviews__more {
    order: 4;
}

.reviews__source {
    order: 5;
}

/* Свёртка. `-webkit-line-clamp` требует `display: -webkit-box` — это
   не вендорный пережиток, а единственный способ обрезать по числу СТРОК:
   `max-height` обрезал бы по высоте и половинил последнюю строку.
   Свойство без префикса стоит рядом на будущее. */
.reviews__text--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rv-lines, 6);
    line-clamp: var(--rv-lines, 6);
    overflow: hidden;
}

.reviews__more[open] ~ .reviews__text--clamp {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* Треугольник у `<summary>` снимается двумя способами сразу: `list-style`
   для нынешних браузеров и вебкитовский псевдоэлемент для старых. */
.reviews__toggle {
    display: inline-flex;
    align-items: center;
    margin-top: var(--sp-8, 0.5rem);
    font-size: var(--rv-fs-meta);
    font-weight: 500;
    color: var(--rv-ink-mute);
    list-style: none;
    cursor: pointer;
}

.reviews__toggle::-webkit-details-marker {
    display: none;
}

.reviews__toggle:hover,
.reviews__toggle:focus-visible {
    color: var(--rv-ink-strong);
    text-decoration: underline;
}

/* Подпись переключателя меняется сама: свёрнуто — «Read more»,
   раскрыто — «Show less». Обе лежат в разметке, лишняя прячется. */
.reviews__more-close {
    display: none;
}

.reviews__more[open] .reviews__more-open {
    display: none;
}

.reviews__more[open] .reviews__more-close {
    display: inline;
}


/* ==========================================================================
   ПОДПИСЬ ИСТОЧНИКА
   ========================================================================== */

/* `margin-top: auto` прижимает подпись ко дну карточки — ради этого карточка
   и сделана колонкой-флексом. Иначе в ряду с отзывами разной длины черта
   стояла бы на разной высоте. Просвет от текста при этом не меньше
   верхнего поля карточки. */
.reviews__source {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 0.25rem);
    margin-top: auto;
    padding-top: var(--sp-12, 0.75rem);
    border-top: 1px solid var(--rv-line-soft);
}

.reviews__glyph {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

/* Имя площадки словом — там, где фирменного знака у нас в файлах нет
   (Clutch). Набрано тем же кеглем, что и ссылка рядом, но темнее: это
   название источника, а не служебная подпись. */
.reviews__brand {
    flex: 0 0 auto;
    font-size: var(--rv-fs-meta);
    font-weight: 600;
    color: var(--rv-ink-strong);
}

.reviews .reviews__link {
    font-size: var(--rv-fs-meta);
    color: var(--rv-ink-mute);
    text-decoration: none;
}

.reviews .reviews__link:hover,
.reviews .reviews__link:focus-visible {
    color: var(--rv-ink-mute);
    text-decoration: underline;
}


/* ==========================================================================
   КНОПКА НА ПРОФИЛЬ
   ========================================================================== */

.reviews__all {
    margin-top: var(--rv-all-gap);
    text-align: center;
}

.reviews .reviews__button {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8, 0.5rem);
    padding: var(--sp-12, 0.75rem) var(--sp-24, 1.5rem);
    border: 1px solid #dadce0;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: var(--rv-fs-btn);
    font-weight: 500;
    color: var(--rv-ink);
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}

.reviews .reviews__button:hover,
.reviews .reviews__button:focus-visible {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
    color: var(--rv-ink);
}

.reviews__arrow {
    font-size: var(--rv-fs-lead, 1rem);
    color: var(--rv-ink-mute);
}

@media (prefers-reduced-motion: reduce) {
    .reviews .reviews__button {
        transition: none;
    }
}


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

/* 1199 и 767 — пороги шкалы темы, свои здесь заводить не за что: блок
   меняет вместе со страницей только поля, сетка перестраивается сама. */
@media (max-width: 1199px) {
    .reviews {
        --rv-pad-y: var(--sp-48, 3rem);
        --rv-fs-title: var(--fs-24, 1.5rem);
    }
}

@media (max-width: 767px) {
    .reviews {
        --rv-pad-y: var(--sp-40, 2.5rem);
        --rv-pad-x: var(--sp-16, 1rem);
        --rv-grid-gap: var(--sp-24, 1.5rem);
    }
}