/*.phd_slideshow{*/
/*    !*width: 100%;*!*/
/*    outline: 2px aqua solid;*/
/*}*/

/*.phd_slideshow_content{*/
/*    !*width: 100%;*!*/
/*}*/
/*.phd_slideshow_content picture{*/
/*    !*min-width: 100%;*!*/
/*    outline: 1px auto;*/
/*}*/


/*.phd_slideshow_content {*/
/*    display: flex;*/
/*    overflow: hidden; !* Useful if creating a slider *!*/
/*    flex-direction: column; !* Change to row if needed *!*/
/*}*/

/*.phd_slideshow_content picture,*/
/*.phd_slideshow_content video {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*}*/

/*.phd_slideshow_content img,*/
/*.phd_slideshow_content video {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    object-fit: cover; !* optional, but recommended for video/images *!*/
/*}*/

/*.image-viewer__mobile{*/
/*    grid-column: auto/span 2;*/
/*    position: relative;*/
/*}*/

.phd-slideshow{
    --f: 0px;
    --w: calc(100%);
    --p: 0;
    --t:0;
    --trt: '';

    width: 100%;
    /*height: 100%;*/
    /*height: 900px;*/
    position: relative;
    pointer-events: all;
}
.phd-slideshow__wrapper{
    position: relative;
}

/*.mobile-content{*/
/*    position: relative;*/
/*    padding-top: 100%;*/
/*    overflow: hidden;*/
/*    height: 100%;*/
/*    background-color: #edeff0;*/
/*}*/
.phd-slideshow__slides{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    grid-column: auto/span 2;
}

/*.mobile-slide picture,*/
.phd-slideshow__slides picture{
    /*pointer-events: none;*/
    /*position: absolute;*/
    width: 100%;
    height: fit-content;
    display: flex;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    /*transform-origin: top left;*/
}/*.mobile-slide picture,*/
.phd-slideshow__slides picture img{
    /*position: absolute;*/
    width: 100%;
    height: auto;
}

[data-zoom="enabled"] .phd-slideshow__wrapper picture {
    cursor: url("/img/base/cursor/cursor-zoom-in.svg") 24 24,zoom-in;
}
[data-zoom="zoom-in"] .phd-slideshow__wrapper picture{
    cursor: url("/img/base/cursor/cursor-zoom-out.svg") 24 24,zoom-out;
}

.phd-slideshow__prev-btn,
.phd-slideshow__next-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(3rem, 15%, 40%);
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    font-size: 3rem;
    outline: none;
    border: none;
    opacity: .05;
    cursor: pointer;
    transition: all .2s ease;
    color: var(--text-black);
}

.phd-slideshow__wrapper:hover .phd-slideshow__prev-btn,
.phd-slideshow__wrapper:hover .phd-slideshow__next-btn{
    opacity: .8;
}

.phd-slideshow__prev-btn:hover,
.phd-slideshow__next-btn:hover{
    background-color: rgba(255, 255, 255, 0.2);
}

.phd-slideshow__prev-btn{
    left: 0;
}
.phd-slideshow__next-btn{
    right: 0;
}
.last .phd-slideshow__next-btn,
.first .phd-slideshow__prev-btn{
    display: none;
}
[data-zoom="zoom-in"] .phd-slideshow__pager,
[data-zoom="zoom-in"] .phd-slideshow__prev-btn,
[data-zoom="zoom-in"] .phd-slideshow__next-btn{
    display: none;
}
/*.zoom-container{*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    justify-items: center;*/
/*    align-items: center;*/
/*    transform-origin: top left;*/

/*}*/
/*.slide.clickable{*/
/*    cursor: pointer;*/
/*}*/

.phd-slideshow__slides .current{
    transition:  var(--t) ease-in-out;
    transform: translateX(calc(100% * var(--p)));
}
.phd-slideshow__slides .prev{
    transition: var(--t) ease-in-out;
    position: absolute;
    top: 0;
    transform: translateX(calc(100% * var(--p) - 100%));
}
.phd-slideshow__slides .next{
    transition:  var(--t) ease-in-out;
    position: absolute;
    top: 0;
    transform: translateX(calc(100% * var(--p) + 100%));
}

/*video {*/
/*    display: block;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

.phd-slideshow__slides video.next{
    display: flex;
}

.ghost{
    opacity: .1;
    background-color: #e8e8e8;
}
.phd-slideshow__slides video,
.phd-slideshow__slides picture img{
    /*transition: transform 0.5s ease-in-out;*/
    max-width: 100%;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}



.slides.fader .slide img{
    animation-name: fader;
    animation-duration: 0.8s;

}

@keyframes fader {
    from { opacity: .7; }
    to   { opacity: 1.0; }
}


.touch-gesture-test-box{
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #e0e0e0;
    position: relative;
}

.pinch-center{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


.phd-slideshow__thumbnails{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 40px;
    flex-wrap: wrap;

}
.phd-slideshow__thumbnail{
    display: flex;
    height: min-content;
    border-radius: 3px;
    cursor: pointer;
}
.phd-slideshow__thumbnail.active{
    outline: 2px solid black;
    outline-offset: 4px;
}

.phd-slideshow__thumbnail img{
    height: auto;
    border-radius: 3px;
}


.phd-slideshow__thumbnails.s .phd-slideshow__thumbnail,
.phd-slideshow__thumbnails.s .phd-slideshow__thumbnail img{
    width: 40px;
}

.phd-slideshow__thumbnails.m .phd-slideshow__thumbnail,
.phd-slideshow__thumbnails.m .phd-slideshow__thumbnail img{
    width: 80px;
}

.phd-slideshow__thumbnails.l .phd-slideshow__thumbnail,
.phd-slideshow__thumbnails.l .phd-slideshow__thumbnail img{
    width: 150px;
}

.phd-slideshow__thumbnails.xl .phd-slideshow__thumbnail,
.phd-slideshow__thumbnails.xl .phd-slideshow__thumbnail img{
    width: 300px;
}







.phd-slideshow__pager{
    position: absolute;
    width: 100%;
    min-height: 100px;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    touch-action: none;
    /*background-color: rgba(0, 0, 0, 0.38);*/
}

.phd-slideshow__pager-item{
    background: none;
    width: 25px;
    height: 25px;
    /*filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));*/
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}
.phd-slideshow__pager-item:after{
    content: '';
    display: flex;
    width: 8px;
    height: 8px;
    background: white;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
    border-radius: 8px;
    opacity: .5;

}
.phd-slideshow__pager-item:hover:after{

    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));

    opacity: .8;

}
.phd-slideshow__pager-item.active:after{
    width: 10px;
    height: 10px;

    opacity: 1;

}



/*DESA*/
/*.phd-slideshow-desa{*/
/*    display: flex;*/
/*    overflow-x: auto;*/
/*    overflow-y: hidden;*/
/*    scroll-snap-type: x mandatory;*/
/*    justify-content: flex-start;*/
/*    scroll-behavior: smooth;*/
/*}*/

.phd-slideshow-desa {
    width: 100%;
    max-width: 600px; /* Adjust as needed */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    display: flex;
    scroll-behavior: smooth;
    /*justify-content: center;*/
    /*align-items: center;*/
}

.phd-slideshow-desa__slides {
    display: flex;
    gap: 10px; /* Adjust for spacing between images */
}

.phd-slideshow-desa__slides picture {
    flex: 0 0 100%; /* Makes each picture take full width */
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phd-slideshow-desa__slides img {
    width: 100%;
    height: auto;
    object-fit: cover;
    user-drag: none;
    user-select: none;
    pointer-events: none;
}