/* ============================================================================
   Просмотр макетов кейса крупно.

   Оформление подстроено под страницу кейса: цвета берутся из её
   переменных (--primary, --secondary, --bg2, --border), своих значений
   здесь почти нет.
   ============================================================================ */

.gallery-item.is-zoomable,
.bitem.is-zoomable { cursor: pointer; position: relative; }

/* Подсказка «можно открыть»: появляется на наведении, на телефоне
   висит постоянно, потому что наведения там нет. */
.gi-zoom {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 10, 16, .55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
    pointer-events: none;
}

.gi-zoom svg { width: 18px; height: 18px; }

.is-zoomable:hover .gi-zoom,
.is-zoomable:focus-visible .gi-zoom { opacity: 1; transform: translateY(0); }

.is-zoomable:focus-visible {
    outline: 2px solid var(--primary, #b57bff);
    outline-offset: 3px;
}

/* В кейсе с баннерами плитки мельче — значок тоже */
.bitem.is-zoomable .gi-zoom { width: 30px; height: 30px; top: 10px; right: 10px; border-radius: 9px; }
.bitem.is-zoomable .gi-zoom svg { width: 15px; height: 15px; }

@media (hover: none) {
    .gi-zoom { opacity: 1; transform: none; }
}


/* ---------- Окно просмотра ---------- */

body.cg-locked { overflow: hidden; }

.cg-lb {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity .22s ease;
}

.cg-lb.is-on { opacity: 1; }
.cg-lb[hidden] { display: none; }

.cg-lb-back {
    position: absolute; inset: 0;
    background: rgba(4, 4, 10, .93);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.cg-lb-fig {
    position: relative; z-index: 1;
    margin: 0;
    max-width: min(1240px, 100%);
    max-height: 100%;
    display: flex; flex-direction: column; gap: 14px;
    align-items: center;
}

.cg-lb-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    width: auto; height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
    background: var(--bg2, #12121a);
    opacity: 0; transform: scale(.985);
    transition: opacity .28s ease, transform .28s ease;
}

.cg-lb-img.is-in { opacity: 1; transform: none; }

.cg-lb-cap {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: 6px 14px;
    max-width: 80ch;
    text-align: center;
}

.cg-lb-n {
    font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--primary, #b57bff);
    white-space: nowrap;
}

.cg-lb-t { font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }


/* ---------- Кнопки ---------- */

.cg-lb-btn {
    position: absolute; z-index: 2;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(18, 18, 26, .8);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.cg-lb-btn svg { width: 22px; height: 22px; }

.cg-lb-btn:hover {
    background: var(--primary, #b57bff);
    border-color: transparent;
}

.cg-lb-btn:focus-visible { outline: 2px solid var(--primary, #b57bff); outline-offset: 3px; }

.cg-lb-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.cg-lb-close:hover { transform: rotate(90deg); }

.cg-lb-prev { left: clamp(10px, 2.4vw, 28px); top: 50%; margin-top: -24px; }
.cg-lb-next { right: clamp(10px, 2.4vw, 28px); top: 50%; margin-top: -24px; }

.cg-lb-btn[hidden] { display: none; }


/* ---------- Тесные экраны ---------- */

@media (max-width: 720px) {
    .cg-lb { padding: 12px; }
    .cg-lb-img { max-height: calc(100vh - 190px); }
    .cg-lb-btn { width: 42px; height: 42px; }
    .cg-lb-btn svg { width: 19px; height: 19px; }

    /* Внизу, чтобы не перекрывать картинку и попадать под большой палец */
    .cg-lb-prev { top: auto; bottom: 16px; left: 50%; margin: 0 0 0 -52px; }
    .cg-lb-next { top: auto; bottom: 16px; right: 50%; margin: 0 -52px 0 0; }
    .cg-lb-cap { padding-bottom: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .cg-lb, .cg-lb-img, .cg-lb-btn, .gi-zoom { transition: none; }
    .cg-lb-img { opacity: 1; transform: none; }
    .cg-lb-close:hover { transform: none; }
}


/* ============================================================================
   Переход к соседнему кейсу.

   Порядок совпадает со списком на странице портфолио, кольцо замкнуто:
   с последнего кейса ссылка ведёт на первый.
   ============================================================================ */

.case-updown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.cu-link {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    padding: 28px 30px;
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: 18px;
    background: var(--bg2, #12121a);
    text-decoration: none;
    transition: border-color .4s var(--ease, ease), transform .4s var(--ease, ease),
                box-shadow .4s var(--ease, ease);
}

/* Светящаяся кромка — та же, что у карточек «другие кейсы» */
.cu-link::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary, #b57bff), var(--secondary, #00f0ff));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease, ease);
}

.cu-link:hover {
    border-color: rgba(181, 123, 255, .4);
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.cu-link:hover::before { transform: scaleX(1); }

.cu-link:focus-visible { outline: 2px solid var(--primary, #b57bff); outline-offset: 3px; }

/* Следующий кейс прижимаем вправо — направление читается без стрелок */
.cu-next { text-align: right; align-items: flex-end; }
.cu-next::before { transform-origin: right; }

.cu-dir {
    font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--primary, #b57bff);
}

.cu-name { font-size: 1.12rem; font-weight: 700; color: #fff; line-height: 1.3; }

.cu-sub { font-size: .88rem; line-height: 1.5; color: var(--text-muted, rgba(255, 255, 255, .6)); }

@media (max-width: 720px) {
    .case-updown { grid-template-columns: 1fr; gap: 14px; }
    .cu-next { text-align: left; align-items: flex-start; }
    .cu-next::before { transform-origin: left; }
    .cu-link { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-link { transition: none; }
    .cu-link:hover { transform: none; }
}


/* ============================================================================
   Переход к соседнему кейсу.

   Порядок совпадает со списком на странице портфолио, кольцо замкнуто:
   с последнего кейса ссылка ведёт на первый.
   ============================================================================ */

.case-updown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.cu-link {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    padding: 28px 30px;
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: 18px;
    background: var(--bg2, #12121a);
    text-decoration: none;
    transition: border-color .4s var(--ease, ease), transform .4s var(--ease, ease),
                box-shadow .4s var(--ease, ease);
}

/* Светящаяся кромка — та же, что у карточек «другие кейсы» */
.cu-link::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary, #b57bff), var(--secondary, #00f0ff));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease, ease);
}

.cu-link:hover {
    border-color: rgba(181, 123, 255, .4);
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.cu-link:hover::before { transform: scaleX(1); }

.cu-link:focus-visible { outline: 2px solid var(--primary, #b57bff); outline-offset: 3px; }

/* Следующий кейс прижимаем вправо — направление читается без стрелок */
.cu-next { text-align: right; align-items: flex-end; }
.cu-next::before { transform-origin: right; }

.cu-dir {
    font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--primary, #b57bff);
}

.cu-name { font-size: 1.12rem; font-weight: 700; color: #fff; line-height: 1.3; }

.cu-sub { font-size: .88rem; line-height: 1.5; color: var(--text-muted, rgba(255, 255, 255, .6)); }

@media (max-width: 720px) {
    .case-updown { grid-template-columns: 1fr; gap: 14px; }
    .cu-next { text-align: left; align-items: flex-start; }
    .cu-next::before { transform-origin: left; }
    .cu-link { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-link { transition: none; }
    .cu-link:hover { transform: none; }
}


/* ============================================================================
   Галерея кейса-макета.

   Страницы макета идут в столбик во всю ширину: в две колонки текст на
   слайдах мельчает до нечитаемого. Разбивка .wide в такой галерее уже
   ничего не значит — колонка одна.
   ============================================================================ */


/* Порядковый номер страницы макета — ориентир при листании */


@media (hover: none) {
}

@media (max-width: 800px) {
}


/* ============================================================================
   Оформление страницы кейса: нумерация разделов и финальный блок.

   Вылеты (изображения во всю ширину экрана) отсюда убраны: обложка
   обрезалась по высоте, а крупные кадры теряли скругления и рамку —
   картинки показывались не так, как задумано в макете. Изображения
   возвращены к исходному виду из стилей страницы кейса.
   ============================================================================ */

/* ---------- Нумерация разделов ---------- */

main { counter-reset: casesec; }

.case-section-title {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.case-section-title::before {
    counter-increment: casesec;
    content: counter(casesec, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--primary, #b57bff);
    opacity: .85;
}


/* ---------- Финальный блок ---------- */

.case-cta .cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.case-cta .cta-second {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 16px 28px;
    border: 1px solid var(--border, rgba(255, 255, 255, .16));
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: .86rem;
    letter-spacing: .04em;
    text-decoration: none;
    transition: border-color .3s var(--ease, ease), color .3s var(--ease, ease),
                transform .3s var(--ease, ease);
}

.case-cta .cta-second svg { width: 17px; height: 17px; }

.case-cta .cta-second:hover {
    border-color: rgba(181, 123, 255, .5);
    color: #fff;
    transform: translateY(-2px);
}

.case-cta .cta-second:focus-visible { outline: 2px solid var(--primary, #b57bff); outline-offset: 3px; }


/* ---------- Тесные экраны ---------- */

@media (max-width: 720px) {
    .case-section-title { gap: 11px; }
    .case-cta .cta-actions { flex-direction: column; }
    .case-cta .cta-actions > * { width: 100%; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .case-cta .cta-second { transition: none; }
    .case-cta .cta-second:hover { transform: none; }
}