/* =========================================================
   LAYOUT.CSS — Container, Grid, Spacing
   ========================================================= */

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

main { min-height: calc(100vh - var(--header-height)); }

.section { padding-block: var(--space-9); }
.section--sm { padding-block: var(--space-7); }
.section--lg { padding-block: var(--space-10); }

.grid { display: grid; gap: var(--space-6); }
.grid--cards  { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.grid--cities { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }

.divider { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-7); }
.text-center { text-align: center; }
.mt-7 { margin-top: var(--space-7); }
.mb-7 { margin-bottom: var(--space-7); }

.section-header { margin-bottom: var(--space-7); }
.section-header__label { display: inline-block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--color-primary-mid); margin-bottom: var(--space-3); }
.section-header__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.section-header__desc  { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 55ch; }