/* ============================================================
   Footer collage — second canvas of the hero's engine, sitting
   behind the prefooter block. Layout only; the composition
   itself is dealt in /lab/js/live.js (FOOTER_SLOTS).
   ============================================================ */

.footer-collage-section {
  /* .section is already position:relative, but the canvas depends on it, so
     say so here rather than inherit it by luck. */
  position: relative;
  overflow: hidden; /* windows bleed off the left/right edges by design */
}

.footer-collage-section #footer-collage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Above .dots (z-index -1), below every piece of content. An absolutely
     positioned element otherwise paints over its in-flow siblings, which
     would bury the footer. */
  z-index: 0;
  /* Vertical panning belongs to the page; the canvas keeps horizontal drags
     and taps for the windows. Matches the hero. */
  touch-action: pan-y pinch-zoom;
}

/* Everything after the canvas has to be lifted out of the default flow layer
   to sit on top of it. */
.footer-collage-section > .grid {
  position: relative;
  z-index: 1;
}

/* The prefooter copy spans the middle of the canvas, so it must not swallow
   pointer events meant for the windows — except the real CTA, which stays
   clickable. Same arrangement as the hero. */
.footer-collage-section .prefooter {
  pointer-events: none;
}
.footer-collage-section .prefooter .button-nav2,
.footer-collage-section .prefooter a {
  pointer-events: auto;
}

@media (max-width: 991px) {
  /* The bar is a .grid.container, so it sat inset by the page margin with the
     section's dotted background showing down either side. Break it out to the
     full viewport and put the margin back as padding, so the black reaches the
     screen edges while its contents stay on the page's own left edge.
     !important because Scaffold's inline styles set `.container { width:
     calc(100% - margin*2) !important }`; this selector outweighs it. */
  .footer-collage-section .grid.container.footer-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--_site-variables---margin-mobile);
    padding-right: var(--_site-variables---margin-mobile);
  }
}