/* ==========================================================================
   Games slider block (Swiper) — game images shown in full, never cropped.
   ========================================================================== */

.games-slider {
	position: relative;
}

/* Pre-Swiper / no-JS fallback: a plain horizontal scroll-snap row, so the
   "small icons in a row" layout still looks and works right even if the
   Swiper library never finishes loading for any reason. Once Swiper
   initializes it adds .swiper-initialized to this element and takes over
   with its own transform-based sliding, so these rules stop applying —
   the widths below approximate the JS slidesPerView at each breakpoint. */
.games-slider:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
}

.games-slider:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 auto;
	width: 30%;
	scroll-snap-align: start;
}

.games-slider:not(.swiper-initialized) .games-slider__nav-band {
	display: none;
}

@media (min-width: 30rem) {
	.games-slider:not(.swiper-initialized) .swiper-slide {
		width: 23%;
	}
}

@media (min-width: 48rem) {
	.games-slider:not(.swiper-initialized) .swiper-slide {
		width: 17%;
	}
}

@media (min-width: 64rem) {
	.games-slider:not(.swiper-initialized) .swiper-slide {
		width: 13%;
	}
}

@media (min-width: 90rem) {
	.games-slider:not(.swiper-initialized) .swiper-slide {
		width: 10.5%;
	}
}

.game-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	min-width: 0;
}

/* Small icon-sized tiles, many per row (client request), instead of a
   few large cards. Real game cover proportions (267/400) are kept
   exactly — the box ratio matches the source images, so
   object-fit: contain never letterboxes — the icons just render small
   because each slide itself is narrow (see slidesPerView in the JS). */
.game-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 267 / 400;
	height: auto;
	background: var(--color-bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

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

.game-card__title {
	color: var(--color-white);
	font-weight: var(--fw-medium);
	font-size: 0.75rem;
	line-height: 1.25;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.game-card__play {
	margin-top: auto;
	width: 100%;
	font-size: 0.7rem;
	padding: 0.5rem 0.6rem;
}

/* Nav band: absolutely positioned so its height always matches the
   currently rendered card image height (set as --gs-media-h by JS via
   ResizeObserver), so the arrows sit directly over the image edges
   instead of floating as a separate control strip below/outside it. */
.games-slider__nav-band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--gs-media-h, 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 0.4rem;
	pointer-events: none;
	z-index: 2;
}

.games-slider__nav {
	display: flex;
	pointer-events: auto;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	background: var(--color-card-bg);
	color: var(--color-heading-accent);
	clip-path: var(--clip-corner);
	opacity: 0.9;
	transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.games-slider__nav:hover {
	filter: brightness(1.3);
	opacity: 1;
}

@media (min-width: 48rem) {
	.games-slider__nav {
		width: 2.75rem;
		height: 2.75rem;
	}
}