/**
 * GRID PRIMITIVE
 * Based on Every Layout's Grid
 * Creates responsive grid layouts with automatic column wrapping
 *
 * Features:
 * - CSS Grid-based layout with auto-fitting columns
 * - Uses min() function for container-aware responsive behavior
 * - Columns grow and shrink together to fill available space
 * - Shared height for cards via default align-items: stretch
 * - No JavaScript required for responsive behavior
 *
 * Usage:
 * .grid - Basic responsive grid (default 16rem min)
 * .grid[data-grid="compact"] - Small tiles (8rem)
 * .grid[data-grid="cards"] - Standard cards (16rem)
 * .grid[data-grid="halves"] - Always 2 columns
 */

.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
}

/* Modern browsers with min() support - responsive auto-fit grid */
@supports (width: min(250px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
}

/* Fallback for older browsers - single column */
@supports not (width: min(250px, 100%)) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Column width configurations
   ======================================== */

/* Compact grid - small tiles */
.grid[data-grid="compact"] {
  --grid-min: 8rem;
}

/* Tiles grid - medium tiles */
.grid[data-grid="tiles"] {
  --grid-min: 12rem;
}

/* Cards grid - standard cards */
.grid[data-grid="cards"] {
  --grid-min: 16rem;
}

/* Large grid - big panels */
.grid[data-grid="large"] {
  --grid-min: 24rem;
}

/* Two-column grid - always split in half */
.grid[data-grid="halves"] {
  --grid-min: calc(50% - (var(--grid-gap, 1rem) / 2));
}