/* ============================================================
   Games slider block
   ============================================================ */
.games-slider {
  margin-block: var(--space-section);
}
.games-slider__title { margin-bottom: var(--space-h2-text); }

.games-slider .swiper {
  padding-bottom: 0.5rem;
  padding-inline: 2.25rem;
  position: relative;
}

/* Baseline horizontal row, independent of the Swiper library: guarantees
   a single scrollable line of cards even if the CDN script/stylesheet
   fails to load (offline, blocked network, etc.). Scoped to :not(.swiper-initialized)
   so it steps aside the moment Swiper's own JS takes over the same element
   (Swiper adds that class itself on init) — no fighting over layout/scroll. */
.games-slider .swiper:not(.swiper-initialized) {
  overflow-x: auto;
  /* Hide the native scrollbar (Firefox / IE-Edge legacy + WebKit) while
     keeping the element scrollable — navigation is via the arrow buttons
     or touch/trackpad drag, so the bar itself is just visual clutter. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.games-slider .swiper:not(.swiper-initialized)::-webkit-scrollbar {
  display: none;
}
.games-slider .swiper.swiper-initialized {
  overflow: hidden;
}
.games-slider .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.games-slider .swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 auto;
  width: clamp(96px, 26vw, 150px);
}
@media (min-width: 480px) {
  .games-slider .swiper:not(.swiper-initialized) .swiper-slide { width: clamp(110px, 20vw, 150px); }
}
@media (min-width: 768px) {
  .games-slider .swiper:not(.swiper-initialized) .swiper-slide { width: clamp(120px, 16vw, 160px); }
}
@media (min-width: 1024px) {
  .games-slider .swiper:not(.swiper-initialized) .swiper-slide { width: clamp(130px, 13vw, 170px); }
}

.games-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.games-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(84px, 18vw, 128px);
  padding: 0.4rem;
}
.games-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.games-card__name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin: 0;
}

/* Arrows sit inside the slider track, vertically centred on the image
   row itself (games-card__media height) rather than the whole card —
   so they line up with the slot artwork, not the name label below it.
   Positioned inset (not with a negative offset) so they're never
   clipped by the track's overflow-x/overflow used for scrolling. */
.games-slider .swiper-button-prev,
.games-slider .swiper-button-next {
  top: calc(clamp(84px, 18vw, 128px) / 2);
  margin-top: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-accent-light);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.games-slider .swiper-button-prev { left: 0.25rem; }
.games-slider .swiper-button-next { right: 0.25rem; }
.games-slider .swiper-button-prev::after,
.games-slider .swiper-button-next::after {
  font-size: 0.9rem;
}
.games-slider .swiper-button-disabled { opacity: 0.35; }