@use "../../variables/index" as *;

@use "../mixins/grid";
@use "../mixins/grid-framework";

/**
 * Grid System - Bootstrap-based responsive grid
 *
 * Note: Uses design tokens for responsive breakpoints ($screen-*), container widths
 * ($container-*), and spacing ($size-4).
 *
 * Intentionally hardcoded values:
 * - 0 padding: Gutter removal utilities, not spacing
 */

// Container widths
// Set the container width, and override it for fixed navbars in media queries.
.container {
  @include grid.container-fixed();
  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

// Fluid container
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
  @include grid.container-fixed();
}

// Row
// Rows contain and clear the floats of your columns.
.row {
  @include grid.make-row();
}

// Columns
// Common styles for small and large grid columns
@include grid-framework.make-grid-columns();
// Extra small grid
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include grid-framework.make-grid(xs);
// Small grid

.no-gutter {
  padding-right: 0;
  padding-left: 0;
}
.no-gutter-r {
  padding-right: 0;
}
.no-gutter-l {
  padding-left: 0;
}

// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
  @include grid-framework.make-grid(sm);
  .no-gutter-sm {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-sm-r, .no-gutter-sm-l
}

// Medium grid
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
  @include grid-framework.make-grid(md);
  .no-gutter-md {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-md-r, .no-gutter-md-l
}

// Large grid
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
  @include grid-framework.make-grid(lg);
  .no-gutter-lg {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-lg-r, .no-gutter-lg-l
}

// max-with for full width layouts which are not listings
.col-lg-max {
  max-width: $screen-max-width;
}

.tight-grid {
  margin-right: calc($size-4 * -1) !important;
  margin-left: calc($size-4 * -1) !important;

  @include grid.make-row();
  [class*='col-xs-'],
  [class*='col-sm-'],
  [class*='col-md-'],
  [class*='col-lg-'] {
    padding-right: $size-4 !important;
    padding-left: $size-4 !important;
  }
}