/*
 * Карусель баннеров — css/carousel.css
 * Зацикленная, с бесшовным переходом через клоны.
 * Десктоп: ~2x размер слайдов. Мобильный: прежний размер (1.25 карточки).
 * Цвета в стиле NEFT: тёмный фон, зелёный акцент.
 */

/* === ОБЁРТКА === */
.xm-carousel {
	position: relative;
	margin: 0 -20px 28px;
	user-select: none;
	-webkit-user-select: none;
}

/* === ТРЕК === */
.xm-carousel__track-wrap {
	overflow: hidden;
	cursor: grab;
}
.xm-carousel__track-wrap:active { cursor: grabbing; }

.xm-carousel__track {
	display: flex;
	gap: 16px;
	padding: 8px 20px;
	will-change: transform;
	/* transition задаётся из JS */
}

/* === СЛАЙДЫ === */
.xm-carousel__slide {
	flex: 0 0 auto;
	border-radius: 18px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	line-height: 0;
	background: #00070d;		/* цвет фона под картинкой — углы не светят белым */
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.xm-carousel__slide:not([aria-hidden]):hover,
.xm-carousel__slide:not([aria-hidden]):focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
	outline: none;
}
.xm-carousel__slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 18px;
	pointer-events: none;
}

/* === КНОПКИ PREV / NEXT === */
.xm-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 10, 10, .75);
	color: #fff;
	font-size: 28px;
	line-height: 42px;
	text-align: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
	transition: background-color .15s ease, opacity .15s ease;
	opacity: 0.75;
}
.xm-carousel__btn:hover { opacity: 1; background: rgba(0, 0, 0, .9); }
.xm-carousel__btn--prev { left: 24px; }
.xm-carousel__btn--next { right: 24px; }

/* === ТОЧКИ — цвет NEFT (зелёный) === */
.xm-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
}
.xm-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.xm-carousel__dot.is-active {
	background: #1ba27a;   /* NEFT зелёный */
	transform: scale(1.3);
}

/* === АДАПТИВ === */

/* планшет */
@media (max-width: 991px) {
	.xm-carousel {
		margin-left: -12px;
		margin-right: -12px;
	}
	.xm-carousel__track { padding: 8px 12px; gap: 12px; }
	.xm-carousel__btn { width: 36px; height: 36px; font-size: 24px; line-height: 34px; }
	.xm-carousel__btn--prev { left: 14px; }
	.xm-carousel__btn--next { right: 14px; }
}

/* мобильный — размер карточек как прежде, nav кнопки скрыты */
@media (max-width: 770px) {
	.xm-carousel {
		margin-left: -8px;
		margin-right: -8px;
		margin-bottom: 20px;
	}
	.xm-carousel__track { gap: 10px; padding: 6px 8px; }
	.xm-carousel__btn  { display: none; }
	.xm-carousel__dot  { width: 7px; height: 7px; }
}

/* === ФИКС БЕЛЫХ УГЛОВ ===
   #main_content имеет overflow-x:hidden + border-radius:6px в style.css
   из-за этого обрезает углы карусели показывая белый фон.
   Выносим карусель за пределы overflow через отрицательный margin
   и даём ей собственный фон. */

#main_content .xm-carousel,
#main_content_post .xm-carousel {
	position: relative;
	z-index: 1;
}

#main_content .xm-carousel__track-wrap,
#main_content_post .xm-carousel__track-wrap {
	overflow: hidden;
}

.xm-carousel__slide {
	background: #00070d !important;
}

.xm-carousel__slide img {
	border-radius: 0 !important;  /* убираем radius с img — он на родителе */
	display: block;
}