/* Parallax image band — full-bleed bg with JS parallax (about.js shifts [data-parallax-bg]); deep-blue overlay. */
.parallax-band {
  position: relative;
  overflow: clip;
  min-height: clamp(280px, 34vw, 320px);
  display: grid;
  /* Backdrop behind the parallax layer — fills the hairline the composited (will-change)
     bg can leave at the clip edge, so no light seam shows between sections. */
  /* background: var(--color-water); */
}

.section--transparent {
  background: transparent;
}

.parallax-band__bg {
  position: absolute;
  /* Extra vertical overflow gives the parallax room to travel without exposing an edge. */
  inset: -26% 0;
  z-index: -2;
  will-change: transform;
}
.parallax-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.parallax-band__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-water) 55%, transparent);
}
.parallax-band__inner {
  align-content: center;
  padding-block: var(--section-pad);
}
.parallax-band__copy {
  grid-column: 2 / 12;
  justify-self: center;
  text-align: center;
  color: var(--color-white);
}
.parallax-band__heading {
  color: var(--color-white);
  margin: 0 0 0.5rem;
}
.parallax-band__text {
  margin: 0;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-band__bg {
    inset: 0;
    transform: none !important;
  }
}

/* ==========================================================================
   Full-width variant (ACF style = "fullwidth") — a contained, near-full-bleed
   image that zooms OUT on scroll into view (data-img-reveal="zoom" → image-reveal.js),
   framed by the section's colour band, with a faint technical grid overlay and a
   white dot-motif in the top-right corner (per the design).
   ========================================================================== */
.parallax-band--full {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: var(--gutter); /* thin colour-band frame around the image on all sides */
}
.parallax-band--full .parallax-band__media {
  position: relative; /* positioning context for the grid overlay + corner motif */
  width: 100%;
  aspect-ratio: 16 / 9;
  /* [data-img-reveal] already sets overflow:hidden — clips the 1.15→1 zoom to the frame. */
}
/* Steel tint over the image (below the grid overlay + motif). */
.parallax-band--full .parallax-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-steel) 15%, transparent);
  pointer-events: none;
}
/* Faint technical grid overlay (mirrors .cta-band--overlay). Sits above the image. */
.parallax-band__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* White brand mark, inset from the top-right corner. Size overrides the .dot-motif base of 64px. */
.parallax-band__motif {
  position: absolute;
  top: clamp(1rem, 2.5vw, 2.25rem);
  right: clamp(1rem, 2.5vw, 2.25rem);
  z-index: 3;
  --motif-size: clamp(2.5rem, 3vw, 3.75rem);
  color: var(--color-white);
  pointer-events: none;
}
/* Optional overlay copy — centred over the image. */
.parallax-band--full .parallax-band__inner {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--section-y);
}

@media (max-width: 768px) {
  .parallax-band--full .parallax-band__media {
    aspect-ratio: 4 / 5; /* taller crop reads better on narrow screens */
  }
}