/* Specific fixes for Samsung Galaxy S series and similar devices with 360-380px width */

/* Samsung Galaxy S23 has a width of around 360px and is taller than typical phones */
@media screen and (min-width: 360px) and (max-width: 380px) and (min-height: 740px) {
    /* Main container adjustments */
    .projects-container {
        width: 100% !important;
        overflow: visible !important; /* Prevent content from being cut off */
        padding: 15px 0 !important;
    }
    
    /* Force proper grid layout */
    .projects-page {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column layout */
        grid-template-rows: auto !important;
        grid-template-areas: 
            "project1"
            "project2"
            "project3"
            "project4" !important;
        gap: 20px !important;
        padding: 0 10px !important;
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix project card positioning */
    .project-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Reduce image height to avoid taking too much vertical space */
    .project-screenshot {
        height: 160px !important;
    }
    
    /* Optimize text elements for narrow displays */
    .project-title-text {
        font-size: 1.1rem !important;
    }
    
    .project-description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        max-height: none !important; /* Allow full text display */
        -webkit-line-clamp: unset !important;
    }
    
    /* Fix button layout */
    .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;
    }
    
    /* Optimize navigation elements */
    .carousel-nav {
        padding: 0 5px !important;
        top: unset !important;
        bottom: 50% !important;
        transform: translateY(50%) !important;
    }
    
    .carousel-button {
        width: 35px !important;
        height: 35px !important;
    }
    
    .carousel-dots {
        margin-top: 15px !important;
    }
    
    .carousel-dot {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Fix for extremely tall screens like Galaxy S23 Ultra */
@media screen and (min-width: 360px) and (max-width: 380px) and (min-height: 800px) {
    /* Add more vertical spacing */
    .projects-container {
        padding: 20px 0 !important;
    }
    
    .projects-page {
        gap: 25px !important;
    }
      /* Allow taller screenshots */
    .project-screenshot {
        height: 220px !important; /* Increased for better square proportions on Galaxy devices */
    }
}

/* Fix for Samsung Galaxy phones in landscape mode */
@media screen and (min-height: 360px) and (max-height: 380px) and (min-width: 740px) {
    .projects-page {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns in landscape */
        grid-template-rows: repeat(2, auto) !important;
        grid-template-areas: 
            "project1 project2"
            "project3 project4" !important;
        gap: 15px !important;
    }
    
    .project-screenshot {
        height: 130px !important; /* Shorter in landscape */
    }
    
    .project-content {
        padding: 10px !important;
    }
    
    .project-description {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        max-height: 60px !important;
        overflow: hidden !important;
    }
}

/* Fix project element visibility specifically for these devices */
@media screen and (min-width: 360px) and (max-width: 380px) {
    /* Ensure elements are visible */
    .projects-page {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Fix Safari issues on these devices */
    .projects-page > .project-card {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
    
    /* Enable hardware acceleration for smoother performance */
    .projects-carousel {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
    }
}