/**
 * games-slider.css — BEM: games-slider, games-slider__*
 */

.games-slider {
  position: relative;
  /* Prevents this slider from forcing its parent grid/flex track to grow to
     the width of its (much wider) internal slide track — without this, a
     games-slider nested inside a grid container (e.g. the slots page)
     stretches the whole section past the viewport edge. */
  min-width: 0;
}

/* Breathing room below a heading that precedes the slider directly inside a
   plain .container (e.g. the homepage's "Nejoblíbenější hry HellSpin" block).
   Inside a .content-section__inner grid this gap is already provided by its
   own `gap` property, so this is scoped to avoid doubling up there. */
.container:not(.content-section__inner) > h2 + .games-slider {
  margin-top: var(--space-h2-to-text);
}

.games-slider__slide {
  height: auto;
}

.games-slider__card {
  display: grid;
  /* align-content: start (rather than the grid default, which effectively
     stretches auto-sized rows to fill any extra block-size) keeps the image/
     name/button rows at their natural content height even though the card
     itself is stretched to height: 100% to match its tallest sibling slide —
     without this, that extra height was being distributed into the image
     row and squashing/stretching the aspect-ratio square image. */
  align-content: start;
  gap: 0.75rem;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 0.85rem;
  height: 100%;
}

.games-slider__image {
  width: 100%;
  /* The <img> tag carries HTML width/height="260" attributes (for CLS
     prevention before CSS loads). Those attributes are mapped to UA-level
     width/height styles, and a specified `height` from them takes priority
     over `aspect-ratio` when computing the used size — so without an
     explicit `height: auto` here, the box kept the literal 260px height
     from the attribute while `width: 100%` shrank on narrow (mobile)
     slides, producing a squashed, heavily-cropped vertical sliver instead
     of a square. `height: auto` clears that so aspect-ratio is what
     actually determines the height, at any slide width. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  /* Belt-and-braces: never let grid stretch alignment override the height
     computed from aspect-ratio, even if this component is reused somewhere
     with a different grid/align-items context. */
  align-self: start;
}

.games-slider__name {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.games-slider__play {
  padding-block: 0.6rem;
}