/* ============================================
   FIX PROJECTS IMAGES AND SLIDER
   Ensure project images are visible and carousel works
   ============================================ */

/* ============================================
   PROJECT IMAGES - Force visibility (scoped by viewport)
   ============================================ */

/* Desktop: Show masonry images */
@media screen and (min-width: 1025px) {
    .project-masonry-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .project-masonry-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    .project-mobile-image,
    .project-mobile-item {
        display: none !important;
    }
}

/* Mobile: Show mobile images */
@media screen and (max-width: 1024px) {
    .project-mobile-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .project-mobile-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    .project-masonry-image,
    .project-masonry-item {
        display: none !important;
    }
}

/* ============================================
   PROJECTS CAROUSEL CONTAINER
   ============================================ */
.projects-carousel-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100vh !important;
}

.projects-owl-carousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* ============================================
   DESKTOP & MOBILE LAYOUT
   Layout separation handled by enforce-layout-separation.css
   This file only handles image-specific visibility
   ============================================ */

/* ============================================
   OWL CAROUSEL ITEMS
   Basic visibility handled by fix-visibility-issues.css
   Layout separation handled by enforce-layout-separation.css
   ============================================ */
.projects-owl-item {
    width: 100% !important;
}

/* ============================================
   ENSURE IMAGES LOAD (scoped by viewport)
   ============================================ */

/* Desktop: Show masonry images */
@media screen and (min-width: 1025px) {
    .projects-gallery-slide .project-masonry-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .projects-mobile-slide .project-mobile-image {
        display: none !important;
    }
}

/* Mobile: Show mobile images */
@media screen and (max-width: 1024px) {
    .projects-mobile-slide .project-mobile-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .projects-gallery-slide .project-masonry-image {
        display: none !important;
    }
}

/* ============================================
   CAROUSEL NAVIGATION - Ensure it works
   ============================================ */
.projects-carousel-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}

.projects-owl-carousel-desktop .owl-nav,
.projects-owl-carousel-mobile .owl-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.projects-owl-carousel .owl-nav button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}