/**
 * Layout — container, grid, spacing utilities.
 *
 * @package CPM_Theme
 */

/* --- Container --- */
.cpm-container {
    width: 100%;
    max-width: var(--cpm-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cpm-container-padding);
    padding-right: var(--cpm-container-padding);
}

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

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

/* --- Site wrapper --- */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1 0 auto;
    padding-top: var(--cpm-space-xl);
    padding-bottom: var(--cpm-space-2xl);
}

/* --- Grid --- */
.cpm-grid {
    display: grid;
    gap: var(--cpm-space-lg);
}

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

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

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

@media (min-width: 768px) {
    :root {
        --cpm-container-padding: 1.5rem;
    }

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

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

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

@media (min-width: 1024px) {
    :root {
        --cpm-container-padding: 2rem;
    }

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

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

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

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

.cpm-py-sm { padding-top: var(--cpm-space-sm); padding-bottom: var(--cpm-space-sm); }
.cpm-py-md { padding-top: var(--cpm-space-md); padding-bottom: var(--cpm-space-md); }
.cpm-py-lg { padding-top: var(--cpm-space-lg); padding-bottom: var(--cpm-space-lg); }
.cpm-py-xl { padding-top: var(--cpm-space-xl); padding-bottom: var(--cpm-space-xl); }
.cpm-py-2xl { padding-top: var(--cpm-space-2xl); padding-bottom: var(--cpm-space-2xl); }
.cpm-py-3xl { padding-top: var(--cpm-space-3xl); padding-bottom: var(--cpm-space-3xl); }

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