/**
 * Layout-tier container rules, converted to literal CSS from Sass source:
 * src/stories/global/_containers.scss
 *
 * $enable-container-classes is true (src/stories/global/_variables.scss:218,
 * recorded as --site-enable-container-classes in css/base/variables.css), so
 * these rules are written unconditionally -- Phase 0 confirmed they are
 * present in the current compiled output (dist/css/bootstrap.css).
 *
 * The selector list below, and the "nested container removes its own
 * gutter" / ".container-fluid and the responsive .container-{bp} variants
 * share a fluid max-width" behavior, are transcribed directly from the
 * compiled output (dist/css/bootstrap.css:798-947) rather than hand-expanded
 * from the Sass `@extend`/`@each` logic in _containers.scss, per the task
 * brief -- `@extend`'s selector-merging behavior is easy to get subtly
 * wrong by hand.
 *
 * Design tokens are consumed via var(--site-*) custom properties defined in
 * css/base/variables.css (Task 1's output); --bs-gutter-x/--bs-gutter-y are
 * Bootstrap's own runtime custom properties, referenced directly as in the
 * Sass source.
 *
 * BREAKPOINTS: re-derived directly from src/stories/global/_variables.scss
 * ($grid-breakpoints map, lines 349-356 -- this theme does not override
 * Bootstrap's default breakpoint values): sm 576px, md 768px, lg 992px,
 * xl 1200px, xxl 1400px. Each @media rule below is commented with its
 * source --site-grid-breakpoints-* token for traceability (CSS custom
 * properties cannot be used inside an @media condition).
 */

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: var(--site-container-margin-default);
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  /* Lehigh_coe: Override container to use full gutter for outer spacing. */
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
}

/* Lehigh_coe: Override outer margins per breakpoint.
 * --site-grid-breakpoints-lg: 992px */
@media (min-width: 992px) {

  .container,
  .container-fluid,
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    --bs-gutter-x: var(--site-container-margin-lg);
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }
}

/* --site-grid-breakpoints-xl: 1200px */
@media (min-width: 1200px) {

  .container,
  .container-fluid,
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    --bs-gutter-x: var(--site-container-margin-xl);
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }
}

/* --site-grid-breakpoints-xxl: 1400px */
@media (min-width: 1400px) {

  .container,
  .container-fluid,
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    --bs-gutter-x: var(--site-container-margin-xxl);
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }
}

/* Lehigh_coe: If container is nested, remove outer spacing. */
.container .container,
.container .container-fluid,
.container .container-xxl,
.container .container-xl,
.container .container-lg,
.container .container-md,
.container .container-sm,
.container-fluid .container,
.container-xxl .container,
.container-xl .container,
.container-lg .container,
.container-md .container,
.container-sm .container,
.container-fluid .container-fluid,
.container-xxl .container-fluid,
.container-fluid .container-xxl,
.container-xxl .container-xxl,
.container-xl .container-fluid,
.container-xl .container-xxl,
.container-fluid .container-xl,
.container-xxl .container-xl,
.container-xl .container-xl,
.container-lg .container-fluid,
.container-lg .container-xxl,
.container-lg .container-xl,
.container-fluid .container-lg,
.container-xxl .container-lg,
.container-xl .container-lg,
.container-lg .container-lg,
.container-md .container-fluid,
.container-md .container-xxl,
.container-md .container-xl,
.container-md .container-lg,
.container-fluid .container-md,
.container-xxl .container-md,
.container-xl .container-md,
.container-lg .container-md,
.container-md .container-md,
.container-sm .container-fluid,
.container-sm .container-xxl,
.container-sm .container-xl,
.container-sm .container-lg,
.container-sm .container-md,
.container-fluid .container-sm,
.container-xxl .container-sm,
.container-xl .container-sm,
.container-lg .container-sm,
.container-md .container-sm,
.container-sm .container-sm {
  padding-right: 0;
  padding-left: 0;
}

/* Add a max-width to container-fluid (and the responsive .container-{bp}
 * variants, which @extend .container-fluid in the Sass source) for large
 * screens. */
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  max-width: var(--site-container-fluid-max-width);
}

/* Responsive containers that are 100% wide until a breakpoint.
 * --site-grid-breakpoints-sm: 576px */
@media (min-width: 576px) {

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

/* --site-grid-breakpoints-md: 768px */
@media (min-width: 768px) {

  .container-md,
  .container-sm,
  .container {
    max-width: var(--site-container-max-widths-md);
  }
}

/* --site-grid-breakpoints-lg: 992px */
@media (min-width: 992px) {

  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: var(--site-container-max-widths-lg);
  }
}

/* --site-grid-breakpoints-xl: 1200px */
@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: var(--site-container-max-widths-xl);
  }
}

/* --site-grid-breakpoints-xxl: 1400px */
@media (min-width: 1400px) {

  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: var(--site-container-max-widths-xxl);
  }
}