/* Content element r2_video — embed and self-hosted video */

.frame-type-r2_video .embeddedvideo{ position:relative; }
.frame-type-r2_video .aspect-ratio-16-9{ position:relative; height:0; overflow:hidden; padding-bottom:56.25%; }
.frame-type-r2_video .aspect-ratio-24-10{ position:relative; height:0; overflow:hidden; padding-bottom:41.66666667%; }

    .frame-type-r2_video iframe,
    .frame-type-r2_video .local-video{
        position:absolute; top:0; left:0; width:100%; height:100%;
    }


    /*###
    //# Poster and play button
    ###*/
    /*
    Without poster image the background acts as neutral placeholder.
    isolation keeps the inner z-indexes below the iframe inserted after the click.
    */
    .frame-type-r2_video .consent{
        position:absolute; top:0; left:0; width:100%; height:100%; isolation:isolate;
        display:grid; place-items:center;
        background:rgb(var(--rgb_color_value_background_dark));
    }
    .frame-type-r2_video .consent[hidden]{ display:none; }
        .frame-type-r2_video .consent > img{
            position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
            transition:transform 0.3s ease;
        }
        .frame-type-r2_video .consent:has(.play:hover, .play:focus-visible) > img{ transform:scale(1.02); }

        /*
        The round button is the focusable element and keeps the global focus ring.
        ::after stretches its click area over the whole poster: the button is a static grid item,
        so .consent is the containing block; z-index works on grid items without position.
        Do not position or transform .play, that would shrink the click area to the button.
        */
        .frame-type-r2_video .play{ z-index:1; width:15%; aspect-ratio:1; border-radius:50%; transition:width 0.3s; }
        .frame-type-r2_video .play:hover{ width:14%; }
            .frame-type-r2_video .play::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; }
            .frame-type-r2_video .play svg{ display:block; width:100%; height:100%; opacity:0.3; transition:opacity 0.3s; }
            .frame-type-r2_video .play:hover svg,
            .frame-type-r2_video .play:focus-visible svg{ opacity:0.6; }

        /* Above the stretched click area, so links in the notice stay clickable */
        .frame-type-r2_video .consent figcaption{
            position:absolute; left:0; bottom:0; z-index:2; width:100%; padding:10px;
            background-color:rgba(0,0,0,0.2); color:#fff;
            font-size:var(--font-size-s-2); line-height:var(--line-height-s-2);
        }
            .frame-type-r2_video .consent figcaption a{ color:#fff; }

    .frame-type-r2_video .embeddedvideo + figcaption{ margin-top:var(--gap-s); }
    /* Full-bleed has no .centered wrapper; same horizontal inset as the privacy notice */
    .frame-type-r2_video > figure > .embeddedvideo + figcaption{ padding-left:10px; padding-right:10px; }

    /*### //# Local video (active state) ###*/
    .frame-type-r2_video .local-video-wrapper.is-local-video-active .play{ display:none; }
    .frame-type-r2_video .local-video[hidden]{ display:none; }
    .frame-type-r2_video .local-video-wrapper.is-local-video-active .local-video{
        display:block; object-fit:contain; background:#000;
    }

@media (prefers-reduced-motion:reduce){
    .frame-type-r2_video .consent > img,
    .frame-type-r2_video .play,
    .frame-type-r2_video .play svg{ transition:none; }
}