/* =========================================
   VIDEO GALLERY (opschoond)
   - Main video vaste hoogte (Optie A: contain)
   - Fade bij wisselen
   - Sort controls (1x)
   - Next/Prev pijlen naast main video (desktop groot, mobiel klein)
   - Thumb strip (1 rij, horizontaal)
   ========================================= */

/* Page wrapper */
.gallery-page{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
    text-align:center;
}

/* Titles */
.page-title{
    font-family:'Great Vibes', cursive;
    font-size:36px;
    color:#d4af37;
    margin-bottom:20px;
}

.show-title{
    font-family:'Montserrat', sans-serif;
    font-size:22px;
    font-weight:700;
    color:#d4af37;
    margin:30px 0 15px;
}

/* Album buttons */
.album-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin:18px 0 6px;
}

.album-link{
    display:inline-block;
    padding:10px 14px;
    border:1px solid rgba(212,175,55,0.40);
    border-radius:12px;
    color:#d4af37;
    text-decoration:none;
    background:rgba(0,0,0,0.35);
    transition:transform 0.12s ease, border-color 0.12s ease;
}

.album-link:hover{
    transform:translateY(-1px);
    border-color:rgba(212,175,55,0.75);
    text-decoration:underline;
}

/* =========================
   SORT CONTROLS (1x)
   ========================= */
.vg-sort{
    max-width:920px;
    margin:0 auto 14px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.vg-sort-link{
    display:inline-block;
    padding:8px 12px;
    border:1px solid rgba(212,175,55,0.35);
    border-radius:12px;
    color:#d4af37;
    text-decoration:none;
    background:rgba(0,0,0,0.30);
    transition:transform 0.12s ease, border-color 0.12s ease;
    font-size:14px;
}

.vg-sort-link:hover{
    transform:translateY(-1px);
    border-color:rgba(212,175,55,0.80);
    text-decoration:underline;
}

.vg-sort-link.is-active{
    border-color:rgba(212,175,55,0.95);
    box-shadow:0 0 10px rgba(212,175,55,0.20);
}

/* =========================
   MAIN VIDEO (fixed frame)
   ========================= */

/* Wrap + arrows outside */
.vg-main-wrap{
    max-width:920px;
    margin:0 auto 16px;
    position:relative;
}

/* Fixed height frame (Optie A) */
.vg-main{
    height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Player */
.vg-player{
    width:100%;
    height:100%;
    object-fit:contain;             /* Optie A */
    background:rgba(0,0,0,0.55);

    border-radius:18px;
    border:1px solid rgba(212,175,55,0.28);
    box-shadow:0 0 18px rgba(0,0,0,0.45);

    /* Fade */
    transition:opacity 0.25s ease;
}

.vg-player.is-fading{
    opacity:0.25;
}

/* Main arrows (desktop size) */
.vg-main-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    font-size:28px;

    border-radius:999px;
    border:1px solid rgba(212,175,55,0.35);
    background:rgba(0,0,0,0.55);
    color:#d4af37;

    cursor:pointer;
    z-index:5;
    display:grid;
    place-items:center;
}

.vg-main-arrow.left{ left:-58px; }
.vg-main-arrow.right{ right:-58px; }

.vg-main-arrow:hover{
    border-color:rgba(212,175,55,0.85);
}

/* =========================
   THUMB STRIP (1 row)
   ========================= */
.vg-strip-wrap{
    max-width:920px;
    margin:0 auto;
    position:relative;
}

.vg-strip{
    height:120px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:12px;

    border-radius:18px;
    border:1px solid rgba(212,175,55,0.22);
    background:rgba(0,0,0,0.35);

    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:160px;
    gap:14px;

    scroll-behavior:smooth;
    scrollbar-width:thin;
}

.vg-thumb{
    display:block;
    width:auto;

    padding:0;
    border:1px solid rgba(212,175,55,0.18);
    border-radius:14px;
    background:transparent;
    cursor:pointer;
    overflow:hidden;

    transition:transform 0.12s ease, border-color 0.12s ease;
}

.vg-thumb:hover{
    transform:translateY(-2px);
    border-color:rgba(212,175,55,0.55);
}

.vg-thumb.is-active{
    border-color:rgba(212,175,55,0.95);
    box-shadow:0 0 10px rgba(212,175,55,0.25);
}

.vg-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;   /* hoofden in beeld */
    display:block;
}

/* Strip arrows */
.vg-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:999px;
    border:1px solid rgba(212,175,55,0.35);
    background:rgba(0,0,0,0.55);
    color:#d4af37;
    cursor:pointer;
    z-index:5;
    display:grid;
    place-items:center;
}

.vg-arrow.left{ left:-18px; }
.vg-arrow.right{ right:-18px; }

.vg-arrow:hover{
    border-color:rgba(212,175,55,0.85);
}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablet */
@media (max-width:800px){
    .vg-main{ height:420px; }
    .vg-player{ border-radius:14px; }

    .vg-strip{
        grid-auto-columns:140px;
        height:110px;
        padding:12px;
        gap:12px;
        border-radius:14px;
    }

    .vg-arrow.left{ left:-10px; }
    .vg-arrow.right{ right:-10px; }

    .vg-main-arrow.left{ left:-44px; }
    .vg-main-arrow.right{ right:-44px; }
}

/* Mobiel: pijlen kleiner zodat ze niet in de video drukken */
@media (max-width:600px){
    .vg-main-arrow{
        width:36px;
        height:36px;
        font-size:18px;
    }
    .vg-main-arrow.left{ left:-6px; }
    .vg-main-arrow.right{ right:-6px; }
}

/* Small phones */
@media (max-width:480px){
    .page-title{ font-size:32px; }
    .show-title{ font-size:18px; }

    .vg-main{ height:360px; }

    .vg-strip{
        grid-auto-columns:130px;
        height:105px;
    }
}