/* ====== Basis / Resets ====== */
:root{
    --viewer-h: 60vh;      /* desktop viewer-hoogte */
    --viewer-top: 10vh;    /* afstand tot top bij sticky */
    --gap: 12px;
}

html, body{
    margin: 0;
    height: auto !important;
    overflow-y: auto !important;          /* forceer scrollen */
    -webkit-overflow-scrolling: touch;    /* soepel scrollen op iOS */
}

body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
    background: #000000;
    color: #eee;
}

.wrap{ max-width: 1200px; margin: 0 auto; padding: 16px; }

/* ====== Viewer ====== */
/* Mobile-first: lager en in normale flow */
#viewer{
    width: 100%;
    height: 50vh;
    border-radius: 12px;
    overflow: hidden;
}

.position-viewer{
    position: static;             /* niet fixed op mobiel, dus altijd scrollbaar */
    top: auto; left: auto;
    transform: none;
}

/* ====== Header/controls ====== */
.bar{ display:flex; align-items:center; justify-content:space-between; margin: 8px 0 14px; gap:12px }
.title{ font-size: 18px; font-weight: 600 }
.controls{ display:flex; gap:8px }
.btn{ background:#1a1a1a; border:1px solid #2a2a2a; color:#eee; padding:12px 14px; border-radius:10px; cursor:pointer }
.btn:hover{ background:#e3560b }

/* ====== Thumbnails (grid) ====== */
.thumbs{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 kolommen op mobiel */
    gap: 8px;
    margin-top: 14px;
}
.thumb{
    position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; outline: 1px solid #222;
}
.thumb img{
    width: 100%; height: 100%; object-fit: cover; display:block; filter: saturate(1.05);
}
.thumb span{
    position:absolute; left:8px; bottom:8px; font-size:13px; background:rgba(0,0,0,.55); padding:4px 6px; border-radius:6px;
}
.thumb.active{ outline: 2px solid #6cf }

/* Toegankelijkheid */
.btn:focus-visible{ outline:2px solid #6cf; outline-offset:2px }

/* ====== Tablet (≥ 640px) ====== */
@media (min-width: 640px){
    #viewer{ height: 55vh; }
    .thumbs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ====== Desktop (≥ 992px) ====== */
@media (min-width: 992px){
    #viewer{ height: var(--viewer-h); }

    /* Terug naar je ruimere grid */
    .thumbs{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--gap); }

    /* Sticky i.p.v. fixed: blijft mooi “gepind” maar pagina blijft scrollen */
    .position-viewer{
        position: sticky;
        top: var(--viewer-top);
        left: 0;             /* sticky gebruikt de normale flow-breedte */
        transform: none;
        z-index: 10;
    }

    /* Desktop-knoppen mogen iets compacter */
    .btn{ padding: 8px 10px; border-radius: 8px; }
}

/* ====== Liggend op mobiel (laagdrempelig scherm) ====== */
@media (orientation: landscape) and (max-height: 480px){
    #viewer{ height: 70vh; }
}

/* ====== Minder animatie voor wie dat ingesteld heeft ====== */
@media (prefers-reduced-motion: reduce){
    *{ transition: none !important; animation: none !important; }
}
/* === Vars + globale anchor/scroll fixes === */
:root{
    --nav-h: 64px;         /* fallback als JS nog niet gemeten heeft */
    --viewer-h: 60vh;
    --gap: 12px;
}

/* Zorg dat content niet onder de vaste navbar valt */
html { scroll-padding-top: var(--nav-h); }               /* anchor jumps */
body { padding-top: var(--nav-h); }                      /* ruimte onder navbar */
[id] { scroll-margin-top: calc(var(--nav-h) + 10px); }   /* extra voor in-page links */

/* Jouw bestaande layout (verkort tot relevante delen) */
.wrap{ max-width:1200px; margin:0 auto; padding:16px; }
#viewer{ width:100%; height:50vh; border-radius:12px; overflow:hidden; }

/* Mobiel: viewer in normale flow */
.position-viewer{ position: static; }

/* Desktop: viewer "gepind" onder navbar zonder te overlappen */
@media (min-width: 992px){
    #viewer{ height: var(--viewer-h); }
    .position-viewer{
        position: sticky;
        top: calc(var(--nav-h) + var(--gap));  /* rekening houden met navbar + een beetje lucht */
        z-index: 10;
    }
}