/**
 * Blue Frame Films: video-player.css
 *
 * Purpose:  Portfolio/Originals video cards and the lightbox.
 *           Wide Media Library videos (.bf-wide) play inside the card; vertical ones
 *           (.bf-vertical) show a blurred poster with a centered 9:16 frame and open the
 *           lightbox (.bf-lb). YouTube cards (.bf-yt) are a poster facade that opens the
 *           lightbox with a youtube-nocookie.com player (9:16, or 16:9 with .bf-lb-wide).
 *           Instagram/TikTok/Facebook cards (.bf-vext-media) show a "Watch on ..." button.
 * Used by:  blueframe_video_media() in inc/portfolio-videos.php; the lightbox <dialog> is
 *           created by assets/js/video-player.js.
 * To edit:  Lightbox video height: .bf-lb video (max 84% of the viewport height).
 *           Must load after portfolio.css (it overrides .media's background).
 */

/* ==========================================================================
   Video card media
   ========================================================================== */
.bf-vmedia {
	background-color: #02040a;
}

.bf-vmedia video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
}

/* Vertical video: poster button that opens the lightbox */
.bf-vopen {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	cursor: pointer;
	overflow: hidden;
}

.bf-vmedia.bf-inline video {
	background: transparent; /* the painted poster (see components.css .bf-framed) shows until it plays */
}

.bf-vmedia.bf-inline video:not([poster]) {
	background: #000;
}

.bf-vopen .play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(5,7,13,.6);
	border: 2px solid var(--elec2);
	display: grid;
	place-items: center;
	box-shadow: 0 0 30px rgba(0,194,255,.35);
	transition: transform .15s ease,background .15s ease;
}

.bf-vopen .play::before {
	content: "";
	border-left: 16px solid var(--elec2);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 5px;
}

.bf-vopen:hover .play,
.bf-vopen:focus-visible .play {
	transform: translate(-50%,-50%) scale(1.08);
	background: rgba(30,123,255,.35);
}

.bf-vopen:focus-visible {
	outline: 2px solid var(--elec2);
	outline-offset: -4px;
}

.bf-vbadge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	background: rgba(5,7,13,.78);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 3px 7px;
	color: #cfe0ff;
}

/* Instagram / TikTok / Facebook: still + "Watch on ..." button (opens a new tab) */
.bf-vext {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: rgba(5,7,13,.8);
	border: 1px solid var(--elec2);
	border-radius: 999px;
	padding: 8px 16px;
	box-shadow: 0 0 24px rgba(0,194,255,.3);
}

.bf-vext:hover,
.bf-vext:focus-visible {
	background: rgba(30,123,255,.45);
	outline: none;
}

/* ==========================================================================
   Lightbox (<dialog class="bf-lb">)
   ========================================================================== */
.bf-lb {
	padding: 0;
	border: 0;
	background: transparent;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	color: var(--text);
}

.bf-lb::backdrop {
	background: rgba(2,4,9,.9);
}

.bf-lb-inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px 24px;
	box-sizing: border-box;
}

.bf-lb video {
	height: min(84vh,calc((100vw - 32px) * 16 / 9));
	height: min(84dvh,calc((100vw - 32px) * 16 / 9));
	aspect-ratio: 9/16;
	max-width: 100%;
	background: #000;
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(0,194,255,.25),0 20px 80px rgba(0,0,0,.7);
}

.bf-lb-title {
	position: absolute;
	top: 18px;
	left: 20px;
	right: 72px;
	margin: 0;
	font-weight: 700;
	font-size: .95rem;
	color: #cfe0ff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bf-lb-close {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0,194,255,.5);
	background: rgba(5,7,13,.7);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.bf-lb-close:hover {
	background: rgba(30,123,255,.35);
}

/* Wide file video (Home "Watch with sound", since 2.6.2): 16:9 */
.bf-lb-wide video {
	height: auto;
	width: min(calc(100vw - 32px),calc(84vh * 16 / 9));
	width: min(calc(100vw - 32px),calc(84dvh * 16 / 9));
	aspect-ratio: 16/9;
}

/* YouTube player inside the lightbox (created on click by video-player.js) */
.bf-lb-frame {
	display: none;
}

.bf-lb-yt video {
	display: none;
}

.bf-lb-yt .bf-lb-frame {
	display: block;
	height: min(84vh,calc((100vw - 32px) * 16 / 9));
	height: min(84dvh,calc((100vw - 32px) * 16 / 9));
	aspect-ratio: 9/16;
	max-width: 100%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0,194,255,.25),0 20px 80px rgba(0,0,0,.7);
}

.bf-lb-yt.bf-lb-wide .bf-lb-frame {
	height: auto;
	width: min(calc(100vw - 32px),calc(84vh * 16 / 9));
	width: min(calc(100vw - 32px),calc(84dvh * 16 / 9));
	aspect-ratio: 16/9;
}

.bf-lb-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}