/* ================================================================
   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 */
}

/* слой с картинкой */
.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: radial-gradient(circle at top, #021424 0%, #00060e 55%, #000000 100%);
    overflow: hidden; /* скрываем карточки которые выходят за границы */
    z-index: 10;
}

.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: 10 / 6;
    margin: 0 auto;
    overflow: visible;
    z-index: 20;
    /* ВАЖНО: делаем блок интерактивным для захвата wheel событий */
    pointer-events: auto;
}

/* один элемент колеса */
.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:not(.cases-wheel__item--active) {
    pointer-events: auto;
}

/* сама карточка */
.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 */
    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;
}