/* assets/css/layout.css */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* 12-column grid */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-md);
}

/* Responsive grid helpers */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Section padding */
.section {
    padding: var(--spacing-xxxl) 0;
}

@media (max-width: 768px) {
    .section {
        padding: var(--spacing-xxl) 0;
    }
    
    .grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Override col spans on mobile */
    [class*="col-span-"] {
        grid-column: span 1;
    }
}

/* Admin layout */
.admin-wrapper {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    background: var(--card-bg);
    border-right: 1px solid var(--border);
}

.admin-main {
    background: var(--bg);
    padding: var(--spacing-lg);
}

@media (max-width: 768px) {
    .admin-wrapper {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        display: none; /* We'll use a mobile menu toggle */
    }
    .admin-sidebar.active {
        display: block;
        position: fixed;
        width: 240px;
        height: 100vh;
        z-index: 100;
    }
}