/*
 * layout.css — Container, grid, section, and spacing utilities.
 * Depends on: base.css
 */

/* ── Container ──────────────────────────────────────────────────────────── */

.container {
    width:         100%;
    max-width:     var(--container-max);
    margin-inline: auto;
    padding-inline:clamp(var(--space-4), 5vw, var(--space-10));
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
}

/* ── Section wrapper ────────────────────────────────────────────────────── */

.section {
    padding-block: var(--section-gap);
}

.section--sm {
    padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.section--lg {
    padding-block: clamp(var(--space-20), 10vw, var(--space-32));
}

/* ── Grid ───────────────────────────────────────────────────────────────── */

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

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

/* Auto-fit responsive grids */
.grid--auto-sm  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--auto-md  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--auto-lg  { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

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

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

/* ── Flex utilities ─────────────────────────────────────────────────────── */

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* ── Text alignment ─────────────────────────────────────────────────────── */

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

/* ── Spacing helpers ────────────────────────────────────────────────────── */

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ── Divider ────────────────────────────────────────────────────────────── */

.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-12);
}

/* ── Feature grid (for feature-card component) ──────────────────────────── */

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

.feature-grid--2col { grid-template-columns: repeat(2, 1fr); }
.feature-grid--3col { grid-template-columns: repeat(3, 1fr); }
.feature-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
    .feature-grid--3col,
    .feature-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── Section headings ───────────────────────────────────────────────────── */

.section-label {
    display:        inline-block;
    font-size:      var(--text-xs);
    font-weight:    var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color:          var(--color-brand);
    margin-bottom:  var(--space-3);
}

.section-heading {
    font-size:    var(--text-4xl);
    font-weight:  var(--font-extrabold);
    line-height:  var(--leading-tight);
    color:        var(--color-text-primary);
    margin-bottom:var(--space-4);
}

.section-sub {
    font-size:   var(--text-lg);
    color:       var(--color-text-secondary);
    max-width:   60ch;
    line-height: var(--leading-relaxed);
}

.section-header {
    margin-bottom: var(--space-12);
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-sub {
    margin-inline: auto;
}