/* ==========================================================================
   LAYOUT STYLES - Containers, grids, and structural elements only
   ========================================================================== */

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

.container-fluid {
    width: 100%;
    padding: 0 var(--space-2);
}

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

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

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

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

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

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow {
    flex-grow: 1;
}

/* Spacing */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Content Width */
.content-narrow {
    max-width: 65ch;
    margin: 0 auto;
}

.content-wide {
    max-width: 80ch;
    margin: 0 auto;
}

/* Page Layout */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: var(--space-4) 0;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 0 var(--space-1);
    }
    
    .main-content {
        padding: var(--space-2) 0;
    }
}