/**
 * Grid Utility CSS - Extended Grid Controls
 * Note: Basic grid classes (.grid, .inline-grid, .grid-cols-1-6,12, .gap-0-6, basic items/justify)
 * are defined in utility.css. This file contains extended grid controls only.
 */

/* Extended Column Counts (7-11) - utility.css has 1-6 and 12 */
.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); }

/* Auto-fit Grid Layouts */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-auto-md {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.grid-auto-custom {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 250px), 1fr));
}

/* Directional Gap Controls */
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }

/* Grid Justify Items - stretch not in utility.css */
/* Grid Justify Items - stretch not in utility.css */
.justify-stretch { justify-items: stretch; }

/* Column Span Controls */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Row Span Controls */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }
.row-span-6 { grid-row: span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid Flow Controls */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Responsive Grid - Tablet (md:) */
@media (max-width: 1024px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:col-span-6 { grid-column: span 6; }
  .md\:col-span-12 { grid-column: span 12; }
  .md\:col-span-full { grid-column: 1 / -1; }
}

/* Responsive Grid - Mobile (sm:) */
@media (max-width: 768px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:col-span-6 { grid-column: span 6; }
  .sm\:col-span-12 { grid-column: span 12; }
  .sm\:col-span-full { grid-column: 1 / -1; }
}

/* Special Grid Patterns */
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

.grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
}

.grid-masonry > * {
  grid-row: span var(--row-span, 20);
}

/* Grid Template Rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* Place Items/Content/Self Utilities */
.place-items-start { place-items: start; }
.place-items-center { place-items: center; }
.place-items-end { place-items: end; }
.place-items-stretch { place-items: stretch; }

.place-content-start { place-content: start; }
.place-content-center { place-content: center; }
.place-content-end { place-content: end; }
.place-content-between { place-content: space-between; }
.place-content-around { place-content: space-around; }
.place-content-evenly { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

.place-self-start { place-self: start; }
.place-self-center { place-self: center; }
.place-self-end { place-self: end; }
.place-self-stretch { place-self: stretch; }