/*
 * Background container (CType "bgContainer", CON-1291). "layout" picks the colour: 0 = grey (default),
 * 1 = white. Children read "--surface-bg"/"--surface-bg-solid"/"--surface-border" (1-settings/_variables.scss), so on
 * a grey container their own grey surfaces switch to the white glass of Figma node 2331:1758
 * (bg #f2f2f2). Vertical spacing comes from the children (no padding on the container itself). New colour = one more modifier here
 * plus one more item in Page.tsconfig.
 */
@layer organisms {
  /* Full-bleed: the colour sits on a ::before spanning the whole viewport, the content stays at
     the width of the surrounding container. 100vw includes the scrollbar, hence the scoped
     overflow-x clip (clip, not hidden: keeps the sticky header working). */
  body:has(.bg-container) {
    overflow-x: clip;
  }
  .bg-container {
    position: relative;
    isolation: isolate;
  }
  .bg-container::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    translate: -50% 0;
    z-index: -1;
  }
  .bg-container--grey {
    --surface-bg: var(--glass-white);
    --surface-bg-solid: var(--shade-white);
    --surface-border: var(--shade-grey-100);
  }
  .bg-container--grey::before {
    background: var(--shade-grey-070);
  }
}