/**
 * Grid Component
 * Full accessibility support
 * Flexible grid system for layout management
 */

/* ========================================
   GRID CUSTOM PROPERTIES
   ======================================== */

.c-grid {
  /* Base properties */
  --c-grid-columns: 12;
  --c-grid-gap: var(--ds-space-m);
  --c-grid-row-gap: var(--c-grid-gap);
  --c-grid-column-gap: var(--c-grid-gap);
  --c-grid-min-column-width: 200px;
  
  /* Responsive breakpoints */
  --c-grid-breakpoint-s: 576px;
  --c-grid-breakpoint-m: 768px;
  --c-grid-breakpoint-l: 992px;
  --c-grid-breakpoint-xl: 1200px;
}

/* ========================================
   BASE GRID STYLES
   ======================================== */

.c-grid {
  display: grid;
  grid-template-columns: repeat(var(--c-grid-columns), 1fr);
  gap: var(--c-grid-gap);
  width: 100%;
}

/* Custom gap properties */
.c-grid--gap-row {
  row-gap: var(--c-grid-row-gap);
  column-gap: var(--c-grid-column-gap);
}

/* ========================================
   COLUMN VARIANTS
   ======================================== */

/* Fixed column counts */
.c-grid--1 {
  --c-grid-columns: 1;
  grid-template-columns: repeat(1, 1fr);
}

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

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

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

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

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

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

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

/* Auto-fit variants */
.c-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--c-grid-min-column-width), 1fr));
}

.c-grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--c-grid-min-column-width), 1fr));
}

/* ========================================
   GAP VARIANTS
   ======================================== */

/* No gap */
.c-grid--gap-none {
  --c-grid-gap: 0;
}

/* Extra small gap */
.c-grid--gap-xs {
  --c-grid-gap: var(--ds-space-xs);
}

/* Small gap */
.c-grid--gap-s {
  --c-grid-gap: var(--ds-space-s);
}

/* Medium gap (default) */
.c-grid--gap-m {
  --c-grid-gap: var(--ds-space-m);
}

/* Large gap */
.c-grid--gap-l {
  --c-grid-gap: var(--ds-space-l);
}

/* Extra large gap */
.c-grid--gap-xl {
  --c-grid-gap: var(--ds-space-xl);
}

/* Extra extra large gap */
.c-grid--gap-xxl {
  --c-grid-gap: var(--ds-space-xxl);
}

/* ========================================
   ALIGNMENT VARIANTS
   ======================================== */

/* Justify items */
.c-grid--justify-start {
  justify-items: start;
}

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

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

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

/* Align items */
.c-grid--align-start {
  align-items: start;
}

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

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

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

/* Justify content */
.c-grid--justify-content-start {
  justify-content: start;
}

.c-grid--justify-content-center {
  justify-content: center;
}

.c-grid--justify-content-end {
  justify-content: end;
}

.c-grid--justify-content-between {
  justify-content: space-between;
}

.c-grid--justify-content-around {
  justify-content: space-around;
}

.c-grid--justify-content-evenly {
  justify-content: space-evenly;
}

/* Align content */
.c-grid--align-content-start {
  align-content: start;
}

.c-grid--align-content-center {
  align-content: center;
}

.c-grid--align-content-end {
  align-content: end;
}

.c-grid--align-content-between {
  align-content: space-between;
}

.c-grid--align-content-around {
  align-content: space-around;
}

.c-grid--align-content-evenly {
  align-content: space-evenly;
}

/* ========================================
   GRID ITEM STYLES
   ======================================== */

.c-grid-item {
  min-width: 0; /* Prevent overflow */
}

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

/* Row span */
.c-grid-item--row-span-1 { grid-row: span 1; }
.c-grid-item--row-span-2 { grid-row: span 2; }
.c-grid-item--row-span-3 { grid-row: span 3; }
.c-grid-item--row-span-4 { grid-row: span 4; }
.c-grid-item--row-span-5 { grid-row: span 5; }
.c-grid-item--row-span-6 { grid-row: span 6; }

/* Column start */
.c-grid-item--col-start-1 { grid-column-start: 1; }
.c-grid-item--col-start-2 { grid-column-start: 2; }
.c-grid-item--col-start-3 { grid-column-start: 3; }
.c-grid-item--col-start-4 { grid-column-start: 4; }
.c-grid-item--col-start-5 { grid-column-start: 5; }
.c-grid-item--col-start-6 { grid-column-start: 6; }
.c-grid-item--col-start-7 { grid-column-start: 7; }
.c-grid-item--col-start-8 { grid-column-start: 8; }
.c-grid-item--col-start-9 { grid-column-start: 9; }
.c-grid-item--col-start-10 { grid-column-start: 10; }
.c-grid-item--col-start-11 { grid-column-start: 11; }
.c-grid-item--col-start-12 { grid-column-start: 12; }

/* Column end */
.c-grid-item--col-end-1 { grid-column-end: 1; }
.c-grid-item--col-end-2 { grid-column-end: 2; }
.c-grid-item--col-end-3 { grid-column-end: 3; }
.c-grid-item--col-end-4 { grid-column-end: 4; }
.c-grid-item--col-end-5 { grid-column-end: 5; }
.c-grid-item--col-end-6 { grid-column-end: 6; }
.c-grid-item--col-end-7 { grid-column-end: 7; }
.c-grid-item--col-end-8 { grid-column-end: 8; }
.c-grid-item--col-end-9 { grid-column-end: 9; }
.c-grid-item--col-end-10 { grid-column-end: 10; }
.c-grid-item--col-end-11 { grid-column-end: 11; }
.c-grid-item--col-end-12 { grid-column-end: 12; }
.c-grid-item--col-end-13 { grid-column-end: 13; }

/* Item alignment */
.c-grid-item--justify-start { justify-self: start; }
.c-grid-item--justify-center { justify-self: center; }
.c-grid-item--justify-end { justify-self: end; }
.c-grid-item--justify-stretch { justify-self: stretch; }

.c-grid-item--align-start { align-self: start; }
.c-grid-item--align-center { align-self: center; }
.c-grid-item--align-end { align-self: end; }
.c-grid-item--align-stretch { align-self: stretch; }

/* ========================================
   RESPONSIVE VARIANTS
   ======================================== */

/* Small screens and up */
@media (min-width: 576px) {
  .c-grid--s-1 { grid-template-columns: repeat(1, 1fr); }
  .c-grid--s-2 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--s-3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--s-4 { grid-template-columns: repeat(4, 1fr); }
  .c-grid--s-6 { grid-template-columns: repeat(6, 1fr); }
  .c-grid--s-12 { grid-template-columns: repeat(12, 1fr); }
  
  .c-grid-item--s-span-1 { grid-column: span 1; }
  .c-grid-item--s-span-2 { grid-column: span 2; }
  .c-grid-item--s-span-3 { grid-column: span 3; }
  .c-grid-item--s-span-4 { grid-column: span 4; }
  .c-grid-item--s-span-6 { grid-column: span 6; }
  .c-grid-item--s-span-12 { grid-column: span 12; }
}

/* Medium screens and up */
@media (min-width: 768px) {
  .c-grid--m-1 { grid-template-columns: repeat(1, 1fr); }
  .c-grid--m-2 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--m-3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--m-4 { grid-template-columns: repeat(4, 1fr); }
  .c-grid--m-6 { grid-template-columns: repeat(6, 1fr); }
  .c-grid--m-12 { grid-template-columns: repeat(12, 1fr); }
  
  .c-grid-item--m-span-1 { grid-column: span 1; }
  .c-grid-item--m-span-2 { grid-column: span 2; }
  .c-grid-item--m-span-3 { grid-column: span 3; }
  .c-grid-item--m-span-4 { grid-column: span 4; }
  .c-grid-item--m-span-6 { grid-column: span 6; }
  .c-grid-item--m-span-12 { grid-column: span 12; }
}

/* Large screens and up */
@media (min-width: 992px) {
  .c-grid--l-1 { grid-template-columns: repeat(1, 1fr); }
  .c-grid--l-2 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--l-3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--l-4 { grid-template-columns: repeat(4, 1fr); }
  .c-grid--l-6 { grid-template-columns: repeat(6, 1fr); }
  .c-grid--l-12 { grid-template-columns: repeat(12, 1fr); }
  
  .c-grid-item--l-span-1 { grid-column: span 1; }
  .c-grid-item--l-span-2 { grid-column: span 2; }
  .c-grid-item--l-span-3 { grid-column: span 3; }
  .c-grid-item--l-span-4 { grid-column: span 4; }
  .c-grid-item--l-span-6 { grid-column: span 6; }
  .c-grid-item--l-span-12 { grid-column: span 12; }
}

/* Extra large screens and up */
@media (min-width: 1200px) {
  .c-grid--xl-1 { grid-template-columns: repeat(1, 1fr); }
  .c-grid--xl-2 { grid-template-columns: repeat(2, 1fr); }
  .c-grid--xl-3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--xl-4 { grid-template-columns: repeat(4, 1fr); }
  .c-grid--xl-6 { grid-template-columns: repeat(6, 1fr); }
  .c-grid--xl-12 { grid-template-columns: repeat(12, 1fr); }
  
  .c-grid-item--xl-span-1 { grid-column: span 1; }
  .c-grid-item--xl-span-2 { grid-column: span 2; }
  .c-grid-item--xl-span-3 { grid-column: span 3; }
  .c-grid-item--xl-span-4 { grid-column: span 4; }
  .c-grid-item--xl-span-6 { grid-column: span 6; }
  .c-grid-item--xl-span-12 { grid-column: span 12; }
}

/* ========================================
   SPECIAL GRID LAYOUTS
   ======================================== */

/* Masonry-like layout */
.c-grid--masonry {
  grid-template-rows: masonry;
}

/* Dense packing */
.c-grid--dense {
  grid-auto-flow: dense;
}

/* Subgrid support */
.c-grid--subgrid {
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-grid,
  .c-grid *,
  .c-grid *::before,
  .c-grid *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .c-grid {
    display: block !important;
  }
  
  .c-grid-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ========================================
   UTILITIES
   ======================================== */

/* Debug mode */
.c-grid--debug {
  background-image: 
    linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: var(--c-grid-gap) var(--c-grid-gap);
}

.c-grid--debug .c-grid-item {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.3);
}

/* Equal height items */
.c-grid--equal-height .c-grid-item {
  display: flex;
  flex-direction: column;
}

.c-grid--equal-height .c-grid-item > * {
  flex: 1;
}