/* ==========================================================================
   blocks/games-slider/games-slider.css
   ========================================================================== */

.games-slider {
  position: relative;
  padding-bottom: 44px;
  /* Always clip to the block's own width — cards must never spill past the
     surrounding text block, whether Swiper.js is running or not. */
  overflow: hidden;
}

.games-slider .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

/* CSS-only horizontal-scroll fallback: if Swiper.js hasn't taken over yet
   (slow/blocked CDN, JS error, etc.) the wrapper becomes a native horizontal
   scroller, so every card stays reachable and none of it overflows the page.
   Swiper adds the "swiper-initialized" class once it takes control — at that
   point this fallback steps aside so native scroll doesn't fight the JS
   slide transform. */
.games-slider:not(.swiper-initialized) .swiper-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  /* Scrolling still works (touch/trackpad/arrow buttons) — only the visible
     scrollbar track is hidden, so the side arrows are the obvious control. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.games-slider:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
  height: 0;
}

.games-slider:not(.swiper-initialized) .swiper-slide {
  scroll-snap-align: start;
}

.games-slider .swiper-slide {
  flex: 0 0 auto;
  width: 118px;
}

@media (min-width: 480px) {
  .games-slider .swiper-slide {
    width: 136px;
  }
}

@media (min-width: 768px) {
  .games-slider .swiper-slide {
    width: 158px;
  }
}

@media (min-width: 1024px) {
  .games-slider .swiper-slide {
    width: 172px;
  }
}

@media (min-width: 1440px) {
  .games-slider .swiper-slide {
    width: 184px;
  }
}

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

/* Vse slike iger so v razmerju ~3:4 (pokončni "box art" thumbnaili).
   Isto razmerje na mediji = enaka velikost VSEH kartic in slika brez obreza. */
.game-card__media {
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius-card) - 2px);
  overflow: hidden;
}

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

.game-card__title {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card__play {
  padding: 10px;
  font-size: var(--fs-small);
}

.games-slider__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  color: var(--color-white);
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background var(--transition-base);
}

.games-slider__nav:hover {
  background: var(--color-accent-light);
  color: var(--color-text-on-btn);
}

.games-slider__nav--prev {
  left: -8px;
}

.games-slider__nav--next {
  right: -8px;
}

.games-slider .swiper-pagination-bullet {
  background: var(--color-text-main);
  opacity: 0.6;
}

.games-slider .swiper-pagination-bullet-active {
  background: var(--color-heading-gold);
  opacity: 1;
}

@media (min-width: 1024px) {
  .games-slider__nav {
    display: flex;
  }
}