/* ============================================================
   assets/css/layout.css  —  Grid, Container & Sections
   Curve Matrix LLP
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5%, 5rem);
}

.container-sm {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5%, 5rem);
}

/* ── Section Padding ───────────────────────────────────────── */
.section-pad       { padding-block: clamp(4rem, 10vw, 8rem); }
.section-pad-sm    { padding-block: clamp(2rem, 6vw, 4rem); }

/* ── 2-col split ───────────────────────────────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* ── Auto-fill grid ─────────────────────────────────────────── */
.auto-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}

.auto-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/* ── Flex utils ─────────────────────────────────────────────── */
.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-wrap     { flex-wrap: wrap; }
.gap-4         { gap: var(--sp-4); }
.gap-6         { gap: var(--sp-6); }
.gap-8         { gap: var(--sp-8); }

/* ── Text align ─────────────────────────────────────────────── */
.text-center { text-align: center; }

/* ── Dividers ───────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: 0;
}

/* ── z-index stack ──────────────────────────────────────────── */
section, footer, header { position: relative; z-index: 1; }