/* ==========================================================================
   Layout - Grid Systems, Flexbox Utilities
   ========================================================================== */

/* ---------- Grid Systems ---------- */
.grid {
    display: grid;
    gap: var(--space-2xl);
}

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

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

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

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

/* ---------- Flex Utilities ---------- */
.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-col {
    flex-direction: column;
}

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

.items-center {
    align-items: center;
}

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

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* ---------- Split Layout (2-column content) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.split--reverse {
    direction: rtl;
}

.split--reverse > * {
    direction: ltr;
}

/* ---------- Text Utilities ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-navy { color: var(--color-navy); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-gray-500); }

.text-sm { font-size: var(--fs-small); }
.text-lg { font-size: var(--fs-body-lg); }
.text-xl { font-size: var(--fs-h3); }

.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

/* ---------- Spacing Utilities ---------- */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* ---------- Max Width ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-narrow { max-width: var(--container-narrow); }
.max-w-container { max-width: var(--container-max); }