/* ----------------------------------------
MARK: :: PREV + NEXT
---------------------------------------- */

.embla-btn {
    width: 24px;
    height: 24px;

    display: flex;
    justify-content: center;
    align-items: center;    
    cursor: pointer;
    color: var(--brand-color, blue);
    transition: all 0.3s ease;
    border: none;
    background-color: transparent;
    padding: 0;
}


.embla-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    transition: transform 0.3ms ease;
}

.embla-btn.round {
    background: transparent;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.embla-btn.round:hover {
    background: var(--brand-color, blue);
    color: #ffffff;
    border-color: var(--brand-color, blue);
}

.embla-prev.round:hover svg { transform: translateX(-2px); }
.embla-next.round:hover svg { transform: translateX(2px); }


.embla-btn.abs {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
}

.embla-btn.hh {
    top: 50%;
}

    .embla-prev.abs { left: 30px; }
    .embla-next.abs { right: 30px; }

    .embla-prev.is-out { left: -30px; }
    .embla-next.is-out { right: -30px; }

    [data-width="max"] .embla-prev.is-out { left: 30px; }
    [data-width="max"] .embla-next.is-out { right: 30px; }

.embla-prev.is-fixed { top: 120px; }
.embla-next.is-fixed { top: 120px; }

@media only screen and (max-width: 1024px) {
    .embla-prev.abs { left: 30px; }
    .embla-next.abs { right: 30px; }
}

@media only screen and (max-width: 540px) {

    .embla-btn.abs {
        top: calc(100% - 1rem);
        transform: none;
    }        

    .embla-btn.hh {
        top: unset;
        bottom: 1rem;
    }

    [data-width="max"] .embla-prev.abs,
    .embla-prev.abs { left:unset; right: 60px; }
}

/* ----------------------------------------
MARK: :: BULLETS
---------------------------------------- */

.bullet-window {
    width: 48px; 
    height: 8px;
    overflow: hidden;
    position: relative;
    margin: 1.5rem auto; 
    z-index: 2;
}

.bullet-window.abs {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.bullet-window__container {
    display: flex;
    /* Ensures no margin-left pull so the dots align perfectly */
    touch-action: pan-y pinch-zoom;
}

.bullet-window__slide {
    flex: 0 0 16px; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-left: 0;
}

/* Native Pagination Dot Styling */
.embla__dot {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: lightgray;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Active Dot State driven by the wrapper class */
.bullet-window__slide.is-active .embla__dot {
    background-color: var(--brand-color, blue);
}

@media only screen and (max-width: 540px) {
    .bullet-window.abs { left: 20px; transform: none; }
    .bullet-window.is-max { margin-left: 15px; }

    .bullet-window { margin: 0; width: 154px; height: 48px; }
    .bullet-window__slide { flex: 0 0 48px; height: 48px; }    
    .bullet-window__slide.is-active .embla__dot,
    .embla__dot { width: 48px; height: 48px; background-color: transparent; display: flex; justify-content: center; align-items: center; }
    .is-active .embla__dot::after { background-color: var(--brand-color, blue); }
    .embla__dot::after {  
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: lightgray;
        display: block;
    }
}




/* ----------------------------------------
MARK: :: THUMBS
---------------------------------------- */

.thumb-window {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
}

.thumb__btn {
    width: 100%;
    border: none;
    padding: 0;   
}

.is-active .thumb__btn {
    background-color: var(--brand-color, blue);
}

.thumb__btn img {
    object-fit: cover;
    width: 100%;
    height: 100px;
}

.is-active .thumb__btn img {
    opacity: 0.9;
}

.thumb-hero {
    position: absolute;
    bottom: 20px;
    width: 100%;
    max-width: 1170px;
    left: 50%;
    transform: translateX(-50%);
}

.thumb__istext {
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.is-active .thumb__istext {
    background-color: rgba(0,0,200,0.3);
}

.thumb__text {
    text-align: left;
    padding: 10px;
}

@media only screen and (max-width: 1024px) {
    .thumb-hero { width: calc(100% - 20px); }
    .thumb-window .embla__slide {
        flex: 0 0 50%;
    }
}


@media only screen and (max-width: 540px) {
    .thumb-window .embla__slide {
        flex: 0 0 100%;
    }
}


/* --- HARDWARE-ACCELERATED SPLIT ANIMATION --- */
/* Base physics: Apply transitions to your native grid columns */
.info-fluid .info-column,
.info-fluid .info-media {
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    opacity: 0;
    will-change: transform, opacity;
}

/* FORWARD NAVIGATION: Content pushes from Left, Media pushes from Right */
.info-fluid.is-forward .embla__slide:not(.is-active) .info-column { transform: translateX(-120px); }
.info-fluid.is-forward .embla__slide:not(.is-active) .info-media { transform: translateX(120px); }

/* BACKWARD NAVIGATION: Content pushes from Right, Media pushes from Left */
.info-fluid.is-backward .embla__slide:not(.is-active) .info-column { transform: translateX(120px); }
.info-fluid.is-backward .embla__slide:not(.is-active) .info-media { transform: translateX(-120px); }

/* ACTIVE STATE: Lock seamlessly into origin */
.info-fluid .embla__slide.is-active .info-column,
.info-fluid .embla__slide.is-active .info-media {
    transform: translateX(0) !important;
    opacity: 1;
}