/* ===================================
   Work video: Video.js 10 player with its default skin, set to the brand through
   the skin's public custom properties (accent green, DM Sans, rounded corners). YouTube links only;
   other providers keep their own embed (iframe rules below).
   The poster is the block's image (slot="poster"), shown before the player script loads too.
=================================== */
.section_work_video .video_box {
	position: relative;
}

.section_work_video .work-video-skin {
	--media-accent-color: var(--wp--preset--color--darkgreen);
	--media-accent-text-color: var(--wp--preset--color--black);
	--media-font-family: var(--wp--preset--font-family--body);
	--media-border-radius: 24px;
	--media-object-fit: cover;
	--media-object-position: center;
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--media-border-radius);
	background: var(--wp--preset--color--black);
	cursor: pointer; /* the whole frame plays and pauses */

	/* the poster: fills the frame before and after the player is ready */
	& > img[slot="poster"] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: var(--media-object-fit);
		object-position: var(--media-object-position);
	}
	/* the YouTube element fills the frame (left at its default 300x150 size, the video plays as a
	   thumbnail in the top-left corner), and its iframe fills the element */
	& > youtube-video {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	/* before the script loads, the YouTube element is just an empty box */
	&:not(:defined) youtube-video {
		display: none;
	}
}

@media (max-width: 768px) {
	.section_work_video .work-video-skin {
		--media-border-radius: 14px;
		--media-scale-unit: 14px;
	}
}

.section_work_video .video_box.playing .block_label {
	display: none;
}

/* other providers (oEmbed iframe) */
.section_work_video .video_box iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
}