/* Hero slider — CSS-only fade replacement for flexslider.
   Natural 1200×400 (3:1) centered. On narrow viewports, scale
   proportionally (NOT squashed). */

#image_path #slides.flexslider {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  width: 1200px !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 1;
  height: auto !important;
  display: block !important;
}

#image_path #slides.flexslider .slides {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100% !important;
  height: 100% !important;
}

#image_path #slides.flexslider .slides > li {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

#image_path #slides.flexslider .slides > li.hero-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* Image fills slide and scales proportionally with the container. */
#image_path #slides.flexslider .slides > li img.fit,
#image_path #slides.flexslider .slides > li img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  display: block;
}