/* 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-chestnut);
    }
}

/* The vendor keeps a 40px strip above the content for the close button,
   which it hangs 38px above the box – but the rule above brings the button
   inside the box, so the strip held nothing and sat every popup that far
   below the middle of the screen. Matches the vendor selector to outrank it. */
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
    padding-top: 4px;
}

/* Video popups (image/video slides, quote videos, any [data-fancybox] video…)
   fill the viewport instead of the vendor's fixed 960×540: 90vh on landscape
   screens, 90vw on portrait ones (where 90vh 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(90vh * (16 / 9)), calc(100vw - 48px));
        height:       auto;
        aspect-ratio: 16 / 9;
        max-height:   90vh;

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