/* Video block: layout only; card styling in own-styles.less */
.video-block {
    max-width: 100%;
}

/* Plyr: transparent so card background shows */
.video-block .content-blocker-content,
.video-block .plyr,
.video-block .plyr__video-wrapper,
.video-block .plyr__poster,
.video-block .plyr__video-embed,
.video-block .plyr__video-embed__container {
    --plyr-video-background: transparent;
    background-color: transparent !important;
    background: transparent !important;
}

/* Self-hosted: center, fit content, keep aspect ratio */
.video-block .js-plyr-self-hosted,
.video-block .js-plyr-self-hosted .plyr {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    overflow: hidden;
}
.video-block .js-plyr-self-hosted .plyr__video-wrapper {
    width: fit-content;
    max-width: 100%;
    max-height: 80vh;
    aspect-ratio: auto;
}

/* YouTube/Vimeo: 16:9, remove Plyr extra padding */
.video-block .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
    padding-bottom: 56.25% !important;
    transform: none !important;
}
.video-block .content-blocker-content .plyr__video-embed {
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 6px;
    overflow: hidden;
}

.video-block video {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto !important;
    height: auto !important;
}

.video-block .content-blocker-content iframe {
    width: 100%;
    height: 100%;
}

/* Show play/pause button only on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    .video-block .plyr .plyr__control--overlaid,
    .video-block .plyr .plyr__controls button[data-plyr="play"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 160ms ease, visibility 0s linear 160ms;
    }

    .video-block .plyr:hover .plyr__control--overlaid,
    .video-block .plyr:focus-within .plyr__control--overlaid,
    .video-block .plyr:hover .plyr__controls button[data-plyr="play"],
    .video-block .plyr:focus-within .plyr__controls button[data-plyr="play"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 160ms ease;
    }
}