/* ===========================
   Visibility / Fade helpers
   =========================== */

/* Final hidden state (class-based; avoids breaking flex) */
.is-hidden { 
  display: none !important; 
}

/* Initial state while JS prepares things (no opacity overrides) */
html.splash-init #main-flex { 
  display: none !important; 
}
html.splash-init #splash-flex { 
  display: flex !important; 
}

/* Elements that can fade */
.fadeable {
  opacity: 1;
  transition: opacity 700ms ease; /* keep in sync with JS FADE_DURATION */
}

/* Start state for fade-in (JS removes this on next frame) */
.fade-in-start { 
  opacity: 0; 
}

/* During fade-out */
.fade-out { 
  opacity: 0; 
}

/* ===========================
   Splash block (#splash-flex)
   =========================== */

#splash-flex {
  /* Keep flex so text remains centered */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Boxed width and centering */
  max-width: 1120px;       /* your boxed width */
  margin-inline: auto;

  /* Match your Elementor setting */
  min-height: calc(100vh - 290px);
  text-align: center;
}

/* Better viewport units on mobile (browser UI bars) */
@supports (height: 100dvh) {
  #splash-flex {
    min-height: calc(100dvh - 290px);
  }
}

/* ===========================
   Main area (#main-flex)
   =========================== */

/* Image Carousel: make images cover the slide nicely */
#main-flex .elementor-image-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop without distortion */
  display: block;
}

/* Reserve space to avoid CLS while lazy-loading (tune this height) */
#main-flex .elementor-image-carousel .swiper-slide {
  min-height: 420px;
}

/* Optional: constrain inner width if theme is full-width */
#main-flex {
  max-width: 1120px;
  margin-inline: auto;
}