/* Обертка карусели */
.events-carousel-wrapper {
    position: relative;
}

/*
 * Слайды — intrinsic height: align-items:flex-start + без min-height:0 на cross-axis.
 * Иначе height:100% / aspect-ratio схлопываются (оружие и event-card-v2.1-grid).
 */
.events-carousel-wrapper [data-gc-carousel-track],
.events-carousel-wrapper .gc-events-index-community-track,
.events-carousel-wrapper .profile-weapons-carousel-track {
    align-items: flex-start;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.events-carousel-wrapper [data-gc-carousel-track] img,
.events-carousel-wrapper .gc-events-index-community-track img,
.events-carousel-wrapper .profile-weapons-carousel-track img {
    -webkit-user-drag: none;
    user-select: none;
}

.events-carousel-wrapper [data-gc-carousel-track] > .weapon-card-link,
.events-carousel-wrapper .profile-weapons-carousel-track > .weapon-card-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    align-self: flex-start;
    text-decoration: none;
    color: inherit;
}

.events-carousel-wrapper [data-gc-carousel-track] > .weapon-card-link > .weapon-card,
.events-carousel-wrapper .profile-weapons-carousel-track > .weapon-card-link > .weapon-card {
    height: auto;
}

.events-carousel-wrapper [data-gc-carousel-track] > .gc-event-index-card--v2-1-grid,
.events-carousel-wrapper .gc-events-index-community-track > .gc-event-index-card--v2-1-grid {
    height: auto;
    max-height: none;
    align-self: flex-start;
}

.events-carousel-wrapper [data-gc-carousel-track] > .gc-event-index-card--v2-1-grid .gc-event-index-card-v2-1__surface,
.events-carousel-wrapper .gc-events-index-community-track > .gc-event-index-card--v2-1-grid .gc-event-index-card-v2-1__surface {
    height: auto;
    aspect-ratio: var(--gc-event-index-card-grid-aspect);
}

/*
 * Адаптив: breakout на inset main-колонки (--gc-app-main-inset-x).
 * ≥992 + rail: inset = --layout-app-rail-main-inset-x (space/4), не content-inset
 * (space/2|3) — иначе карусель «короче» экрана и режется контентным gutter.
 * 100vw + calc(50% - 50vw) ломает карусель в узкой колонке профиля и с app rail.
 * Inset — padding внутри scroll-track; ширина слайда — % от inner track.
 */
@media (max-width: 1279.98px) {
    .events-carousel-wrapper {
        --gc-carousel-bleed-inset: var(--gc-app-main-inset-x, var(--layout-content-inset-x));
        width: calc(100% + 2 * var(--gc-carousel-bleed-inset));
        max-width: none;
        margin-inline: calc(-1 * var(--gc-carousel-bleed-inset));
        padding-inline: 0;
        box-sizing: border-box;
        min-width: 0;
    }

    .events-carousel-wrapper [data-gc-carousel-track],
    .events-carousel-wrapper .gc-events-index-community-track,
    .events-carousel-wrapper .upcoming-events-grid {
        padding-inline: var(--gc-carousel-bleed-inset);
        scroll-padding-inline: var(--gc-carousel-bleed-inset);
    }

    .events-carousel-wrapper .upcoming-events-grid {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .events-carousel-wrapper [data-gc-carousel-track] > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper [data-gc-carousel-track] > .weapon-card-link,
    .events-carousel-wrapper .gc-events-index-community-track > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper .profile-weapons-carousel-track > .weapon-card-link,
    .events-carousel-wrapper .upcoming-events-grid > .gc-event-card,
    .events-carousel-wrapper .upcoming-events-grid > .gc-card {
        flex: 0 0 calc(85% - var(--space-2));
        min-width: calc(85% - var(--space-2));
        max-width: calc(85% - var(--space-2));
    }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .events-carousel-wrapper [data-gc-carousel-track] > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper [data-gc-carousel-track] > .weapon-card-link,
    .events-carousel-wrapper .gc-events-index-community-track > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper .profile-weapons-carousel-track > .weapon-card-link,
    .events-carousel-wrapper .upcoming-events-grid > .gc-event-card,
    .events-carousel-wrapper .upcoming-events-grid > .gc-card {
        flex: 0 0 calc(50% - var(--space-2));
        min-width: calc(50% - var(--space-2));
        max-width: calc(50% - var(--space-2));
    }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    .events-carousel-wrapper:not(.profile-weapons-carousel) [data-gc-carousel-track] > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper:not(.profile-weapons-carousel) .gc-events-index-community-track > .gc-event-index-card--v2-1-grid,
    .events-carousel-wrapper:not(.profile-weapons-carousel) .upcoming-events-grid > .gc-event-card,
    .events-carousel-wrapper:not(.profile-weapons-carousel) .upcoming-events-grid > .gc-card {
        flex: 0 0 calc(33.333% - var(--space-3));
        min-width: calc(33.333% - var(--space-3));
        max-width: calc(33.333% - var(--space-3));
    }
}

/* Оружие на профиле: 2 слайда в ряд на desktop (≥1280), без full-bleed */
@media (min-width: 1280px) {
    .events-carousel-wrapper.profile-weapons-carousel [data-gc-carousel-track] > .weapon-card-link,
    .events-carousel-wrapper.profile-weapons-carousel .profile-weapons-carousel-track > .weapon-card-link {
        flex: 0 0 calc(50% - var(--space-2));
        min-width: calc(50% - var(--space-2));
        max-width: calc(50% - var(--space-2));
    }
}

/* Кнопки навигации — frosted glass: читаемо на фото и на светлом canvas */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-product-40);
    height: var(--space-product-40);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    z-index: 10;
    color: var(--text-on-solid);
    background: color-mix(in srgb, var(--fill-emphasis) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--fill-emphasis-inverse) 12%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    transition:
        background var(--transition-base) var(--ease-in-out),
        border-color var(--transition-base) var(--ease-in-out),
        backdrop-filter var(--transition-base) var(--ease-in-out),
        opacity var(--transition-base) var(--ease-in-out),
        transform var(--transition-base) var(--ease-in-out),
        box-shadow var(--transition-base) var(--ease-in-out);
}

.carousel-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    transition: box-shadow var(--transition-base) var(--ease-in-out);
}

.carousel-nav:hover {
    background: color-mix(in srgb, var(--fill-emphasis) 92%, transparent);
    border-color: color-mix(in srgb, var(--fill-emphasis-inverse) 16%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
}

.carousel-nav:hover::after {
    box-shadow: var(--shadow-lg);
}

.carousel-nav:active {
    transform: translateY(-50%) scale(0.96);
}

.carousel-nav:active::after {
    box-shadow: var(--shadow-sm);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .carousel-nav {
        background: color-mix(in srgb, var(--fill-emphasis) 96%, transparent);
    }

    .carousel-nav:hover {
        background: var(--fill-emphasis);
    }
}

/* Light — светлый frosted glass + тёмная иконка */
html[data-theme='light'] .carousel-nav {
    color: var(--text-on-solid-inverse);
    background: color-mix(in srgb, var(--fill-emphasis-inverse) 84%, transparent);
    border-color: color-mix(in srgb, var(--fill-emphasis) 12%, transparent);
}

html[data-theme='light'] .carousel-nav:hover {
    background: color-mix(in srgb, var(--fill-emphasis-inverse) 92%, transparent);
    border-color: color-mix(in srgb, var(--fill-emphasis) 16%, transparent);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-theme='light'] .carousel-nav {
        background: color-mix(in srgb, var(--fill-emphasis-inverse) 96%, transparent);
    }

    html[data-theme='light'] .carousel-nav:hover {
        background: var(--fill-emphasis-inverse);
    }
}

.carousel-nav:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
}

.carousel-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.carousel-nav:disabled::after {
    box-shadow: none;
}

.carousel-nav i {
    font-size: var(--font-size-20);
    line-height: 1;
}

.carousel-nav-prev {
    left: var(--space-4);
}

.carousel-nav-next {
    right: var(--space-4);
}

/* Grid для предстоящих событий - карусель */
.upcoming-events-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 4px;
}

.upcoming-events-grid::-webkit-scrollbar {
    display: none;
}

/* Карточка события в carousel */
.upcoming-events-grid .gc-event-card {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 8px);
    min-width: calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
}

/* Обычные карточки .gc-card в carousel */
.upcoming-events-grid .gc-card {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 8px);
    min-width: calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
}

/* Hover для .gc-event-card наследуется из cards.css */
/* event-grid-bottom наследуется из cards.css */


/* Адаптивность */
@media (max-width: 767.98px) {
    .carousel-nav {
        display: none;
    }
    
    .upcoming-events-grid {
        gap: 10px;
    }
    
    .upcoming-events-grid .gc-event-card,
    .upcoming-events-grid .gc-card {
        flex: 0 0 85%;
        min-width: 85%;
        max-width: 85%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .carousel-nav-prev {
        left: var(--space-3);
    }

    .carousel-nav-next {
        right: var(--space-3);
    }
    
    .upcoming-events-grid .gc-event-card,
    .upcoming-events-grid .gc-card {
        flex: 0 0 calc(50% - 6px);
        min-width: calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
}