/* ===== REVIEWS SECTION ===== */

/* AICODE-NOTE: Нижний padding у Reviews уменьшен, т.к. следом идёт секция
   Results с тем же фоном — вместе они должны помещаться в один экран. */
.reviews {
    padding: var(--sp-2xl) 0 var(--sp-lg);
    background: var(--color-bg-light);
}

/* AICODE-NOTE: Размер шрифта заголовка сильно меньше, чем у дефолтного h2,
   и без letter-spacing — иначе пиксельный Press Start 2P на 40-48px выглядит
   «страшно и корявo» (буквы построены на сетке 8×8 и плохо масштабируются).
   В оригинале magicfitness.pro это ~18–20px чёрный текст без фона. */
.reviews__title {
    font-family: var(--font-pixel);
    text-align: center;
    margin-bottom: var(--sp-lg);
    color: var(--color-text);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.4;
}

/* AICODE-NOTE: На мобиле убираем боковой паддинг под стрелки (они скрыты,
   см. правило ниже) — карточка получает почти всю ширину экрана.
   На планшете+ padding 0 50px возвращается в @media. */
.reviews__slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 12px;
}

.reviews__viewport {
    overflow: hidden;
}

.reviews__track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.reviews__slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 var(--sp-md);
    /* AICODE-NOTE: box-sizing нужен, чтобы padding слайда не добавлялся
       к ширине 100%, иначе соседние слайды вылезают за viewport. */
    box-sizing: border-box;
}

/* AICODE-NOTE: Карточка отзыва использует общую утилиту .pixel-frame
   из base.css (фиолетовая пиксельная рамка + белое нутро). Здесь
   задаём только внутренние отступы, ширину и типографику — всё про
   рамку живёт в .pixel-frame. */
/* AICODE-NOTE: На мобиле паддинги сильно ужаты (раньше sp-xl/sp-2xl ≈ 32/48
   px съедали половину 390px-экрана). На планшете+ возвращается через @media. */
.review-card {
    padding: var(--sp-md);
    max-width: 720px;
    margin: 0 auto;
}

/* AICODE-NOTE: Слоган в оригинале magicfitness.pro — жирный пиксельный
   заголовок ~14–18px внутри карточки (существенно крупнее мелкого текста
   отзыва). Был fs-sm (12px) — выглядело как подпись, не как заголовок. */
.review-card__slogan {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: var(--sp-lg);
    line-height: 1.5;
}

.review-card__text {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--color-text);
}

.review-card__text--truncated {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card__text--expanded {
    -webkit-line-clamp: unset;
    display: block;
}

.review-card__more {
    display: inline-block;
    margin-top: var(--sp-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-primary);
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline;
    padding: 0;
}

/* --- Стрелки пагинации — тонкие фиолетовые SVG-шевроны, как в оригинале ---
   AICODE-NOTE: На мобиле стрелки скрыты — для переключения используются
   свайп и точки-пагинация (как на оригинале magicfitness.pro). На планшете+
   возвращаются через @media ниже. */
.reviews__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.reviews__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.reviews__arrow--prev {
    left: 0;
}

.reviews__arrow--next {
    right: 0;
}

.reviews__arrow:hover {
    color: var(--color-primary-dark);
    transform: translateY(-50%) scale(1.1);
}

/* --- Dots --- */
.reviews__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: var(--sp-lg);
}

.reviews__dot {
    width: 12px;
    height: 12px;
    background: var(--color-primary-light);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast);
    image-rendering: pixelated;
}

.reviews__dot--active {
    background: var(--color-primary);
}

/* Active dot drawn as pixel-plus */
.reviews__dot--active {
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--color-primary), var(--color-primary)) center/100% 33.33% no-repeat,
        linear-gradient(var(--color-primary), var(--color-primary)) center/33.33% 100% no-repeat;
    background-color: transparent;
}

@media (min-width: 768px) {
    .reviews__title {
        font-size: 16px;
    }

    .reviews__slider {
        padding: 0 60px;
    }

    /* AICODE-NOTE: На планшете+ стрелки появляются обратно (на мобиле
       они скрыты display:none ради свайпа). */
    .reviews__arrow {
        display: flex;
        width: 36px;
        height: 36px;
    }

    .review-card {
        padding: var(--sp-xl) var(--sp-2xl);
    }
}

@media (min-width: 1024px) {
    .reviews__title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    /* AICODE-NOTE: Мобильная типографика отзывов. Паддинги карточки заданы
       базовым правилом .review-card (var(--sp-md)), чтобы текст получал
       максимум ширины на 390px. */
    .review-card__slogan {
        font-size: 12px;
        line-height: 1.5;
    }

    .review-card__text {
        font-size: var(--fs-sm);
    }
}

@media (min-width: 1440px) {
    .reviews {
        padding: var(--sp-3xl) 0 var(--sp-xl);
    }

    .reviews__title {
        font-size: 20px;
    }

    .reviews__slider {
        max-width: 1100px;
        padding: 0 80px;
    }

    .review-card {
        max-width: 900px;
        padding: var(--sp-2xl) calc(var(--sp-2xl) + 16px);
    }

    .review-card__slogan {
        font-size: 16px;
    }

    .review-card__text {
        font-size: var(--fs-md);
        line-height: 1.8;
    }

    .reviews__arrow {
        width: 40px;
        height: 40px;
    }
}

/* ===== REVIEW MODAL ===== */

/* AICODE-NOTE: Модалка полного отзыва. Использует .pixel-frame для рамки,
   поэтому тут описываем только позиционирование, паддинги, оверлей, крестик
   и плавное появление. */
.review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-lg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.review-modal.is-open {
    opacity: 1;
}

.review-modal[hidden] {
    display: none;
}

.review-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 18, 40, 0.6);
}

.review-modal__content {
    --frame-step: 10px;
    --frame-w: 4px;
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--sp-lg) * 2);
    padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
    overflow-y: auto;
    transform: scale(0.96);
    transition: transform 0.2s ease;
}

.review-modal.is-open .review-modal__content {
    transform: scale(1);
}

.review-modal__slogan {
    font-family: var(--font-pixel);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-primary);
    text-align: center;
    margin: 0 0 var(--sp-md);
    padding-right: var(--sp-lg);
}

.review-modal__text {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-line;
}

.review-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.review-modal__close:hover {
    transform: scale(1.1);
}

.review-modal__close svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.is-modal-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .review-modal__content {
        padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
        max-width: 640px;
    }

    .review-modal__slogan {
        font-size: 16px;
        margin-bottom: var(--sp-lg);
    }

    .review-modal__text {
        font-size: var(--fs-md);
        line-height: 1.8;
    }
}