// ============================================
// l-container
// ============================================
// _l-container.scss
//
// Sits alongside Bootstrap's .container / .container-fluid.
// Each variant has ONE job: constrain width.
// Never put spacing (padding-block) on containers.

// --- Edge: for navigation and footer ---
// Small viewports: full-width with responsive side padding
// Large viewports: 90% centered with max-width cap, no padding
.container-edge {
  width: 100%;
  padding-inline: var(--hks-layout-padding-x);
  margin-inline: auto;

  @include media-breakpoint-up(xl) {
    width: 90%;
    max-width: $container-wide-max; // 1600px
    padding-inline: 0;
  }
}

// --- Wide: 90% width with a cap ---
// For full-bleed-ish content that still needs breathing room
.container-wide {
  width: 90%;
  max-width: $container-wide-max;
  padding-inline: 0;
  margin-inline: auto;
}

// --- Container 1540: behaves like .container, capped to 1540 from >=1600 ---
.container-1540 {
  @include make-container();
  --hks-gutter-x: 1.5rem;
  @each $breakpoint, $container-max-width in $container-max-widths {
    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      max-width: $container-max-width;
    }
  }

  @include media-breakpoint-up(1600, $grid-breakpoints) {
    max-width: $container-1540-max;
  }
}

// --- Narrow: for mixed content that doesn't need full width ---
// Cards, small grids, forms
.container-narrow {
  @include make-container();
  --hks-gutter-x: 1.5rem;

  @include media-breakpoint-up(sm, $grid-breakpoints) {
    max-width: map-get($container-max-widths, sm);
  }

  @include media-breakpoint-up(md, $grid-breakpoints) {
    max-width: map-get($container-max-widths, md);
  }

  @include media-breakpoint-up(lg, $grid-breakpoints) {
    max-width: 960px;
  }
}

// --- Text: optimized for reading ---
// Long-form copy, articles, blog posts
.container-text {
  width: 100%;
  max-width: $container-text-max;
  padding-inline: $container-padding-x;
  margin-inline: auto;
}

// --- Flush: edge to edge, no padding ---
// Full-bleed images, video, maps
.container-flush {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}

.container-wide,
.container-1540,
.container-narrow,
.container,
.container-fluid {
  > .container-text {
    padding-inline: 0;
  }
}

// .b-student-list > .container-xxl {
//   @include media-breakpoint-up(xxl) {
//     max-width: 1540px;
//   }
// }