/* ================================================================
   UTILITIES.CSS — Helper classes (flex, spacing, grids)
   Part of the RustyBlade BootCamp stylesheet, split for maintainability.
   Load AFTER pages.css.
   ================================================================ */

/* ================================================================
   SECTION 3: UTILITY CLASSES
   ================================================================ */

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-text); }

.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-2 { gap: 8px; }
.gap-4 { gap: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }


/* ================================================================
   SECTION 19: RESPONSIVE GRIDS
   ================================================================ */

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .profile-grid { grid-template-columns: 1fr; }
}