/**
 * Front-end styles for the "JWPlayer Video" block (edl/logged-video).
 *
 * Deliberately minimal — the block saves plain markup so a designer can restyle
 * or override any of this from the theme.
 *
 * The frame must stay `position: relative`: brighcove-player.js replaces the
 * saved iframe with a <video-js> it positions `absolute; inset: 0` inside this
 * same element, and JWPlayer is loaded into it directly.
 */

.edl-logged-video {
	margin: 0 0 1.5em;
}

.edl-logged-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.edl-logged-video.is-ratio-4-3 .edl-logged-video__frame {
	aspect-ratio: 4 / 3;
}

.edl-logged-video.is-ratio-1-1 .edl-logged-video__frame {
	aspect-ratio: 1 / 1;
}

.edl-logged-video.is-ratio-9-16 .edl-logged-video__frame {
	aspect-ratio: 9 / 16;
	max-width: 420px;
}

.edl-logged-video__frame > iframe,
.edl-logged-video__frame > video-js,
.edl-logged-video__frame > .video-js {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * JWPlayer builds its own player inside the (empty) frame and sizes itself to
 * the media, so the ratio above is only a placeholder until it loads — release
 * it once the player is in, and let JW own the height.
 */
.edl-logged-video--jwplayer .edl-logged-video__frame:not(:empty) {
	aspect-ratio: auto;
	height: auto;
	background: transparent;
}

.edl-logged-video--jwplayer .edl-logged-video__frame > .jwplayer {
	position: static;
	width: 100%;
	height: auto;
}

/*
 * Audio. The LIBRARY owns the player's height: JWPlayerManager sets
 * `height: AUDIO_PLAYER_HEIGHT` with `aspectratio: false`, so the player renders
 * its own compact bar. Do NOT re-declare that height here — an earlier version
 * of the video guide showed a `.jwplayer { height: 40px !important }` override,
 * but that was removed once the library started sizing itself, and duplicating
 * the constant would silently fight it if it ever changes.
 *
 * All this rule does is stop OUR frame imposing a 16:9 box on it. `is-audio` is
 * written by the block from the file extension so the frame is already the right
 * shape during load; `data-mediatype="audio"` is stamped on the same element by
 * the library once the player is ready. min-height is only a pre-load
 * placeholder — being a floor rather than a height, it can never override a
 * taller player.
 */
.edl-logged-video.is-audio .edl-logged-video__frame,
.edl-logged-video__frame[data-mediatype="audio"] {
	aspect-ratio: auto;
	height: auto;
	min-height: 40px;
	background: transparent;
}

.edl-logged-video__caption {
	margin-top: 0.5em;
	font-size: 0.85em;
	text-align: center;
}

/* No aspect-ratio support (older Safari / Edge): fall back to a padding box. */
@supports not ( aspect-ratio: 16 / 9 ) {
	.edl-logged-video__frame {
		height: 0;
		padding-top: 56.25%;
	}

	.edl-logged-video.is-ratio-4-3 .edl-logged-video__frame {
		padding-top: 75%;
	}

	.edl-logged-video.is-ratio-1-1 .edl-logged-video__frame {
		padding-top: 100%;
	}

	.edl-logged-video.is-ratio-9-16 .edl-logged-video__frame {
		padding-top: 177.78%;
	}

	.edl-logged-video--jwplayer .edl-logged-video__frame:not(:empty),
	.edl-logged-video.is-audio .edl-logged-video__frame,
	.edl-logged-video__frame[data-mediatype="audio"] {
		height: auto;
		padding-top: 0;
	}
}