/* ---------- Блок под «В фокусе» ---------- */
.mfv-block {
	margin: 20px 0 25px;
}

.mfv-thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.mfv-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, opacity .3s ease;
}

.mfv-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45) 100%);
	transition: background .3s ease;
}

.mfv-thumb:hover img,
.mfv-thumb:focus-visible img {
	transform: scale(1.05);
}

.mfv-thumb:focus-visible {
	outline: 3px solid #1090ff;
	outline-offset: 2px;
}

.mfv-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
	line-height: 0;
}

.mfv-play-bg {
	fill: #212121;
	fill-opacity: .8;
	transition: fill .25s ease, fill-opacity .25s ease;
}

.mfv-thumb:hover .mfv-play,
.mfv-thumb:focus-visible .mfv-play {
	transform: translate(-50%, -50%) scale(1.1);
}

.mfv-thumb:hover .mfv-play-bg,
.mfv-thumb:focus-visible .mfv-play-bg {
	fill: #f00;
	fill-opacity: 1;
}

.mfv-caption {
	margin-top: 8px;
	font-family: "Fira Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: #212121;
}

/* ---------- Модальное окно ---------- */
.mfv-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	visibility: hidden;
	transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, visibility 0s linear .3s;
}

.mfv-modal.is-open {
	background: rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	visibility: visible;
	transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, visibility 0s;
}

.mfv-dialog {
	position: relative;
	width: min(1100px, 100%, calc((100vh - 120px) * 16 / 9));
	opacity: 0;
	transform: scale(.92) translateY(20px);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}

.mfv-modal.is-open .mfv-dialog {
	opacity: 1;
	transform: none;
}

.mfv-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .6);
}

.mfv-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mfv-modal-title {
	margin: 12px 0 0;
	color: #fff;
	font-family: "Fira Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

.mfv-close {
	position: absolute;
	top: -48px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.mfv-close:hover,
.mfv-close:focus-visible {
	background: rgba(255, 255, 255, .25);
	transform: rotate(90deg);
	outline: none;
}

html.mfv-lock,
html.mfv-lock body {
	overflow: hidden;
}

@media (max-width: 767px) {
	.mfv-modal {
		padding: 10px;
	}

	.mfv-frame {
		border-radius: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfv-thumb img,
	.mfv-play,
	.mfv-modal,
	.mfv-dialog,
	.mfv-close {
		transition: none !important;
	}
}