/*
 * One horizontal alignment contract for the complete public website.
 *
 * Background sections remain full-bleed. Their inner page containers own the
 * shared edge gutter, so content moves inward without moving the background.
 */
:root {
  --bc-page-gutter: clamp(32px, 5vw, 96px);
}

/* Never inset a top-level background block. */
#main-wrapper
  > :not(header):not(footer):not(#chat-toggle):not(#chat-box),
#main-wrapper > main > *,
#main-wrapper > .cms-section > *,
#main-wrapper > .cms-section .cms-section > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Header and footer backgrounds remain full width; their inner content uses
 * the same edge as every page container. */
#main-wrapper > header :is(.container, .container-fluid, .container-custom, .container-custom-1520),
#main-wrapper > footer :is(.container, .container-fluid, .container-custom, .container-custom-1520) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--bc-page-gutter);
}

/* CMS wrappers are layout shells. Their grid fills the full-bleed section;
 * the page-level containers inside each CMS block provide the gutter. */
#main-wrapper > .cms-section :is(.bc-cms-wrapper, .bc-cms-wrapper__inner) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Normalize every public page-container name used by legacy and CMS
 * templates. Component/card padding is intentionally not included here. */
#main-wrapper
  :is(
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-custom,
    .container-custom-1520,
    .bc-container,
    .bc-happening-container,
    .bc-life-container,
    .bc-school-container,
    .bc-programme-container,
    .bc-download-directory-container,
    .bc-downloads-container
  ) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--bc-page-gutter);
  min-width: 0;
}

/* Keep wide highlight/quick-fact strips inside the shared content edges while
 * allowing their individual cards to shrink instead of overflowing. */
#main-wrapper :is(.bc-life-feature-band, .bc-course-feature-strip .bc-programme-container) {
  box-sizing: border-box;
  min-width: 0;
}

#main-wrapper .bc-life-feature-band {
  box-sizing: border-box;
  width: calc(100% - var(--bc-page-gutter) - var(--bc-page-gutter));
  max-width: none;
  margin-inline: var(--bc-page-gutter);
  padding-inline: clamp(16px, 2.2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

/* CMS feature strips are nested inside named CMS sections. Keep the strip
 * itself aligned to the site gutter instead of letting the section reset it
 * to the viewport edge. */
#main-wrapper
  :is(#library-highlights, #clinic-highlights, #src-highlights, #sports-highlights)
  .bc-life-feature-band {
  box-sizing: border-box;
  width: calc(100% - var(--bc-page-gutter) - var(--bc-page-gutter));
  max-width: none;
  margin-inline: var(--bc-page-gutter);
  padding-inline: clamp(16px, 2.2vw, 20px);
}

#main-wrapper .bc-life-feature,
#main-wrapper .bc-course-feature-strip article,
#main-wrapper .bc-research-course-facts article {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* These forms sit over full-bleed directory heroes. Their panel edges should
 * align with the same gutter as the page content, not the viewport edge. */
#main-wrapper .bc-impact .bc-public-filters--floating {
  box-sizing: border-box;
  left: var(--bc-page-gutter);
  right: var(--bc-page-gutter);
  width: auto;
  max-width: none;
  min-width: 0;
}

#main-wrapper :is(.bc-public-filters, .bc-public-filters--collection, .bc-public-filters--repository, .bc-public-filters--data),
#main-wrapper :is(.bc-public-filters, .bc-public-filters--collection, .bc-public-filters--repository, .bc-public-filters--data) > *,
#main-wrapper .bc-filter-actions,
#main-wrapper .bc-year-selector,
#main-wrapper .bc-happening-filter,
#main-wrapper .bc-happening-filter > * {
  min-width: 0;
}

#main-wrapper :is(.bc-public-filters, .bc-public-filters--collection, .bc-public-filters--repository, .bc-public-filters--data) input,
#main-wrapper :is(.bc-public-filters, .bc-public-filters--collection, .bc-public-filters--repository, .bc-public-filters--data) select,
#main-wrapper .bc-happening-filter input,
#main-wrapper .bc-happening-filter select,
#main-wrapper .bc-year-selector input {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

#main-wrapper .bc-research-course-facts .bc-programme-container {
  box-sizing: border-box;
  width: calc(100% - var(--bc-page-gutter) - var(--bc-page-gutter));
  max-width: none;
  margin-inline: var(--bc-page-gutter);
  padding-inline: clamp(10px, 1.2vw, 14px);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

@media (max-width: 767px) {
  #main-wrapper .bc-life-feature-band,
  #main-wrapper .bc-research-course-facts .bc-programme-container {
    grid-template-columns: 1fr;
  }
}