/* ==========================================================================
   Games slider block (BEM: games-slider, game-card)
   ========================================================================== */

.games-slider {
  position: relative;
  padding-inline: clamp(0px, 2vw, 2.5rem);
}

.games-slider__swiper {
  padding-bottom: 0.5rem;
}

/* Baseline flex layout so the slider stays horizontally scrollable even if
   the Swiper CDN bundle fails to load — Swiper JS enhances this further
   with paging/dragging when it initialises successfully. */
.games-slider__swiper .swiper-wrapper {
  display: flex;
}

.games-slider__swiper .swiper-slide {
  flex-shrink: 0;
  height: auto;
}

.game-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base);
}

.game-card:hover,
.game-card:focus-within {
  transform: translateY(-6px);
}

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

.game-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}

.game-card__name {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.game-card__provider {
  color: var(--color-text-main);
  font-size: var(--font-size-small);
  margin: 0 0 0.5rem;
}

.game-card__cta {
  margin-top: auto;
  padding-block: 0.6rem;
}

.games-slider__nav {
  color: var(--color-heading-gold);
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
}

.games-slider__nav::after {
  font-size: 1.25rem;
}

.games-slider__nav.swiper-button-disabled {
  opacity: 0.3;
}

@media (max-width: 767.98px) {
  .games-slider__nav {
    display: none;
  }

  .games-slider {
    padding-inline: 0;
  }

  .games-slider__swiper .swiper-wrapper {
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .games-slider__swiper .swiper-slide {
    flex: 0 0 65%;
    scroll-snap-align: start;
  }

  .game-card__body {
    padding: 0.75rem;
  }
}