/*!
 * Magazine Slider 300 — styles
 * (c) Vrezerve Soft
 * Все размеры/цвета настраиваются через CSS-переменные, задаваемые PHP-шорткодом:
 *   --ms300-hero-h-desktop / --ms300-hero-h-tablet / --ms300-hero-h-mobile
 *   --ms300-progress-bg / --ms300-progress-fill / --ms300-border
 *   --ms300-transition
 */

/* ---------- Container ---------- */
.magazine-slider {
	position: relative;
	width: 100%;
	max-width: 1310px;
	margin: 0 auto 60px;
}

/* ---------- Hero (slide-transition) ---------- */
.magazine-slider__hero {
	position: relative;
	width: 100%;
	height: var(--ms300-hero-h-desktop, 720px);
	overflow: hidden;
	margin-bottom: 10px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
.magazine-slider__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.magazine-slider__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.magazine-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	will-change: opacity;
	transition: opacity var(--ms300-transition, 600ms) ease;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.magazine-slider__image.is-active { opacity: 1; }
.magazine-slider__hero.is-dragging .magazine-slider__image { transition: none !important; }
.magazine-slider__link:hover .magazine-slider__image.is-active { opacity: .95; }

/* ---------- Footer / carousel ---------- */
.magazine-slider__footer {
	margin-top: 0;
	border-top: 7px solid var(--ms300-border, #111);
	border-bottom: 1px solid var(--ms300-border, #111);
	padding-bottom: 25px;
}
.magazine-slider__posts {
	overflow: hidden;
	position: relative;
	width: 100%;
	touch-action: pan-y;
	cursor: grab;
}
.magazine-slider__posts.is-dragging { cursor: grabbing; }
.magazine-slider__posts.is-dragging .magazine-slider__track { transition: none !important; }
.magazine-slider__track {
	display: flex;
	gap: 60px;
	transition: transform .6s cubic-bezier(.25, .46, .45, .94);
	will-change: transform;
	width: 100%;
}
.magazine-slider__track.no-transform {
	transform: none !important;
	transition: none !important;
}

.mag-item {
	flex: 0 0 calc(33.333% - 40px);
	min-width: 0;
	cursor: pointer;
	transition: opacity .3s ease;
	-webkit-user-select: none;
	user-select: none;
	/* Убираем 300ms задержку клика и системный double-tap-zoom на мобильных */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.mag-item__progress {
	position: relative;
	height: 4px;
	margin-bottom: 35px;
	overflow: hidden;
	background: var(--ms300-progress-bg, #fff);
}
.mag-item__progress span {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background: var(--ms300-progress-fill, #111);
	transition: none;
}
.mag-item h3 {
	margin: 0 0 25px;
	font-size: 1.2em;
	line-height: 1.05;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	opacity: .35;
	transition: opacity .3s ease;
}
.mag-item p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	opacity: .35;
	transition: opacity .3s ease;
}
.mag-item.active h3,
.mag-item.active p { opacity: 1; }
.mag-item:hover h3 { opacity: 1; }

/* ---------- Arrows ---------- */
.magazine-slider__arrow {
	position: absolute;
	bottom: 25px;
	transform: translateY(-50%);
	width: 70px;
	height: 70px;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 50;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	transition: opacity .3s ease;
	font-size: 0;
	color: transparent;
}
.magazine-slider__arrow:before {
	content: '';
	width: 48px;
	height: 48px;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.magazine-slider__arrow.prev { left: -110px; }
.magazine-slider__arrow.next { right: -110px; }
.magazine-slider__arrow.prev:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'%3E%3Cpath d='M12 10h38' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 10L20 2' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 10L20 18' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.magazine-slider__arrow.next:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'%3E%3Cpath d='M0 10h38' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M38 10L30 2' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M38 10L30 18' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.magazine-slider__arrow:hover { opacity: .6; }
.magazine-slider__arrow.is-visible { display: flex; }
.magazine-slider__arrow.is-disabled { opacity: .3; pointer-events: none; cursor: default; }

/* полное скрытие стрелок, если так задано в шорткоде/настройках */
.magazine-slider.ms300--no-arrows .magazine-slider__arrow { display: none !important; }

/* ---------- Empty state ---------- */
.ms300-empty {
	padding: 24px;
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	text-align: center;
	color: #555;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.magazine-slider__hero { height: var(--ms300-hero-h-tablet, 560px); }
	.mag-item              { flex: 0 0 calc(50% - 20px); }
	.magazine-slider__track { gap: 40px; }
	.mag-item h3           { font-size: 26px; }
	.magazine-slider__arrow { display: none !important; }
}

@media (max-width: 768px) {
	.magazine-slider__hero {
		height: var(--ms300-hero-h-mobile, 350px);
		margin-bottom: 0;
	}
	.magazine-slider__footer {
		margin-top: 5px;
		border-top: 3px solid var(--ms300-border, #111);
	}
	.mag-item              { flex: 0 0 100%; }
	.magazine-slider__track { gap: 30px; }
	.mag-item__progress    { height: 3px; margin-bottom: 20px; }
	.mag-item h3 {
		font-size: 1.2em;
		margin-bottom: 15px;
		padding: 0 20px;
	}
	.mag-item p {
		font-size: 15px;
		line-height: 1.3;
		padding: 0 20px;
	}
	.magazine-slider__arrow { display: none !important; }
}

@media (min-width: 1201px) {
	.mag-item { flex: 0 0 calc(33.333% - 40px); }
}