/* =========================
   BASE
========================= */

.dancho-gallery{
    max-width:650px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
}

/* =========================
   MAIN GALLERY
========================= */
.dancho-main-dots{
    text-align: center;

}
.dancho-main .swiper-slide{
    width:100%!important;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.dancho-main img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.dancho-main{
    height:400px;
    max-height:70vh;
    position:relative;
    flex:1;
    width:100%;
}

@media (max-width:768px){
    .dancho-main{
        height:320px;
    }
}

.dancho-main .swiper-slide{
    width:100%!important;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   IMAGES
========================= */

.dancho-main img,
.dancho-fs-main img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

/* =========================
   VIDEO
========================= */

.dancho-main .video-wrap,
.dancho-fs-main .video-wrap{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.video-thumb{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.video-play{
    position:absolute;
    inset:0;
    margin:auto;
    width:64px;
    height:64px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    border:0;
    font-size:28px;
    cursor:pointer;
    z-index:3;
}

.is-video.is-playing .video-thumb,
.is-video.is-playing .video-play{
    display:none!important;
}

.dancho-main iframe,
.dancho-fs-main iframe{
    width:100%!important;
    height:100%!important;
    border:0;
}

/* =========================
   NORMAL THUMBS GRID
========================= */

.dancho-thumbs{
    width:100%;
}

.dancho-thumbs-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
}

.dancho-thumb{
    height:64px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:1px solid #ddd;
    border-radius:3px;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.dancho-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.dancho-thumb.active{
    border:2px solid #111;
}

.dancho-thumb.is-video::after{
    content:'▶';
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:10px;
    line-height:16px;
    text-align:center;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
}

.dancho-hidden{
    display:none;
}

.dancho-thumbs-more{
    width:100%;
    margin-top:8px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    padding:10px;
    border-radius:4px;
    font-size:14px;
    font-weight:600;
    color:#3b82f6;
}

.dancho-thumbs-more::before{
    content:"↓ ";
}

.dancho-thumbs-more::after{
    content:" ↓";
}
.dancho-thumbs-more:hover{
    background:#f5f7fa;
    color: #3b82f6;
}
/* =========================
   MAIN ARROWS
========================= */

.dancho-main-prev,
.dancho-main-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:42px;
    color:#111;
    z-index:5;
    cursor:pointer;
    user-select:none;
}

.dancho-main-prev{ left:6px; }
.dancho-main-next{ right:6px; }

/* =========================
   FULLSCREEN
========================= */
.dancho-main .swiper-wrapper{
    align-items:center;
}

.dancho-main .swiper-slide{
    display:flex;
    justify-content:center;
}
.dancho-fs{
    position:fixed;
    inset:0;
    z-index:9999;
}

.dancho-fs[hidden]{
    display:none;
}

.dancho-fs-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.92);
}

.dancho-fs-inner{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px 24px 24px;
    box-sizing:border-box;
    gap:18px;
}

.dancho-fs-main{
    width:100%;
    max-width:1200px;
    height:min(68vh, 760px);
    position:relative;
}

.dancho-fs-main .swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* fullscreen thumb grid */

.dancho-fs-grid{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:repeat(8, 1fr);
    gap:8px;
    overflow:auto;
    max-height:22vh;
    padding-right:4px;
    box-sizing:border-box;
}

.dancho-fs-thumb{
    aspect-ratio:4 / 3;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:1px solid #4a4a4a;
    border-radius:3px;
    background:#111;
    position:relative;
    overflow:hidden;
}

.dancho-fs-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.dancho-fs-thumb.active{
    border:2px solid #fff;
}

.dancho-fs-thumb.is-video::after{
    content:'▶';
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:10px;
    line-height:16px;
    text-align:center;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
}

.dancho-fs-close{
    position:absolute;
    top:16px;
    right:16px;
    width:44px;
    height:44px;
    background:rgba(0,0,0,.6);
    color:#fff;
    border:0;
    font-size:22px;
    cursor:pointer;
    z-index:10001;
}

.dancho-fs-prev,
.dancho-fs-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:56px;
    color:#fff;
    z-index:10001;
    cursor:pointer;
    user-select:none;
}

.dancho-fs-prev{ left:10px; }
.dancho-fs-next{ right:10px; }

/* dots not used in fullscreen now */
.dancho-fs-dots{
    display:none;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .dancho-gallery{
        gap:8px;
    }

    .dancho-main{
        height:320px;
    }

    .dancho-thumbs-grid{
        grid-template-columns:repeat(4, 1fr);
        gap:6px;
    }

    .dancho-thumb{
        height:52px;
    }

    .dancho-fs-inner{
        padding:14px 14px 18px;
        gap:14px;
    }

    .dancho-fs-main{
        height:min(60vh, 520px);
    }

    .dancho-fs-grid{
        grid-template-columns:repeat(4, 1fr);
        gap:6px;
        max-height:26vh;
    }

    .dancho-fs-thumb{
        height:52px;
    }

    .dancho-fs-prev,
    .dancho-fs-next{
        font-size:42px;
    }
}