/* Moderne, mobiele foto-ervaring voor Aannemersbedrijf Siebers */
.sg-lock { overflow: hidden !important; overscroll-behavior: none; }
.sg-overlay {
  --sg-accent:#c49a6c;
  position:fixed; inset:0; z-index:999999; display:grid;
  grid-template-rows:minmax(0,1fr) 104px;
  background:rgba(12,8,5,.97); color:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.sg-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.sg-stage { position:relative; min-height:0; display:grid; place-items:center; overflow:hidden; touch-action:pan-y; }
.sg-image-wrap { width:100%; height:100%; display:grid; place-items:center; padding:24px 92px 64px; transition:transform .18s ease; }
.sg-image-wrap picture { display:grid; place-items:center; width:100%; height:100%; }
.sg-image-wrap img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 22px 70px rgba(0,0,0,.42); border-radius:4px; user-select:none; -webkit-user-drag:none; }
.sg-image-wrap.sg-in-right img { animation:sg-enter-right .24s ease both; }
.sg-image-wrap.sg-in-left img { animation:sg-enter-left .24s ease both; }
@keyframes sg-enter-right { from{opacity:.25;transform:translateX(24px) scale(.985)} to{opacity:1;transform:none} }
@keyframes sg-enter-left { from{opacity:.25;transform:translateX(-24px) scale(.985)} to{opacity:1;transform:none} }
.sg-close,.sg-nav { position:absolute; z-index:4; border:0; color:#fff; background:rgba(18,12,8,.62); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); cursor:pointer; }
.sg-close { top:18px; right:18px; width:48px; height:48px; border-radius:50%; font:300 34px/43px Arial,sans-serif; }
.sg-close:hover,.sg-close:focus-visible,.sg-nav:hover,.sg-nav:focus-visible { background:var(--sg-accent); color:#17100b; outline:none; }
.sg-nav { top:50%; margin-top:-32px; width:60px; height:64px; border-radius:14px; display:grid; place-items:center; }
.sg-nav span { font:300 48px/1 Georgia,serif; transform:translateY(-2px); }
.sg-prev { left:18px; }
.sg-next { right:18px; }
.sg-meta { position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%); max-width:min(760px,72vw); display:flex; gap:12px; align-items:center; padding:9px 15px; border-radius:999px; background:rgba(18,12,8,.64); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:500 14px/1.3 Arial,sans-serif; }
.sg-counter { color:#f0d1aa; white-space:nowrap; }
.sg-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-swipehint { display:none; }
.sg-film { position:relative; display:flex; align-items:center; gap:9px; padding:12px max(16px,calc((100vw - 1180px)/2)); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; background:linear-gradient(180deg,rgba(38,25,16,.96),rgba(20,13,9,.99)); border-top:1px solid rgba(255,255,255,.08); scrollbar-width:thin; scrollbar-color:#8e6a47 transparent; }
.sg-film:before,.sg-film:after { content:""; flex:0 0 1px; }
.sg-thumb { position:relative; flex:0 0 84px; width:84px; height:72px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:#1d130d; cursor:pointer; opacity:.63; transform:scale(.94); transition:.18s ease; scroll-snap-align:center; }
.sg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sg-thumb:hover { opacity:.9; transform:scale(.98); }
.sg-thumb.is-active { opacity:1; transform:scale(1); border-color:var(--sg-accent); box-shadow:0 0 0 1px rgba(196,154,108,.28),0 7px 18px rgba(0,0,0,.4); }
.sg-perf { pointer-events:none; position:absolute; z-index:2; top:4px; bottom:4px; left:3px; width:4px; border-left:2px dotted rgba(255,255,255,.25); border-right:2px dotted rgba(255,255,255,.25); opacity:.55; }

@media (max-width:700px) {
  .sg-overlay { grid-template-rows:minmax(0,1fr) 92px; }
  .sg-image-wrap { padding:54px 10px 68px; }
  .sg-image-wrap img { max-height:calc(100dvh - 200px); border-radius:2px; box-shadow:0 15px 45px rgba(0,0,0,.38); }
  .sg-nav { top:auto; bottom:12px; margin:0; width:52px; height:52px; border-radius:50%; background:rgba(12,8,5,.74); }
  .sg-prev { left:14px; }
  .sg-next { right:14px; }
  .sg-nav span { font-size:43px; }
  .sg-close { top:max(10px,env(safe-area-inset-top)); right:12px; width:44px; height:44px; font-size:31px; }
  .sg-meta { bottom:17px; max-width:calc(100vw - 146px); padding:8px 11px; font-size:13px; }
  .sg-caption { display:none; }
  .sg-swipehint { display:block; position:absolute; left:14px; top:max(16px,env(safe-area-inset-top)); z-index:3; padding:7px 10px; border-radius:999px; background:rgba(20,13,9,.5); font:500 11px/1 Arial,sans-serif; color:rgba(255,255,255,.74); animation:sg-hint 4.5s ease forwards; }
  @keyframes sg-hint { 0%,65%{opacity:1} 100%{opacity:0;visibility:hidden} }
  .sg-film { gap:7px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .sg-thumb { flex-basis:72px; width:72px; height:62px; border-radius:6px; }
}

@media (prefers-reduced-motion:reduce) {
  .sg-overlay,.sg-image-wrap,.sg-thumb { transition:none !important; }
  .sg-image-wrap img,.sg-swipehint { animation:none !important; }
}