/*
 * core/embed/video/featured
 */

.wp-block-embed.is-type-video.is-style-featured {
	display: grid;
	position: relative;
	grid-template-columns: 1fr;
}

.wp-block-embed.is-type-video.is-style-featured :where(.wp-block-embed__wrapper, figcaption) {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.wp-block-embed.is-type-video.is-style-featured figcaption {
	display: flex !important;
	position: relative;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	color: white;
}

/* Play button */
.wp-block-embed.is-type-video.is-style-featured figcaption::before {
	block-size: 72px;
	inline-size: 72px;
	background-image: var(--video--icon--play);
	background-size: cover;
	content: '';
	transition: background 0.3s ease-in-out;
}

.wp-block-embed.is-type-video.is-style-featured:has(.lyt-activated) figcaption {
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	padding: 0;
	clip: rect(0 0 0 0);
	border: 0;
	overflow: hidden;
}


.wp-block-embed.is-type-video.is-style-featured figcaption:not(.block-editor-rich-text__editable) {
	gap: var(--wp--preset--spacing--20);
	pointer-events: none;
}

/* Hide play button when figcaption is present */
.wp-block-embed.is-type-video.is-style-featured:has(figcaption) {
	--video--icon--play--size: 0 0;
}

@media (width >= 1024px) {
	.wp-block-embed.is-type-video.is-style-featured figcaption {
		padding: var(--wp--preset--spacing--60);
	}
}