/* ============================================================
   LAYOUT — 12-Column Grid, Container, Sections
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.container--narrow {
  max-width: var(--narrow-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.container--content {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

/* ── Grid System ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
}

.grid--tight { gap: var(--space-4); }
.grid--loose { gap: var(--space-12); }

/* 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; }

/* ── Section Wrapper ─────────────────────────────────────── */
.section {
  padding-block: var(--section-gap);
}

.section--sm  { padding-block: var(--space-24); }
.section--lg  { padding-block: var(--section-gap-lg); }
.section--xl  { padding-block: var(--section-gap-xl); }

.section--bg-secondary {
  background-color: var(--color-bg-secondary);
}

.section--bg-inverse {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

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

/* ── Spacing Utilities ───────────────────────────────────── */
.mt-auto { margin-top: auto; }
.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); }
.mb-16   { margin-bottom: var(--space-16); }
.mb-20   { margin-bottom: var(--space-20); }
.mb-24   { margin-bottom: var(--space-24); }

.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); }
.mt-24   { margin-top: var(--space-24); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --section-gap: 6rem;
    --section-gap-lg: 8rem;
    --section-gap-xl: 10rem;
  }
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
  .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 8; }
  .col-8 { grid-column: span 8; }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 5rem;
    --section-gap-lg: 6rem;
  }
  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10,
  .col-11, .col-12 { grid-column: span 4; }
}

@media (max-width: 480px) {
  :root { --section-gap: 4rem; }
  .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; }
}