/*
 * Post video styles (Plan 10)
 *
 * Applied to:
 *   - .video-embed-wrapper    — YouTube/Vimeo iframe embeds via VideoEmbedTagHelper
 *   - .post-detail-header-video / .post-header-video — self-hosted header videos
 *   - .dam-video-wrapper / .dam-video-player         — inline {{File:}} video refs
 */

/* Responsive 16:9 iframe container for YouTube/Vimeo embeds. */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
}

/* Older-browser fallback using padding-hack. `aspect-ratio` kicks in on modern browsers. */
@supports not (aspect-ratio: 16 / 9) {
    .video-embed-wrapper {
        padding-top: 56.25%;
        height: 0;
    }
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Self-hosted header video in the post sidebar. */
.post-detail-header-video {
    width: 100%;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
}

.post-header-video {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000;
}

/* Inline {{File:id}} video reference, produced by ContentReferenceResolver. */
.dam-video-wrapper {
    margin: 1rem 0;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.dam-video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #000;
}

/* Respect prefers-reduced-motion — never autoplay. (Markup never sets autoplay,
   but if a future editor does, this keeps calm browsers calm.) */
@media (prefers-reduced-motion: reduce) {
    .post-header-video,
    .dam-video-player {
        /* Suppress any inline autoplay attribute would-be authors might add. */
        animation: none;
    }
}