/* Viewport size-specific fixes to address exact dimensions */

/* Use CSS variables for device-specific sizes */
:root {
    --viewport-width: 100vw;
    --viewport-height: 100vh;
    --viewport-ratio: 1;
}

/* Galaxy S23 specific fix at exactly 360x780 */
@media screen and (width: 360px) and (height: 780px) {
    /* Explicitly target this specific resolution */
    .projects-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "project1"
            "project2"
            "project3"
            "project4" !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    /* Explicit positioning of each project card */
    .projects-page > .project-card:nth-child(1) { grid-area: project1 !important; }
    .projects-page > .project-card:nth-child(2) { grid-area: project2 !important; }
    .projects-page > .project-card:nth-child(3) { grid-area: project3 !important; }
    .projects-page > .project-card:nth-child(4) { grid-area: project4 !important; }
    
    /* Specific fixes for this device */
    .project-screenshot {
        height: 165px !important;
    }
    
    .project-content {
        padding: 12px !important;
    }
    
    .project-title-text {
        font-size: 1.05rem !important;
    }
    
    .project-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .project-card-footer {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .view-project-btn {
        margin-left: 0 !important;
        margin-top: 8px !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Fix navigation elements */
    .carousel-nav {
        top: 35% !important;
    }
}

/* Common fixes for all possible screen orientations of Galaxy S23 */
body.galaxy-s23 .projects-page {
    min-width: 100% !important;
    width: 100% !important;
}

body.galaxy-s23 .project-card {
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific orientation handling for modern smartphones */
body.portrait-orientation.galaxy-s23 .projects-page {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
}

body.landscape-orientation.galaxy-s23 .projects-page {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
}

/* Fix projects container for all modern smartphones */
@media screen and (max-width: 400px) {
    /* Use CSS variable for height calculation */
    .projects-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 0 !important;
        min-height: auto !important;
    }
    
    /* Ensure carousel content is visible */
    .projects-carousel {
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
}