/* ===================================================================
 * circular-gallery.css
 * Styles for the WebGL photo gallery (pastor.html hero background).
 * Purely additive — doesn't touch base.css / main.css.
 * ------------------------------------------------------------------- */

/* The referenced background image (pastor-header-bg-2000.jpg) doesn't
   match the actual file on disk (.jpeg), so it silently 404s and the
   section falls back to flat black. The gallery now fills that role. */
.page-header--pastor {
  background-image: none;
}

#pastor-hero-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  z-index: 0;
}

#pastor-hero-gallery:active {
  cursor: grabbing;
}

#pastor-hero-gallery canvas {
  display: block;
}

.page-header--leadership {
  background-image: none;
}

#leadership-hero-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  z-index: 0;
}

#leadership-hero-gallery:active {
  cursor: grabbing;
}

#leadership-hero-gallery canvas {
  display: block;
}

/* Keep the existing dark gradient + title readable above the gallery */
.page-header--pastor .gradient-overlay {
  z-index: 1;
}

.page-header--pastor .page-header__content {
  z-index: 2;
  display: none;
}

.page-header--leadership .gradient-overlay {
  z-index: 1;
}

.page-header--leadership .page-header__content {
  z-index: 2;
}

@media (max-width: 700px) {
  .page-header--pastor {
    min-height: 34rem;
  }
}