/* Venomous Gallery – Frontend CSS */
:root { --vg-bg:#0B0B0F; }

.vg-wrap { position:relative; background:var(--vg-bg); color:var(--vg-gold-3,#E6C77C); padding:16px 12px 28px; border-radius:var(--vg-radius,4px); overflow:hidden; isolation:isolate; }
.vg-viewport { position:relative; overflow:hidden; border-radius:var(--vg-radius,4px); height: var(--vg-fixed-h, auto); }
.vg-track { display:flex; align-items:stretch; user-select:none; -webkit-user-select:none; will-change:transform; }
.vg-slide { flex:0 0 auto; width:100%; padding:0 calc(var(--vg-gap,24px)/2); box-sizing:border-box; }
.vg-figure { position:relative; margin:0; border-radius:var(--vg-radius,4px); overflow:hidden; background:#000;
  box-shadow:
    0 0 0 var(--vg-frame,3px) var(--vg-gold-1,#C9A227) inset,
    0 0 calc(10px + 20px * var(--vg-glow,.6)) rgba(230,199,124, calc(.25 + .35 * var(--vg-glow,.6))),
    0 0 calc(30px + 35px * var(--vg-glow,.6)) rgba(216,180,74, calc(.15 + .25 * var(--vg-glow,.6)));
  filter: contrast(calc(1 + var(--vg-contrast,.15)));
  height: var(--vg-fixed-h, auto);
  display:flex; align-items:center; justify-content:center;
}
.vg-img { display:block; width:100%; height:100%; object-fit: var(--vg-fit, cover); transform:translateZ(0); backface-visibility:hidden; aspect-ratio: var(--vg-aspect, auto); }
.vg-caption { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--vg-gold-3,#E6C77C); letter-spacing:.02em; }
.vg-caption-below { padding:10px 12px 8px; background:rgba(0,0,0,.6); border-top:1px solid rgba(201,162,39,.25); }
.vg-caption-overlay { position:absolute; left:0; right:0; bottom:0; padding:18px 16px; background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events:none; }
.vg-caption-overlay span { background:rgba(0,0,0,.45); padding:6px 10px; border-radius:4px; }

.vg-arrow { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0;
  background: radial-gradient(circle at 50% 50%, var(--vg-gold-2,#D8B44A), var(--vg-gold-1,#C9A227));
  box-shadow: 0 0 12px rgba(230,199,124,.35), 0 0 28px rgba(216,180,74,.2);
  border-radius:50%; cursor:pointer; opacity:.9; z-index:4; }
.vg-arrow:focus { outline:2px solid var(--vg-gold-3,#E6C77C); outline-offset:2px; }
.vg-prev { left:8px; } .vg-next { right:8px; }
.vg-prev::before, .vg-next::before { content:''; display:block; width:12px;height:12px; border-top:2px solid #000; border-right:2px solid #000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(135deg); }
.vg-next::before { transform:translate(-50%,-50%) rotate(-45deg); }

.vg-dots { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.vg-dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--vg-gold-2,#D8B44A); background:transparent; cursor:pointer; opacity:.85; }
.vg-dot[aria-current="true"], .vg-dot.is-active { background:var(--vg-gold-2,#D8B44A); box-shadow:0 0 10px rgba(230,199,124,.45); }

.vg-dust { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.15; mix-blend-mode:normal; }
.vg-figure:focus-within { outline:2px solid var(--vg-gold-3,#E6C77C); outline-offset:2px; }

@media (min-width:900px){ .vg-slide { width: calc(100% / var(--vg-per-view,1)); } }


/* v2.7: Thumbnails */
.vg-thumbs { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:12px; z-index:3; position:relative; }
.vg-thumb-btn { border:0; background:transparent; padding:0; cursor:pointer; opacity:.85; border-radius:6px; box-shadow:0 0 0 1px rgba(201,162,39,.35) inset; }
.vg-thumb-btn.is-active { box-shadow:0 0 0 2px var(--vg-gold-2,#D8B44A) inset, 0 0 10px rgba(230,199,124,.45); opacity:1; }
.vg-thumb { display:block; border-radius:6px; }

/* Lightbox */
.vg-lightbox { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.9); z-index:9999; }
.vg-lightbox.is-open { display:flex; }
.vg-lightbox img { max-width:90vw; max-height:90vh; border-radius:8px; box-shadow: 0 0 0 3px var(--vg-gold-1,#C9A227) inset, 0 0 40px rgba(216,180,74,.25); }
.vg-lightbox .vg-lightbox-close { position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background: radial-gradient(circle at 50% 50%, var(--vg-gold-2,#D8B44A), var(--vg-gold-1,#C9A227)); }
.vg-lightbox .vg-lightbox-close:before, .vg-lightbox .vg-lightbox-close:after { content:''; position:absolute; top:50%; left:50%; width:16px; height:2px; background:#000; transform-origin:center; }
.vg-lightbox .vg-lightbox-close:before { transform:translate(-50%,-50%) rotate(45deg); }
.vg-lightbox .vg-lightbox-close:after { transform:translate(-50%,-50%) rotate(-45deg); }