/* Games slider block — BEM: games-slider__element--modifier */

.games-slider {
  position: relative;
  margin-top: var(--space-h2-text);
  min-width: 0;
}

.games-slider__swiper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.games-slider__swiper .swiper-wrapper {
  display: flex;
  gap: 1rem;
}

.games-slider__slide {
  width: 168px;
  flex-shrink: 0;
  scroll-snap-align: start;
  height: auto;
}

.games-slider__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
}

.games-slider__card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.games-slider__card-footer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.625rem;
  padding: 0.875rem;
}

.games-slider__name {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-slider__play {
  margin-top: auto;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.games-slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.games-slider__prev,
.games-slider__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-btn-secondary-border);
  color: var(--color-white);
  transition: background var(--transition-base), color var(--transition-base);
}

.games-slider__prev::before,
.games-slider__next::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.games-slider__prev::before {
  transform: rotate(-135deg) translate(1px, -1px);
}

.games-slider__next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.games-slider__prev:hover,
.games-slider__next:hover,
.games-slider__prev:focus-visible,
.games-slider__next:focus-visible {
  background: var(--color-btn-secondary-border);
  color: var(--color-btn-text-dark);
}

.games-slider__prev.swiper-button-disabled,
.games-slider__next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

@media (min-width: 768px) {
  .games-slider__slide {
    width: 200px;
  }
}