/**
 * Grid Component Styles
 *
 * Utility classes for the Grid layout primitive and Grid.Item sub-component.
 * Provides CSS Grid-based layouts with responsive columns, gap spacing, and alignment.
 * All spacing values use the unified spacing scale from globals.
 * All units are in rem (1rem = 16px base).
 */

// ============================================================================
// Base Grid
// ============================================================================

.grid {
  display: grid;
  gap: var(--spacing-md); // Default medium gap
}

// ============================================================================
// Column Layout (Explicit Columns)
// ============================================================================

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

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

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

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

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

// ============================================================================
// Auto Layout (Auto-Fit / Auto-Fill)
// ============================================================================
// Note: grid-template-columns is set via inline styles in the component
// These classes are applied for identification purposes only

.grid-auto-fit {
  // Inline style: grid-template-columns: repeat(auto-fit, minmax(Xrem, 1fr));
}

.grid-auto-fill {
  // Inline style: grid-template-columns: repeat(auto-fill, minmax(Xrem, 1fr));
}

// ============================================================================
// Gap Utilities
// ============================================================================

.grid-gap-0 {
  gap: 0;
}

.grid-gap-xs {
  gap: var(--spacing-xs);
}

.grid-gap-sm {
  gap: var(--spacing-sm);
}

.grid-gap-md {
  gap: var(--spacing-md);
}

.grid-gap-lg {
  gap: var(--spacing-lg);
}

.grid-gap-xl {
  gap: var(--spacing-xl);
}

// ============================================================================
// Gap X (Column Gap)
// ============================================================================

.grid-gap-x-0 {
  column-gap: 0;
}

.grid-gap-x-xs {
  column-gap: var(--spacing-xs);
}

.grid-gap-x-sm {
  column-gap: var(--spacing-sm);
}

.grid-gap-x-md {
  column-gap: var(--spacing-md);
}

.grid-gap-x-lg {
  column-gap: var(--spacing-lg);
}

.grid-gap-x-xl {
  column-gap: var(--spacing-xl);
}

// ============================================================================
// Gap Y (Row Gap)
// ============================================================================

.grid-gap-y-0 {
  row-gap: 0;
}

.grid-gap-y-xs {
  row-gap: var(--spacing-xs);
}

.grid-gap-y-sm {
  row-gap: var(--spacing-sm);
}

.grid-gap-y-md {
  row-gap: var(--spacing-md);
}

.grid-gap-y-lg {
  row-gap: var(--spacing-lg);
}

.grid-gap-y-xl {
  row-gap: var(--spacing-xl);
}

// ============================================================================
// Justify Items (Horizontal Alignment)
// ============================================================================

.grid-justify-items-start {
  justify-items: start;
}

.grid-justify-items-center {
  justify-items: center;
}

.grid-justify-items-end {
  justify-items: end;
}

.grid-justify-items-stretch {
  justify-items: stretch;
}

// ============================================================================
// Align Items (Vertical Alignment)
// ============================================================================

.grid-align-items-start {
  align-items: start;
}

.grid-align-items-center {
  align-items: center;
}

.grid-align-items-end {
  align-items: end;
}

.grid-align-items-stretch {
  align-items: stretch;
}

// ============================================================================
// Grid Item - Column Span
// ============================================================================

.grid-col-span-1 {
  grid-column: span 1;
}

.grid-col-span-2 {
  grid-column: span 2;
}

.grid-col-span-3 {
  grid-column: span 3;
}

.grid-col-span-4 {
  grid-column: span 4;
}

.grid-col-span-5 {
  grid-column: span 5;
}

.grid-col-span-6 {
  grid-column: span 6;
}

.grid-col-span-7 {
  grid-column: span 7;
}

.grid-col-span-8 {
  grid-column: span 8;
}

.grid-col-span-9 {
  grid-column: span 9;
}

.grid-col-span-10 {
  grid-column: span 10;
}

.grid-col-span-11 {
  grid-column: span 11;
}

.grid-col-span-12 {
  grid-column: span 12;
}

// ============================================================================
// Grid Item - Row Span
// ============================================================================

.grid-row-span-1 {
  grid-row: span 1;
}

.grid-row-span-2 {
  grid-row: span 2;
}

.grid-row-span-3 {
  grid-row: span 3;
}

.grid-row-span-4 {
  grid-row: span 4;
}

.grid-row-span-5 {
  grid-row: span 5;
}

.grid-row-span-6 {
  grid-row: span 6;
}