/* Smart Slider 3 fallback styles.
   The original theme ships Smart Slider 3's slide POSITIONING purely via a
   proprietary JS "player" bootstrapped from per-instance JSON config that is
   injected through wp_footer at runtime — it is not present anywhere in the
   static page markup, so it could not be captured by the crawl. Without it,
   every ".n2-ss-slide-background" sits stacked in normal flow with no
   explicit container height, so nothing is visible.

   This stylesheet gives the (real, correctly-sourced) slide background
   images an explicit stacking context and aspect ratio so they render as a
   proper full-bleed slide, and js/ss3-fallback.js cross-fades between them
   and drives the existing prev/next arrow buttons. */

.n2-ss-slide-backgrounds {
  position: relative;
  width: 100%;
  aspect-ratio: 1425 / 728;
  overflow: hidden;
}

/* Older browsers without aspect-ratio support: fall back to a padding-top
   ratio box so the slider still reserves real height. */
@supports not (aspect-ratio: 1 / 1) {
  .n2-ss-slide-backgrounds {
    height: 0;
    padding-top: 51.08%;
  }
}

.n2-ss-slide-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 1;
}

.n2-ss-slide-background.ss3fb-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  /* The theme's own per-instance inline CSS ships
     "div#n2-ss-N .n2-ss-slide-background{transform:translateX(-100000px)}"
     (parked off-canvas until Smart Slider's runtime JS repositions the
     active slide). That rule's #id selector outranks anything here, so
     !important is required to bring the active slide back on screen. */
  transform: none !important;
}

.n2-ss-slide-background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.n2-ss-slide-background-image picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.n2-ss-slide-background-color {
  position: absolute;
  inset: 0;
}