/**
 * Responsive video box — shared by the admin editor and the public site.
 *
 * Markup produced by VideoEmbed::iframe():
 *
 *   <figure class="sl-video sl-video--youtube sl-video--r-16x9">
 *       <iframe src="..." title="YouTube video" loading="lazy" allowfullscreen ...></iframe>
 *   </figure>
 *
 * The box is never sized in pixels: it fills the content column and takes its
 * height from the ratio class, so one embed fits a 1440px desktop and a 390px
 * phone without a scrollbar. Portrait and square ratios are capped and centred
 * — at full column width a 9:16 player would be ~1390px tall.
 */

.sl-video {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 25px;
    background: #000;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
}

.sl-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ratio classes (the closed list in VideoEmbed::RATIOS). */
.sl-video--r-16x9 { aspect-ratio: 16 / 9; }
.sl-video--r-9x16 { aspect-ratio: 9 / 16; max-width: 405px; }
.sl-video--r-1x1  { aspect-ratio: 1 / 1;  max-width: 640px; }
.sl-video--r-4x3  { aspect-ratio: 4 / 3; }
.sl-video--r-4x5  { aspect-ratio: 4 / 5;  max-width: 500px; }

/* Inside the writing surface: tighter rhythm, and a visible boundary — a real
   player inside a contenteditable otherwise reads as part of the background. */
.sl-editor-visual .sl-video {
    margin: 0 0 18px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}