/* Portrait video popup styles */
.mfp-iframe-scaler.portrait {
    padding-bottom: 0 !important; /* Remove default padding */
    max-width: none !important;
    margin: 0 auto !important;
    height: 90vh !important; /* Use 80% of viewport height on desktop */
    width: calc(90vh * 9/16) !important; /* Calculate width based on height and 9:16 ratio */
    max-width: 95vw !important; /* Don't exceed 90% of viewport width */
    position: relative !important;
}

.mfp-iframe-scaler.portrait .mfp-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mfp-iframe-scaler.portrait {
        height: 70vh !important; /* Bigger height on mobile for portrait */
        width: calc(70vh * 9/16) !important;
        max-width: 85vw !important;
    }
    
    /* Regular landscape videos on mobile - fix black space */
    .mfp-iframe-scaler:not(.portrait) {
        padding-bottom: 0 !important;
        width: 90vw !important;
        height: calc(90vw * 9/16) !important; /* Calculate height based on 16:9 aspect ratio */
        max-width: 90vw !important;
        position: relative !important;
    }
    
    .mfp-iframe-scaler:not(.portrait) .mfp-iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 480px) {
    .mfp-iframe-scaler.portrait {
        height: 65vh !important; /* Bigger on very small screens */
        width: calc(65vh * 9/16) !important;
        max-width: 80vw !important;
    }
    
    .mfp-iframe-scaler:not(.portrait) {
        width: 95vw !important;
        height: calc(95vw * 9/16) !important; /* Calculate height based on 16:9 aspect ratio */
        max-width: 95vw !important;
    }
}

/* Prevent background scrolling when popup is open */
body.popup-no-scroll {
    overflow: hidden !important;
}

/* Fix for image popups on mobile */
@media (max-width: 768px) {
    .mfp-img {
        max-height: 70vh !important;
        max-width: 90vw !important;
        object-fit: contain !important;
    }
    
    .mfp-figure {
        max-height: 70vh !important;
        max-width: 90vw !important;
    }
    
    .mfp-image-holder .mfp-content {
        max-height: 70vh !important;
        max-width: 90vw !important;
    }
}

/* Hide all Magnific Popup close buttons */
.mfp-close {
    display: none !important;
}

button.mfp-close {
    display: none !important;
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
    display: none !important;
}

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}