/* ============================================================================
   FOTOGALERIJ — styling  (donker / filmisch · masonry · lightbox)
   Hoort bij index.php. Accentkleur staat in index.php ($ACCENT) en wordt
   via JavaScript toegepast op de afspeelknop en de voortgangsbalk.
   ============================================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#0a0a0b; color:#f2f2f4;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
::selection{ background:rgba(224,176,116,.3); }
button{ font-family:inherit; }

:root{ --logo-h:120px; }

header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 24px;
  background:#1c1a72;
  box-shadow:0 6px 26px rgba(0,0,0,.4);
  transition:padding .28s ease;
}
header .meta{ display:flex; align-items:baseline; gap:12px; }
header .title{ font-size:22px; font-weight:400; letter-spacing:.13em; color:#fff; }
header .logo{ display:block; width:auto; height:var(--logo-h); max-width:min(82vw,460px); object-fit:contain; transition:height .28s ease; }
header .count{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:20px; font-weight:400; letter-spacing:.14em; color:rgba(255,255,255,.62); }

/* Desktop: logo krimpt naar 60% bij scrollen */
@media (min-width:721px){
  header.scrolled{ padding:12px 24px; }
  header.scrolled .logo{ height:calc(var(--logo-h) * .6); }
}

main{ padding:calc(var(--logo-h) + 120px) 16px 48px; max-width:1760px; margin:0 auto; }
.masonry{ display:flex; gap:14px; align-items:flex-start; }
.masonry-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }

.tile{
  border-radius:5px; overflow:hidden;
  cursor:pointer; position:relative; background:#141416;
  box-shadow:0 1px 2px rgba(0,0,0,.4); transition:box-shadow .4s;
}
.tile:hover{ box-shadow:0 12px 36px rgba(0,0,0,.6); }
.tile img{
  width:100%; display:block; filter:brightness(.9);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s;
}
.tile:hover img{ transform:scale(1.045); filter:brightness(1.06); }

.empty{ padding:140px 24px; text-align:center; color:#76767e; }
.empty code{ color:#e0b074; font-family:ui-monospace,monospace; }

/* ---- Lightbox ---- */
#lb{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:center; justify-content:center;
  background:rgba(6,6,8,.95);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
#lb.open{ display:flex; animation:lbfade .25s ease; }
@keyframes lbfade{ from{opacity:0} to{opacity:1} }
@keyframes pbfill{ from{width:0%} to{width:100%} }

#lb .progress{ position:absolute; top:0; left:0; height:4px; width:0%; z-index:60; }

#lb .topbar{
  position:absolute; top:0; left:0; right:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
}
#lb .counter{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; font-weight:500; letter-spacing:.18em; color:#d2d2d8; }
#lb .topbar .grp{ display:flex; align-items:center; gap:8px; }

.iconbtn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(255,255,255,.07); color:#e8e8ec; cursor:pointer; transition:background .2s;
}
.iconbtn:hover{ background:rgba(255,255,255,.16); }

#lb img.photo{
  max-width:min(92vw,1500px); max-height:84vh; object-fit:contain;
  border-radius:3px; box-shadow:0 24px 90px rgba(0,0,0,.75); cursor:pointer;
}

.edge{
  position:absolute; top:0; bottom:0; z-index:54; width:16%; min-width:64px;
  display:flex; align-items:center; border:none; background:transparent;
  color:rgba(255,255,255,.55); cursor:pointer; transition:color .2s;
}
.edge:hover{ color:#fff; }
.edge.left{ left:0; justify-content:flex-start; padding-left:20px; }
.edge.right{ right:0; justify-content:flex-end; padding-right:20px; }
.edge .pill{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:rgba(20,20,24,.5); }

#lb .dock{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background:rgba(18,18,22,.78); border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 12px 44px rgba(0,0,0,.55);
}
.dockbtn{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:#d8d8de; cursor:pointer; transition:background .2s; }
.dockbtn:hover{ background:rgba(255,255,255,.1); }
.playbtn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; color:#161108; }
.divider{ width:1px; height:24px; background:rgba(255,255,255,.12); margin:0 4px; }
.stepbtn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:#bcbcc4; cursor:pointer; transition:background .2s; }
.stepbtn:hover{ background:rgba(255,255,255,.1); }
.secs{ min-width:38px; text-align:center; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; font-weight:600; letter-spacing:.04em; color:#eaeaef; }

/* ---- Footer ---- */
.site-footer{ background:#ffd700; padding:46px 16px; }
.site-footer .inner{ max-width:1100px; margin:0 auto; display:flex; gap:32px; }
.site-footer .col{ flex:1; font-size:16px; line-height:1.6; color:#000; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
.site-footer .col strong{ font-weight:700; letter-spacing:.04em; }
.site-footer a{ color:#000; text-decoration:underline; text-underline-offset:2px; }
.site-footer a:hover{ opacity:.7; }

/* ---- Mobiel: compacte header (staand) ---- */
@media (max-width:720px){
  :root{ --logo-h:46px; }
  header{ gap:7px; padding:11px 16px; }
  header .title{ font-size:14px; letter-spacing:.1em; }
  header .count{ font-size:11px; }
  main{ padding-top:calc(var(--logo-h) + 78px); }
  .edge{ width:22%; }
  #lb img.photo{ max-height:78vh; }
  .site-footer{ padding:36px 18px; }
  .site-footer .inner{ flex-direction:column; gap:18px; }
}

/* ---- Mobiel liggend / lage hoogte: header op één rij, extra compact ---- */
@media (max-height:480px) and (orientation:landscape){
  :root{ --logo-h:34px; }
  header{ flex-direction:row; gap:14px; padding:8px 16px; }
  header .title{ font-size:13px; }
  header .count{ font-size:11px; }
  main{ padding-top:calc(var(--logo-h) + 30px); }
  #lb img.photo{ max-height:74vh; }
  #lb .dock{ bottom:14px; }
}