/* Универсальные стили для обложек */

/* Контейнер обложки с соотношением 16:9 */
.gc-cover-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* Обертка с соотношением 16:9 */
.gc-cover-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 соотношение */
    overflow: hidden;
    background-color: var(--surface-control); /* Светлый фон вместо черного */
}

/* Заблюренный фон */
.gc-cover-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    opacity: 0.9;
    transform: scale(1.1); /* Чтобы скрыть размытые края */
}

/* Затемняющий слой */
.gc-cover-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: color-mix(in srgb, var(--fill-emphasis) 30%, transparent);
}

/* Контейнер для основного изображения */
.gc-cover-image-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Основное изображение */
.gc-cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Сохраняем пропорции */
    z-index: 2;
}

/* Модификаторы для разных контекстов */

/* Для карточек брифингов */
.gc-cover-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Для страницы брифинга */
.gc-cover-stage {
    border-radius: 12px;
}

/* Для модальных окон */
.gc-cover-modal {
    border-radius: 0;
}

/* Для загрузки обложки (с контролами) */
.gc-cover-upload .gc-cover-wrapper {
    cursor: pointer;
}

/* Изображение в upload контейнере сохраняет пропорции */
.gc-cover-upload .gc-cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Сохраняем пропорции, blur-фон заполнит пустоты */
}

/* Дропдаун «...» поверх изображения — абсолютно позиционирован в правом верхнем углу.
 * `.gc-dropdown` задаёт position:relative — специфика должна выигрывать. */
.gc-dropdown.gc-cover-actions,
.gc-cover-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 12;
    display: block;
}

/* Компактнее отступ угла (кнопка — gc-dropdown-toggle-secondary + gc-profile-menu-btn, как на /profile) */
.gc-cover-actions.gc-cover-actions--sm {
    top: var(--space-2);
    right: var(--space-2);
}

/*
 * Триггер «…» поверх фото: тёмная плашка + светлая иконка (chromatic),
 * как `.weapon-edit-photo-btn` / бейдж «Обложка» — читается на белой и тёмной фотке.
 * Не `--text-primary` и не светлое 10% стекло: на dark + светлом фото оба сливаются.
 * Blade: gc-dropdown-toggle-icon + secondary + gc-profile-menu-btn.
 * Inertia: GcDropdownMenu.Trigger variant=icon-secondary.
 * Специфика ≥ `.gc-dropdown > .gc-btn.gc-btn-secondary.gc-btn-icon-sm.gc-dropdown-toggle`
 * из dropdown.css — иначе вторичная кнопка сливается с фото.
 */
.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn,
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-dropdown-toggle,
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon-sm.gc-dropdown-toggle,
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon.gc-dropdown-toggle {
    border: 1px solid color-mix(in srgb, var(--text-on-solid) 18%, transparent);
    box-shadow: none;
    color: var(--text-on-scrim);
    background: color-mix(in srgb, var(--fill-emphasis) 55%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn i,
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-dropdown-toggle i {
    font-size: var(--font-size-14);
    color: inherit;
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:hover,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-dropdown-toggle:hover,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon-sm.gc-dropdown-toggle:hover,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon.gc-dropdown-toggle:hover {
    border-color: color-mix(in srgb, var(--text-on-solid) 28%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--fill-emphasis) 75%, transparent);
}
}


.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:focus-visible,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-dropdown-toggle:focus-visible,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon-sm.gc-dropdown-toggle:focus-visible,

.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon.gc-dropdown-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--text-on-solid) 28%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--fill-emphasis) 75%, transparent);
}

.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn[aria-expanded="true"],
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-dropdown-toggle[aria-expanded="true"],
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon-sm.gc-dropdown-toggle[aria-expanded="true"],
.gc-dropdown.gc-cover-actions > .gc-btn.gc-btn-secondary.gc-btn-icon.gc-dropdown-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--text-on-solid) 28%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--fill-emphasis) 75%, transparent);
}

/* Кнопка удаления (legacy) */
.gc-cover-remove-btn {
    position: absolute;
    top: var(--space-2-5);
    right: var(--space-2-5);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--fill-emphasis) 60%, transparent);
    border: none;
    border-radius: var(--radius-12);
    color: var(--text-on-solid);
    cursor: pointer;
    transition-property: opacity, background-color, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    opacity: 0.7;
    z-index: 10;
}

.gc-cover-remove-btn:active {
    transform: scale(0.96);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-cover-remove-btn:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--danger-color) 80%, transparent);
}
}

/* Плейсхолдер для загрузки */
.gc-cover-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-secondary);
    border: 1px dashed var(--border-subtle);
    z-index: 1;
    transition-property: background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    text-align: center;
    border-radius: var(--radius-16);
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

.gc-cover-placeholder:hover {
    background-color: var(--surface-secondary);
    border-color: var(--accent-link);
}
}

.gc-cover-placeholder i {
    font-size: 2.5rem;
    color: color-mix(in srgb, var(--text-on-solid) 70%, transparent);
    margin-bottom: 1rem;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .gc-cover-container {
        border-radius: 6px;
    }
    
    .gc-cover-stage {
        border-radius: 8px;
    }
}

/* ===================================
   Page cover backdrop (ambient hero)
   Единое решение: profile, event, challenge, stage, epic show.
   Документация: docs/ui-kit/PAGE_COVER_BACKDROP.md
   Blade: <x-page-cover-backdrop-host :cover-url="...">
   =================================== */

.gc-page-cover-backdrop-host {
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    /* Только mobile nav (<992): compact/expanded offset совпадает с navbar.css */
    .gc-page-cover-backdrop-host {
        --gc-page-cover-backdrop-pull-up: var(--gc-page-cover-backdrop-pull-up-tabs);
    }

    .gc-page-cover-backdrop-host--nav-compact {
        --gc-page-cover-backdrop-pull-up: var(--gc-page-cover-backdrop-pull-up-compact);
    }
}

@media (min-width: 992px) {
    body:has(.gc-app-rail) .gc-page-cover-backdrop-host {
        --gc-page-cover-backdrop-side-pull: var(--layout-app-rail-main-inset-x);
        /* Под app rail: ambient до левого края viewport (под прозрачным chrome) */
        --gc-page-cover-backdrop-side-pull-left: calc(
            var(--layout-app-rail-chrome-width) + var(--layout-app-rail-main-inset-x)
        );
        --gc-page-cover-backdrop-side-pull-right: var(--layout-app-rail-main-inset-x);
        --gc-page-cover-backdrop-pull-up: 0;
    }
}

.gc-page-cover-backdrop-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.gc-page-cover-backdrop {
    position: absolute;
    top: calc(-1 * var(--gc-page-cover-backdrop-pull-up));
    left: calc(-1 * (var(--gc-page-cover-backdrop-side-pull-left) + var(--gc-page-cover-backdrop-bleed-x)));
    right: calc(-1 * (var(--gc-page-cover-backdrop-side-pull-right) + var(--gc-page-cover-backdrop-bleed-x)));
    height: calc(var(--gc-page-cover-backdrop-height) + var(--gc-page-cover-backdrop-pull-up));
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

@media (max-width: 991.98px) {
    .gc-page-cover-backdrop-host {
        --gc-page-cover-backdrop-bleed-x: 0px;
        overflow: visible;
    }

    .gc-page-cover-backdrop-host > .page-container-flush {
        padding-top: 0;
    }

    .gc-page-cover-backdrop {
        top: calc(-1 * var(--gc-page-cover-backdrop-pull-up));
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    /* filter: blur() выходит за box — не clip на host/main (режет pull-up по Y) */
    .gc-page-cover-backdrop__blur {
        transform: scale(1.06);
    }

    /*
     * Горизонтальный scroll от blur-halo ломает tab-bar.
     * clip только на .gc-app-shell (не html/body/frame — иначе position:fixed шапки).
     * main/host — overflow visible для pull-up под шапку.
     */
    body:has(.gc-page-cover-backdrop-host) .gc-app-shell,
    body:has(.gc-page-cover-backdrop-host) .gc-app-body {
        overflow-x: clip;
        max-width: 100%;
    }

    body:has(.gc-page-cover-backdrop-host) .gc-app-body > .gc-app-main {
        overflow: visible;
    }
}

@media (min-width: 992px) {
    body:has(.gc-page-cover-backdrop-host) .gc-app-body:has(> .gc-app-rail) > .gc-app-main {
        background: transparent;
        overflow-x: visible;
    }

    /*
     * Rail в margin-left gc-app-body (вне border box) — clip на shell (full width),
     * иначе ambient не попадает под прозрачный app rail.
     */
    body:has(.gc-app-rail):has(.gc-page-cover-backdrop-host) .gc-app-shell {
        overflow-x: clip;
    }

    body:has(.gc-app-rail):has(.gc-page-cover-backdrop-host) .gc-app-body {
        overflow-x: visible;
    }
}

/* Desktop без app rail (guest и т.п.) */
@media (min-width: 992px) {
    body:has(.gc-page-cover-backdrop-host) .gc-app-body:not(:has(> .gc-app-rail)) > .gc-app-main {
        overflow-x: clip;
    }
}

/* YouTube-style: radial glow, без «прямоугольника» (только radial mask, без linear intersect) */
.gc-page-cover-backdrop__blur {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    filter: blur(var(--gc-page-cover-backdrop-blur-amount))
        saturate(var(--gc-page-cover-backdrop-blur-saturate))
        brightness(var(--gc-page-cover-backdrop-blur-brightness));
    transform: scale(var(--gc-page-cover-backdrop-blur-scale));
    transform-origin: center top;
    opacity: var(--gc-page-cover-backdrop-blur-opacity);
    mask-image: radial-gradient(
        ellipse var(--gc-page-cover-backdrop-fade-size) at var(--gc-page-cover-backdrop-fade-at),
        rgb(0 0 0 / 1) 0%,
        rgb(0 0 0 / 0.7) 30%,
        rgb(0 0 0 / 0.28) 52%,
        rgb(0 0 0 / 0.06) 70%,
        rgb(0 0 0 / 0) 85%
    );
    -webkit-mask-image: radial-gradient(
        ellipse var(--gc-page-cover-backdrop-fade-size) at var(--gc-page-cover-backdrop-fade-at),
        rgb(0 0 0 / 1) 0%,
        rgb(0 0 0 / 0.7) 30%,
        rgb(0 0 0 / 0.28) 52%,
        rgb(0 0 0 / 0.06) 70%,
        rgb(0 0 0 / 0) 85%
    );
    mask-composite: add;
    -webkit-mask-composite: source-over;
}

.gc-page-cover-backdrop__fade {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse var(--gc-page-cover-backdrop-fade-ellipse-x) var(--gc-page-cover-backdrop-fade-ellipse-y) at 50% 0%,
        rgb(from var(--surface-canvas) r g b / 0) 0%,
        color-mix(in srgb, var(--surface-canvas) 12%, transparent) 32%,
        color-mix(in srgb, var(--surface-canvas) 45%, transparent) 52%,
        color-mix(in srgb, var(--surface-canvas) 78%, transparent) 72%,
        var(--surface-canvas) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .gc-page-cover-backdrop__blur {
        filter: blur(var(--gc-page-cover-backdrop-blur-amount-reduced))
            saturate(1.1);
        transform: none;
        opacity: var(--gc-page-cover-backdrop-blur-opacity-reduced);
    }
}

/* ===================================
   Hero cover media (foreground)
   Event / challenge show — ambient см. page cover backdrop выше.
   =================================== */

.gc-hero-cover-media,
:is(.event-show-hero-cover-media, .challenge-hero-cover-media, .weapon-show-hero-cover-media) {
    position: relative;
    min-width: 0;
    width: 100%;
}

.event-show-hero-cover-media .gc-briefing-img-container {
    border-radius: var(--radius-16);
    width: 100%;
}

:is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover
    )
    .event-show-hero-cover-media
    .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
    --_caption-bar-bg: var(--fill-emphasis);
    --_caption-bar-bg-hover: var(--gray-800);
    --_caption-bar-fg: var(--text-on-solid);
}

/* Weapon show: градиент стыка → fill-emphasis, не surface-secondary */
:is(.weapon-show-hero-card--has-cover, .weapon-show-about-rail-hero--has-cover)
    .weapon-show-hero-cover-media
    .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
    --_caption-bar-bg: var(--fill-emphasis);
    --_caption-bar-bg-hover: var(--gray-800);
    --_caption-bar-fg: var(--text-on-solid);
}

[data-theme="light"] :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    :is(.event-show-hero-cover-media, .weapon-show-hero-cover-media)
    .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom,
[data-theme="light"] :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    .event-show-hero-card__body--cover-caption.event-show-hero-card__body--cover-caption {
    --_caption-bar-bg: var(--fill-emphasis);
    --_caption-bar-bg-hover: var(--gray-800);
    --_caption-bar-fg: var(--text-on-solid);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) :is(
            .event-show-hero-card--has-cover,
            .event-show-about-rail-hero--has-cover,
            .weapon-show-hero-card--has-cover,
            .weapon-show-about-rail-hero--has-cover
        )
        :is(.event-show-hero-cover-media, .weapon-show-hero-cover-media)
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom,
    :root:not([data-theme]) :is(
            .event-show-hero-card--has-cover,
            .event-show-about-rail-hero--has-cover,
            .weapon-show-hero-card--has-cover,
            .weapon-show-about-rail-hero--has-cover
        )
        .event-show-hero-card__body--cover-caption.event-show-hero-card__body--cover-caption {
        --_caption-bar-bg: var(--fill-emphasis);
        --_caption-bar-bg-hover: var(--gray-800);
        --_caption-bar-fg: var(--text-on-solid);
    }
}

@media (max-width: 1279px) {
    /* Rail-fallback (<1280): тёмный scrim + стык с caption bar (перебивает surface-secondary выше) */
    :is(.event-show-about-rail-hero--has-cover, .weapon-show-about-rail-hero--has-cover)
        .event-show-hero-cover-media
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
        --_caption-bar-bg: var(--fill-emphasis);
        --_caption-bar-bg-hover: var(--gray-800);
        --_caption-bar-fg: var(--text-on-solid);
    }
}

@media (min-width: 1280px) {
    :is(.event-show-hero-card--has-cover, .weapon-show-hero-card--has-cover)
        .event-show-hero-cover-media
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
        --_caption-bar-bg: var(--fill-emphasis);
        --_caption-bar-bg-hover: var(--gray-800);
        --_caption-bar-fg: var(--text-on-solid);
    }
}

/*
 * Caption under 16:9 is fill-emphasis (scrim on a real photo). While the cover is
 * still a bone — Visit skeleton *or* live GcImg pending — that slab is a black
 * stripe between gray 16:9 and white about. Same chrome as I7.87 / I7.106.
 * Scoped to cover media so weapon thumbs do not keep the bar light.
 */
:is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    ):has(
        .event-show-hero-cover-media
            :is(
                .gc-skeleton-show-hero-cover,
                .gc-skeleton-weapon-show-cover,
                .gc-img-bone,
                .gc-img--pending
            )
    ) {
    --_caption-bar-bg: var(--surface-secondary);
    --_caption-bar-bg-hover: var(--surface-secondary);
    --_caption-bar-fg: var(--text-primary);
}

:is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    ):has(
        .event-show-hero-cover-media
            :is(
                .gc-skeleton-show-hero-cover,
                .gc-skeleton-weapon-show-cover,
                .gc-img-bone,
                .gc-img--pending
            )
    )
    .event-show-hero-cover-media
    .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
    --_caption-bar-bg: var(--surface-secondary);
    --_caption-bar-bg-hover: var(--surface-secondary);
    --_caption-bar-fg: var(--text-primary);
    background-color: var(--surface-secondary);
}

:is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    ):has(
        .event-show-hero-cover-media
            :is(
                .gc-skeleton-show-hero-cover,
                .gc-skeleton-weapon-show-cover,
                .gc-img-bone,
                .gc-img--pending
            )
    )
    .event-show-hero-card__body--cover-caption.event-show-hero-card__body--cover-caption {
    --_caption-bar-bg: var(--surface-secondary);
    --_caption-bar-bg-hover: var(--surface-secondary);
    --_caption-bar-fg: var(--text-primary);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

/*
 * Skeleton hero (event / challenge / epic): no photo → chromatic fill-emphasis
 * is a black slab in light. Live keeps the dark caption under a real cover.
 * Must sit in this file (after the fill-emphasis rules). Inertia loads
 * skeleton.css before covers.css, so the I3.7 override in skeleton.css loses.
 * :is(#gc-inertia-boot, …) takes ID specificity so Visit + boot + classic win.
 */
:is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    ),
[data-theme="light"]
    :is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    ) {
    --_caption-bar-bg: var(--surface-secondary);
    --_caption-bar-bg-hover: var(--surface-secondary);
    --_caption-bar-fg: var(--text-primary);
}

:is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    :is(
        .event-show-hero-card__body--cover-caption,
        .gc-media-caption-bar,
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom
    ),
[data-theme="light"]
    :is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    :is(
        .event-show-hero-card__body--cover-caption,
        .gc-media-caption-bar,
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom
    ) {
    --_caption-bar-bg: var(--surface-secondary);
    --_caption-bar-bg-hover: var(--surface-secondary);
    --_caption-bar-fg: var(--text-primary);
}

:is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    .event-show-hero-card__body--cover-caption.gc-media-caption-bar,
[data-theme="light"]
    :is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
    :is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .challenge-show-hero-card--has-cover,
        .challenge-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    .event-show-hero-card__body--cover-caption.gc-media-caption-bar {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme])
        :is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
        :is(
            .event-show-hero-card--has-cover,
            .event-show-about-rail-hero--has-cover,
            .challenge-show-hero-card--has-cover,
            .challenge-show-about-rail-hero--has-cover
        )
        :is(
            .event-show-hero-card__body--cover-caption,
            .gc-media-caption-bar,
            .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom
        ) {
        --_caption-bar-bg: var(--surface-secondary);
        --_caption-bar-bg-hover: var(--surface-secondary);
        --_caption-bar-fg: var(--text-primary);
    }

    :root:not([data-theme])
        :is(.gc-inertia-visit-skeleton, #gc-inertia-boot, .gc-page-loader > [id$="-s"])
        :is(
            .event-show-hero-card--has-cover,
            .event-show-about-rail-hero--has-cover,
            .challenge-show-hero-card--has-cover,
            .challenge-show-about-rail-hero--has-cover
        )
        .event-show-hero-card__body--cover-caption.gc-media-caption-bar {
        background: var(--surface-secondary);
        color: var(--text-primary);
    }
}

/* Плавнее стык с caption bar (cards.css: 0% → 50%) */
:is(
        .event-show-hero-card--has-cover,
        .event-show-about-rail-hero--has-cover,
        .weapon-show-hero-card--has-cover,
        .weapon-show-about-rail-hero--has-cover
    )
    .event-show-hero-cover-media
    .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom
    .gc-briefing-img-overlay {
    transition: background var(--transition-base) var(--ease-out);
    background: linear-gradient(
        to top,
        var(--_caption-bar-bg) 0%,
        color-mix(in srgb, var(--_caption-bar-bg) 55%, transparent) 40%,
        color-mix(in srgb, var(--_caption-bar-bg) 18%, transparent) 68%,
        transparent 100%
    );
    background: linear-gradient(
        to top,
        var(--_caption-bar-bg) 0%,
        color-mix(in srgb, var(--_caption-bar-bg) 55%, transparent) 40%,
        color-mix(in srgb, var(--_caption-bar-bg) 18%, transparent) 68%,
        rgb(from var(--_caption-bar-bg) r g b / 0) 100%
    );
}

/* Hover: тот же градиент, усиленный через --_caption-bar-bg-hover (кликабельная обложка) */
.gc-hero-cover-hit .gc-briefing-img {
    transition:
        transform var(--transition-base) var(--ease-out),
        filter var(--transition-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    @media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    .gc-hero-cover-hit:is(:hover, :focus-visible)
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
        --_caption-bar-bg: var(--_caption-bar-bg-hover);
    }
    }
    .gc-hero-cover-hit:is( :focus-visible)
        .gc-briefing-img-container.gc-briefing-img-container--gradient-bottom {
        --_caption-bar-bg: var(--_caption-bar-bg-hover);
    }

    @media (min-width: 1280px) and (hover: hover) and (pointer: fine) {

    .gc-hero-cover-hit:is(:hover, :focus-visible) .gc-briefing-img {
        filter: brightness(1.06);
        transform: scale(1.02);
    }
    }

    .gc-hero-cover-hit:is( :focus-visible) .gc-briefing-img {
        filter: brightness(1.06);
        transform: scale(1.02);
    }

    .gc-hero-cover-hit:active .gc-briefing-img {
        filter: none;
        transform: none;
    }
}

.gc-hero-cover-hit {
    cursor: zoom-in;
    overflow: hidden;
    /* better-ui press: named props + scale(0.96) */
    transition-property: transform;
    transition-duration: var(--transition-fast);
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.gc-hero-cover-hit:active {
    transform: scale(0.96);
}

.gc-hero-cover-hit:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

/* Gallery thumbs / preview tiles — zoom + scrim (без градиента caption bar) */
.gc-photo-preview-hit {
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
}

.gc-photo-preview-hit img {
    transition:
        transform var(--transition-slow) var(--ease-in-out),
        filter var(--transition-slow) var(--ease-in-out);
}

.gc-photo-preview-hit::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--fill-emphasis) 24%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow) var(--ease-in-out);
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .gc-photo-preview-hit:is(:hover, :focus-visible) img {
        filter: brightness(1.06);
        transform: scale(1.03);
    }

    .gc-photo-preview-hit:is(:hover, :focus-visible)::after {
        opacity: 1;
    }
}

.gc-photo-preview-hit:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

/* ===================================
   GcImg — слот ждёт decode(), потом blur/fade (не progressive JPEG)
   =================================== */

.gc-img-slot {
    position: relative;
    /* Bone z-index остаётся внутри слота — не перекрывает badge / paired icon / соседний аватар */
    isolation: isolate;
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-control);
}

.gc-img-slot.gc-list-media-square,
.gc-img-slot.gc-list-avatar-square {
    display: block;
}

.gc-img-slot__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-avatar-stack .gc-img-slot img {
    margin-left: 0;
    border: 0;
}

.gc-img-bone {
    position: absolute;
    inset: 0;
    /* Внутри .gc-img-slot (isolation) — над pending img. На обложке карточки — см. cards.css / events-list (под chrome). */
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    border-radius: inherit;
}

.gc-img--pending {
    opacity: 0;
}

.gc-img--shown {
    opacity: 1;
}

.gc-img--reveal {
    animation: gc-img-unblur var(--transition-slower) var(--ease-out) both;
}

.gc-img--fade {
    animation: gc-img-fade var(--transition-slow) var(--ease-out) both;
}

@keyframes gc-img-unblur {
    from {
        opacity: 0.4;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes gc-img-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gc-briefing-img-container:has(.gc-img--pending) > .gc-briefing-img-blur,
.gc-briefing-img-container:has(.gc-img--pending) > .gc-briefing-img-overlay,
.weapon-card-image:has(.gc-img--pending) > .weapon-card-image-blur,
.gc-event-index-card-v2-1__media:has(.gc-img--pending) > .gc-event-index-card-v2-1__media-overlay {
    opacity: 0;
}

.gc-event-index-card-v2__media-gallery-slide.is-active.gc-img--pending {
    opacity: 0;
}

.gc-briefing-img:is(.gc-img--pending, .gc-img--reveal, .gc-img--fade) {
    transition: none;
}

.weapon-show-hero-thumb:has(> .gc-img-bone) {
    position: relative;
    background: var(--surface-control);
}

.gc-photo-preview-hit img:is(.gc-img--pending, .gc-img--reveal, .gc-img--fade),
.gc-img-fill:is(.gc-img--pending, .gc-img--reveal, .gc-img--fade) {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .gc-img--reveal,
    .gc-img--fade {
        animation: none;
        opacity: 1;
        filter: none;
    }
}