/* SchoolCMS – Fancybox overrides
   Theme overrides of the CDN-loaded Fancybox UI. */

.fancybox__content {
    > .f-button.is-close-btn {
        top: 0;
        --f-button-color: var(--color-orange);
    }
}

/* Video popups (image/video slides, quote videos, any [data-fancybox] video…)
   fill the viewport instead of the vendor's fixed 960×540: 80vh on landscape
   screens, 80vw on portrait ones (where 80vh of a 16:9 player could never
   fit the width). Width leads and height follows through the aspect ratio,
   so the box keeps 16:9 whichever axis drives it. The extra .fancybox__slide
   outranks the vendor's width/height on specificity regardless of load order. */
.fancybox__slide {
    &.has-youtube .fancybox__content,
    &.has-vimeo .fancybox__content,
    &.has-html5video .fancybox__content {
        width:        min(calc(80vh * (16 / 9)), calc(100vw - 48px));
        height:       auto;
        aspect-ratio: 16 / 9;
        max-height:   80vh;

        @media (orientation: portrait) {
            width: 80vw;
        }
    }
}