/*
 * Strictlydev - Layout primitives
 * Containers, sections, grids and surface bands.
 *
 * "Design for executive scanning: clear hierarchy, strong alignment,
 *  disciplined whitespace and evidence close to the claim it supports."
 *  - Brand Guidelines v1.0, p.33
 */

/* ---------- Containers ---------- */

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

.sd-container--wide { max-inline-size: var(--sd-container-wide); }
.sd-container--narrow { max-inline-size: var(--sd-container-narrow); }

/* ---------- Sections and surface bands ---------- */

.sd-section {
    padding-block: var(--sd-section-y);
    background-color: var(--sd-surface);
    color: var(--sd-text);
}

.sd-section--tight { padding-block: var(--sd-section-y-tight); }
.sd-section--flush-top { padding-block-start: 0; }
.sd-section--flush-bottom { padding-block-end: 0; }

/*
 * Section header: eyebrow + title + optional standfirst, left aligned as
 * the guidelines require. The standfirst states the point of the section,
 * not a description of it.
 */
.sd-section-head {
    max-inline-size: 56ch;
    margin-block-end: var(--sd-space-12);
}

.sd-section-head > * + * {
    margin-block-start: var(--sd-space-4);
}

.sd-section-head--wide { max-inline-size: 72ch; }

/* Header with a trailing action on the same baseline. */
.sd-section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sd-space-6);
    max-inline-size: none;
}

.sd-section-head--split > :first-child {
    max-inline-size: 56ch;
}

/* ---------- Stack: consistent vertical rhythm ---------- */

.sd-stack > * + * { margin-block-start: var(--sd-space-4); }
.sd-stack--2 > * + * { margin-block-start: var(--sd-space-2); }
.sd-stack--3 > * + * { margin-block-start: var(--sd-space-3); }
.sd-stack--6 > * + * { margin-block-start: var(--sd-space-6); }
.sd-stack--8 > * + * { margin-block-start: var(--sd-space-8); }
.sd-stack--12 > * + * { margin-block-start: var(--sd-space-12); }

/* ---------- Cluster: inline groups that wrap ---------- */

.sd-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-4);
}

.sd-cluster--tight { gap: var(--sd-space-2); }
.sd-cluster--between { justify-content: space-between; }

/* ---------- Grid ---------- */

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

/*
 * Auto-fitting grid. Cards choose their own comfortable minimum, so these
 * hold up between the practice cards (5 items) and case studies (3 items)
 * without per-page breakpoints.
 */
.sd-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.sd-grid--auto-wide {
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

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

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

/*
 * Split: an asymmetric two-column layout for "claim beside evidence".
 * Collapses to one column before the text column gets too narrow.
 */
.sd-split {
    display: grid;
    gap: var(--sd-space-12);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
}

.sd-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-split--sticky > :first-child {
    position: sticky;
    top: calc(var(--sd-header-h) + var(--sd-space-8));
}

@media (max-width: 60rem) {
    .sd-grid--3,
    .sd-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-split,
    .sd-split--even {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sd-space-8);
    }

    .sd-split--sticky > :first-child {
        position: static;
    }
}

@media (max-width: 40rem) {
    .sd-grid--2,
    .sd-grid--3,
    .sd-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Page shell ---------- */

.sd-page {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
}

.sd-page > main {
    flex: 1 0 auto;
}

/* ---------- Utilities ---------- */

.sd-measure { max-inline-size: var(--sd-measure); }
.sd-measure-tight { max-inline-size: var(--sd-measure-tight); }
.sd-full { inline-size: 100%; }

.sd-mt-0 { margin-block-start: 0; }
.sd-mt-4 { margin-block-start: var(--sd-space-4); }
.sd-mt-6 { margin-block-start: var(--sd-space-6); }
.sd-mt-8 { margin-block-start: var(--sd-space-8); }
.sd-mt-12 { margin-block-start: var(--sd-space-12); }