/* ============================================
   LAYOUT SYSTEM
   ============================================ */

/* ---------- CONTAINERS ---------- */
.container {
    width: calc(100% - (var(--container-gutter) * 2));
    max-width: var(--container-max);
    margin-inline: auto;
}

.container--editorial {
    max-width: var(--container-editorial);
}

.container--content {
    max-width: var(--container-content);
}

.container--read {
    max-width: var(--container-read);
}

.container--full {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* ---------- SECTIONS ---------- */
.section {
    padding-block: var(--section-y);
    position: relative;
}

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

.section--loose {
    padding-block: var(--section-y-loose);
}

.section--no-top {
    padding-top: 0;
}

.section--no-bottom {
    padding-bottom: 0;
}

.section--dark {
    background-color: var(--surface-dark);
    color: var(--text-on-dark);
}

.section--forest {
    background-color: var(--surface-forest);
    color: var(--text-on-dark);
}

.section--alt {
    background-color: var(--surface-alt);
}

.section--white {
    background-color: var(--surface-white);
}

/* ---------- GRID UTILITIES ---------- */
.grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

.grid--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.grid--split-wide {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.grid--split-narrow {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
    align-items: center;
}

/* ---------- FLEX UTILITIES ---------- */
.flex {
    display: flex;
}

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

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

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

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

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

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

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

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

/* ---------- STACK (vertical rhythm) ---------- */
.stack>*+* {
    margin-top: var(--stack-space, var(--space-4));
}

.stack--sm {
    --stack-space: var(--space-3);
}

.stack--md {
    --stack-space: var(--space-5);
}

.stack--lg {
    --stack-space: var(--space-6);
}

.stack--xl {
    --stack-space: var(--space-8);
}

/* ---------- TEXT ALIGNMENT ---------- */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ---------- RULES / DIVIDERS ---------- */
.rule {
    border: none;
    border-top: 1px solid var(--rule-light);
    width: 100%;
}

.rule--dark {
    border-color: var(--rule-dark);
}

.rule--brass {
    border-color: var(--rule-brass);
    width: 48px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--split,
    .grid--split-wide,
    .grid--split-narrow {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {

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

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