/* ============================================
   WIBOC - Grid System
   ============================================ */

.container {
    max-width: var(--wiboc-max-width);
    margin: 0 auto;
    padding: var(--wiboc-spacing-xl) var(--wiboc-spacing-lg);
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--wiboc-spacing-xl) var(--wiboc-spacing-lg);
}

.container-lg {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--wiboc-spacing-xl) var(--wiboc-spacing-lg);
}

/* Grid Layout */
.grid {
    display: grid;
    gap: var(--wiboc-spacing-xl);
}

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

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

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

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

/* Content Grid (Form + Table layout) */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wiboc-spacing-xl);
    align-items: start;
}

.content-grid-wide {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--wiboc-spacing-xl);
    align-items: start;
}

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

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

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

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

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

.flex-start {
    align-items: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.flex-1 {
    flex: 1;
}

.gap-xs { gap: var(--wiboc-spacing-xs); }
.gap-sm { gap: var(--wiboc-spacing-sm); }
.gap-md { gap: var(--wiboc-spacing-md); }
.gap-lg { gap: var(--wiboc-spacing-lg); }
.gap-xl { gap: var(--wiboc-spacing-xl); }

/* Responsive Grid */
@media (max-width: 968px) {
    .grid-2,
    .grid-3,
    .content-grid,
    .content-grid-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: var(--wiboc-spacing-lg) var(--wiboc-spacing-md);
    }
    
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
}