/* Comprehensive orientation-based styling for project grid */

/* Landscape orientation - specific adjustments */
@media (orientation: landscape) and (max-width: 1024px) {
    /* Force 2x2 grid in landscape mode */
    .projects-page {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important;
        grid-template-areas: 
            "project1 project2"
            "project3 project4" !important;
        gap: 15px !important;
    }
    
    /* Make cards more compact in landscape */
    .project-screenshot {
        height: 140px !important;
    }
    
    .project-title-text {
        font-size: 1rem !important;
    }
    
    .project-description {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        max-height: 70px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* Compact layout in landscape */
    .project-content {
        padding: 10px !important;
    }
    
    .project-card-footer {
        padding: 8px 12px !important;
    }
    
    /* Hide non-essential elements in landscape */
    .project-tech-tag {
        display: none !important;
    }
    
    /* Adjust navigation for landscape */
    .carousel-nav {
        top: 40% !important;
    }
    
    /* Smaller dots in landscape */
    .carousel-dot {
        width: 10px !important;
        height: 10px !important;
        margin: 0 5px !important;
    }
    
    .carousel-dots {
        margin-top: 15px !important;
    }
}

/* Portrait orientation - specific adjustments */
@media (orientation: portrait) and (max-width: 768px) {
    /* Stack projects vertically in portrait */
    .projects-page {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-template-areas: 
            "project1"
            "project2"
            "project3"
            "project4" !important;
        gap: 25px !important;
    }
      /* Larger cards in portrait */
    .project-screenshot {
        height: 280px !important; /* Increased for larger, more square proportions */
    }
    
    /* Show tech tags in portrait */
    .project-tech-tag {
        display: inline-block !important;
    }
    
    /* Full description in portrait */
    .project-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        max-height: none !important;
    }
    
    /* Adjusted navigation for portrait */
    .carousel-nav {
        top: 30% !important;
    }
    
    /* Larger dots in portrait */
    .carousel-dot {
        width: 15px !important;
        height: 15px !important;
        margin: 0 8px !important;
    }
    
    .carousel-dots {
        margin-top: 25px !important;
    }
}

/* Very tall devices (iPhone 12 Pro Max, etc.) */
@media (orientation: portrait) and (min-aspect-ratio: 2/5) and (max-aspect-ratio: 9/16) {
    /* Add extra space between cards */
    .projects-page {
        gap: 30px !important;
    }      /* Allow more content to be visible */
    .project-screenshot {
        height: 260px !important; /* Increased for better square proportions on tall devices */
    }
}

/* Small landscape devices (iPhone SE landscape, etc.) */
@media (orientation: landscape) and (max-height: 450px) {
    /* Extra compact layout */
    .projects-page {
        gap: 10px !important;
    }
    
    .project-screenshot {
        height: 120px !important;
    }
    
    .project-content {
        padding: 8px !important;
    }
    
    /* Hide more elements */
    .project-description {
        -webkit-line-clamp: 2 !important;
        max-height: 40px !important;
    }
    
    /* Minimal footer */
    .project-card-footer {
        padding: 5px 10px !important;
    }
    
    /* Simplified language display */
    .primary-language {
        font-size: 0.7rem !important;
    }
}