.mt-player-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #000;
	container-type: inline-size; /* for caption scaling via cqw */
}

/*
 * Native <video> uses intrinsic dimensions until Plyr wraps it — without this it briefly
 * blows out huge, then shrinks when Plyr applies ratio (legacy JW never had a raw video node).
 */
.resize-class .mt-player-wrap .plyr,
.resize-class .mt-player-wrap .plyr__video-wrapper {
	width: 100%;
	height: 100%;
}
.resize-class .mt-player-wrap video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/*
 * Override the existing site CSS rule:
 *   .resize-class video { position: absolute; width:100%; height:100%; left:0; top:0; }
 * which kicks in at <=800px and would pull our <video> out of the Plyr wrapper.
 */
.resize-class .mt-player-wrap video,
.resize-class .mt-player-wrap .plyr {
	position: static !important;
	left: auto !important;
	top: auto !important;
}

/* Plyr renders captions in .plyr__caption divs (not native ::cue). Override its opaque box. */
.mt-player-wrap .plyr__caption {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: max(14px, min(4cqw, 36px)) !important;
	line-height: 1.25 !important;
	text-shadow:
		-1px -1px 0 #000,
		 1px -1px 0 #000,
		-1px  1px 0 #000,
		 1px  1px 0 #000,
		 0    1px 2px rgba(0,0,0,0.6) !important;
	font-weight: bold !important;
}
.mt-player-wrap .plyr {
	--plyr-captions-background: transparent;
}
.mt-player-wrap .plyr__captions {
	padding: 4px 10px !important;
}
.mt-player-wrap .plyr__captions span + span {
	margin-top: 2px !important;
}

/*
 * Fullscreen: mt-player.js sets:
 *   --mt-caption-fs from displayed picture width;
 *   --mt-fs-caption-bottom / insets so cues sit on the picture, not the letterboxed screen edge.
 */
.mt-player-wrap.mt-player-fullscreen .plyr__captions {
	bottom: var(--mt-fs-caption-bottom, 0) !important;
	left: var(--mt-fs-caption-inset-left, 0) !important;
	right: var(--mt-fs-caption-inset-right, 0) !important;
	width: auto !important;
	box-sizing: border-box !important;
}
.mt-player-wrap.mt-player-fullscreen .plyr__caption {
	font-size: var(--mt-caption-fs, max(14px, min(4cqw, 48px))) !important;
}

/*
 * Fullscreen layout (Plyr):
 * - In-page fallback (.plyr--fullscreen-fallback): fixed overlay; use inset:0 (not 100vw/100vh).
 * - Native :fullscreen: do NOT set position:fixed on the fullscreen element — that breaks WebKit sizing.
 * - Inner .plyr__video-wrapper keeps ratio padding in normal mode; strip it for fullscreen in all cases.
 * - Site mobile CSS (.resize-class video { position:absolute }) must lose in fullscreen.
 */
.mt-player-wrap.mt-player-fullscreen {
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Plyr in-page fullscreen overlay (also forced on iPhone/iPad — see mt-player.js). */
.mt-player-wrap.mt-player-fullscreen .plyr.plyr--fullscreen-fallback {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	margin: 0 !important;
	z-index: 2147483646 !important;
	align-items: stretch !important;
}

/* Desktop / browsers that still use native fullscreen on the .plyr container. */
.mt-player-wrap.mt-player-fullscreen .plyr:fullscreen,
.mt-player-wrap.mt-player-fullscreen .plyr:-webkit-full-screen {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	align-items: stretch !important;
}

.mt-player-wrap.mt-player-fullscreen .plyr__video-wrapper {
	position: relative !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden !important;
}

.resize-class .mt-player-wrap.mt-player-fullscreen video,
.mt-player-wrap.mt-player-fullscreen .plyr video {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Set from mt-player.js during iOS in-page fullscreen (body scroll freeze). */
html.mt-ios-fs-doc-lock {
	height: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
}

/* Plyr theme overrides */
.mt-player-wrap .plyr {
	--plyr-color-main: #0073aa;
}

/* iOS-style skin: frosted glass, white accents, minimal */
.mt-player-wrap[data-skin="ios"] .plyr {
	--plyr-color-main: #fff;
	--plyr-video-control-color: #fff;
	--plyr-video-control-background-hover: rgba(255, 255, 255, 0.25);
	--plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	--plyr-video-range-track-background: rgba(255, 255, 255, 0.35);
	--plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);
	--plyr-range-fill-background: #fff;
	--plyr-range-thumb-background: #fff;
	--plyr-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	--plyr-range-track-height: 4px;
	--plyr-control-radius: 8px;
	--plyr-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
	--plyr-menu-background: rgba(255, 255, 255, 0.95);
	--plyr-menu-color: #1d1d1f;
	--plyr-tooltip-background: rgba(60, 60, 67, 0.9);
	--plyr-tooltip-color: #fff;
}
.mt-player-wrap[data-skin="ios"] .plyr--video .plyr__controls {
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding-top: 24px;
}
.mt-player-wrap[data-skin="ios"] .plyr__control--overlaid {
	background: rgba(255, 255, 255, 0.9);
	color: #1d1d1f;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	border-radius: 50%;
}
.mt-player-wrap[data-skin="ios"] .plyr__control--overlaid:hover,
.mt-player-wrap[data-skin="ios"] .plyr__control--overlaid:focus {
	background: rgba(255, 255, 255, 0.95);
	color: #1d1d1f;
}
.mt-player-wrap[data-skin="ios"] .plyr__control svg {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.mt-player-wrap[data-skin="ios"] .plyr__time {
	opacity: 0.9;
}
.mt-player-wrap[data-skin="ios"] .plyr__menu__container {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Menu rows are .plyr__control too; video-bar hover uses white text + light wash → unreadable on frosted menu */
.mt-player-wrap[data-skin="ios"] .plyr__menu__container .plyr__control:hover,
.mt-player-wrap[data-skin="ios"] .plyr__menu__container .plyr__control:focus-visible,
.mt-player-wrap[data-skin="ios"] .plyr__menu__container .plyr__control[aria-expanded="true"] {
	background: rgba(0, 0, 0, 0.07);
	color: var(--plyr-menu-color, #1d1d1f);
}

/*
 * Mobile: the site CSS sets .resize-class to height:0 + padding-bottom:75% at <=800px.
 * Make .mt-player-wrap fill that responsive container.
 */
@media all and (max-width: 800px) {
	.resize-class .mt-player-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.resize-class .mt-player-wrap .plyr,
	.resize-class .mt-player-wrap video {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}