/**
 * blocks/games-slider/games-slider.css
 */
.games-slider { position: relative; }
.games-slider .swiper-slide { height: auto; }

.game-card {
  background: var(--color-card-bg);
  clip-path: var(--clip-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.game-card__image {
  width: 100%;
  /* height:auto is required — the <img> tag carries a hardcoded
     width="300" height="300" HTML hint; without an explicit height:auto
     override here, that literal height="300" wins over aspect-ratio
     (aspect-ratio only computes a dimension left as auto), stretching the
     box to a non-square 1:2.5-ish shape at any card width other than 300px. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-bg-dark);
}
.game-card__name {
  margin: 0;
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  flex-grow: 1;
}
.game-card__play { padding: 10px 16px; font-size: var(--fs-small); }

/* Prev/next sit directly on top of the card images at the slider's left and
   right edges, vertically centered on the (roughly square) image zone of a
   card rather than the full card height (image + name + button). */
.games-slider__prev, .games-slider__next {
  position: absolute;
  top: 32%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 22, 23, 0.75);
  color: var(--color-heading-accent);
  font-size: 20px;
  clip-path: var(--clip-card);
  transition: background var(--transition-fast);
}
.games-slider__prev { left: 4px; }
.games-slider__next { right: 4px; }
.games-slider__prev:hover, .games-slider__next:hover { background: var(--color-cool-accent); }
.games-slider__prev.swiper-button-disabled, .games-slider__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}