/**
 * games-slider.css (BEM: games-slider)
 * Eigenständiges Karussell (kein externes CDN-Skript nötig) — funktioniert dadurch
 * zuverlässig auch offline/lokal. Pfeile liegen links/rechts über den Bildern.
 */

.games-slider__heading {
  margin-bottom: var(--space-h2-text);
}

.games-slider {
  position: relative;
}

.games-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 52px 12px;
  /* Native Scrollleiste unsichtbar machen, Scrollbarkeit bleibt erhalten */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.games-slider__track::-webkit-scrollbar {
  display: none;
  height: 0;
}

.games-slider__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: clamp(150px, 40vw, 220px);
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 12px;
}

.games-slider__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--color-bg-primary);
}

.games-slider__name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  flex-grow: 1;
  margin-bottom: 0;
}

.games-slider__play {
  padding: 10px 16px;
  font-size: var(--font-size-small);
}

.games-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-heading-gold);
  font-size: 20px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card);
  transition: background var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}

.games-slider__arrow--prev {
  left: 0;
}

.games-slider__arrow--next {
  right: 0;
}

.games-slider__arrow:hover,
.games-slider__arrow:focus-visible {
  background: var(--color-accent-light);
  color: var(--color-text-on-light);
}

.games-slider__arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}