/* Light YouTube embed (includes/embeds.php): thumbnail + play disc, replaced by the player on click.
   Scoped to the facade, so it looks the same wherever a YouTube Embed block is used (video page, About story...).
   Colours/spacing come from the KCG theme presets. */
.kcg-yt {
	--kcg-yt-disc: 64px; /* play disc diameter */
	--kcg-yt-ic: 30px; /* play icon inside the disc */
	--kcg-yt-zoom: .5s var(--wp--custom--ease); /* thumbnail zoom on hover */
	--kcg-yt-pop: .25s var(--wp--custom--ease); /* play disc grow on hover */
	--kcg-yt-ring: -2px; /* focus ring drawn inside: the frame clips anything outside */
	position: relative;
	aspect-ratio: 16 / 9; /* when the block has no aspect-ratio class */
	overflow: hidden;
	background: var(--wp--preset--color--deep);
}
.wp-embed-responsive .wp-has-aspect-ratio .kcg-yt { aspect-ratio: auto; } /* core sizes the box (16:9, 4:3...) */
.kcg-yt__btn, .kcg-yt__nojs, .kcg-yt > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.kcg-yt__btn { display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
/* The ring sits on a layer above the thumbnail: once zoomed, the image paints over the button's own outline */
.kcg-yt__btn::after { content: ""; position: absolute; inset: 0; }
.kcg-yt__btn:focus-visible { outline: none; }
.kcg-yt__btn:focus-visible::after, .kcg-yt__nojs:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: var(--kcg-yt-ring); }
/* maxresdefault.jpg is 16:9 and fits exactly; the hqdefault.jpg fallback is 4:3 with black bars, cover crops them away */
.kcg-yt__btn img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--kcg-yt-zoom); }
.kcg-yt__play { position: absolute; inset: 0; display: grid; place-items: center; width: var(--kcg-yt-disc); height: var(--kcg-yt-disc); margin: auto; border-radius: 50%; background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); box-shadow: var(--wp--preset--shadow--float); transition: transform var(--kcg-yt-pop); }
.kcg-yt__play svg { width: var(--kcg-yt-ic); height: var(--kcg-yt-ic); fill: currentColor; }
.wp-block-embed:hover .kcg-yt__btn img, .kcg-yt__btn:focus-visible img { transform: scale(1.04); }
.wp-block-embed:hover .kcg-yt__play, .kcg-yt__btn:focus-visible .kcg-yt__play { transform: scale(1.08); }
.kcg-yt > iframe { border: 0; }
/* the caption plays the video too (assets/embeds.js), as the hover zoom above promises */
.wp-block-embed:has(.kcg-yt__btn) > .wp-element-caption { cursor: pointer; }
.kcg-yt__nojs { font-size: 0; } /* scripts off: the whole thumbnail links to YouTube; its text is for screen readers */