/* Galaxy S20 Ultra specific fixes (412px width) */

/* Target specifically Galaxy S20 Ultra with width 412px and similar Samsung devices */
@media screen and (min-width: 400px) and (max-width: 420px) {
    /* Main container visibility fixes */
    .projects-container {
        width: 100% !important;
        overflow: visible !important; /* Prevent content from being cut off */
        padding: 15px 0 30px !important;
        margin-bottom: 20px !important;
    }
      /* Ensure content doesn't get cut off after Beranda section */
    body {
        overflow-x: hidden !important; 
        overflow-y: scroll !important; /* Change from auto to scroll to force scrolling */
        height: 100% !important; /* Set to 100% instead of auto */
        -webkit-overflow-scrolling: touch !important; /* Improve scrolling on iOS */
        touch-action: pan-y !important; /* Enable vertical touch scrolling */
    }
    
    html {
        height: 100% !important;
        overflow-y: scroll !important;
    }
    
    /* Force proper grid layout */
    .projects-page {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Two column layout */
        grid-template-rows: auto !important;
        grid-template-areas: 
            "project1 project2"
            "project3 project4" !important;
        gap: 15px !important;
        padding: 0 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Project card adjustments */
    .project-card {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }
    
    /* Optimize screenshot size for this screen size */
    .project-screenshot {
        height: 150px !important;
        overflow: hidden !important;
    }
    
    /* Adjust content spacing */
    .project-content {
        padding: 12px !important;
    }
    
    /* Optimize typography for readability */
    .project-title {
        margin-bottom: 8px !important;
    }
    
    .project-title-text {
        font-size: 0.95rem !important;
    }
    
    .project-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Make touch targets appropriately sized */
    .view-project-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        margin-top: 8px !important;
    }
    
    /* Fix potential navigation issues */
    .nav-menu {
        width: 100% !important;
    }
    
    /* Ensure all sections are visible */
    section {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix footer positioning */
    footer {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Fix container heights to prevent content cut-off */
    .container {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Carousel navigation fix */
    .carousel-nav {
        padding: 10px 0 !important;
        margin-top: 15px !important;
    }
      /* Fix for smooth scrolling between sections */
    html {
        scroll-behavior: smooth !important;
        overscroll-behavior: contain !important; /* Prevent scroll chain effects */
    }
    
    /* Additional scroll fixes for S20 Ultra */
    .projects-section, .skills-section, .education-section, .contact-section {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure main wrapper is scrollable */
    .main-wrapper {
        overflow-y: visible !important;
        touch-action: pan-y !important;
    }
}