body, html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Layout Components */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Section */
.section {
    padding: 40px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 24px;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Flex Utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .section {
        padding: var(--spacing-xl) 0;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .district-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* About section mobile */
    .section .container>div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }

    .section .container>div[style*="grid-template-columns: 1fr 1fr"]>div:last-child {
        order: -1;
    }
}

/* =========================================================================
   STRONG MOBILE GRID & FLEX RESET
   ========================================================================= */

@media (max-width: 768px) {
    /* Force 1-column layout for standard grids */
    .grid, .grid-2, .grid-3, .grid-4 {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }
    
    .footer-regions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 12px !important;
    }
    
    /* Force wrapping for flex containers */
    .flex-center {
        flex-wrap: wrap !important;
    }
    
    /* Safe container padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    /* Catch-all for any inline-styled multi-column setups */
    div[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    
    
}