/* ============================================================
   Блок «Отзывы наших клиентов» — правки по ТЗ
   ------------------------------------------------------------
   - .reviews-swiper-card__img — это не фото человека, а сохранённый
     СКРИНШОТ реального отзыва с Яндекс.Карт (текст/аватар/звёзды
     впечатаны в саму картинку). Исходные скриншоты — альбомные, разных
     пропорций (≈1.13–1.73), поэтому перед загрузкой каждый скриншот
     довписан до общего холста 700×467 (≈1.5, contain + белые поля —
     без обрезки текста), все выглядят единообразно. object-fit:cover
     ниже — подстраховка, кадрирования по факту почти нет, т.к. картинка
     уже нужной пропорции.
   - ПК: кнопки листания вплотную к заголовку, выравнивание по верху
     (тот же приём, что и в блоке «Наша команда» — align-items:flex-start,
     а не center, чтобы кнопки не «съезжали» вниз из-за многострочного
     подзаголовка).
   - Телефон: сокращены отступы между элементами.

   Всё scoped на .reviews-swiper(-card). Файл вне frontend/build —
   пересборка Astro его не затронет. Подключается только на главной.
   ============================================================ */

.reviews-swiper-card {
    width: 350px;
}
.reviews-swiper-card__img {
    height: 234px;
}

@media (max-width: 575px) {
    .reviews-swiper-card {
        width: 260px;
    }
    .reviews-swiper-card__img {
        height: 174px;
    }
}

/* Заголовок и кнопки — в общей строке .heading__top-row, подзаголовок
   отдельно ниже, чтобы зазор до кнопок не зависел от длины подзаголовка
   (см. подробное объяснение в assets/css/deals.css). */
.reviews-swiper .heading__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

/* ---------- Плашки Яндекс/2GIS у заголовка «Отзывы наших клиентов» ----------
   Тот же компонент .rating, что и в hero-баннере, здесь — компактная
   «плашка в одну строку» (см. .hero .rating в assets/css/hero-slider.css),
   стоит в общей строке с заголовком, справа от него — на том же месте,
   где обычно кнопки листания. На мобильном (кнопки листания там уже
   display:none, см. ниже) — переносится на отдельную строку под
   заголовком за счёт flex-basis:100% и общего flex-wrap:wrap строки. */
.reviews-swiper .rating {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    /* .heading__top-row центрирует по высоте всей строки, а её высоту
       задают кнопки листания (56x56px) — плашка (~38px) в этой полосе
       визуально уходит выше текста заголовка. Небольшой сдвиг вниз
       ставит её по центру именно относительно строки текста. */
    margin-top: 6px;
}

.reviews-swiper .rating__card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 8px 14px;
    border-radius: 12px;
}

.reviews-swiper .rating__logo { height: 22px; }

.reviews-swiper .rating__case {
    align-items: center;
    gap: 8px;
}

.reviews-swiper .rating__box {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.reviews-swiper .rating__score { font-size: 16px; }
.reviews-swiper .rating__count { font-size: 13px; }
.reviews-swiper .rating__star  { font-size: 16px; padding-top: 0; }

@media (min-width: 768px) {
    .reviews-swiper {
        padding-bottom: 56px;
    }
}

/* --- Телефон: компактнее --- */
@media (max-width: 767px) {
    .reviews-swiper .heading__top-row {
        gap: 16px;
    }
    .reviews-swiper {
        padding-bottom: 24px;
    }
    /* Кнопки листания на мобильном — после карточек, перед
       «Посмотреть все отзывы» (см. .swiper-nav-mobile в team.css). */
    .reviews-swiper__nav {
        display: none;
    }
    /* Плашки Яндекс/2GIS — под заголовком, на всю ширину строки
       (flex-basis:100% форсирует перенос, т.к. .heading__top-row уже
       flex-wrap:wrap), в две колонки по образцу .hero .rating. */
    .reviews-swiper .rating {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        margin-top: 0;
    }
    .reviews-swiper .rating__card {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 4px 5px;
        padding: 8px 8px;
    }
    .reviews-swiper .rating__case,
    .reviews-swiper .rating__box {
        display: contents;
    }
    .reviews-swiper .rating__logo  { order: 1; height: 16px; align-self: center; }
    .reviews-swiper .rating__score { order: 2; font-size: 13px; white-space: nowrap; }
    .reviews-swiper .rating__star  { order: 3; font-size: 13px; }
    .reviews-swiper .rating__count {
        order: 4;
        flex-basis: 100%;
        font-size: 11px;
        white-space: nowrap;
    }
    /* Отступ карточки -> кнопки сокращён (было 40px у самого swiper) */
    .reviews-swiper__swiper {
        padding-bottom: 16px;
    }
    .reviews-swiper-card {
        gap: 12px;
    }
    .reviews-swiper-card__box {
        gap: 6px;
    }
}

@media (max-width: 575px) {
    .reviews-swiper {
        padding-bottom: 20px;
    }
}