/* Theme layout contract. Backgrounds and fixed overlays remain full width.
 * Explicit component containers avoid constraining images, cards and modals.
 * Important declarations resolve existing module-level important width rules.
 */
:root {
  --beca-site-max: 1240px;
  --beca-site-gutter: clamp(1rem, 3vw, 2rem);
  --container-max: var(--beca-site-max);
  --beca-container-max: var(--beca-site-max);
  --container-pad: var(--beca-site-gutter);
}
.layout-container .beca-banner__inner,
.layout-container .beca-hero-banner__overlay,
.layout-container .beca-container,
.layout-container .beca-inner,
.layout-container .beca-1column-section-inner,
.layout-container .beca-2column-section-inner,
.layout-container .beca-2column-matrix__inner,
.layout-container .beca-flexwrap-matrix__inner,
.layout-container .bfc-inner,
.layout-container .bfs-inner,
.layout-container .beca-impacts__inner,
.layout-container .beca-image-gallery__container,
.layout-container .beca-1column-quote__inner,
.layout-container .beca-2column-quote__container,
.layout-container .beca-contact-channel__inner,
.layout-container .beca-location__inner,
.layout-container .beca-timeline-display__inner,
.layout-container .beca-faq__header,
.layout-container .beca-faq__body,
.layout-container .beca-faq__nudge,
.layout-container .beca-story__container,
.layout-container .beca-story__header,
.layout-container .beca-story__banner-caption-inner,
.layout-container .beca-resource-library > .br-inner,
.layout-container .br-detail > .br-inner,
.layout-container .beca-search-shell,
.layout-container .beca-registry-form,
.layout-container .beca-fellowship-alerts-form,
.layout-container .person-display,
.layout-container .beca-footer__inner,
.layout-container .beca-footer__bottom-inner,
.layout-container .beca-header__inner,
.layout-container .beca-fullwidth-image-text-header-wrap,
.layout-container .beca-fullwidth-image-text-body-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: min(var(--beca-site-max), calc(100% - 2 * var(--beca-site-gutter))) !important;
  min-width: 0;
  margin-inline: auto !important;
}
/* Nested containers inherit their parent's safe edges without another gutter. */
.layout-container :is(.beca-inner, .bfc-inner, .beca-container)
  :is(.beca-inner, .bfc-inner, .beca-container) {
  max-width: 100% !important;
}
/* Allow flex and grid children to shrink without resetting their column widths. */
.layout-container .layout__region,
.layout-container :is(.beca-section, .bfc-section, .person-display, .br-inner) > *,
.layout-container :is(.beca-z-matrix-row, .beca-image-text-row, .bfc-grid) > * {
  min-width: 0;
}
.layout-container :is(p, a, h1, h2, h3, h4, li, dd) {
  overflow-wrap: anywhere;
}
.layout-container :is(input, select, textarea, iframe) { max-width: 100%; }
.layout-container pre { max-width: 100%; overflow-x: auto; }
.layout-container .text-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
/* Opt-in container for future modules; full-bleed sections keep their own roots. */
.layout-container .beca-content-container {
  width: min(var(--beca-site-max), calc(100% - 2 * var(--beca-site-gutter)));
  margin-inline: auto;
}
/* Mobile containers use the entire available parent width. Module padding
 * remains inside the container rather than becoming another outer gutter. */
@media (max-width: 767px) {
  :root { --beca-site-gutter: 0px; }
  .region-content .layout:is(.layout--twocol-section, .layout--threecol-section, .layout--fourcol-section) {
    flex-direction: column;
  }
  .region-content .layout:is(.layout--twocol-section, .layout--threecol-section, .layout--fourcol-section) > .layout__region {
    flex: 0 0 100%;
    width: 100%;
  }
  .layout-container .br-pager { flex-wrap: wrap; }
}

/* Match the final mobile content inset used by Feature Cards and companions. */
@media (max-width: 768px) {
  .layout-container .beca-institutions > .beca-inner,
  .layout-container .person-display,
  .layout-container .bfs-section > .bfs-inner,
  .layout-container .beca-stories > .beca-inner,
  .layout-container .beca-section.beca-z-matrix > .beca-inner,
  .layout-container .beca-1column-section .beca-1column-section-inner,
  .layout-container .beca-header .beca-header__inner,
  .layout-container .beca-header .beca-mega-nav {
    padding-inline: 2.5rem !important;
  }
}

/* Story section headings follow the same left edge as their body/grid.
 * Scope this override to stories; other modules retain alignment settings. */
@media (min-width: 769px) {
  .layout-container .bfs-section .bfs-header,
  .layout-container .beca-stories .beca-stories__header,
  .layout-container .beca-story__main > .beca-story__header {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .layout-container .bfs-header > :is(.bfs-eyebrow, .bfs-heading),
  .layout-container .beca-stories__header-left > :is(.eyebrow, .heading),
  .layout-container .beca-story__header > :is(.bfc-eyebrow, .bfc-heading) {
    margin-inline: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }
}

/* Individual story page: the header is a direct child of the article container,
 * not of the main text column. Never apply another site gutter inside it. */
.layout-container .beca-story .beca-story__container > .beca-story__header {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.layout-container .beca-story__container > .beca-story__header > :is(.bfc-eyebrow, .bfc-heading) {
  margin-inline: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}
@media (max-width: 768px) {
  .layout-container .beca-story > .beca-story__container,
  .layout-container .beca-story .beca-story__banner-caption-inner {
    padding-inline: 2.5rem !important;
  }
}

/* Story titles are nested inside the intro wrapper in the current template. */
@media (min-width: 0px) {
  .layout-container .beca-story__container > .beca-story__intro {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .layout-container .beca-story__intro > .beca-story__header.bfc-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .layout-container .beca-story__intro > .beca-story__header > :is(.bfc-heading, .bfc-eyebrow) {
    margin-inline: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }
  .layout-container .beca-story__intro > .beca-story__header > .bfc-heading {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Image–Text: let the shared inner container own horizontal spacing. */
.layout-container .beca-section.beca-image-text {
  padding-inline: 0 !important;
}
@media (max-width: 768px) {
  .layout-container .beca-section.beca-image-text > .beca-inner {
    padding-inline: 2.5rem !important;
  }
}

/* Quiet glass finish for the two floating utility controls. */
body :is(.beca-scroll-up, .beca-cookie-settings-trigger) {
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.38);
  color: #334155;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}
body :is(.beca-scroll-up, .beca-cookie-settings-trigger):is(:hover, :focus-visible) {
  background: rgba(248, 250, 252, 0.88);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body :is(.beca-scroll-up, .beca-cookie-settings-trigger):focus-visible {
  outline: 2px solid #135AD5;
  outline-offset: 3px;
}
body :is(.beca-scroll-up, .beca-cookie-settings-trigger) img {
  filter: brightness(0);
  opacity: 0.65;
}
body :is(.beca-scroll-up, .beca-cookie-settings-trigger) svg { color: #334155; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :is(.beca-scroll-up, .beca-cookie-settings-trigger) { background: rgba(248, 250, 252, 0.95); }
}