/* Click-to-play YouTube block. From .yt / .play / .muted in the design. */
.sg-yt { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.sg-yt-start { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.sg-yt-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-yt-title { position: absolute; left: 20px; right: 20px; top: 18px; font: 600 15px/1.35 Inter, system-ui, sans-serif; color: #ddd; }
.sg-yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; background: #e62117; border-radius: 12px; transition: transform 0.15s ease; }
.sg-yt-play::after { content: ""; position: absolute; left: 28px; top: 15px; border-left: 20px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sg-yt-start:hover .sg-yt-play, .sg-yt-start:focus-visible .sg-yt-play { transform: scale(1.08); }
.sg-yt-start:focus-visible { outline: 3px solid #2a2ad0; outline-offset: -3px; }
.sg-yt-note { position: absolute; right: 16px; bottom: 14px; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.08em; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 7px 10px; border-radius: 6px; }
.sg-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 782px) {
	.sg-yt-play { width: 60px; height: 42px; margin: -21px 0 0 -30px; }
	.sg-yt-play::after { left: 23px; top: 11px; }
	.sg-yt-note { right: 10px; bottom: 10px; }
}