/* ============================================================
   STRATUM LABS — LAYOUT
   Grid · Containers · Section Frames
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

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

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

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

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

/* Column offsets */
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }

/* ── Section wrapper ─────────────────────────────────────── */
.section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

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

/* ── Full-viewport sections (killer lines, pivots) ───────── */
.section--full {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--nav-height);
}

/* ── Surface variants ────────────────────────────────────── */
.section--stone {
  background-color: var(--color-surface);
}

.section--dark {
  background-color: var(--ink);
  color: var(--white);
}

.section--dark p {
  color: var(--stone-200);
}

.section--dark .t-label,
.section--dark .t-caption {
  color: var(--stone-500);
}

/* ── Flex utilities ──────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-center  { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-gap-1   { gap: var(--space-1); }
.flex-gap-2   { gap: var(--space-2); }
.flex-gap-3   { gap: var(--space-3); }
.flex-gap-4   { gap: var(--space-4); }
.flex-gap-5   { gap: var(--space-5); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .col-8  { grid-column: span 10; }
  .col-7  { grid-column: span 9; }
  .col-6  { grid-column: span 8; }
  .col-4  { grid-column: span 6; }
  .col-3  { grid-column: span 4; }
  .col-start-2, .col-start-3, .col-start-4 { grid-column-start: 1; }
}

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

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; gap: var(--space-2); }
  [class*="col-"] { grid-column: 1 / -1; }
}