/* Comprehensive Safari-specific fixes for project grid */

/* Safari hack - use feature detection */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
    /* Base grid fixes */
    .projects-page {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
    }
    
    /* Forcing Safari to use the correct grid areas */
    .projects-page > .project-card:nth-child(1) { 
        -ms-grid-row: 1 !important;
        -ms-grid-column: 1 !important;
        grid-area: project1 !important;
    }
    
    .projects-page > .project-card:nth-child(2) { 
        -ms-grid-row: 1 !important;
        -ms-grid-column: 3 !important;
        grid-area: project2 !important;
    }
    
    .projects-page > .project-card:nth-child(3) { 
        -ms-grid-row: 3 !important;
        -ms-grid-column: 1 !important;
        grid-area: project3 !important;
    }
    
    .projects-page > .project-card:nth-child(4) { 
        -ms-grid-row: 3 !important;
        -ms-grid-column: 3 !important;
        grid-area: project4 !important;
    }
    
    /* Safari-specific mobile fixes */
    @media (max-width: 768px) {
        .projects-page {
            grid-template-columns: 1fr !important;
            grid-template-rows: auto auto auto auto !important;
        }
        
        .projects-page > .project-card:nth-child(1) { 
            -ms-grid-row: 1 !important;
            -ms-grid-column: 1 !important;
        }
        
        .projects-page > .project-card:nth-child(2) { 
            -ms-grid-row: 2 !important;
            -ms-grid-column: 1 !important;
        }
        
        .projects-page > .project-card:nth-child(3) { 
            -ms-grid-row: 3 !important;
            -ms-grid-column: 1 !important;
        }
        
        .projects-page > .project-card:nth-child(4) { 
            -ms-grid-row: 4 !important;
            -ms-grid-column: 1 !important;
        }
    }
    
    /* Fix mobile landscape mode in Safari */
    @media (max-width: 900px) and (orientation: landscape) {
        .projects-page {
            grid-template-columns: 1fr 1fr !important;
            grid-template-rows: auto auto !important;
        }
        
        .projects-page > .project-card:nth-child(1) { 
            -ms-grid-row: 1 !important;
            -ms-grid-column: 1 !important;
        }
        
        .projects-page > .project-card:nth-child(2) { 
            -ms-grid-row: 1 !important;
            -ms-grid-column: 2 !important;
        }
        
        .projects-page > .project-card:nth-child(3) { 
            -ms-grid-row: 2 !important;
            -ms-grid-column: 1 !important;
        }
        
        .projects-page > .project-card:nth-child(4) { 
            -ms-grid-row: 2 !important;
            -ms-grid-column: 2 !important;
        }
    }
    
    /* Safari-specific fixes for animations and transitions */
    .project-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Safari-specific backdrop filters */
    .projects-carousel.touching::after {
        -webkit-backdrop-filter: blur(0.5px);
        backdrop-filter: blur(0.5px);
    }
    
    /* Fix Safari touch event handling */
    .carousel-button,
    .carousel-dot,
    .project-card {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
}

/* Safari-specific grid class */
.safari-grid-fixes {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: 1fr 30px 1fr !important;
    grid-template-columns: 1fr 1fr !important;
    -ms-grid-rows: auto 30px auto !important;
    grid-template-rows: auto auto !important;
}