/* Click-to-load YouTube facade (see /video-embed.js). Reserves its box up front so nothing shifts. */
.ytv { margin: 32px 0 12px; max-width: 720px; }
.ytv h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; color: #fff; }
.ytv--center { margin-left: auto; margin-right: auto; text-align: center; }
.ytv--center .ytv-frame--short { margin-left: auto; margin-right: auto; }
.ytv-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--border, rgba(47,107,255,0.2)); border-radius: 4px; cursor: pointer; }
.ytv-frame--short { aspect-ratio: 9 / 16; max-width: 300px; }
.ytv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.2s, transform 0.3s; }
.ytv-frame:hover img, .ytv-frame:focus-visible img { opacity: 1; transform: scale(1.02); }
.ytv-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--blue, #2f6bff); box-shadow: 0 6px 24px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; }
.ytv-frame:not(.ytv-frame--short) .ytv-play { left: 16px; top: auto; bottom: 16px; margin: 0; width: 60px; height: 60px; }
.ytv-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.ytv-frame:hover .ytv-play, .ytv-frame:focus-visible .ytv-play { background: #4f83ff; transform: scale(1.06); }
.ytv-frame:focus-visible { outline: 2px solid #4f83ff; outline-offset: 3px; }
.ytv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytv-cta { margin: 12px 0 0 !important; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft, #8a99ad);  }
.ytv-cta a { color: var(--green, #00ffb7); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ytv-frame img, .ytv-play { transition: none; } .ytv-frame:hover img { transform: none; } }