.video-block {
	/*position: relative;*/
	/*height: 500px;*/
	/*overflow: hidden;*/
}
	/* Минимальный блок 1920×760 */
.hero-block{
	position: relative; /* чтобы внутри можно было позиционировать центр-блок */
	/*width: 1920px;*/
	/*height: 760px;*/
	/*background-position: center;*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover; !* заполнение и обрезка по центру *!*/
	display: block;
	overflow: hidden;
	margin: auto;
	min-height: 580px;
}

/* Стиль для отображения длительности видео */
.video-duration {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 20;
	font-family: Arial, sans-serif;
}

/* Контейнер для видео (добавляем position: relative) */
.video-container {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Левый блок (используется для левого окна) */
.left-block{
	position: absolute;
	width: 600px;
	height: 580px;
	left: 35%;
	top: 50%;
	transform: translate(-50%, -50%);
	/*background: rgba(255,255,255,0.9);*/
	background-color: transparent !important;
	border-radius: 20px; /* закруглённые углы */
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	z-index: 5;

}

/* Вложенное окно (пустое место внутри блока) */
.video-window{
	width: 300px;
	height: 550px;
	background: transparent; /* прозрачный фон по умолчанию */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.02) inset;
	display: block;
}

/* Стиль видео-плеера (для левого блока) */
.video-element{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #000;
	border-radius: 12px;
}
.playlist{ display: none; }

/* Скрываем мобильный правый блок по умолчанию (чтобы не показывался на десктопе) */
.mobile-right-block { display: none; }

/* Скрыть три точки (меню) на видеоплеере во всех браузерах */
video::-webkit-media-controls-menu-button { display: none !important; }
video::-webkit-media-controls-panel { overflow: hidden !important; }
video::-webkit-media-controls-enclosure { overflow: hidden !important; }
video::-webkit-media-controls { overflow: hidden !important; }
video::-webkit-media-controls-overlay-play-button { display: none !important; }
video::-webkit-media-controls-timeline-container { overflow: hidden !important; }
video::-webkit-media-controls-timeline { overflow: hidden !important; }
video::-webkit-media-controls-fullscreen-button { display: block !important; }
video::-webkit-media-controls-play-button { display: block !important; }
video::-webkit-media-controls-volume-slider { display: block !important; }
video::-moz-media-controls { display: none !important; }

/* Адаптивное поведение для меньших экранов — сохраняет пропорции */
@media (max-width: 1920px){
	.hero-block{
		width: 100%;
		height: calc(100vw * 760 / 1920);
		max-height: 760px;
	}
}

/* Кнопка play по центру видео */
.center-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.25);
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: background 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.center-play-btn:hover {
	background: rgba(255,255,255,0.4);
}
.center-play-btn svg {
	width: 40px;
	height: 40px;
	fill: #222;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.video-window { position: relative; }

/* Правый блок */
.right-block {
	position: absolute;
	width: 320px;
	height: 530px;
	top: 50%;
	left: 70%;
	transform: translate(-50%, -50%);
	/*background: rgba(255,255,255,0.9);*/
	background-color: transparent !important;
	border-radius: 16px;
	/*border: 1px solid #bcd;*/
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: left 0.2s, top 0.2s;
	flex-direction: column;
}
:root {
	--preview-scale: 1;
	--side-preview-height: 500px;
	--side-preview-width: 120px;
	--side-preview-top: 40px;
	--side-preview-left: 00px;
	--side-preview-right: 00px;
	--mobile-left-width: 65vw;
	--mobile-left-height: 80vh;
	--main-video-width: 220px;
	--main-video-height: 480px;
	--main-video-top: 20px;
	--main-video-left: 50%;
	--mobile-right-width: 350px;
	--mobile-right-height: 100px;
	--mobile-right-top: 82%;
	--mobile-right-left: 50%;
	--mobile-big-preview-width: 220px;
	--mobile-big-preview-height: 450px;
	--mobile-big-preview-top: 33px;
}
/* Стили для ряда превьюшек */
.preview-row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 16px;
}
.video-preview {
	width: calc(63px * var(--preview-scale));
	height: calc(108px * var(--preview-scale));
	background: #eee;
	border-radius: 8px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.2s, width 0.2s, height 0.2s;
}
.video-preview:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	border-color: #888;
}
/* активное превью (текущее видео) */
.video-preview.is-active {
	border-color: #09f;
	box-shadow: 0 0 0 2px rgba(0,153,255,0.35);
}
.video-preview.is-playing {
	border-color: orange !important;
	box-shadow: 0 0 0 2px orange !important;
}
.mobile-preview-video.is-playing {
	border: 2px solid orange !important;
	box-shadow: 0 0 0 2px orange !important;
	z-index: 30;
}
.mobile-preview-video.is-playing {
	z-index: 29;
}

/* Сетка для превьюшек 3x3 */
.preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 16px;
	justify-items: center;
	align-items: center;
	width: 100%;
	margin-top: 16px;
}
.video-preview-container {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.preview-duration {
	position: absolute;
	top: 6px;
	left: 6px;
	min-width: 32px;
	min-height: 20px;
	padding: 2px 6px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-family: Arial, sans-serif;
	border-radius: 4px;
	opacity: 0.92;
	z-index: 2;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.18);
	line-height: 18px;
	font-weight: 500;
}

.side-preview {
	position: absolute;
	top: var(--side-preview-top, 40px);
	height: var(--side-preview-height, 500px);
	width: var(--side-preview-width, 120px);
	z-index: 2;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	transition: border-color 0.2s, opacity 0.2s;
}
.side-preview-left {
	left: var(--side-preview-left, 0px);
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	box-shadow: 2px 0 8px rgba(0,0,0,0.10);
}
.side-preview-right {
	right: var(--side-preview-right, 0px);
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: -2px 0 8px rgba(0,0,0,0.10);
}
.side-preview.active {
	cursor: pointer;
	pointer-events: auto;
	border-color: #3af;
	opacity: 1;
}
.side-preview.inactive {
	pointer-events: none;
	opacity: 0.3;
}
.side-preview:hover.active {
	border-color: #09f;
}
.side-preview-video {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: brightness(0.85) grayscale(0.2);
	opacity: 0.85;
	border-radius: inherit;
	pointer-events: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 700px) {
	body {
		overflow-x: hidden;
	}
	.hero-block {
		width: 100vw;
		/*height: auto;*/
		min-height: 65vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-size: cover;
		background-position: center;
		overflow-x: hidden;
	}
	/* Скрыть все лишнее */
	.right-block,
	.preview-grid,
	.side-preview,
	.center-play-btn,
	#loading-indicator,
	#playlist {
		display: none !important;
	}
	/* Скрыть side-preview внутри left-block */
	.side-preview-left,
	.side-preview-right {
		display: none !important;
	}
	.mobile-left-block {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -60%);
		width: var(--mobile-left-width, 90vw);
		height: var(--mobile-left-height, 60vh);
		/*background: rgba(255,255,255,0.95);*/
		background-color: transparent !important;
		border-radius: 20px;
		border: 1px solid rgba(0,0,0,0.12);
		box-shadow: 0 2px 6px rgba(0,0,0,0.12);
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.mobile-main-video-window {
		display: flex !important;
		position: absolute;
		top: var(--main-video-top, 20px);
		left: var(--main-video-left, 50%);
		transform: translate(-50%, 0);
		width: var(--main-video-width, 220px);
		height: var(--main-video-height, 480px);
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.18);
		z-index: 9999;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border: 1px solid #eee;
	}
	.mobile-right-block {
		display: block !important;
	}
	.mobile-main-video-element {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: contain;
		background: #000;
		border-radius: 16px;
		max-width: 100%;
		max-height: 100%;
	}
	#mobile-main-player {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.mobile-play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90px;
		height: 90px;
		background: rgba(255,255,255,0.35);
		border-radius: 50%;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 10;
		box-shadow: 0 2px 12px rgba(0,0,0,0.18);
		transition: background 0.2s, box-shadow 0.2s;
	}
	.mobile-play-btn svg {
		width: 48px;
		height: 48px;
		fill: #222;
		filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
	}
	.mobile-play-btn:active {
		background: rgba(255,255,255,0.5);
	}
	/* Мобильный нижний блок: участвует в нормальном потоке, чтобы гарантировать отступ 24px */
	.mobile-right-block {
		position: static;
		left: auto;
		transform: none;
		/* фиксируем предсказуемую ширину и авто-высоту */
		width: min(var(--mobile-right-width, 350px), 90vw);
		height: auto;
		background-color: transparent !important;
		border-radius: 20px;
		border: 1px solid rgba(0,0,0,0.12);
		box-shadow: 0 2px 6px rgba(0,0,0,0.12);
		z-index: 1;
		overflow: hidden;
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
	}

	/* Контейнер мобильного видео-блока: вертикальная колонка c гарантированным зазором 24px */
	.mobile-video-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 24px; /* современный способ задать расстояние */
		width: 100%;
	}
	/* Фоллбек для старых браузеров без поддержки flex-gap */
	@supports not (gap: 24px) {
		.mobile-right-block { margin-top: 24px; }
	}

	/* Обёртка верхнего окна на мобилке должна иметь собственную высоту, чтобы нижний блок не налезал */
	.mobile-video-window {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* высота по наибольшему из внутренних абсолютных элементов */
		min-height: calc(var(--main-video-top, 20px) + var(--main-video-height, 480px));
	}

	/* Центруем основное окно относительно контейнера (ранее было абсолютом относительно страницы) */
	.mobile-main-video-window {
		left: 50%;
		transform: translate(-50%, 0);
	}
	.mobile-preview-row {
		display: flex;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		height: 100%;
		padding: 5px 8px;
		box-sizing: border-box;
		scrollbar-width: thin;
		scrollbar-color: #ccc transparent;
		-webkit-overflow-scrolling: touch;
	}
	.mobile-preview-row::-webkit-scrollbar {
		height: 6px;
	}
	.mobile-preview-row::-webkit-scrollbar-track {
		background: transparent;
	}
	.mobile-preview-row::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}
	.mobile-preview-video {
		height: 85px;
		width: auto;
		min-width: 60px;
		max-width: 150px;
		object-fit: cover;
		display: block;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.08);
		flex-shrink: 0;
		cursor: pointer;
		transition: transform 0.2s, box-shadow 0.2s;
	}
	.mobile-preview-video:hover {
		transform: scale(1.05);
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	}
	/* Большая превью справа от основного видео */
	.mobile-big-preview-right {
		position: absolute;
		top: var(--mobile-big-preview-top, 20px);
		left: calc(50% + var(--main-video-width) / 2 + 5px);
		transform: translateX(0);
		width: var(--mobile-big-preview-width, 220px);
		height: var(--mobile-big-preview-height, 480px);
		background: rgba(255,255,255,0.9);
		border-radius: 12px;
		border: 2px solid transparent;
		box-shadow: 0 2px 8px rgba(0,0,0,0.12);
		z-index: 9998;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: border-color 0.2s, opacity 0.2s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.mobile-big-preview-right:hover {
		border-color: #3af;
	}
	.mobile-big-preview-right video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: brightness(0.85) grayscale(0.2);
		opacity: 0.85;
		border-radius: 10px;
		pointer-events: none;
		transition: filter 0.4s, opacity 0.4s;
	}

	/* Большая превью слева от основного видео */
	.mobile-big-preview-left {
		position: absolute;
		top: var(--mobile-big-preview-top, 20px);
		right: calc(50% + var(--main-video-width) / 2 + 5px);
		transform: translateX(0);
		width: var(--mobile-big-preview-width, 220px);
		height: var(--mobile-big-preview-height, 450px);
		background: rgba(255,255,255,0.9);
		border-radius: 12px;
		border: 2px solid transparent;
		box-shadow: 0 2px 8px rgba(0,0,0,0.12);
		z-index: 9998;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: border-color 0.2s, opacity 0.2s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), right 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.mobile-big-preview-left:hover {
		border-color: #3af;
	}
	.mobile-big-preview-left video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: brightness(0.85) grayscale(0.2);
		opacity: 0.85;
		border-radius: 10px;
		pointer-events: none;
		transition: filter 0.4s, opacity 0.4s;
	}

	/* Анимации свайпа */
	@keyframes swipeOutLeft {
		from {
			transform: translate(-50%, 0);
			opacity: 1;
		}
		to {
			transform: translate(-150%, 0);
			opacity: 0;
		}
	}

	@keyframes swipeOutRight {
		from {
			transform: translate(-50%, 0);
			opacity: 1;
		}
		to {
			transform: translate(50%, 0);
			opacity: 0;
		}
	}

	@keyframes swipeInLeft {
		from {
			transform: translate(50%, 0);
			opacity: 0;
		}
		to {
			transform: translate(-50%, 0);
			opacity: 1;
		}
	}

	@keyframes swipeInRight {
		from {
			transform: translate(-150%, 0);
			opacity: 0;
		}
		to {
			transform: translate(-50%, 0);
			opacity: 1;
		}
	}

	.mobile-main-video-window.swipe-left {
		animation: swipeOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.mobile-main-video-window.swipe-right {
		animation: swipeOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.mobile-main-video-window.swipe-in-left {
		animation: swipeInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.mobile-main-video-window.swipe-in-right {
		animation: swipeInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	}

	.mobile-preview-container {
		position: relative;
		display: inline-block;
		background: transparent;
		border-radius: 8px;
		z-index: 10;
	}
	.mobile-preview-container.is-playing {
		border: 0.2px solid orange !important;
		box-shadow: 0 0 0 2px orange !important;
		z-index: 99 !important;
	}
	.mobile-preview-video.is-playing {
		z-index: 98 !important;
	}

	/* Loader для превью */
	.mobile-preview-loader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32px;
		height: 32px;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255,255,255,0.7);
		border-radius: 50%;
	}
	.mobile-preview-loader svg {
		width: 32px;
		height: 32px;
		animation: spin 1s linear infinite;
	}
}