/**
 * Обложка гида с видео: список гидов, страница гида, карточка гида в туре.
 *
 * Ролик лежит внутри той же рамки, что раньше занимало фото, и наследует её
 * размер и скругление. Видимую часть кадра задают переменные --gv-x/--gv-y
 * (точка, которая должна остаться в кадре) и --gv-zoom (насколько её приблизить);
 * значения приходят из полей гида инлайном.
 */

.guide-video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Повторяем скругление рамки, в которую встали: 16px на обложках гида,
	   прямой угол в карточке тура. */
	border-radius: inherit;
	background: #1f6044;
	cursor: pointer;
}

.guide-video__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Точку фокуса держим и при обрезке по краям, и при увеличении: object-position
	   выбирает её из того, что не влезло в рамку, а transform-origin не даёт ей
	   уехать, когда кадр приближают. */
	object-position: var(--gv-x, 50%) var(--gv-y, 50%);
	transform: scale(var(--gv-zoom, 1));
	transform-origin: var(--gv-x, 50%) var(--gv-y, 50%);
	background: #1f6044;
}

/* Кнопка — подсказка, что по клику ролик развернётся со звуком. */
.guide-video__play {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(6, 53, 34, 0.55);
	transition: background 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.guide-video:hover .guide-video__play {
	background: rgba(6, 53, 34, 0.8);
	transform: translateY(-2px);
}

.guide-video__play svg {
	width: 15px;
	height: 15px;
	fill: #fff;
	stroke: none;
	transform: translateX(1px);
}

/* Рамки обложек: видео позиционируется от них. */

.guide__img--video,
.guide__img_big--video {
	position: relative;
	/* Фон рамка обрезала скруглением сама, а вложенное видео — нет. */
	overflow: hidden;
}

.tour-guide-card__avatar--video {
	position: relative;
	line-height: 0;
}

@media (max-width: 767px) {
	.guide-video__play {
		bottom: 8px;
		left: 8px;
		width: 32px;
		height: 32px;
	}
}

/* Лайтбокс: ролик во весь экран и со звуком. Пропорцию окна подставляет
   js/guide-video.js по самому видео, иначе вертикальный ролик вписывается
   в горизонтальную рамку Fancybox с чёрными полями по бокам.
   !important — Fancybox пишет размеры окна инлайном. */

.guide-video-lightbox {
	--gv-lb-ratio: 0.5625;

	--fancybox-bg: rgba(5, 12, 8, 0.94);
}

.guide-video-lightbox .fancybox__slide.has-html5video {
	padding: 12px;
}

.guide-video-lightbox .fancybox__slide.has-html5video.has-close-btn {
	padding-top: 52px;
}

.guide-video-lightbox .has-html5video .fancybox__content {
	width: min(100%, calc((100svh - 76px) * var(--gv-lb-ratio))) !important;
	height: auto !important;
	max-height: calc(100svh - 76px);
	overflow: hidden;
	border-radius: 18px;
	background: #0a140e;
	aspect-ratio: var(--gv-lb-ratio) !important;
}

.guide-video-lightbox .fancybox__html5video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #0a140e;
}

@media (max-width: 767px) {
	.guide-video-lightbox .fancybox__slide.has-html5video,
	.guide-video-lightbox .fancybox__slide.has-html5video.has-close-btn {
		padding: 10px;
	}

	.guide-video-lightbox .has-html5video .fancybox__content {
		width: min(100%, calc((100svh - 20px) * var(--gv-lb-ratio))) !important;
		max-height: calc(100svh - 20px);
		border-radius: 14px;
	}
}