/* =============================================================================
   Виджет «Отзывы клиентов» (FW reviews) — самодостаточные стили.

   Подключается ТОЛЬКО на страницах, где видимого блока отзывов раньше не было
   (flutter-ecommerce-app, o-nas, страницы кейсов). На сервисных страницах с уже
   готовым блоком стили живут в их css/<page>.css — туда этот файл НЕ подключаем.

   Правила перенесены из css/audit-koda.css (эталон touch-scroll-блока) и
   расскоуплены с `.audit-koda-page` на глобальные `.testimonials*`.
   ============================================================================= */

.testimonials {
    padding: 56px 0 68px;           /* сверху 56px, снизу 68px; горизонталь — на контейнере */
    background: transparent;        /* прозрачно → подхватывает фон страницы (без плавающего блока) */
    overflow: visible;
    position: relative;
    /* ширину/центрирование/гориз. отступы держит .testimonials__container (= .header__container) */
}

/* Контейнер 1:1 повторяет .header__container — чтобы контент виджета выравнивался
   по логотипу/шапке (весь контент сайта ориентируется на шапку). */
.testimonials__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    overflow: visible;
}

@media (max-width: 1400px) {
    .testimonials__container { padding: 0 30px; }
}

@media (max-width: 1200px) {
    .testimonials__container { padding: 0 20px; }
}

.testimonials__title {
    font-size: 36px;
    color: #000;
    margin-bottom: 48px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 400;
}

.testimonial-card {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 300px;
    background: #f5f5f5;
    padding: 30px 24px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    min-height: 220px;
    box-sizing: border-box;
    position: relative;
    border: none;
    overflow: visible;
}

.testimonial-card__company {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
}

.testimonial-card__text {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    flex: 1 1 auto;
}

.testimonial-card__text::before {
    display: none;
}

.testimonial-card__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 4px;
}

.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.testimonial-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card__avatar--placeholder {
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-sizing: border-box;
}

/* SVG-заглушка идёт без класса __avatar-icon (как в main.html) — масштабируем её */
.testimonial-card__avatar--placeholder svg,
.testimonial-card__avatar--placeholder .testimonial-card__avatar-icon {
    width: 68%;
    height: auto;
    max-height: 92%;
    display: block;
    flex-shrink: 0;
}

.testimonial-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
}

.testimonial-card__name {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.25;
}

.testimonial-card__position {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
    margin: 0;
    line-height: 1.35;
}

.testimonials__slider {
    display: flex;
    gap: 20px;
    overflow: visible;
    position: relative;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}

/* --- режим carousel (touch-scroll, как на услугах) --- */
.testimonials--touch-scroll .testimonials__slider-viewport {
    margin-top: 50px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonials--touch-scroll .testimonials__slider-viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.testimonials--touch-scroll .testimonials__slider {
    flex: 1;
    min-width: 0;
}

.testimonials--touch-scroll .testimonials__slider > .testimonial-card:last-child {
    margin-right: 0;
}

/* --- режим inline (статичный ряд, без прокрутки) --- */
.testimonials--inline .testimonials__slider {
    margin-top: 40px;
    flex-wrap: wrap;
}

/* --- режим sidebar (вертикальная колонка) --- */
.testimonials--sidebar .testimonials__slider {
    flex-direction: column;
    margin-top: 24px;
}

.testimonials--sidebar .testimonial-card {
    flex: 1 1 auto;
}

@media (max-width: 1024px) {
    .testimonials__title { font-size: 34px; margin-bottom: 40px; }
}

@media (max-width: 768px) {
    .testimonials__slider { gap: 0; }
    .testimonials--inline .testimonials__slider { gap: 16px; }
}

@media (max-width: 600px) {
    .testimonials__title { font-size: 24px; margin-bottom: 24px; }
}

@media (max-width: 480px) {
    .testimonials--touch-scroll .testimonials__slider {
        gap: 0;
        overflow-x: visible;
        overflow-y: visible;
    }
    .testimonials__slider {
        gap: 16px;
        width: 100%;
    }
    .testimonials--touch-scroll .testimonials__slider .testimonial-card {
        box-sizing: border-box;
        max-width: none;
    }
}

/* =============================================================================
   Пер-страничные оверрайды — виджет под стиль конкретного кейса.
   Ориентир — блоки «Похожие кейсы»/«Услуги FITTIN» (FW-501) на каждой странице:
   форма плашек (радиус/рамка), цвет и выравнивание заголовка.
   Скоуп — по классу <body>/<main> страницы; подключается после css/<case>.css.
   ============================================================================= */

/* Вольный странник (teal): секция в цвет фона секций страницы (#eff7f9, без стыка),
   карточки белые скруглённые без рамки, заголовок тёмный слева. */
.volny-strannik-page .testimonials { background: #eff7f9; }
.volny-strannik-page .testimonials__title { color: #111; text-align: left; font-weight: 700; }
.volny-strannik-page .testimonial-card { background: #ffffff; border: none; border-radius: 14px; }
.volny-strannik-page .testimonial-card__text { font-weight: 500; }  /* как у .volny-store__list (фразы страницы) */

/* Aleksandr Bogdanov — как блок «Бизнес-задачи»: синий заголовок по центру, sentence-case
   (title «Отзывы о нас» в reviews.py), БЕЗ голубых черточек по бокам; плашки белые
   скруглённые (14px) со светлой рамкой. */
.bogdanov-case .testimonials__title {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    color: #3b66a8;
    text-transform: none;
    font-weight: 700;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.3;
}
/* голубые полоски по бокам — как у .bogdanov-section-header (блок «Бизнес-задачи») */
.bogdanov-case .testimonials__title::before,
.bogdanov-case .testimonials__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #3b66a8;
    opacity: 0.5;
}
.bogdanov-case .testimonial-card { background: #ffffff; border: 1px solid #ececec; border-radius: 14px; }
/* текст виджета — голубой, как текст по всей странице (#3b66a8) */
.bogdanov-case .testimonial-card__company,
.bogdanov-case .testimonial-card__text,
.bogdanov-case .testimonial-card__name,
.bogdanov-case .testimonial-card__position { color: #3b66a8; }

/* Fashouse — заголовок как у FW-501-блока: #272727, слева, очень жирный (900), плотный
   трекинг; плашки квадратные белые без рамки. */
/* заголовок по образцу «Услуги FITTIN»: 36px / 700 / трекинг -0.5px / отступ под ним 48px */
.fashouse-page .testimonials { padding-top: 16px; }
.fashouse-page .testimonials__title { color: #272727; text-align: left; font-weight: 900 !important; font-size: clamp(28px, 4vw, 48px); margin-bottom: 32px; }
.fashouse-page .testimonials__slider-viewport { margin-top: 0; }
.fashouse-page .testimonial-card { background: #ffffff; border: none; border-radius: 0; }

/* Finn Flare — под стиль страницы: белая секция, заголовок #252d37 по центру, sentence-case
   (title в reviews.py), плашки квадратные светло-серые (видны на белом). */
.finn-flare-page .testimonials { background: #ffffff; }
/* заголовок по образцу «Похожие кейсы» (--blue): clamp(28..40) / 600 / #000 / по центру */
.finn-flare-page .testimonials__title { color: #000; text-align: center; text-transform: none; font-weight: 600 !important; font-size: clamp(28px, 3.2vw, 40px); }
.finn-flare-page .testimonial-card { background: #f5f5f5; border: none; border-radius: 0; }

/* Garlyn — как блок «Бизнес-задачи»: заголовок #111 слева, sentence-case (title в reviews.py),
   плашки белые радиус 4px с тонкой рамкой #d0d0d0. */
/* заголовок по образцу блока «Бизнес-задачи»: clamp(22..28) / 600 / #111 / отступ под ним 24px */
.garlyn-page .testimonials__title { color: #111111; text-align: left; text-transform: none; font-weight: 600; font-size: 32px; margin-bottom: 24px; }
.garlyn-page .testimonials__slider-viewport { margin-top: 0; }
.garlyn-page .testimonial-card { background: #ffffff; border: 1px solid #d0d0d0; border-radius: 4px; }

/* IDOL — заголовок как у FW-501-блока: чёрный по центру, sentence-case (title «Отзывы о нас»);
   плашки белые квадратные с тонкой рамкой. */
/* заголовок по образцу «Услуги FITTIN»: 36px / 700; отступ заголовок→текст 48px */
.idol-case .testimonials__title { color: #000000; text-align: center; text-transform: none; font-weight: 600 !important; font-size: 40px; }
.idol-case .testimonials__slider-viewport { margin-top: 0; }
.idol-case .testimonial-card { background: #ffffff; border: 1px solid #ececec; border-radius: 0; }

/* Lassie (детская одежда, тёмно-синий): заголовок #252d37 по центру, плашки белые
   квадратные с синей рамкой #002354. */
/* заголовок по образцу «Услуги FITTIN» (--blue): clamp(28..40) / 600 / #252d37 / по центру, sentence-case */
.lassie-case .testimonials__title { color: #252d37; text-align: center; text-transform: none; font-weight: 600 !important; font-size: clamp(28px, 3.2vw, 40px); }
.lassie-case .testimonial-card { background: #ffffff; border: 1px solid #002354; border-radius: 0; }

/* Lusio — как FW-501-блок: белая секция-полоса (как у блоков выше) на бежевой странице,
   заголовок #4a3427 слева капсом с трекингом; плашки квадратные в цвет страницы (видны на белом). */
/* Белая полоса-секция как у блоков выше; перекрываем зазор (бежевый фон страницы между
   двумя белыми секциями), чтобы стыка-полоски не было. Заголовок = размер «Услуги FITTIN»
   на lusio (clamp 22–30 / 600), отступ заголовок→текст 32px. */
.lusio-page .testimonials { background: #ffffff; margin-top: -32px; padding: 0 0 80px; }
.lusio-page .testimonials__title { color: #4a3427; text-align: left; font-weight: 600 !important; letter-spacing: 0.06em; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 32px; }
.lusio-page .testimonials__slider-viewport { margin-top: 0; }
.lusio-page .testimonial-card { background: #f5f2ef; border: none; border-radius: 0; }

/* Mosigra (фирменный красный): заголовок красный слева, плашки белые скруглённые (28px)
   с красной рамкой 2px #d2001a. Отступ сверху сжат до межблочного (≈64px, как между
   «Похожие кейсы» и «Услуги FITTIN»): -16px перекрывают лишний padding-bottom блока выше. */
.mosigra-case .testimonials { margin-top: -16px; padding-top: 0; }
.mosigra-case .testimonials__title { color: #d2001a; text-align: left; font-weight: 600; }
.mosigra-case .testimonial-card { background: #ffffff; border: 2px solid #d2001a; border-radius: 28px; }

/* Сатурн (тёмно-синий): заголовок #11293b слева с трекингом, плашки белые (12px)
   с тонкой синей рамкой. */
.saturn-case .testimonials { margin-top: -16px; padding-top: 0; }
.saturn-case .testimonials__title { color: #11293b; text-align: left; font-weight: 600; letter-spacing: 0.04em; font-size: 34px; }
.saturn-case .testimonial-card { background: #ffffff; border: 1px solid #11293b; border-radius: 12px; }