/* ============================================================
   LAYOUT.CSS — Container, grid & section padding utilities
   ============================================================ */

/* ── CONTAINERS ───────────────────────────────────────────── */

.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 clamp(1.25rem, 4vw, 3rem);
}

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

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

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

.container--fluid {
  max-width: none;
  padding:   0;
}

/* ── SECTIONS ─────────────────────────────────────────────── */

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

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

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

.section--flush-top    { padding-top:    0; }
.section--flush-bottom { padding-bottom: 0; }

/* ── GRID SYSTEM ──────────────────────────────────────────── */

.grid {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   var(--grid-gap);
}

/* Span helpers */
.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ── FLEX HELPERS ─────────────────────────────────────────── */

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.gap-sm        { gap: var(--space-16); }
.gap-md        { gap: var(--space-24); }
.gap-lg        { gap: var(--space-40); }
.gap-xl        { gap: var(--space-64); }

/* ── BACKGROUND VARIANTS ──────────────────────────────────── */

.bg-base    { background-color: var(--bg-base);    }
.bg-surface { background-color: var(--bg-surface); }
.bg-deep    { background-color: var(--bg-deep);    }
.bg-dark    { background-color: var(--bg-dark);    }

/* ── TYPOGRAPHY UTILITIES ─────────────────────────────────── */

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

/* ── SPACING UTILITIES ────────────────────────────────────── */

.mt-sm  { margin-top: var(--space-16); }
.mt-md  { margin-top: var(--space-24); }
.mt-lg  { margin-top: var(--space-40); }
.mt-xl  { margin-top: var(--space-64); }

.mb-sm  { margin-bottom: var(--space-16); }
.mb-md  { margin-bottom: var(--space-24); }
.mb-lg  { margin-bottom: var(--space-40); }
.mb-xl  { margin-bottom: var(--space-64); }

/* ── VISIBILITY ───────────────────────────────────────────── */

.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;
}

/* ── RESPONSIVE OVERRIDES ─────────────────────────────────── */

@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .col-1, .col-2, .col-3,
  .col-4, .col-5, .col-6  { grid-column: span 3; }
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 { grid-column: span 6; }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .col-1, .col-2, .col-3,
  .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 { grid-column: span 1; }
}