/* TeamLMI Grid System */
:root {
  /* Spacing Scale */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  
  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  
  /* Grid Settings */
  --grid-columns: 12;
  --grid-gap: var(--space-lg);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container--fluid {
  max-width: 100%;
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

.container--2xl {
  max-width: var(--container-2xl);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

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

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

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

/* Grid Items */
.grid__item--span-1 { grid-column: span 1; }
.grid__item--span-2 { grid-column: span 2; }
.grid__item--span-3 { grid-column: span 3; }
.grid__item--span-4 { grid-column: span 4; }
.grid__item--span-5 { grid-column: span 5; }
.grid__item--span-6 { grid-column: span 6; }
.grid__item--span-7 { grid-column: span 7; }
.grid__item--span-8 { grid-column: span 8; }
.grid__item--span-9 { grid-column: span 9; }
.grid__item--span-10 { grid-column: span 10; }
.grid__item--span-11 { grid-column: span 11; }
.grid__item--span-12 { grid-column: span 12; }

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex--row {
  flex-direction: row;
}

.flex--column {
  flex-direction: column;
}

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

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--around {
  justify-content: space-around;
}

.flex--start {
  justify-content: flex-start;
}

.flex--end {
  justify-content: flex-end;
}

/* Sections */
.section {
  padding: var(--space-3xl) 0;
}

.section--sm {
  padding: var(--space-2xl) 0;
}

.section--lg {
  padding: var(--space-4xl) 0;
}

.section--no-padding {
  padding: 0;
}

/* Responsive Grid */
@media (max-width: 1024px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  
  .grid--12 {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .grid__item--lg-span-12 { grid-column: span 8; }
  .grid__item--lg-span-8 { grid-column: span 8; }
  .grid__item--lg-span-6 { grid-column: span 6; }
  .grid__item--lg-span-4 { grid-column: span 4; }
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  .grid--12,
  .grid--6,
  .grid--4,
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }
  
  .grid__item--span-1,
  .grid__item--span-2,
  .grid__item--span-3,
  .grid__item--span-4,
  .grid__item--span-5,
  .grid__item--span-6,
  .grid__item--span-7,
  .grid__item--span-8,
  .grid__item--span-9,
  .grid__item--span-10,
  .grid__item--span-11,
  .grid__item--span-12 {
    grid-column: auto;
  }
  
  .section {
    padding: var(--space-2xl) 0;
  }
  
  .section--lg {
    padding: var(--space-3xl) 0;
  }
}