/* Hero background carousel - generated by 00-Docs/tools/apply-hero-media.ps1
   CSS-only cross-fade: no JavaScript, cannot break if a script fails to load.
   Replaces the Elementor background-slideshow handler, whose JS chunk was never
   captured by the static crawler and therefore never rendered.

   Slides are real <img> elements, not background-image, so srcset works and a phone
   fetches the small variant instead of the full-size image. */

.hero-slideshow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-slideshow>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;
  opacity:0;will-change:opacity;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both}

/* Dark tint so the headline stays readable over the photographs. !important is required:
   Elementor writes background-color:transparent on this container from its generated
   per-page CSS, at higher specificity than this stylesheet can otherwise reach. */
.e-con.hero-slideshow-host::before{background-color:rgba(0,0,0,0.45) !important;background-image:none !important;z-index:1}
.e-con.hero-slideshow-host>.e-con-inner{position:relative;z-index:2}

/* 4 slides - 14s cycle, 3.5s per slide */
.hero-slideshow[data-slides="4"]>img{animation-name:heroFade4;animation-duration:14s}
.hero-slideshow[data-slides="4"]>img:nth-child(1){animation-delay:-0.5s}
.hero-slideshow[data-slides="4"]>img:nth-child(2){animation-delay:3s}
.hero-slideshow[data-slides="4"]>img:nth-child(3){animation-delay:6.5s}
.hero-slideshow[data-slides="4"]>img:nth-child(4){animation-delay:10s}
@keyframes heroFade4{0%{opacity:0;transform:scale(1.05)}3.57%{opacity:1}21.43%{opacity:1}25%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

@media (prefers-reduced-motion: reduce){
  .hero-slideshow>img{animation:none;opacity:0;transform:none}
  .hero-slideshow>img:first-child{opacity:1}
}