.wp-block-embed:is(.is-provider-bilibili, .is-provider-youtube) .wp-block-embed__wrapper {
	max-width: 100%;
}

/* Native Video blocks follow the same vertical rhythm as other editorial media. */
body .wp-block-video {
	margin-block: var(--wp--preset--spacing--40) !important;
}

.loyseo-native-video__shell {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface-muted);
}

.loyseo-native-video__shell video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The component itself owns the aspect ratio, so the core Embed placeholder
 * must not reserve a second 16:9 area above it. */
.wp-block-embed:is(.is-provider-bilibili, .is-provider-youtube).wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
	content: none;
	display: none;
	padding-top: 0;
}

.loyseo-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--surface-muted);
}

.loyseo-video-embed__poster,
.loyseo-native-video__poster {
	position: absolute;
	inset: 0;
	display: grid !important;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--surface-soft) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.loyseo-video-embed__poster::before,
.loyseo-native-video__poster::before {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--text-heading) 12%, transparent);
	content: '';
	transition: background-color 160ms ease;
}

.loyseo-video-embed__poster:hover::before,
.loyseo-video-embed__poster:focus-visible::before,
.loyseo-native-video__poster:hover::before,
.loyseo-native-video__poster:focus-visible::before {
	background: color-mix(in srgb, var(--wp--preset--color--text-heading) 20%, transparent);
}

.loyseo-video-embed__poster img,
.loyseo-native-video__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loyseo-video-embed__play {
	position: absolute;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding-left: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface-white);
	font-size: 26px;
	line-height: 1;
	transition: transform 160ms ease;
}

.loyseo-video-embed__poster:hover .loyseo-video-embed__play,
.loyseo-video-embed__poster:focus-visible .loyseo-video-embed__play,
.loyseo-native-video__poster:hover .loyseo-video-embed__play,
.loyseo-native-video__poster:focus-visible .loyseo-video-embed__play {
	transform: scale(1.08);
}

.loyseo-video-embed__poster:focus-visible,
.loyseo-native-video__poster:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-primary);
	outline-offset: -3px;
}

.loyseo-video-embed iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}