/*!
 * AQ Slider — frontend styles.
 * Namespaced (aq-slider), CSS-custom-property driven. No global element styles.
 */
.aq-slider {
	--aq-slider-per-mb: 1;
	--aq-slider-per-tb: 2;
	--aq-slider-per-dt: 3;
	--aq-slider-gap-mb: 14px;
	--aq-slider-gap-tb: 20px;
	--aq-slider-gap-dt: 24px;
	--aq-slider-arrow-size: 44px;
	--aq-slider-arrow-offset: 16px;
	--aq-slider-arrow-bg: rgba(0, 0, 0, 0.55);
	--aq-slider-arrow-color: #ffffff;
	--aq-slider-border: 1px solid rgba(255, 255, 255, 0.08);
	--aq-slider-radius: 0px;
	--aq-slider-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
	--aq-slider-media-bg: #000;
	--aq-slider-card-bg: #111;
	--aq-slider-text: #ffffff;
	--aq-slider-muted: #a0a0a0;
	--aq-slider-accent: #e5e5e5;
	--aq-slider-fit: cover;
	--aq-slider-aspect: auto;

	position: relative;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	text-rendering: optimizeLegibility;
}

.aq-slider,
.aq-slider *,
.aq-slider *::before,
.aq-slider *::after {
	box-sizing: border-box;
}

/* Фокус-индикатор у секции не рисуем: после клика по стрелке/точке
   браузер (Safari/тач) даёт рамку вокруг всего слайдера — это лишнее.
   Индикаторы остаются у стрелок и точек.
   :focus (не только :focus-visible) — потому что у блочных тем WP заведён
   `:where(.wp-site-blocks :focus){outline:2px solid}`, который вешает
   рамку на любой сфокусированный элемент. */
.aq-slider:focus,
.aq-slider :focus {
	outline: none;
}

.aq-slider--fit-cover { --aq-slider-fit: cover; }
.aq-slider--fit-contain { --aq-slider-fit: contain; }

/* ------------------------------------------------------------------ *
 *  Track + slides
 * ------------------------------------------------------------------ */
.aq-slider__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.aq-slider__track {
	display: flex;
	align-items: stretch;
	--aq-slider-per: var(--aq-slider-per-mb);
	--aq-slider-per-gap: var(--aq-slider-gap-mb);
	column-gap: var(--aq-slider-per-gap);
	will-change: transform;
	/* Без фона: в гэпе между карточками не должно быть заметной полосы
	   — только тонкие бордеры самих слайдов. */
	background: transparent;
}

.aq-slider__track--no-anim {
	transition: none !important;
}

.aq-slider__track--dragging .aq-slider__slide {
	pointer-events: none;
}

.aq-slider__track--dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

.aq-slider__slide {
	flex: 0 0 calc((100% - (var(--aq-slider-per) - 1) * var(--aq-slider-per-gap)) / var(--aq-slider-per));
	min-width: 0;
	overflow: hidden;
	background: var(--aq-slider-card-bg);
	border: var(--aq-slider-border);
	border-radius: var(--aq-slider-radius);
	color: var(--aq-slider-text);
}

/* Слайды соприкасаются (гэп 0): чтобы между ними не было двойной
   линии, левый бордер со второй карточки убираем. */
.aq-slider__slide + .aq-slider__slide {
	border-left: 0;
}

/* ------------------------------------------------------------------ *
 *  Media
 * ------------------------------------------------------------------ */
.aq-slider__media {
	display: block;
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--aq-slider-aspect);
	background: var(--aq-slider-media-bg);
}

/* Плёночный градиент снизу — как у кинопостера. */
.aq-slider__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	background: linear-gradient( to top, #111 0%, transparent 100% );
	pointer-events: none;
}

.aq-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--aq-slider-fit);
	filter: grayscale( 100% );
	opacity: .6;
	transition: transform .5s ease, opacity .3s ease, filter .3s ease;
}

@media ( hover: hover ) {
	.aq-slider__slide:hover .aq-slider__img,
	.aq-slider__slide:focus-within .aq-slider__img {
		transform: scale( 1.06 );
		opacity: .75;
		filter: none;
	}
}

.aq-slider__img--empty {
	background: var(--aq-slider-media-bg);
	min-height: 180px;
}

/* Бейдж жанра поверх изображения. */
.aq-slider__genre {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba( 255, 255, 255, .2 );
	background: rgba( 0, 0, 0, .35 );
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .5 );
	max-width: 20ch;
	white-space: nowrap;
	overflow: hidden;
}

/* Жанр не влез в 20 символов — бегущая строка без тени. */
.aq-slider__genre--marquee > span {
	display: block;
	width: max-content;
	white-space: nowrap;
	animation: aq-slider-marquee var( --aq-slider-marquee-duration, 8s ) linear infinite;
	will-change: transform;
}

/* Легаси: жанр, вставленный абзацем внутрь описания в старых слайдах,
   теперь выводится бейджем над изображением. */
.aq-slider__desc .aq-slider__genre {
	display: none;
}

/* ------------------------------------------------------------------ *
 *  Body
 * ------------------------------------------------------------------ */
.aq-slider__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 20px 20px 24px;
}

.aq-slider__title {
	margin: 0;
	color: var(--aq-slider-text);
	font-family: "Manrope", "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

/* Тень наезжает справа на обрезанный заголовок, если он не влезает в строку. */
.aq-slider__title::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient( 90deg, transparent, var(--aq-slider-card-bg) 85% );
	pointer-events: none;
}

.aq-slider__desc {
	margin: 0;
	flex: 1;
	color: rgba( 255, 255, 255, .5 );
	font-family: "Inter", sans-serif;
	font-size: .8125rem;
	line-height: 1.6;
	min-height: var(--aq-slider-desc-h, auto);
}

.aq-slider__desc > p,
.aq-slider__desc > h1,
.aq-slider__desc > h2,
.aq-slider__desc > h3,
.aq-slider__desc > h4 {
	margin: 0 0 0.6em;
}

.aq-slider__desc > p:last-child,
.aq-slider__desc > :last-child {
	margin-bottom: 0;
}

/* Ряд параметров: ИГРОКИ / ВРЕМЯ / СЛОЖНОСТЬ. */
.aq-slider__stats {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 0 20px;
	margin: 4px 0 20px;
	padding-top: 16px;
	border-top: 1px solid #2a2a2a;
}

.aq-slider__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.aq-slider__stat-label {
	font-family: "Inter", sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .3 );
}

.aq-slider__stat-value {
	display: block;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: rgba( 255, 255, 255, .7 );
}

/*
 * Значение не влезает — бегущая строка: текст дублируется и едет
 * влево по кругу, как бесконечный слайдер.
 */
.aq-slider__stat-value--marquee {
	text-overflow: clip;
}

.aq-slider__stat-value--marquee > .aq-slider__stat-value__inner {
	display: block;
	width: max-content;
	white-space: nowrap;
	animation: aq-slider-marquee var( --aq-slider-marquee-duration, 8s ) linear infinite;
	will-change: transform;
}

/* Два прохода текста, между ними отступ — круг замыкается. */
.aq-slider__stat-value__pass {
	display: inline-block;
	margin-right: 20px;
}

.aq-slider__stat-value--marquee::after {
	background: linear-gradient( 90deg, transparent, var(--aq-slider-card-bg) 85% );
}

.aq-slider__stat-value--marquee::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient( 270deg, transparent, var(--aq-slider-card-bg) 85% );
	pointer-events: none;
	z-index: 1;
}

@keyframes aq-slider-marquee {
	to {
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.aq-slider__stat-value--marquee > .aq-slider__stat-value__inner {
		animation: none;
	}
}

.aq-slider__cta {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 11px 20px;
	border: 1px solid rgba( 255, 255, 255, .25 );
	background: transparent;
	color: var(--aq-slider-accent);
	font-family: "Manrope", "Inter", sans-serif;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color var(--aq-slider-transition), background var(--aq-slider-transition), color var(--aq-slider-transition);
}

.aq-slider__cta:hover,
.aq-slider__cta:focus-visible {
	border-color: #fff;
	background: rgba( 255, 255, 255, .05 );
	color: var(--aq-slider-text);
	outline: none;
}

/* ------------------------------------------------------------------ *
 *  Arrows
 * ------------------------------------------------------------------ */
.aq-slider__arrows {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	display: block;
}

/* Все слайды видны — навигация не нужна, стрелки скрыты целиком. */
.aq-slider--nav-none .aq-slider__arrows {
	display: none;
}

.aq-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: var(--aq-slider-arrow-size);
	height: var(--aq-slider-arrow-size);
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	color: var(--aq-slider-arrow-color);
	cursor: pointer;
	pointer-events: auto;
	transition: background var(--aq-slider-transition), opacity var(--aq-slider-transition), transform var(--aq-slider-transition);
	-webkit-tap-highlight-color: transparent;
}

.aq-slider__arrow:hover:not(:disabled),
.aq-slider__arrow:focus-visible:not(:disabled) {
	background: rgba(0, 0, 0, 0.4);
	border-color: rgba(255, 255, 255, 0.55);
	outline: none;
	box-shadow: 0 0 0 2px var(--aq-slider-accent);
}

.aq-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.aq-slider__arrow--prev { left: var(--aq-slider-arrow-offset); }
.aq-slider__arrow--next { right: var(--aq-slider-arrow-offset); }

.aq-slider__arrow-icon {
	display: block;
	width: 55%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 *  Pagination
 * ------------------------------------------------------------------ */
.aq-slider__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 0 4px;
}

.aq-slider--align-left .aq-slider__pagination { justify-content: flex-start; }
.aq-slider--align-right .aq-slider__pagination { justify-content: flex-end; }

.aq-slider__dot {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #555555;
	cursor: pointer;
	transition: background var(--aq-slider-transition), width var(--aq-slider-transition), border-radius var(--aq-slider-transition);
	-webkit-tap-highlight-color: transparent;
}

.aq-slider__dot:hover,
.aq-slider__dot:focus-visible {
	background: var(--aq-slider-accent);
	outline: none;
}

.aq-slider__dot.is-active {
	width: 22px;
	border-radius: 99px;
	background: var(--aq-slider-accent);
}

.aq-slider__pagination--fraction {
	gap: 4px;
	color: var(--aq-slider-muted);
	font-size: 0.875rem;
	letter-spacing: 0.05em;
}

.aq-slider__fraction-current { color: var(--aq-slider-text); }
.aq-slider__fraction-sep { margin: 0 2px; }

.aq-slider__pagination--progress {
	justify-content: center;
	padding-top: 16px;
}

.aq-slider__progress-bar {
	display: block;
	width: 120px;
	height: 3px;
	overflow: hidden;
	border-radius: 99px;
	background: #3a3a3a;
}

.aq-slider__progress-bar::after {
	content: "";
	display: block;
	width: 0;
	height: 100%;
	background: var(--aq-slider-accent);
}

.aq-slider__progress-bar.is-running::after {
	width: 100%;
	transition: width var(--aq-auto-delay) linear;
}

/* На тач-устройствах у стрелок/точек не показываем focus-обводку —
   она срабатывает от простого тапа и мешает (индикаторы клавиатуры
   остаются на устройствах с курсором). */
@media (hover: none) {
	.aq-slider__arrow:focus-visible,
	.aq-slider__dot:focus-visible {
		outline: none;
		box-shadow: none;
	}

	/* На тач-устройствах нет наведения: активный (текущий) слайд сам
	   проявляет цветное изображение через секунду (без зума). */
	.aq-slider__slide.is-active .aq-slider__img {
		opacity: .75;
		filter: none;
		transition-delay: .9s;
	}
}

/* ------------------------------------------------------------------ *
 *  Fade transition
 * ------------------------------------------------------------------ */
.aq-slider--fade .aq-slider__track {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.aq-slider--fade .aq-slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--aq-slider-transition), visibility var(--aq-slider-transition);
}

.aq-slider--fade .aq-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ------------------------------------------------------------------ *
 *  Breakpoints
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.aq-slider__track {
		--aq-slider-per: var(--aq-slider-per-tb);
		--aq-slider-per-gap: var(--aq-slider-gap-tb);
	}
}

@media (min-width: 1024px) {
	.aq-slider__track {
		--aq-slider-per: var(--aq-slider-per-dt);
		--aq-slider-per-gap: var(--aq-slider-gap-dt);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aq-slider,
	.aq-slider * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media (max-width: 480px) {
	.aq-slider__body { padding: 14px 16px 18px; }
	.aq-slider__title { font-size: 1.2rem; }
}