/* =========================================================
   HX Home Slider (Core Splide) - FINAL CSS
   - Fixes "image not full height" (Elementor/theme + <picture>)
   - Height locked and propagated to Splide internals
   - Optional whole-slide click mode (no overlay link layer)
   ========================================================= */

/* Root */
.hx-hs{
  height: var(--hx-hs-h, 70vh) !important;
  min-height: 420px !important;
  position: relative;
  overflow: hidden;
}

/* Wrapper */
.hx-hs__wrap.is-full{ width: 100%; }
.hx-hs__wrap.is-boxed{
  max-width: var(--hx-hs-maxw, 1200px);
  margin: 0 auto;
}

/* Some themes force auto-height on track/list */
.hx-hs__splide .splide__track,
.hx-hs__splide .splide__list{
  height: 100% !important;
  min-height: 100% !important;
}

/* Slide */
.hx-hs__slide{
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #fff;
}

/* Whole-slide clickable affordance */
.hx-hs__slide.is-clickable{
  cursor: pointer;
}

/* Background wrapper: always full area */
.hx-hs__bg{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Critical fix: picture is inline by default -> make it block and full height */
.hx-hs__bg picture{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Image must be absolute and fill */
.hx-hs__bg img{
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  transform: scale(1.01);
}

/* No overlay */
.hx-hs__overlay{ display: none !important; }

/* Content layer */
.hx-hs__content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Text animation */
.hx-hs__text{
  max-width: 740px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.splide__slide.is-active .hx-hs__text{
  opacity: 1;
  transform: translateY(0);
}

.hx-hs__title{
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 0 0 12px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.hx-hs__desc{
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  opacity: .95;
  margin: 0 0 18px;
  max-width: 56ch;
}

/* Ensure Splide UI is always clickable above slide click handlers */
.hx-hs__splide .splide__arrows,
.hx-hs__splide .splide__pagination{
  position: relative;
  z-index: 5;
  top:300px!important;
  
}

/* Splide UI minimal (your existing styles) */
.hx-hs__splide .splide__arrow{
  border-radius: 999px;
  width: 44px;
  height: 44px;
  opacity: .95;
}
.hx-hs__splide .splide__pagination__page{ opacity: .55; }
.hx-hs__splide .splide__pagination__page.is-active{ opacity: 1; transform: scale(1.12); }

/* Mobile */
@media (max-width: 768px){
  .hx-hs{
    min-height: 520px !important;
  }
  .hx-hs__text{
    max-width: 100%;
  }
  
  .splide__slide {
      height:540px!important;
  }
  
    .hx-hs {
        max-height:540px;
    }
}