/* Shared local slideshow treatment: open photographs, with a soft right-edge fade. */
.hero {
  --copy-shade: 68%;
  --copy-mid: 62%;
  --copy-tail: 48%;
  --edge-shade: 46%;
}
.hero[data-hero-slide="pascha"] {
  --copy-shade: 45%;
  --copy-mid: 38%;
  --copy-tail: 24%;
  --edge-shade: 34%;
}
.hero[data-hero-slide] .hero-shade {
  background: linear-gradient(90deg,
    rgb(21 27 30 / var(--copy-shade)) 0%,
    rgb(21 27 30 / var(--copy-mid)) 38%,
    rgb(21 27 30 / var(--copy-tail)) 55%,
    rgb(21 27 30 / 12%) 64%,
    transparent 72%,
    rgb(21 27 30 / 4%) 82%,
    rgb(21 27 30 / 18%) 92%,
    rgb(21 27 30 / var(--edge-shade)) 100%);
}
.hero .hero-controls { left: auto; right: 20px; bottom: 15px; }

@media (min-width: 761px) {
  .hero .hero-content {
    padding-top: 70px; padding-bottom: 22px;
    padding-left: max(16px,calc(5.4% - 45px));
    transform: translateY(45px);
  }
  .hero .hero-image:not([data-image-key="theotokos"]):not([data-image-key="water"]) {
    inset: 0 auto 0 var(--scene-left,0);
    width: var(--scene-width,100%); max-width: none; height: 100%;
    object-fit: cover; object-position: var(--scene-focus,50% 30%);
    mask-image: var(--scene-mask,none);
  }
  .hero-image[data-image-key="congregation"] { --scene-width: 125%; --scene-focus: 50% 28%; }
  .hero-image[data-image-key="pascha"] { --scene-width: 125%; --scene-focus: 50% 30%; }
  .hero-image[data-image-key="parish"] { --scene-width: 100%; --scene-focus: 50% 25%; }
  .hero-image[data-image-key="outreach"] {
    --scene-left: 20%; --scene-width: 80%; --scene-focus: 95% 40%;
    --scene-mask: linear-gradient(90deg,transparent,black 12%);
  }
  .hero[data-hero-slide="outreach"] .hero-photo-layer {
    background: #151b1e url("assets/images/hero-a093-warm.webp") center 35% / cover no-repeat;
  }
  /* Retain the tall water scene's full head and flowing water. */
  .hero[data-hero-slide="water"] .hero-photo-layer { background: #78836a; }
  .hero[data-hero-slide="water"] .hero-photo-layer::before {
    content: ""; position: absolute; inset: -45px;
    background: url("assets/images/hero-a184-warm.webp") left top / 250% auto no-repeat;
    filter: blur(36px); opacity: .5;
  }
}
@media (max-width: 760px) {
  .hero { height: 813px; min-height: 813px; }
  .hero .hero-content { padding-top: 435px; padding-bottom: 66px; }
  .hero[data-hero-slide] .hero-shade {
    height: 380px;
    background:
      linear-gradient(0deg,#151b1e 0%,rgb(21 27 30 / 42%) 10%,transparent 36%),
      linear-gradient(90deg,transparent 78%,rgb(21 27 30 / 8%) 90%,rgb(21 27 30 / 24%) 100%);
  }
  .hero[data-hero-slide="water"] .hero-shade { height: 347px; }
  .hero .hero-controls { left: auto; right: 16px; bottom: 9px; }
}