/* ========================================
   COMMVIO — Layout System
   Container, sections, grid
   ======================================== */

/* ── Container ── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

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

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

/* ── Section ── */

.section {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
    position: relative;
}

.section--sm {
    padding-top: var(--section-gap-sm);
    padding-bottom: var(--section-gap-sm);
}

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

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

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

.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}

.section--dark p,
.section--dark .lead {
    color: var(--color-muted);
}

/* ── Section Header ── */

.section-header {
    max-width: var(--container-narrow);
    margin-bottom: var(--space-16);
}

.section-header--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    margin-bottom: var(--space-6);
}

/* ── Grid System ── */

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

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

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

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

/* Split layout (text + visual) */
.grid--split {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}

/* Bento-style grid for services */
.grid--bento {
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* ── Flex Helpers ── */

.flex {
    display: flex;
}

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

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

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

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

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

.flex--gap-lg {
    gap: var(--space-10);
}

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

/* ── Responsive Grid (see responsive.css for breakpoints) ── */

@media (min-width: 768px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

@media (min-width: 1280px) {
    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

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

    /* Bento featured items span 2 */
    .grid--bento .card--featured {
        grid-column: span 2;
    }
}