/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

/* ============================
   CONTAINERS
   ============================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.container-narrow {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.container-wide {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.container-full {
    width: 100%;
    padding-inline: var(--space-4);
}

.container-custom {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ============================
   FLEX UTILITIES
   ============================ */

.flex { display: flex; }

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

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

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

/* ============================
   GRID UTILITIES
   ============================ */

.grid {
    display: grid;
    gap: var(--space-4);
}

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

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

/* ============================
   WIDTH UTILITIES
   ============================ */

.w-100 { width: 100%; }

.max-w-600  { max-width: 600px;  margin-inline: auto; }
.max-w-800  { max-width: 800px;  margin-inline: auto; }
.max-w-1000 { max-width: 1000px; margin-inline: auto; }

/* ============================
   SPACING UTILITIES
   ============================ */

.mt-20 { margin-top: var(--space-5); }
.mt-40 { margin-top: var(--space-10); }

.mb-20 { margin-bottom: var(--space-5); }
.mb-40 { margin-bottom: var(--space-10); }

.pt-40 { padding-top: var(--space-10); }
.pb-40 { padding-bottom: var(--space-10); }

/* ============================
   SECTION SPACING
   ============================ */

.section {
    padding-block: var(--space-12);
}

.section-tight {
    padding-block: var(--space-8);
}

.section-wide {
    padding-block: var(--space-16);
}

/* ============================
   RESPONSIVE UTILITIES
   ============================ */

@media (max-width: 768px) {
    .container,
    .container-narrow,
    .container-wide {
        padding-inline: var(--space-3);
    }

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

    .section {
        padding-block: var(--space-8);
    }

    .section-wide {
        padding-block: var(--space-12);
    }
}