/* =========================================================
   Games slider block (BEM) — Swiper.js
   ========================================================= */
.games-slider {
  position: relative;
  min-width: 0;
}

.games-slider__swiper {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

/*
 * Fallback-Kartenbreite, falls Swiper.js aus irgendeinem Grund NICHT lädt
 * (z. B. CDN kurzzeitig nicht erreichbar). Ohne diese Regel würde ein
 * .swiper-slide ohne Swiper-JS als normaler Block auf 100% Breite anwachsen
 * — genau der "Bild viel zu groß"-Fehler. Sobald Swiper.js erfolgreich
 * initialisiert, setzt es pro Slide eine INLINE style="width:...", die diese
 * Klassenregel automatisch überschreibt (Inline-Style > Klassenregel) —
 * beide Wege können also konfliktfrei nebeneinander bestehen.
 */
.games-slider__swiper .swiper-wrapper {
  display: flex;
  gap: 1rem;
}

.games-slider__swiper .swiper-slide {
  flex: 0 0 auto;
  width: 45%;
}

@media (min-width: 480px) {
  .games-slider__swiper .swiper-slide {
    width: 39%;
  }
}

@media (min-width: 768px) {
  .games-slider__swiper .swiper-slide {
    width: 28%;
  }
}

@media (min-width: 1024px) {
  .games-slider__swiper .swiper-slide {
    width: 22%;
  }
}

@media (min-width: 1440px) {
  .games-slider__swiper .swiper-slide {
    width: 18%;
  }
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 0.85rem;
  height: 100%;
}

.game-card__media {
  /* Reale Asset-Ratio der Spiel-Thumbnails: 315×236 */
  width: 100%;
  aspect-ratio: 315 / 236;
  border-radius: var(--radius-card);
  background: var(--color-bg-primary);
  overflow: hidden;
}

.game-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card__title {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin: 0;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card__play {
  padding-block: 0.65rem;
  font-size: var(--font-size-small);
}

/*
 * Pfeile liegen direkt auf dem Kartenbild (linker/rechter Rand des Bildes),
 * nicht als separate Zeile darunter. Die vertikale Position (top) wird per
 * JS exakt auf die Bildmitte von .game-card__media gesetzt (games-slider.js),
 * da die Bildhöhe responsiv über aspect-ratio skaliert.
 */
.games-slider__prev,
.games-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 21, 40, 0.78);
  border: 1px solid rgba(255, 211, 42, 0.35);
  color: var(--color-heading-gold);
  transition: background var(--transition-fast);
}

.games-slider__prev {
  left: 0.5rem;
}

.games-slider__next {
  right: 0.5rem;
}

.games-slider__prev:hover,
.games-slider__next:hover {
  background: rgba(255, 211, 42, 0.15);
}

.games-slider__prev.swiper-button-disabled,
.games-slider__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}