/* assets/slider.css */
.hsb-slider {
    position: relative;
    /* Forces absolute breakout to fill the screen regardless of the parent theme */
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    
    height: var(--hsb-height, 100svh);
    overflow: hidden;
    /* FIX: translateX(-50%) on a parent breaks overflow:hidden for scaled children
       in mobile Safari and Chrome. clip-path:inset(0) forces a proper clipping
       context that actually clips the zoom-animated slides at the container edge. */
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    background-color: #111;
    display: block;
}

.hsb-track { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
}

.hsb-slide {
    position: absolute; 
    inset: 0;
    width: 100%; 
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    visibility: hidden;
    z-index: 1;
}

/* =========================================
   RESPONSIVE SLIDE IMAGE (desktop / mobile)
   The <picture> swaps the source via its media query; the <img>
   fills the slide and is cropped to cover, matching the old
   background-size:cover behaviour.
========================================= */
.hsb-slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
.hsb-slide-media img {
    /* !important is required: most WordPress themes and lazy-load plugins ship
       `img { height: auto !important; max-width: 100% !important; }`. Without
       !important here, that rule wins, the image collapses to its natural aspect
       ratio, and the slider's dark background shows around it (the "small slider
       inside a big black box" bug). These declarations guarantee the image always
       fills and crops to cover the slide on every theme. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
}

/* =========================================
   1. ONE-DIRECTIONAL SLIDE (HORIZONTAL)
========================================= */
.hsb-motion-slide .hsb-slide {
    transform: translateX(100%);
    transition: none; 
}

.hsb-motion-slide .hsb-slide.is-active,
.hsb-motion-slide .hsb-slide[aria-hidden="false"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.hsb-motion-slide .hsb-slide.hsb-stage-left { transform: translateX(-100%); transition: none; }
.hsb-motion-slide .hsb-slide.hsb-stage-right { transform: translateX(100%); transition: none; }

.hsb-motion-slide .hsb-slide.hsb-exit-left {
    transform: translateX(-100%);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}
.hsb-motion-slide .hsb-slide.hsb-exit-right {
    transform: translateX(100%);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* =========================================
   2. ONE-DIRECTIONAL SLIDE (VERTICAL)
========================================= */
.hsb-motion-slide-up .hsb-slide {
    transform: translateY(100%);
    transition: none;
}
.hsb-motion-slide-up .hsb-slide.is-active,
.hsb-motion-slide-up .hsb-slide[aria-hidden="false"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.hsb-motion-slide-up .hsb-slide.hsb-stage-left { transform: translateY(-100%); transition: none; }
.hsb-motion-slide-up .hsb-slide.hsb-stage-right { transform: translateY(100%); transition: none; }
.hsb-motion-slide-up .hsb-slide.hsb-exit-left { transform: translateY(-100%); visibility: visible; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.hsb-motion-slide-up .hsb-slide.hsb-exit-right { transform: translateY(100%); visibility: visible; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }

/* =========================================
   3. FADE, ZOOM & FLIP
========================================= */
.hsb-motion-fade .hsb-slide { opacity: 0; transition: opacity 0.8s ease; }
.hsb-motion-fade .hsb-slide[aria-hidden="false"] { opacity: 1; visibility: visible; z-index: 2; }

.hsb-motion-zoom .hsb-slide { opacity: 0; transform: scale(1.1); transition: opacity 0.8s ease, transform 0.8s ease; }
.hsb-motion-zoom .hsb-slide[aria-hidden="false"] { opacity: 1; transform: scale(1); visibility: visible; z-index: 2; }

.hsb-motion-flip { perspective: 1200px; }
.hsb-motion-flip .hsb-track { transform-style: preserve-3d; }
.hsb-motion-flip .hsb-slide { opacity: 0; transform: rotateY(90deg); transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s; backface-visibility: hidden; }
.hsb-motion-flip .hsb-slide[aria-hidden="false"] { opacity: 1; transform: rotateY(0deg); visibility: visible; z-index: 2; }

/* =========================================
   INTERNALS & ALIGNMENT
========================================= */
.hsb-video {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; z-index: 0; pointer-events: none;
}
.hsb-overlay {
    position: absolute; inset: 0;
    background-color: var(--hsb-overlay-color, #000000);
    opacity: var(--hsb-overlay-opacity, 0.22);
    z-index: 1; pointer-events: none;
}
.hsb-content {
    position: relative; z-index: 3;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
}

/* PATCH: Removed all 60px padding to eliminate the black bezels */
.hsb-pos-center .hsb-content { justify-content: center; align-items: center; text-align: center; padding: 0; }
.hsb-pos-bottom-left .hsb-content { justify-content: flex-end; align-items: flex-start; padding: 0; }
.hsb-pos-left .hsb-content { justify-content: center; align-items: flex-start; padding: 0; }

/* =========================================
   PAGINATION — PROGRESS BARS
========================================= */
.hsb-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    display: flex;
    gap: 0;
    align-items: flex-end;
    justify-content: stretch;
    pointer-events: none;
}

.hsb-dot {
    flex: 1;
    height: 4px;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    pointer-events: all;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.hsb-dot::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px; 
}

.hsb-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
}

.hsb-dot.is-complete::after { transform: scaleX(1); transition: none; }
.hsb-dot.is-active::after { transform: scaleX(1); transition: transform var(--hsb-bar-duration, 5.5s) linear; }
.hsb-dot:hover { background: rgba(255, 255, 255, 0.45); }

/* PAGINATION STYLE VARIANTS */
.hsb-pag-scale .hsb-dot { height: 4px; }
.hsb-pag-pill .hsb-dot { height: 6px; }
.hsb-pag-fill .hsb-dot { height: 3px; }
.hsb-pag-fill .hsb-dots { gap: 3px; }
.hsb-pag-ring .hsb-dot { height: 5px; }
.hsb-pag-ring .hsb-dot::after { background: #f5d87a; }

/* =========================================
   OVERRIDES FOR ELEMENTOR (BULLETPROOF FULL WIDTH)
========================================= */
.hsb-content > .elementor { 
    width: 100%; 
    height: 100%; 
    display: flex; 
}

/* PATCH: Aggressively targets all known Elementor inner wrappers to force full width */
.hsb-content .elementor-section, 
.hsb-content .elementor-container,
.hsb-content .elementor-widget-wrap,
.hsb-content .e-con, 
.hsb-content .e-con-inner {
    width: 100% !important; 
    max-width: 100% !important; 
    height: 100% !important; 
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    /* PATCH: Removed mobile padding */
    .hsb-pos-bottom-left .hsb-content, 
    .hsb-pos-left .hsb-content, 
    .hsb-pos-center .hsb-content { 
        padding: 0; 
    }
    .hsb-dot { height: 3px; }

    /* FIX: Use svh (stable viewport height) on mobile to prevent layout
       jitter caused by the browser address bar collapsing/expanding on scroll.
       dvh recalculates dynamically and causes the slider to resize mid-scroll,
       pushing content below it. svh is always the smaller fixed value. */
    .hsb-slider {
        height: var(--hsb-height, 100svh);
    }
}
/* =========================================
   ZOOM MOTION — scale the image layer only, not the slide element

   Scaling the inner .hsb-slide-media (rather than .hsb-slide) keeps the
   slide box a fixed size, so it never overflows the container — important
   because the parent's translateX(-50%) breaks overflow:hidden for scaled
   children in mobile Safari/Chrome.
========================================= */
.hsb-motion-zoom .hsb-slide {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.8s ease;
}
.hsb-motion-zoom .hsb-slide .hsb-slide-media {
    transform: scale(1.12);
    transition: transform 0.8s ease;
    will-change: transform;
}
.hsb-motion-zoom .hsb-slide[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.hsb-motion-zoom .hsb-slide[aria-hidden="false"] .hsb-slide-media {
    transform: scale(1);
}