/**
 * Video facade — see js/mx-video-facade.js.
 *
 * The height matters as much as the poster: without it the block is 0px tall
 * until the player is injected, so the page has a hole in it and then jumps.
 * 16/9 is the ratio Tilda's own t_video_lazyload__setHeight() computes
 * (0.5625 x width), so reserving it here changes no layout — it just reserves
 * the space up front instead of after the fact.
 */
.mx-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.mx-video > iframe,
.mx-video > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mx-video__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}

.mx-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mx-video__play-shape {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.2s, fill-opacity 0.2s;
}

.mx-video__poster:hover .mx-video__play-shape,
.mx-video__poster:focus-visible .mx-video__play-shape {
    fill: #f00;
    fill-opacity: 1;
}

.mx-video__poster:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Older browsers without aspect-ratio: fall back to the padding trick. */
@supports not (aspect-ratio: 16 / 9) {
    .mx-video {
        height: 0;
        padding-bottom: 56.25%;
    }
}