/* Poco X3 NFC and similar high-resolution mobile devices fix */

/* Poco X3 NFC: 6.67" 1080x2400 pixels, 395 PPI */
/* Target devices with similar high DPI and tall aspect ratios */
@media only screen 
    and (min-device-width: 360px) 
    and (max-device-width: 450px)
    and (min-device-height: 700px)
    and (max-device-height: 950px)
    and (-webkit-device-pixel-ratio: 2.5),
    only screen 
    and (min-device-width: 360px) 
    and (max-device-width: 450px)
    and (min-device-height: 700px)
    and (max-device-height: 950px)
    and (device-pixel-ratio: 2.5) {
    
    /* Force proper viewport behavior */
    html {
        position: static !important;
        height: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }
    
    body {
        position: static !important;
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure proper section visibility */
    section {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: auto !important;
        padding: 60px 0 !important;
        margin: 0 !important;
        z-index: 1 !important;
    }
    
    /* Hero section specific fix */
    #home.hero {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
        min-height: calc(100vh - 60px) !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Container fixes */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
        position: relative !important;
    }
    
    /* Header positioning fix */
    .glass-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 1000 !important;
        background: rgba(10, 10, 15, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Ensure all sections are scrollable */
    #about, #skills, #projects, #education, #interests, #contact {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 80px 0 60px 0 !important;
        scroll-margin-top: 80px !important;
    }
    
    /* Text visibility fix */
    h1, h2, h3, h4, h5, h6, p, span, div {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Project carousel fix for high DPI */
    .projects-container {
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .projects-carousel {
        width: 100% !important;
        display: flex !important;
        will-change: transform !important;
    }
    
    .projects-page {
        width: 100% !important;
        flex-shrink: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }
    
    /* Skills section fix */
    .skills-content {
        width: 100% !important;
        display: block !important;
        position: relative !important;
    }
    
    /* Interests section fix */
    .interests-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    /* Contact form fix */
    .contact-content {
        width: 100% !important;
        display: block !important;
        position: relative !important;
    }
}

/* Additional fix for all mobile devices with tall screens */
@media (max-width: 768px) and (min-height: 700px) {
    /* Prevent viewport cutting */
    html {
        height: auto !important;
        position: static !important;
    }
    
    body {
        height: auto !important;
        min-height: 100vh !important;
        position: static !important;
    }
    
    /* Ensure proper scrolling */
    body, html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Section visibility assurance */
    section {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
    }
}