/* player.css — оформление защищённого плеера и информационных блоков Yoga Mux. */

.yoga-mux-player-wrap {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.yoga-mux-player-wrap mux-player {
	width: 100%;
	height: 100%;
	display: block;
	--controls: auto;
	/* Бренд-акцент ТОЛЬКО на полосе/ползунке прогресса (media-chrome range vars),
	   #49B8D6 = terracotta из theme.json. НЕ через атрибут accent-color — тот красит
	   и hover-фон центрального кластера кнопок, из-за чего появлялась бирюзовая плашка. */
	--media-range-bar-color: #49B8D6;
	--media-range-thumb-background: #49B8D6;
}

/* Вертикальный иммерсивный эфир: портрет 9:16 во весь экран по высоте.
   Только для live (.yoga-mux-live-portrait); записи остаются 16:9. */
.yoga-mux-live-wrap:has(.yoga-mux-live-portrait) {
	flex-direction: column;
	align-items: center;
}
/* Высокая специфичность (> .yoga-mux-live-wrap > .yoga-mux-player-wrap из
   live-chat.css), иначе flex:1 1 60% перебивает наши flex/height. */
.yoga-mux-live-wrap > .yoga-mux-player-wrap.yoga-mux-live-portrait {
	flex: 0 0 auto;
	aspect-ratio: 9 / 16;
	height: min(88vh, 88svh);
	width: auto;
	max-width: 100%;
	min-width: 0;
	border-radius: 0;
}
.yoga-mux-player-wrap.yoga-mux-live-portrait mux-player {
	--media-object-fit: contain; /* портрет вписан без обрезки */
}
.yoga-mux-live-wrap:has(.yoga-mux-live-portrait) .yoga-mux-chat {
	max-width: min(88vh * 9 / 16, 100%);
	width: 100%;
}
@media (max-width: 720px) {
	.yoga-mux-player-wrap.yoga-mux-live-portrait {
		height: 80vh;
		height: 80svh;
		width: 100%;
	}
}

/* Вертикальный плеер ЗАПИСИ урока (.yoga-mux-portrait): 9:16 по центру, В ПОТОКЕ —
   ПОД заголовком, не перекрывая его (не fixed-оверлей). Нативную панель НЕ прячем
   (запись нужно перематывать); кнопка fullscreen в панели даёт полный экран по желанию. */
.yoga-mux-player-wrap.yoga-mux-portrait {
	aspect-ratio: 9 / 16;
	height: min(80vh, 80svh);
	width: auto;
	max-width: 100%;
	margin: 16px auto;
	border-radius: 12px;
}
.yoga-mux-player-wrap.yoga-mux-portrait mux-player {
	--media-object-fit: contain; /* портрет вписан без обрезки */
}
@media (max-width: 720px) {
	.yoga-mux-player-wrap.yoga-mux-portrait {
		height: auto;
		width: 100%;
	}
}

/* «Сразу видео»: на странице эфира прячем шапку/футер/баннер темы и
   разворачиваем эфир на весь экран (fixed-оверлей). Триггер — наличие
   live-плеера (.yoga-mux-live-portrait), поэтому записи (16:9) не затрагиваются.
   :has() поддержан современными браузерами. */
body:has(.yoga-mux-live-portrait) {
	overflow: hidden !important;
	background: #000 !important;
}
body:has(.yoga-mux-live-portrait) header.wp-block-template-part,
body:has(.yoga-mux-live-portrait) footer.wp-block-template-part,
body:has(.yoga-mux-live-portrait) .announce {
	display: none !important;
}
body:has(.yoga-mux-live-portrait) .yoga-mux-live-wrap {
	position: fixed;
	inset: 0;
	z-index: 100000;
	margin: 0;
	padding: 8px 0;
	gap: 10px;
	background: #000;
	overflow: auto;
	justify-content: center;
}

/* Отдельные плавающие кнопки эфира вместо штатной панели-«полоски» mux-player.
   Прячем все встроенные контролы (CSS-переменные mux-player --*: none); tap по
   видео = play/pause (встроенный gesture-receiver остаётся). */
/* Прячем штатные контролы mux-player — обе панели-«полоски» (control-bar top/bottom)
   и центральную кнопку play — через ::part (надёжнее переменных --*; exportparts
   у mux-player пробрасывает их наружу). Tap по видео = play/pause (gesture-receiver). */
.yoga-mux-live-portrait mux-player::part(control-bar),
.yoga-mux-live-portrait mux-player::part(center play button) {
	display: none !important;
}
/* Иммерсивный вид: мягкое «стекло», тонкая обводка, тень, тактильный нажим.
   Кнопки авто-скрываются через 3с бездействия — player.js тогглит
   .yoga-controls-hidden на обёртке (.yoga-mux-live-portrait). */
.yoga-vbtn {
	position: absolute; z-index: 6; width: 52px; height: 52px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
	background: rgba(18, 20, 26, .5); color: #fff; display: flex;
	align-items: center; justify-content: center; cursor: pointer;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
	transition: opacity .25s ease, transform .18s ease, visibility .25s ease, background .2s ease;
}
.yoga-vbtn:hover { background: rgba(28, 30, 38, .72); }
.yoga-vbtn:active { transform: scale(.9); }
.yoga-vbtn svg { width: 26px; height: 26px; display: block; }
.yoga-vbtn-sound { top: 16px; right: 16px; }
.yoga-vbtn-fs { bottom: 16px; right: 16px; }
.yoga-vbtn-sound .i-off { display: none; }
.yoga-vbtn-sound.is-muted .i-on { display: none; }
.yoga-vbtn-sound.is-muted .i-off { display: block; }

/* Градиент-подложки сверху/снизу — читабельность кнопок над ярким видео.
   Гаснут вместе с кнопками. pointer-events:none — не мешают тапу play/pause. */
.yoga-mux-live-portrait::before,
.yoga-mux-live-portrait::after {
	content: ""; position: absolute; left: 0; right: 0; height: 22%;
	z-index: 4; pointer-events: none; opacity: 1; transition: opacity .25s ease;
}
.yoga-mux-live-portrait::before {
	top: 0; background: linear-gradient(rgba(0, 0, 0, .38), transparent);
}
.yoga-mux-live-portrait::after {
	bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .38));
}

/* Скрытое состояние: кнопки и подложки плавно исчезают, тап проходит к видео. */
.yoga-mux-live-portrait.yoga-controls-hidden .yoga-vbtn {
	opacity: 0; visibility: hidden; pointer-events: none;
}
.yoga-mux-live-portrait.yoga-controls-hidden::before,
.yoga-mux-live-portrait.yoga-controls-hidden::after {
	opacity: 0;
}

.yoga-mux-player-error {
	position: absolute;
	inset: auto 0 0 0;
	padding: 10px 14px;
	background: rgba(180, 30, 30, 0.92);
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.yoga-mux-notice {
	max-width: 960px;
	margin: 1em auto;
	padding: 16px 20px;
	background: #f5f5f7;
	border: 1px solid #e2e2e7;
	border-radius: 10px;
	color: #333;
	font-size: 15px;
	line-height: 1.5;
}

.yoga-mux-notice a {
	font-weight: 600;
}

.yoga-mux-pay-form {
	max-width: 960px;
	margin: 1em auto;
	padding: 20px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 10px;
	text-align: center;
}

/* Заставка эфира: перекрывает плеер (и mux-ошибку «not available» + красную
   плашку) до фактического старта вещания. z-index 5 — выше видео и ошибки, но
   ниже чата/кнопок (z-index 6), чтобы чат оставался доступен. JS прячет её на
   событие `playing` (см. player.js). */
.yoga-live-poster {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: #11161c;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}
.yoga-live-poster[hidden] { display: none; }
.yoga-live-poster__text {
	font: 600 clamp(18px, 4.5vw, 28px)/1.25 -apple-system, system-ui, sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, .38);
	padding: 10px 18px;
	border-radius: 12px;
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}