/* ============================================================
   LAYOUT.CSS — СЕТКА, КОНТЕЙНЕРЫ, ФЛЕКС
   ============================================================ */

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

.container-narrow { margin: 0 auto;
    max-width: var(--container-narrow);
}

.section {
    padding: var(--section-padding) 5%;
}

.section-dark {
    background: var(--bg-block);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-header p {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* === СЕТКИ === */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

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

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

/* === ФЛЕКС-УТИЛИТЫ === */
.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-wrap {
    flex-wrap: wrap;
}

.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

/* === ТЕКСТ-УТИЛИТЫ === */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent-neon); }
.text-mono { font-family: var(--font-mono); }

/* === ОТСТУПЫ === */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* === АДАПТИВ === */
@media (max-width: 992px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .grid-2, .grid-3, .grid-4, .grid-auto {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 3rem 5%;
    }
}