/* Универсальный слайдер изображений — [mot_slider] (src/Frontend/ImageSlider.php).
   Ключевое: img width:100% + height:auto — пропорции исходной картинки
   сохраняются при любой ширине контейнера; высоту вьюпорта под активный
   слайд подгоняет slider.js (transition делает смену высоты плавной). */

.mot-slider {
	position: relative;
	width: 100%;
}

.mot-slider__viewport {
	overflow: hidden;
	border-radius: 20px;
	transition: height 0.3s ease;
}

.mot-slider__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.4s ease;
}

.mot-slider__slide {
	flex: 0 0 100%;
	min-width: 100%;
}

.mot-slider__slide img,
.mot-slider__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Режим фиксированных пропорций (атрибут/настройка «Пропорции», напр. 3:4):
   вьюпорт держит aspect-ratio, картинки кадрируются под него (cover);
   JS-подгонка высоты в этом режиме отключена (slider.js). */
.mot-slider--ratio .mot-slider__viewport {
	aspect-ratio: var(--mot-slider-ratio, auto);
}

.mot-slider--ratio .mot-slider__track,
.mot-slider--ratio .mot-slider__slide {
	height: 100%;
}

.mot-slider--ratio .mot-slider__slide img,
.mot-slider--ratio .mot-slider__img {
	height: 100%;
	object-fit: cover;
}

/* Стрелки поверх картинки */
.mot-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #222;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background 0.2s ease;
}

.mot-slider__arrow:hover {
	background: #fff;
}

.mot-slider__arrow--prev {
	left: 12px;
}

.mot-slider__arrow--next {
	right: 12px;
}

/* Точки-пейджер */
.mot-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mot-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mot-slider__dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* На мобильных: стрелки прячем (листание свайпом, slider.js), а сам блок
   вытягиваем на всю ширину экрана — выламываемся из контентного контейнера
   отрицательными полями; скругление у краёв экрана убираем. */
@media (max-width: 600px) {
	.mot-slider__arrow {
		display: none;
	}

	.mot-slider {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.mot-slider__viewport {
		border-radius: 0;
	}

	/* Если слайдер — первый блок страницы, прижимаем его к шапке: гасим
	   отступы Kadence (margin-top 2rem у .content-area + padding 1.5rem
	   у .entry-content-wrap на мобильных). */
	.entry-content > .mot-slider:first-child {
		margin-top: -3.5rem;
	}
}