/* ================================================================
   HERO — КЕЙСЫ
   ================================================================ */

/* Переопределяем z-index для header на странице кейсов */
.header {
    z-index: 100; /* выше всех блоков на странице */
}

.cases-hero {
    /* управление картинкой */
    --cases-hero-img-width: 1590px;   /* ширина изображения */
    --cases-hero-img-top: -400px;      /* сдвиг по вертикали */
    --cases-hero-img-left: 50%;       /* сдвиг по горизонтали */

    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: #00060E;
    overflow: visible;                /* ВАЖНО: даём картинке заходить ниже */
    display: flex;
    align-items: center;
    z-index: 5; /* ниже чем у cases-wheel */
}
@media (min-width: 2500px) {
    .cases-hero {
        --cases-hero-img-top: 50px;
    }
}  
/* слой с картинкой */
.cases-hero__bg {
    position: absolute;
    top: var(--cases-hero-img-top);
    left: var(--cases-hero-img-left);
    transform: translateX(-50%);
    width: var(--cases-hero-img-width);
    max-width: none;
    z-index: 0;
    pointer-events: none; /* картинка не мешает кликам */
}

.cases-hero__bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* контент */
.cases-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin-left: clamp(20px, 4vw, 60px);
    margin-bottom: 40px;
}

.cases-hero__title {
    margin: 0;
    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
}

/* следующий блок — тот же фон, чтобы картинка плавно заходила */
.cases-list {
    position: relative;
    width: 100%;
    background: #00060E;
    padding: clamp(60px, 8vw, 120px) 0;
    z-index: 0; /* картинка из hero будет поверх, т.к. у неё z-index:0, а у hero выше */
}

/* адаптивы — подстраиваем размер/позицию картинки */
@media (max-width: 1439px) {
    .cases-hero {
        --cases-hero-img-width: 1700px;
        --cases-hero-img-top: -40px;
    }
}

@media (max-width: 1023px) {
    .cases-hero {
        --cases-hero-img-width: 1400px;
        --cases-hero-img-top: -20px;
    }
}

@media (max-width: 767px) {
    .cases-hero {
        height: 100vh;
        min-height: 500px;
        --cases-hero-img-width: 1200px;
        --cases-hero-img-top: -40px;
    }

    .cases-hero__content {
        margin-left: 0;
        margin-bottom: 20px;
        padding-inline: clamp(20px, 4vw, 40px);
        text-align: center;
    }
}

/* ================================================================
   CABINET SECTION — Информация в личном кабинете
   ================================================================ */

.cases-cabinet {
    position: relative;
    width: 100%;
    padding: clamp(60px, 28vw, 360px) 0;
    background-color: #00060e;
    overflow: hidden;
}

/* Текстовый контейнер — как обычно, ограниченный max-width */
.cases-cabinet__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

.cases-cabinet__content {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
}

.cases-cabinet__title {
    margin: 0;
    text-transform: uppercase;
}

.cases-cabinet__text {
    color: #cccccc;
}

/* Кнопка: те же стили, что у предыдущей, но немного компактнее */
.btn--cabinet {
    margin-top: clamp(20px, 3vw, 40px);
    font-size: 18px;
    padding-inline: 40px;
    padding-block: 16px;
}

/* -----------------------------------------------------------------
   Фоновая часть с картинками на всю ширину экрана
   ----------------------------------------------------------------- */

.cases-cabinet__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

/* общий стиль обёртки картинок */
.cases-cabinet__image {
    position: absolute;
}

/* кораллы + ноутбук — справа, на всю высоту секции */
.cases-cabinet__image--corals {
    top: 0;
    right: 0;
    bottom: 0;
}

.cases-cabinet__image--corals img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

/* скат — слева, поверх */
.cases-cabinet__image--ray {
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    transform: translateX(-5%);
}

.cases-cabinet__image--ray img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

/* чтобы текст был поверх картинок */
.cases-cabinet__inner {
    position: relative;
    z-index: 2;
}

/* ====================== ADAPTIVE ====================== */

@media (max-width: 1023px) {
    .cases-cabinet {
        padding: clamp(40px, 6vw, 80px) 0;
    }

    .cases-cabinet__content {
        max-width: 420px;
    }

    .cases-cabinet__image--ray {
        transform: translateX(-10%);
    }
}

@media (max-width: 767px) {
    .cases-cabinet__content {
        max-width: 100%;
    }

    .cases-cabinet__title {
        font-size: clamp(26px, 6vw, 32px);
    }

    .btn--cabinet {
        font-size: 16px;
        padding-inline: 32px;
        padding-block: 14px;
    }

    /* на мобиле можно слегка ослабить вылеты */
    .cases-cabinet__image--corals img,
    .cases-cabinet__image--ray img {
        width: 130%;
        height: 100%;
        object-fit: cover;
    }

    .cases-cabinet__image--ray {
        transform: translateX(-15%);
    }
}

/* =========================================================================
   BUTTON — базовый стиль, используется в нескольких секциях
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: "Archaica", sans-serif;
    font-weight: 400;
    /*border-radius: 10px;*/
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
}

/* Основной вариант кнопки — как в первом блоке */
.btn--primary {
    background: #00253A;
    border: 1px solid #48AFC4;
    color: #FFFFFF;

    box-shadow:
        0 0 18px rgba(72, 175, 196, 0.45),
        inset 0 0 16px rgba(72, 175, 196, 0.35);
}

/* Ховер */
.btn--primary:hover {
    box-shadow:
        0 0 28px rgba(72, 175, 196, 0.6),
        inset 0 0 22px rgba(72, 175, 196, 0.5);
    transform: translateY(-2px);
}

/* Актив */
.btn--primary:active {
    transform: translateY(0);
    box-shadow:
        0 0 14px rgba(72, 175, 196, 0.35),
        inset 0 0 12px rgba(72, 175, 196, 0.25);
}

/* =========================================================================
   Вариант кнопки для блока "Личный кабинет"
   (тот же стиль, просто уменьшенные отступы и размер шрифта)
   ========================================================================= */

.btn--cabinet {
    font-size: 18px;
    padding: 16px 42px;
}

@media (max-width: 767px) {
    .btn--cabinet {
        font-size: 16px;
        padding: 14px 32px;
    }
}


/* ================================================================
   CASES WHEEL — Карточки-кейсы на колесе
   ================================================================ */

.cases-wheel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 4vw, 60px) 0;
    /* Базовый цвет такой же, как у соседних секций, чтобы не было шва 
    background-color: #00060e;*/
    /* Внутренняя подсветка: края прозрачные, градиент не обрывается на границах секции 
    background-image: radial-gradient(
        circle at top,
        rgba(2, 20, 36, 0.9) 0%,
        rgba(2, 20, 36, 0.0) 45%
    );*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden; /* скрываем карточки которые выходят за границы */
    z-index: 10;
}

/* На всякий случай убираем внешние отступы у секций страницы кейсов,
   чтобы фоны соприкасались вплотную */
.cases-hero,
.cases-list,
.cases-wheel,
.cases-cabinet {
    margin: 0;
}

.cases-wheel__inner {
    position: relative;
    z-index: 1;
}

.cases-wheel__title {
    text-align: center;
    margin: 0 0 clamp(16px, 3vw, 24px);
    text-transform: uppercase;
}

.cases-wheel__subtitle {
    max-width: 620px;
    margin: 0 auto clamp(40px, 6vw, 60px);
    text-align: center;
    color: #cccccc;
}

/* колесо */
.cases-wheel__wrapper {
    position: relative;
    width: min(100%, 960px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: visible;
    z-index: 20;
    /* ВАЖНО: делаем блок интерактивным для захвата wheel событий */
    pointer-events: auto;
    /* Отключаем выделение текста и перетаскивание изображений */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cases-wheel__wrapper * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.cases-wheel__wrapper img {
    pointer-events: none;
    -webkit-user-drag: none !important;
    -moz-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* один элемент колеса */
.cases-wheel__item {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-origin: center -150%;
    pointer-events: none;
    cursor: pointer;
}

/* активный элемент - по центру */
.cases-wheel__item--active {
    pointer-events: none; /* центральная карточка не кликабельна */
}
/* Разрешаем клик по содержимому активной карточки (для открытия попапа) */
.cases-wheel__item--active {
    pointer-events: auto; /* было none */
}

/* Но чтобы клики ловились именно по карточке/ссылке */
.cases-wheel__item--active .cases-wheel__card {
    pointer-events: auto;
    cursor: pointer;
}

/* Подпись по-прежнему не кликается */
.cases-wheel__item--active .cases-wheel__label {
    pointer-events: none;
}

/* неактивные элементы - боковые карточки кликабельны */
.cases-wheel__item:not(.cases-wheel__item--active) {
    pointer-events: auto;
}

/* ===== CASES WHEEL: show only 3 cards (safe) ===== */
.cases-wheel__wrapper .cases-wheel__item.cases-wheel__item--hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.cases-wheel__wrapper .cases-wheel__item.cases-wheel__item--visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* доп. защита на уровне карточки */
.cases-wheel__wrapper .cases-wheel__item.cases-wheel__item--hidden .cases-wheel__card {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.cases-wheel__wrapper .cases-wheel__item.cases-wheel__item--visible .cases-wheel__card {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* сама карточка */
.cases-wheel__img {
    width: 33%;
    max-width: 320px;
    border-radius: 16px;
    display: block;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(5, 250, 255, 0.25);
    transition: box-shadow 250ms ease-in-out;
}

/* подпись под активной карточкой */
.cases-wheel__label {
    position: absolute;
    bottom: clamp(24px, 4vw, 40px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 11px 18px 8px;
    border-radius: 999px;
    background: none;
    border: none;
    font-size: clamp(0.75rem, 4.2rem, 1.5rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: normal;
    pointer-events: none;
    font-family: 'Archaica', Georgia, serif;
    max-width: 350px;
    text-align: center;
}

/* адаптив */
@media (max-width: 1023px) {
    .cases-wheel {
        min-height: 100vh;
        padding: clamp(40px, 4vw, 60px) 0;
    }

    .cases-wheel__wrapper {
        width: min(100%, 760px);
    }

    .cases-wheel__img {
        width: 40%;
    }
}

@media (max-width: 767px) {
    .cases-wheel__subtitle {
        margin-bottom: clamp(24px, 4vw, 40px);
        padding-inline: clamp(20px, 4vw, 40px);
    }

    .cases-wheel__wrapper {
        width: 100%;
        max-width: 480px;
    }

    .cases-wheel__img {
        width: 70%;
    }

    .cases-wheel__label {
        font-size: 0.7rem;
        padding-inline: 14px;
    }
}
/* Контейнер карточки: всё внутри позиционируется относительно него */
.cases-wheel__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* сама картинка */
.cases-wheel__img {
    width: 53%;           /* было 33% — теперь карточки крупнее */
    max-width: 860px;     /* на 1920px картинка не превысит 860 */
    aspect-ratio: 3 / 5;  /* ПРАВКА 2: соотношение сторон 3:5 */
    object-fit: cover;
    border-radius: 16px;
    display: block;
}


/* ЕДИНЫЙ отступ под картинкой — всегда одинаковый */
.cases-wheel__label {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;              /* ВАЖНО: убираем translateX(-50%) */

    margin: 20px 0 0;             /* одинаковый отступ под картинкой */
    padding: 6px 18px 8px;
    border-radius: 999px;

    background: none;
    border: none;

    font-family: 'Archaica', Georgia, serif;
    font-size: clamp(0.75rem, 4.2rem, 1.5rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: normal;
    max-width: 350px;

    text-align: center;           /* центрируем текст */
    pointer-events: none;
}

/* ================================================================
   CASE MODAL — layout правки под требования
   ================================================================ */

.case-modal {
    position: fixed;
    inset: 0;
    z-index: 250; /* Выше фиксированного меню (z-index: 150) и бокового меню (z-index: 200) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vh 12px; /* 90% высоты окна остаётся */
}

.case-modal.is-open {
    display: flex;
}

.case-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.case-modal__dialog {
    position: relative;
    width: min(100%, 1440px);
    height: 90vh;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(circle at top, #021424 0%, #00060e 55%, #000000 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.65);
    border: 1px solid rgba(72, 175, 196, 0.25);
    z-index: 1;
}

/* кнопка закрытия: без фона и обводки */
.case-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.case-modal__close:hover {
    transform: translateY(-1px);
    opacity: 0.85;
}

/* скролл внутри окна */
.case-modal__content {
    height: 100%;
    overflow: auto;
    padding: clamp(20px, 3vw, 40px);
    color: #ffffff;
}

/* ограничение ширины контента: текст/заголовок */
.case-modal__header,
.case-modal__media,
.case-modal__body {
    width: min(1200px, 90%);
    margin-left: 0;     /* влево */
    margin-right: auto; /* не по центру */
}

/* Заголовок по ширине как текст */
.case-modal__title {
    text-transform: uppercase;
    margin: 0 auto 18px;
    width: min(1200px, 90%);
    /* уменьшили примерно на 30% */
    font-size: clamp(1.05rem, 2.8vw, 1.4rem) !important;

}

/* Картинка: не больше 360px, слева, как текст */
.case-modal__media {
    margin: 0 auto 18px;
}

.case-modal__img {
    display: block;
    width: min(360px, 100%);
    aspect-ratio: 5 / 3;  /* ПРАВКА 2: соотношение сторон 3:5 */
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(0,0,0,0.55), 0 0 40px rgba(5, 250, 255, 0.18);
}


/* Красивые отступы текста */
.case-modal__body {
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
    font-size: 16px;
        margin: 0 auto;
}

.case-modal__body p {
    margin: 0 0 16px;
}

.case-modal__body p:last-child {
    margin-bottom: 0;
}

.case-modal__body ul {
    margin: 0 0 16px 18px;
    padding: 0;
}

.case-modal__body li {
    margin: 0 0 10px;
}

/* Блокируем скролл страницы под модалкой */
body.is-case-modal-open {
    overflow: hidden;
}

/* Мобилка */
@media (max-width: 767px) {
    /* Отступ сверху для модального окна, чтобы не перекрывать фиксированное меню */
    .case-modal {
        align-items: flex-start;
        padding-top: 70px; /* Высота фиксированного меню на мобильных */
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 5vh;
    }

    .case-modal__dialog {
        border-radius: 16px;
        margin-top: 0;
    }

    .case-modal__close {
        top: 14px;
        right: 14px;
    }

    .case-modal__header,
    .case-modal__media,
    .case-modal__body {
        width: 90%;
    }
}

@media (max-width: 767px) {
    /* делаем wrapper контейнером под свайп */
    .cases-wheel__wrapper.is-mobile {
        width: 100%;
        max-width: 480px;
        aspect-ratio: auto;
        overflow: hidden;
        /* На мобиле используем wrapper как "чистый" контейнер без паддингов,
           чтобы центрирование считалось строго от его ширины. */
        padding: 0;
        touch-action: pan-y; /* вертикальный скролл страницы не ломаем */
    }

    /* прячем старую раскладку колеса */
    .cases-wheel__wrapper.is-mobile .cases-wheel__item {
        display: none !important;
    }

    .cases-mobile-track {
        display: flex;
        gap: 16px;
        will-change: transform;
    }

    .cases-mobile-slide {
        flex: 0 0 calc(100% - 20vw);
        transition: transform 220ms ease, opacity 220ms ease;
        /* На мобилке оставляем все карточки одного масштаба,
           без дополнительного уменьшения неактивных, чтобы
           размеры визуально не "прыгали". */
        transform: scale(1);
        opacity: 0.9;
    }

    .cases-mobile-slide.cases-mobile-slide--active {
        transform: scale(1);
        opacity: 1;
    }

    /* картинка на всю ширину слайда */
    .cases-mobile-slide .cases-wheel__img {
        width: 100%;
        max-width: none;
    }

    /* подпись как обычный блок под картинкой */
    .cases-mobile-slide .cases-wheel__label {
        position: static;
        transform: none;
        margin: 12px 0 0;
        text-align: center;
    }
}