/**
 * YouTube consent placeholder + activated embed.
 *
 * Same conventions as the consent UI: theme semantic tokens (light/dark
 * automatic), card radius (spacing--20), no borders around rounded
 * surfaces. Fully first-party: the poster is the post's featured image or
 * the plain surface card.
 */

.cs-embed {
	margin: 0;
}

/* Core's responsive-embed CSS (.wp-embed-responsive + wp-embed-aspect-*)
   gives the wrapper a percentage-padding ::before spacer sized for an
   absolutely-positioned iframe. Our placeholder is normal flow, so that
   spacer renders as pure whitespace — drop it when the wrapper holds a
   consent placeholder; the placeholder brings its own 16:9 box. */
.wp-block-embed:has(> .wp-block-embed__wrapper > .cs-embed) .wp-block-embed__wrapper::before {
	content: none;
}

.cs-embed__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--color-surface, #eee);
	border-radius: var(--wp--preset--spacing--20, 1rem);
	overflow: hidden;
}

.cs-embed__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The trigger is a JS-only control: without the consent runtime (no-JS
   visitors) it stays hidden and the figcaption's watch link is the path. */
.cs-embed .cs-consent-trigger {
	display: none;
	position: relative;
	z-index: 1;
	border: none;
	cursor: pointer;
	padding: 0.75em 1.5em;
	border-radius: 999px;
	background: var(--color-base, #fff);
	color: var(--color-contrast, #111);
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.cs-consent-ready .cs-embed .cs-consent-trigger {
	display: inline-block;
}

.cs-embed .cs-consent-trigger:hover,
.cs-embed .cs-consent-trigger:focus-visible {
	background: var(--color-contrast, #111);
	color: var(--color-base, #fff);
}

.cs-embed__caption {
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--color-text-muted, inherit);
	margin-block-start: 0.5em;
}

/* Post-consent iframe (created by youtube.js). */

.cs-embed__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--preset--spacing--20, 1rem);
}