/* ── Parallax Section – Frontend ──────────────────────────────────────── */

.pxs-parallax-section {
  position: relative;
  overflow: hidden;
}

/* Background layer – sized and positioned by frontend.js on init */
.pxs-parallax-bg {
  position: absolute;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}

/* Colour overlay between background and content */
.pxs-parallax-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Content sits above background and overlay */
.pxs-parallax-content {
  position: relative;
  z-index: 2;
}

/* On small screens disable the JS parallax by resetting the bg geometry.
   The JS checks speed === 0 but the bg div still exists; this ensures it
   covers the section even without transforms. */
@media (max-width: 767px) {
  .pxs-parallax-bg {
    top: 0 !important;
    height: 100% !important;
    transform: none !important;
  }
}