/* ============================================================
   TextToolKit v2 — Layout Primitives
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* ── Grid System ──────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--sp-6);
}

.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }

/* ── Bento Grid ───────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.bento-dense { grid-auto-rows: 80px; }

.bento-hero  { grid-column: span 2; grid-row: span 3; }
.bento-wide  { grid-column: span 2; grid-row: span 2; }
.bento-tall  { grid-column: span 1; grid-row: span 2; }
.bento-square{ grid-column: span 1; grid-row: span 1; }
.bento-strip { grid-column: span 4; grid-row: span 1; }

/* ── Section ──────────────────────────────────────────────── */
.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.section-sm {
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
}
.section-hero {
  padding-top: 128px;
  padding-bottom: var(--sp-16);
}

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

/* ── Spacing Utilities ───────────────────────────────────── */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ── Text Utilities ──────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-lime    { color: var(--brand-blue); }
.text-sm      { font-size: var(--text-sm); }
.text-lg      { font-size: var(--text-lg); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-hero, .bento-wide { grid-column: span 2; }
  .bento-strip             { grid-column: span 2; }
  .grid-4, .grid-3         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .bento    { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 1 !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-hero { padding-top: 96px; padding-bottom: var(--sp-8); }
}