/* Video library and player (videos/index and videos/show). */

/* List card: dark tile behind the cover image, play badge and duration over it. */
.vd-media { position: relative; display: block; background: #0b1b33; }
.vd-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vd-badge {
    position: absolute; inset: 0; margin: auto; width: 3.25rem; height: 3.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: rgba(11, 27, 51, .72); color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.vd-badge svg { width: 1.5rem; height: 1.5rem; margin-left: .15rem; }
.vd-duration {
    position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .45rem;
    border-radius: .375rem; background: rgba(11, 27, 51, .82); color: #fff; font-size: .75rem;
}

/* Player: 16:9 box. The click-to-load button fills it; the iframe replaces the button. */
.vd-embed, .vd-player { width: 100%; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden; background: #0b1b33; }
.vd-player { display: block; background: #000; }
.vd-embed__btn {
    position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
    background: #0b1b33;
}
.vd-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-embed__play {
    position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: rgba(11, 27, 51, .78); color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); transition: transform .15s ease;
}
.vd-embed__play svg { width: 2.25rem; height: 2.25rem; margin-left: .25rem; }
.vd-embed__btn:hover .vd-embed__play, .vd-embed__btn:focus-visible .vd-embed__play { transform: scale(1.08); }
.vd-embed__btn:focus-visible { outline: 3px solid #f2c200; outline-offset: -3px; }
.vd-embed__frame { display: block; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .vd-embed__play { transition: none; }
}