/* ==========================================================================
   games-slider block — BEM: games-slider, game-card
   ========================================================================== */

.games-slider {
  position: relative;
  padding-bottom: 0.25rem;
}

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

.game-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.game-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.game-card:hover .game-card__image {
  transform: scale(1.05);
}

.game-card__title {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  min-height: 2.6em;
}

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

/* Mobile only: force the Play button to the same height on every card,
   regardless of title length, without touching the desktop grid layout.
   Swiper only stretches slides to equal height within a row; it can't
   equalize the *card* height when titles wrap to a different number of
   lines, so the title gets a fixed, clamped height here instead of
   relying purely on flex-grow. */
@media (max-width: 767.98px) {
  .game-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .game-card__title {
    flex-grow: 0;
    /* line-height is set explicitly so 2 lines always equal exactly 2.6em —
       the earlier bug clipped the 2nd line because the fixed height didn't
       match the inherited body line-height (1.6). */
    line-height: 1.3;
    height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .game-card__cta {
    margin-top: auto;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }
}

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

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

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

.games-slider__arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}