/* =========================================================================
   Parallax photo backdrops for dark bands: the home page hero, featured
   routes and community CTA, and a rock region's header band (.has-parallax,
   photo passed in --parallax-image).

   The photo lives on a ::before layer that the band clips. js/parallax.js
   sizes the overhang (--parallax-range, above and below the band) from the
   band and viewport heights and shifts the layer by --parallax-shift, so the
   photo scrolls at about 60% of the content speed. Without JS (or with
   reduced motion) both stay 0 and the layer is a static cover image.

   The home hero and CTA markup is block content stored in the database, so
   those bands are targeted by their block wrappers rather than by a class.
   ========================================================================= */

.path-frontpage .hero,
.block-kubanclimbing-home-featured .section-dark,
#block-kubanclimbing-home-cta .section-dark,
.has-parallax {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--rock-900);
}

.path-frontpage .hero::before,
.block-kubanclimbing-home-featured .section-dark::before,
#block-kubanclimbing-home-cta .section-dark::before,
.has-parallax::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--parallax-range, 0px)) 0;
  z-index: -2;
  background-color: var(--rock-900);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--parallax-shift, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

/* Hero: the topo contour art moves onto the layer above the photo; the
   existing .hero::after gradient still darkens the text side. */
.path-frontpage .hero { background-image: none; }
.path-frontpage .hero::before {
  background-image: url("../../images/hero-topo.svg"), url("../../images/bg/hero.jpg");
  background-size: cover, cover;
  background-position: center, center 60%;
}

/* Dark bands: a flat basalt veil keeps the white headings and cards legible. */
.block-kubanclimbing-home-featured .section-dark::before {
  background-image:
    linear-gradient(rgba(28, 30, 25, .86), rgba(28, 30, 25, .9)),
    url("../../images/bg/featured.jpg");
  background-position: center, center 40%;
}
#block-kubanclimbing-home-cta .section-dark::before {
  background-image:
    radial-gradient(ellipse at center, rgba(28, 30, 25, .9) 0%, rgba(28, 30, 25, .74) 100%),
    url("../../images/bg/cta.jpg");
  background-position: center, center 55%;
}
/* Region header band: the photo comes from the term (inline custom property). */
.has-parallax::before {
  background-image:
    linear-gradient(rgba(28, 30, 25, .84), rgba(28, 30, 25, .9)),
    var(--parallax-image);
}

@media (prefers-reduced-motion: reduce) {
  .path-frontpage .hero::before,
  .block-kubanclimbing-home-featured .section-dark::before,
  #block-kubanclimbing-home-cta .section-dark::before,
  .has-parallax::before {
    transform: none;
    will-change: auto;
  }
}