/* ==========================================================================
   Games slider
   ========================================================================== */

.games-slider {
    position: relative;
    display: grid;
    gap: var(--space-md);
}

.games-slider__swiper {
    width: 100%;
    overflow: hidden;
}

.game-card {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background-color: var(--color-card);
    clip-path: var(--clip-cut);
    transition: transform var(--transition);
}

.game-card:hover {
    transform: translateY(-4px);
}

.game-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.game-card__body {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-sm);
}

.game-card__name {
    color: var(--color-white);
    font-weight: var(--fw-semibold);
}

.game-card__cta {
    min-height: 2.25rem;
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--fs-small);
}

.games-slider__controls {
    display: flex;
    gap: var(--space-2xs);
    justify-content: flex-end;
}

.games-slider__nav {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background-image: var(--gradient-secondary);
    clip-path: var(--clip-cut);
    transition: filter var(--transition);
}

.games-slider__nav svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--color-white);
}

.games-slider__nav:hover {
    filter: brightness(1.2);
}

.games-slider__nav.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .game-card:hover {
        transform: none;
    }
}

/* Fallback when the Swiper module cannot be loaded. */
.games-slider--fallback .swiper-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.games-slider--fallback .swiper-slide {
    scroll-snap-align: start;
}

.games-slider--fallback .games-slider__controls {
    display: none;
}