/* layout.css — containers, sections, grid utilities. */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
    padding-block: var(--space-20);
}
.section--tight   { padding-block: var(--space-12); }
.section--dark    { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-on-dark); }
.section--soft    { background: var(--bg-soft); }

.grid          { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 880px) and (max-width: 1080px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.flex          { display: flex; gap: var(--space-4); }
.flex--center  { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--wrap    { flex-wrap: wrap; }

.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Visually hidden but accessible to screen readers. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}