/* Celebration Grid Final - Only 3 columns or 1 column layouts */

/* Ensure the entire schedule section is centered */
.schedule-section {
    width: 100% !important;
    padding: var(--spacing-xl) 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.schedule-section .container {
    width: 100% !important;
    max-width: 1200px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Center all text content */
.schedule-section h2,
.schedule-section p,
.schedule-section .text-content {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Base grid setup */
.schedule-grid {
    display: grid !important;
    justify-items: center !important;
    justify-content: center !important;
    align-items: start !important;
    align-content: start !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: var(--spacing-lg) auto 0 auto !important;
    width: fit-content !important;
}

/* Large desktop - 3 columns with more space */
@media (min-width: 1200px) {
    .schedule-grid {
        grid-template-columns: repeat(3, 240px) !important;
        gap: 3rem 3rem !important;
    }
}

/* Desktop and tablets - 3 columns */
@media (min-width: 900px) and (max-width: 1199px) {
    .schedule-grid {
        grid-template-columns: repeat(3, 220px) !important;
        gap: 2.5rem 2rem !important;
    }
}

/* Smaller tablets - 3 columns with tighter spacing */
@media (min-width: 750px) and (max-width: 899px) {
    .schedule-grid {
        grid-template-columns: repeat(3, 180px) !important;
        gap: 2rem 1.5rem !important;
    }

    .door-arch {
        width: 180px !important;
        max-width: 180px !important;
    }
}

/* Transition point - switch to 1 column */
@media (max-width: 749px) {
    .schedule-grid {
        grid-template-columns: 280px !important;
        gap: 2.5rem !important;
    }

    .schedule-door {
        width: 280px !important;
    }

    .door-arch {
        width: 280px !important;
        max-width: 280px !important;
    }
}

/* Mobile phones - 1 column */
@media (max-width: 480px) {
    .schedule-grid {
        grid-template-columns: minmax(260px, 300px) !important;
        gap: 2rem !important;
    }

    .schedule-door {
        width: 100% !important;
        max-width: 300px !important;
    }

    .door-arch {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* Very small screens - 1 column with flexible width */
@media (max-width: 360px) {
    .schedule-grid {
        grid-template-columns: minmax(240px, 280px) !important;
        gap: 1.5rem !important;
        padding: 0 10px !important;
    }

    .door-arch {
        width: 100% !important;
        max-width: 260px !important;
    }
}

/* Ensure doors are properly sized and centered */
.schedule-door {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
}

.door-arch {
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Ensure grid items stretch properly */
.schedule-grid > * {
    justify-self: stretch !important;
    width: 100% !important;
}

/* Override any conflicting 2-column layouts from other CSS files */
@media screen {
    /* Force override any 2-column layouts */
    .schedule-grid[style*="repeat(2"] {
        grid-template-columns: 280px !important;
    }
}

/* Specific overrides for common tablet sizes that might have had 2 columns */

/* iPad standard (768px) - 1 column */
@media (width: 768px) {
    .schedule-grid {
        grid-template-columns: 280px !important;
        gap: 2.5rem !important;
    }
}

/* iPad Mini (834px) - 3 columns tight */
@media (width: 834px) {
    .schedule-grid {
        grid-template-columns: repeat(3, 180px) !important;
        gap: 2rem 1.5rem !important;
    }
}

/* Surface Duo (540px) - 1 column */
@media (width: 540px) {
    .schedule-grid {
        grid-template-columns: 280px !important;
        gap: 2rem !important;
    }
}

/* Galaxy Fold (280px) - 1 column narrow */
@media (max-width: 280px) {
    .schedule-grid {
        grid-template-columns: minmax(220px, 260px) !important;
        gap: 1.5rem !important;
        padding: 0 5px !important;
    }
}