/* Full-page stacked backgrounds (Home + Events). Images sit behind content; blur on inner layer. */

.page.page--has-bg {
    display: grid;
    grid-template-areas: "pageStack";
    align-items: stretch;
  }
  
  .page.page--has-bg .bg-scroll-stack {
    grid-area: pageStack;
    z-index: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    pointer-events: none;
  }
  
  .page.page--has-bg .bg-scroll-item {
    flex: 1 1 auto;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
  }
  
  /* Blurred image layer (scaled slightly so blur edges don’t clip harshly) */
  .page.page--has-bg .bg-scroll-item__img {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(12px);
    transform: scale(1.06);
  }
  
  /* Light wash so panels/text stay readable over varied photos */
  .page.page--has-bg .bg-scroll-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.65);
    pointer-events: none;
  }
  
  .page.page--has-bg .page-foreground {
    grid-area: pageStack;
    position: relative;
    z-index: 1;
  }