/* Final Override for Problematic Devices
   Important: This must be the last CSS file loaded to ensure these rules take precedence
*/

/* Force proper layout on Samsung Galaxy S23 and similar problematic devices */
@media screen and (min-width: 360px) and (max-width: 400px) {
    /* Use !important on all rules to override any conflicting styles */
    
    /* Force single column layout for project cards */
    .projects-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 20px !important;
        padding: 0 15px !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force cards to be full width and visible */
    .project-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Fix container and carousel */
    .projects-container {
        width: 100% !important;
        overflow: visible !important;
        padding: 20px 0 !important;
    }
    
    .projects-carousel {
        display: flex !important;
        width: 100% !important;
    }
    
    /* Ensure navigation is visible */
    .carousel-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;
    }
    
    .carousel-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure pagination dots are visible */
    .carousel-dots {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 20px !important;
    }
}

/* Specifically target Galaxy S23's 360x780 resolution */
@media screen and (width: 360px) and (height: 780px) {
    /* Provide a max-height to the container to ensure it doesn't overflow */
    .projects-container {
        max-height: none !important;
    }
    
    /* Ensure project cards have proper dimensions */
    .project-card {
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Adjust screenshot height for this exact resolution */
    .project-screenshot {
        height: 165px !important;
    }
}

/* Fix for iOS Safari issues with 100vh */
@supports (-webkit-touch-callout: none) {
    .projects-container {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Use flex for Safari as it handles it better than grid sometimes */
    @media screen and (max-width: 400px) {
        .projects-page {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }
    }
}

/* Use JS-added body classes to apply device-specific fixes */
body.galaxy-s23 .projects-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

body.galaxy-s23.portrait-orientation .projects-page {
    grid-template-columns: 1fr !important;
}

body.galaxy-s23.landscape-orientation .projects-page {
    grid-template-columns: repeat(2, 1fr) !important;
}