/* ==========================================================================
   layout.css — Container, grids, section spacing
   ========================================================================== */

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

/* --- Section spacing ------------------------------------------------------ */
.section {
    padding-top: var(--s-64);
    padding-bottom: var(--s-64);
}

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

/* --- Section header ------------------------------------------------------- */
.section__kicker {
    font-family: var(--f-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--s-12);
}

.section__title {
    margin-bottom: var(--s-16);
}

.section__desc {
    color: var(--c-text-dim);
    max-width: 640px;
    margin-bottom: var(--s-32);
}

/* --- Grid systems --------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--s-24);
}

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

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

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

/* Desktop overrides in responsive.css */

/* --- Two-column layout ---------------------------------------------------- */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-32);
}

/* --- CTA row -------------------------------------------------------------- */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
    margin-top: var(--s-24);
}

/* --- Centred section ------------------------------------------------------ */
.section--centred {
    text-align: center;
}

.section--centred .section__desc {
    margin-left: auto;
    margin-right: auto;
}

/* --- Surface section (alternate bg) --------------------------------------- */
.section--surface {
    background: var(--c-surface);
}