/* ============================================================
   03-layout.css
   Container, section, grid, stack utilities.
   ============================================================ */

.ss-container {
        width: 100%;
        max-width: var(--ss-container);
        margin-inline: auto;
        padding-inline: var(--ss-gutter);
}

.ss-container--wide { max-width: var(--ss-wide); }
.ss-container--narrow { max-width: 800px; }

.ss-section {
        padding-block: var(--ss-section-y);
        position: relative;
}

.ss-section--tight { padding-block: var(--ss-space-7); }
.ss-section--dark { background: var(--ss-black); color: var(--ss-white); }
.ss-section--gray { background: var(--ss-gray-light); }
.ss-section--lime { background: var(--ss-lime); }
.ss-section--violet { background: var(--ss-violet); }
.ss-section--turquoise { background: var(--ss-turquoise); }

.ss-section__head {
        max-width: 720px;
        margin-bottom: var(--ss-space-7);
}

.ss-section__head--center {
        margin-inline: auto;
        text-align: center;
}

.ss-section__eyebrow {
        font-size: var(--ss-fs-xs);
        font-weight: 600;
        letter-spacing: var(--ss-tracking-wider);
        text-transform: uppercase;
        color: var(--ss-gray);
        margin-bottom: var(--ss-space-3);
}

.ss-section__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin: var(--ss-space-2) 0 var(--ss-space-3);
}

.ss-section__subtitle {
        font-size: var(--ss-fs-md);
        color: var(--ss-gray);
        max-width: 60ch;
}

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

.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ss-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ss-stack {
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-4);
}

.ss-stack--lg { gap: var(--ss-space-6); }
.ss-stack--sm { gap: var(--ss-space-2); }

.ss-row {
        display: flex;
        align-items: center;
        gap: var(--ss-space-3);
        flex-wrap: wrap;
}

.ss-row--between { justify-content: space-between; }
.ss-row--center { justify-content: center; }

.ss-main {
        min-height: 60vh;
        padding-block: var(--ss-space-7);
}

.ss-content {
        max-width: 720px;
        margin-inline: auto;
}

.ss-content > * + * {
        margin-top: var(--ss-space-4);
}

.ss-content h2 { margin-top: var(--ss-space-6); }
.ss-content h3 { margin-top: var(--ss-space-5); }

.ss-content ul,
.ss-content ol {
        padding-left: 1.25rem;
}

.ss-content li + li {
        margin-top: var(--ss-space-2);
}

/* WordPress alignment helpers */
.alignwide {
        width: 100%;
        max-width: var(--ss-wide);
        margin-inline: auto;
}

.alignfull {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
}