// ==========================================================================
// GRID SYSTEMS
// ==========================================================================
// Flexible grid system supporting 12-column, CSS Grid, and Flexbox layouts
// Theme-agnostic structural definitions
// ==========================================================================

// CSS VARIABLES - Using base design tokens
:root {
  --grid-columns: 12;
  --grid-gap: #{$base-spacing-6};        // 24px -> 1.5rem
  --grid-gap-sm: #{$base-spacing-4};     // 16px -> 1rem
  --grid-gap-lg: #{$base-spacing-8};     // 32px -> 2rem
  --grid-max-width: #{$base-sizing-max-width-screen-xl}; // 1280px
  --grid-padding: #{$base-spacing-6};    // 24px -> 1.5rem
}

// CONTAINER SYSTEM
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-padding);

  &.container-fluid {
    max-width: none;
  }

  &.container-sm {
    max-width: #{$base-breakpoint-sm};
  }

  &.container-md {
    max-width: #{$base-breakpoint-md};
  }

  &.container-lg {
    max-width: #{$base-breakpoint-lg};
  }

  &.container-xl {
    max-width: #{$base-breakpoint-xl};
  }

  &.container-xxl {
    max-width: #{$base-breakpoint-2xl};
  }

  // Container state classes
  &.container-is-fluid {
    max-width: none;
    width: 100%;
  }

  &.container-no-gutters {
    padding-left: 0;
    padding-right: 0;
  }

  &.container-max-sm,
  &.container-max-md,
  &.container-max-lg,
  &.container-max-xl,
  &.container-max-xxl {
    // These classes are applied dynamically by the component
    // and use the existing container-* classes above
  }
}

// FLEXBOX GRID SYSTEM
.row {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--grid-gap) / -2);

  &.row-no-gutters {
    margin: 0;
    
    > .col,
    > [class*="col-"] {
      padding: 0;
    }
  }

  &.row-gap-sm {
    margin: calc(var(--grid-gap-sm) / -2);
  }

  &.row-gap-lg {
    margin: calc(var(--grid-gap-lg) / -2);
  }

  // Row state classes from components
  &.row-without-gutters {
    margin: 0;
    
    > .col,
    > [class*="col-"] {
      padding: 0;
    }
  }

  &.row-justify-start { justify-content: flex-start; }
  &.row-justify-center { justify-content: center; }
  &.row-justify-end { justify-content: flex-end; }
  &.row-justify-around { justify-content: space-around; }
  &.row-justify-between { justify-content: space-between; }
  &.row-justify-evenly { justify-content: space-evenly; }

  &.row-align-start { align-items: flex-start; }
  &.row-align-center { align-items: center; }
  &.row-align-end { align-items: flex-end; }
  &.row-align-stretch { align-items: stretch; }
  &.row-align-baseline { align-items: baseline; }
}

.col {
  flex: 1 0 0%;
  padding: calc(var(--grid-gap) / 2);
}

// RESPONSIVE COLUMNS
@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 auto;
    width: percentage($i / 12);
    padding: calc(var(--grid-gap) / 2);
  }
}

// BREAKPOINT-SPECIFIC COLUMNS
@media (min-width: 576px) {
  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      flex: 0 0 auto;
      width: percentage($i / 12);
    }
  }
  .col-sm {
    flex: 1 0 0%;
  }
}

@media (min-width: 768px) {
  @for $i from 1 through 12 {
    .col-md-#{$i} {
      flex: 0 0 auto;
      width: percentage($i / 12);
    }
  }
  .col-md {
    flex: 1 0 0%;
  }
}

@media (min-width: 992px) {
  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      flex: 0 0 auto;
      width: percentage($i / 12);
    }
  }
  .col-lg {
    flex: 1 0 0%;
  }
}

@media (min-width: 1200px) {
  @for $i from 1 through 12 {
    .col-xl-#{$i} {
      flex: 0 0 auto;
      width: percentage($i / 12);
    }
  }
  .col-xl {
    flex: 1 0 0%;
  }
}

// CSS GRID SYSTEM
.grid {
  display: grid;
  gap: var(--grid-gap);

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

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

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

// GRID SPANS
@for $i from 1 through 12 {
  .span-#{$i} {
    grid-column: span #{$i};
  }
}

// GRID POSITIONING
@for $i from 1 through 12 {
  .col-start-#{$i} {
    grid-column-start: #{$i};
  }
  
  .col-end-#{$i} {
    grid-column-end: #{$i};
  }
  
  .row-start-#{$i} {
    grid-row-start: #{$i};
  }
  
  .row-end-#{$i} {
    grid-row-end: #{$i};
  }
}

// RESPONSIVE GRID SPANS
@media (min-width: 576px) {
  @for $i from 1 through 12 {
    .span-sm-#{$i} {
      grid-column: span #{$i};
    }
  }
}

@media (min-width: 768px) {
  @for $i from 1 through 12 {
    .span-md-#{$i} {
      grid-column: span #{$i};
    }
  }
}

@media (min-width: 992px) {
  @for $i from 1 through 12 {
    .span-lg-#{$i} {
      grid-column: span #{$i};
    }
  }
}

@media (min-width: 1200px) {
  @for $i from 1 through 12 {
    .span-xl-#{$i} {
      grid-column: span #{$i};
    }
  }
}

// ALIGNMENT UTILITIES
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

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

.items-start { align-items: start; }
.items-end { align-items: end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.self-start { align-self: start; }
.self-end { align-self: end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

// RESPONSIVE CONTAINERS
@media (max-width: 575px) {
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 767px) {
  .row {
    margin: calc(var(--grid-gap-sm) / -2);
  }
  
  .col,
  [class*="col-"] {
    padding: calc(var(--grid-gap-sm) / 2);
  }
  
  .grid {
    gap: var(--grid-gap-sm);
  }
}