/* ============================================================
   COOPNIX — Layout Utilities V.3
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.container-wide {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* --- Section --- */
.section {
    padding: var(--space-section) 0;
    position: relative;
}
.section-alt {
    background: var(--bg-section-alt);
    background-image: 
        radial-gradient(rgba(0, 153, 255, 0.04) 1.5px, transparent 1.5px),
        radial-gradient(rgba(0, 153, 255, 0.04) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}
.section-white {
    background: var(--bg-surface);
    background-image: 
        linear-gradient(to right, rgba(0, 153, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 153, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* --- Grid --- */
.grid { display: grid; gap: var(--space-xl); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Flex --- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* --- Section header --- */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
}
.section-header h2 {
    margin-bottom: var(--space-md);
}
.section-header p {
    font-size: 1.05rem;
    color: var(--text-secondary);
}
.section-label {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    padding: 4px 12px;
    border-radius: var(--radius-badge);
    margin-bottom: var(--space-md);
}