/* ---- Rehab — full desktop styles (replace the previous block) ---- */

/* Переменные для быстрого тюнинга */
.rehab {
    --transition: 480ms;
    --nav-width: 320px;
    --gap: 32px;
    color: var(--color-text);
    margin-bottom: 60px;
}

/* ---- Сетка: навигация слева, контент справа (desktop) ---- */
.rehab__slide h3 {
    color: var(--color-text);
    margin: 0 0 15px 0;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-base);
}

.rehab__slide p, .rehab__slide ul {
    color: var(--color-text);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: var(--line-height-base);
}
.rehab__slide ul {
    margin: 10px 0 10px 0;
}
@media (min-width: 767.99px) {
    .rehab {
        display: grid;
        grid-template-columns: var(--nav-width) 1fr;
        gap: var(--gap);
        align-items: start;
    }

    /* делаем навигацию вертикальной колонкой */
    .rehab__nav {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px 8px 24px 0;
        box-sizing: border-box;
        align-self: start;
        /* делаем навигацию липкой, если нужно */
        position: sticky;
        top: 24px;
    }

    /* Кнопки — вид как в скрине: мелкий серый заголовок (неактивный) и жирный активный */
    .rehab__tab {
        font-family: Inter-SemiBold;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: var(--line-height-base);
        text-align: left;
        background: none;
        border: 0;
        padding: 8px 0;
        cursor: pointer;
        color: var(--color-text);
        opacity: 1;
        transition: color 180ms ease, opacity 180ms ease, transform 120ms ease;
        text-decoration: none; /* важно для <a> */
        outline: none;
        border: none;
        box-shadow: none;
    }
    .rehab__tab:focus,
    .rehab__tab:focus-visible,
    .rehab__tab:active {
        outline: none;
        border: none;
        box-shadow: none;
    }
    .rehab__tab:hover {
        opacity: 1;
        transform: translateX(2px);
    }

    /* Активный пункт — тёмный, чуть увеличенный */
    .rehab__tab.is-active {
        color: var(--color-text);
        font-weight: 700;
        opacity: 0.3;
    }

    /* Если нужен маленький подсказ/надпись сверху навигации — стиль для неё
       (не забудь добавить <div class="rehab__nav-title">Ход реабилитации</div> в HTML при желании) */
    .rehab__nav-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--color-text);
    }

    /* Контейнер контента — относительный (для абсолютных слайдов) */
    .rehab__content {
        position: relative;
    }

    /* Обёртка свайпера: фиксируем высоту секции под контент (можно подогнать) */
    .rehab__swiper {
        position: relative;
        height: 540px; /* подбери под дизайн / контент: на скрине ~540px */
        transition: height 0.35s ease;
        overflow: hidden;
    }

    .rehab__swiper .swiper-wrapper {
        position: relative;
        height: 100%;
    }

    /* ---- Абсолютное позиционирование слайдов + crossfade ---- */
    .rehab__slide {
        position: absolute;
        inset: 0;
        display: flex;
        gap: 28px;
        align-items: flex-start;
        padding: 28px;
        box-sizing: border-box;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition) ease;
        will-change: opacity;
    }

    /* Активный слайд видимый и принимает события */
    .rehab__slide.is-active {
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
    }

    /* Уходящий — чтобы новый мог быть поверх */
    .rehab__slide.leaving {
        z-index: 1;
    }

    /* Внутренний layout слайда: картинка справа (как на скрине) и текстовая колонка слева */
    /* Здесь мы делаем текстовую колонку 52% и изображение 48% (можно поменять) */
    .rehab__slide .slide-inner {
        width: 100%;
    }

    .rehab__slide img {
        width: 48%;
        height: auto;
        border-radius: 6px;
        object-fit: cover;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
        flex-shrink: 0;
    }

    .rehab__slide .slide-text {
        width: 80%;
        max-height: calc(100% - 0px); /* чтобы текст не выходил за пределы */
        overflow: auto;
    }

    .rehab__slide ul {
        padding-left: 18px;
    }

    /* нижняя часть текста — более светлый мелкий текст (если нужно) */
    .rehab__slide .muted {
        color: #666;
        font-size: 13px;
    }
}

/* ---- MOBILE / Default: обычный поток (Swiper работает) ---- */
@media (max-width: 767.98px) {
    .rehab__content {
        overflow: hidden;
    }
    .rehab {
        display: block;
    }

    .rehab__nav { display: none; }

    .rehab__nav-title { display: none; }

    .rehab__swiper {
        position: relative;
    }

    .rehab__slide {
        position: relative;
        padding: 12px 0;
        opacity: 1;
        pointer-events: auto;
        transition: none;
        display: block;
    }

    .rehab__slide img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .rehab__slide .slide-text { width: 100%; }
    .rehab__swiper {
        overflow: visible;        /* важно */
        padding-right: 16px;      /* сколько «торчит» следующий */
    }

    .rehab__swiper .swiper-wrapper {
        padding-right: 16px;      /* ширина подглядывающего слайда */
    }

    .rehab__swiper .swiper-slide {
        width: calc(100% - 16px);
    }
    /* Базовый стиль для всех слайдов */
    .rehab__slide {
        opacity: 0.3; /* Полупрозрачность по умолчанию */
        transition: opacity 0.3s ease; /* Плавный переход */
    }

    /* Активный слайд - полностью непрозрачный */
    .rehab__slide.swiper-slide-active {
        opacity: 1;
    }

    /* Следующий и предыдущий слайды - средняя прозрачность */
    .rehab__slide.swiper-slide-next,
    .rehab__slide.swiper-slide-prev {
        opacity: 0.7;
    }

    /* При наведении курсора - увеличиваем прозрачность */
    .rehab__slide:hover {
        opacity: 0.9;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .rehab__slide { transition: none !important; }
    .rehab__tab { transition: none !important; transform: none !important; }
}

/* ---- Small cosmetic helpers ---- */
.rehab__tab:focus { outline: 2px solid rgba(0,0,0,0.08); outline-offset: 4px; border-radius: 4px; }
.rehab__content { min-width: 0; } /* чтобы flex/grid overflow корректно высчитывался */
a.rehab__tab {
    outline: 0 !important;
    box-shadow: none !important;
}