/* Project Grid 2x2 Layout Fix */
/* This file ensures proper 2x2 grid layout for the projects section */

/* Override any existing styles to ensure proper layout */
.projects-page {
    /* Explicitly define grid layout */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-areas: 
        "project1 project2"
        "project3 project4" !important;
    grid-auto-flow: row !important; /* Force row-based layout */
    gap: 30px !important;
    min-height: auto !important;
    height: auto !important;
}

/* Clear any floating or column settings that might interfere */
.projects-page::before,
.projects-page::after {
    content: none !important;
    display: none !important;
}

/* Remove column count properties that might interfere with grid */
.projects-page {
    column-count: auto !important;
    -webkit-column-count: auto !important;
    -moz-column-count: auto !important;
    column-gap: normal !important;
    -webkit-column-gap: normal !important;
    -moz-column-gap: normal !important;
}

/* Position project cards explicitly */
.projects-page > .project-card:nth-child(1) {
    grid-area: project1 !important;
    order: 1 !important;
}

.projects-page > .project-card:nth-child(2) {
    grid-area: project2 !important;
    order: 2 !important;
}

.projects-page > .project-card:nth-child(3) {
    grid-area: project3 !important;
    order: 3 !important;
}

.projects-page > .project-card:nth-child(4) {
    grid-area: project4 !important;
    order: 4 !important;
}

/* Force flex properties to not interfere with grid */
.project-card {
    margin: 0 !important;
    width: 100% !important;
    flex: 0 1 auto !important;
    max-width: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .projects-page {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, auto) !important;
        grid-template-areas: 
            "project1"
            "project2"
            "project3"
            "project4" !important;
    }
}

/* Force any incorrect display order to be corrected */
.projects-page {
    grid-auto-rows: auto !important;
    align-items: stretch !important;
}

/* Override any floating or column-based layouts */
.projects-page * {
    float: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}