/* ═══════════════════════════════════════════════════════
   ThreadSync Enterprise Design System — Layout
   v1.0 — Container, section rhythm, grids, responsive.
   ═══════════════════════════════════════════════════════ */

/* ── Container ── */
.e-container {
  width: min(72rem, 100% - 2 * clamp(1rem, 3vw, 2rem));
  margin-inline: auto;
}

/* ── Section rhythm ── */
.e-section {
  padding-block: clamp(3rem, 5vw, 6rem);
  position: relative;
}
.e-section--alt {
  background: var(--bg-subtle);
}
.e-section--flush {
  padding-block: 0;
}

/* ── Section header ── */
.e-section-header {
  text-align: center;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  max-width: 44rem;
  margin-inline: auto;
}

/* ── Grid system ── */
.e-grid {
  display: grid;
  gap: var(--space-6);
}
.e-grid--2 { grid-template-columns: repeat(2, 1fr); }
.e-grid--3 { grid-template-columns: repeat(3, 1fr); }
.e-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Split layout (hero, feature sections) ── */
.e-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.e-split--wide-left  { grid-template-columns: 1.2fr 1fr; }
.e-split--wide-right { grid-template-columns: 1fr 1.2fr; }

/* ── Prose container (max line length) ── */
.e-prose {
  max-width: var(--measure);
}
.e-prose--center {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ── Vertical stack (consistent spacing between siblings) ── */
.e-stack > * + * { margin-top: var(--space-4); }
.e-stack--sm > * + * { margin-top: var(--space-2); }
.e-stack--lg > * + * { margin-top: var(--space-8); }

/* ── Flex utilities ── */
.e-flex { display: flex; }
.e-flex--center { align-items: center; }
.e-flex--gap-2 { gap: var(--space-2); }
.e-flex--gap-3 { gap: var(--space-3); }
.e-flex--gap-4 { gap: var(--space-4); }
.e-flex--gap-6 { gap: var(--space-6); }
.e-flex--wrap { flex-wrap: wrap; }
.e-flex--between { justify-content: space-between; }

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
  .e-split,
  .e-grid--3,
  .e-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .e-split,
  .e-grid--2,
  .e-grid--3,
  .e-grid--4 {
    grid-template-columns: 1fr;
  }
}