/* 
 * UTILITY CLASSES - Quick styling helpers
 * 
 * Available utilities:
 * Typography: .text-small, .text-lg, .text-2xl, .fw-500, .fw-600
 * Colors: .text-muted, .text-danger, .text-center, .text-dark
 * Spacing: .mb-0, .mb-2, .mb-4, .mb-6, .mt-1, .mt-2, .mt-6, .p-2, .pl-2
 * Layout: .ml-auto, .overflow-hidden, .no-select, .cursor-pointer
 * Images: .img-fluid, .img-bordered, .img-8
 * Grids: .grid-auto-350, .grid-auto-300, .grid-auto-200
 * Animations: .animate-fade-in, .hover-lift
 * 
 * Use these for quick styling instead of inline styles or creating one-off CSS
 */

/* Typography Utilities */
.text-small { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 2rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* Color Utilities */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--deep-red); }
.text-center { text-align: center; }
.text-dark { color: var(--text-primary); }
.success-text { color: var(--text-primary); }
.error-text { color: var(--red-600); }

/* Spacing Utilities */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 4rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.p-2 { padding: 2rem; }
.pl-2 { padding-left: 2rem; }
.py-12 { 
  padding-top: 3rem; 
  padding-bottom: 3rem; 
}

/* Layout Utilities */
.ml-auto { margin-left: auto; }
.overflow-hidden { overflow: hidden; }
.no-select { user-select: none; }
.cursor-pointer { cursor: pointer; }

/* Border Utilities */
.border-top { border-top: 1px solid var(--border-light); }

/* Common Grid Patterns */
.grid-auto-350 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.grid-auto-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.grid-auto-200 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Image Utilities */
.img-fluid { max-width: 100%; height: auto; }
.img-bordered { border: 1px solid var(--border-light); border-radius: 0.25rem; }
.img-8 { width: 2rem; height: 2rem; object-fit: cover; vertical-align: middle; display: inline-block; }

/* List Utilities */
.list-disc { list-style: disc; padding-left: 1.25rem; }

/* Line Clamp */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Icon Utilities */
.icon-16 {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-24 {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-32 {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Animations */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}