/* 
 * Utilities mapped to the 8px grid
 */

/* Margins */
.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-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

/* Paddings */
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* Flex & Grid */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

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

/* 
 * Responsive Overrides (Three-tier layout alignment based on Design System)
 */
/* Tablet Breakpoint (Up to 992px) */
@media (max-width: 992px) {
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile Breakpoint (Up to 768px) */
@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .md\:flex-col {
    flex-direction: column !important;
  }
}

.flex-wrap { flex-wrap: wrap; }

/* Structural & Image Utilities */
.w-full {
  width: 100%;
}

.object-cover {
  object-fit: cover;
}

.rounded {
  border-radius: var(--radius-default);
}

/* Background Color Utilities */
.bg-white {
  background-color: hsl(0, 0%, 100%) !important;
}

.bg-gray-50 {
  background-color: hsl(220, 20%, 96%) !important;
}