/* CJ utility classes (single responsive system, mobile-first). */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); }
.p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-white { color: #fff; }

.bg-navy { background: var(--color-navy-deep); color: var(--color-text-inverse); }
.bg-surface { background: var(--color-surface); }
.rounded { border-radius: var(--radius-md); }
.shadow { box-shadow: var(--shadow-md); }

.flex { display: flex; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

.w-full { width: 100%; }
.hidden { display: none !important; }

@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   PHASE 2 — RESPONSIVE GRID 1–5 (mobile-first, adaptive gaps)
   ============================================================ */
.cols-1, .cols-2, .cols-3, .cols-4, .cols-5 {
  display: grid; gap: var(--cj-space-4); grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cols-1, .cols-2, .cols-3, .cols-4, .cols-5 { gap: var(--cj-space-6); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Stack + cluster primitives */
.cj-stack { display: grid; gap: var(--cj-space-4); }
.cj-stack-sm { display: grid; gap: var(--cj-space-2); }
.cj-cluster { display: flex; flex-wrap: wrap; gap: var(--cj-space-3); align-items: center; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }