/* Shared media blocks used by every theme:
 *   .ytl      YouTube lite facade (a link to YouTube; media-lite.js swaps in the
 *             youtube-nocookie player on click, so nothing loads from YouTube before that)
 *   .rs-film  a plain 16:9 film with native controls (preload none)
 * Tune per theme with --ml-radius, --ml-max, --ml-cap (caption colour).
 */
.ytl, .rs-film { margin: 18px 0 0; max-width: var(--ml-max, 560px); }
.ytl-frame, .rs-film video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--ml-radius, 14px); overflow: hidden; background: #0d0d10;
}
.ytl-btn { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.ytl-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytl-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px;
  border-radius: 12px; background: rgba(0, 0, 0, .72); transition: background .2s ease, transform .2s ease;
}
.ytl-play::after {
  content: ""; position: absolute; left: 28px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff;
}
.ytl-btn:hover .ytl-play, .ytl-btn:focus-visible .ytl-play { background: #e5223f; transform: scale(1.06); }
.ytl-btn:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.ytl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytl figcaption, .rs-film figcaption {
  margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ml-cap, inherit); opacity: .8;
}
/* height:auto beats the video's height="1080" attribute, which otherwise made the
 * frame 1080 px tall and, with cover, cropped the film; contain shows the whole frame. */
.rs-film video { height: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .ytl-play { transition: none; } }