/**
 * layouts.css — max-widths, containers, grids, section padding.
 * Patterns that compose components, not the components themselves.
 */

/* ───── Containers ───── */

.container {
    max-width: var(--content-width-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.container-reading {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Headline container — wider than reading column. Used for post titles +
 * pillar headers that benefit from horizontal weight without losing line
 * length for the body underneath. */
.container-headline {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ───── Sections ───── */

.section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
.section-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section-lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }

.section.alt { background: var(--paper-soft); }
.section.dark { background: var(--ink); color: #fff; }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section + .section:not(.alt):not(.dark) { border-top: 1px solid var(--rule); }

/* ───── Grids ───── */

.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Two-column feature block (image + text) — alternating layout */

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.feature-block.reverse > :first-child { order: 2; }
@media (max-width: 900px) {
    .feature-block { grid-template-columns: 1fr; gap: var(--space-6); }
    .feature-block.reverse > :first-child { order: initial; }
}

/* ───── Section header (centered) ───── */

.section-header {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-8);
}
.section-header.left { text-align: left; margin-left: 0; margin-right: 0; }
.section-header h2 { margin-bottom: 0; }
.section-header > p {
    color: var(--ink-soft);
    font-size: var(--type-body-size);
    margin: var(--space-2) auto 0;
    max-width: 60ch;
}

/* ───── Sticky nav offset (when sticky header is present) ───── */

.has-sticky-header {
    scroll-padding-top: 80px;
}