/* gallery.css — dark grid + lightbox */

:root{
  --bg:#0B0F14; --text:#E8E8E8; --muted:#9AA3AF; --accent:#B21E35;
  --surface:rgba(255,255,255,.05); --border:rgba(255,255,255,.16);
}

html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.gal-top{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:.75rem;
  background:rgba(11,15,20,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
  padding:.6rem .8rem;
}
.gal-top__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .65rem;border:1px solid var(--border);background:var(--surface);border-radius:.6rem;color:var(--text);text-decoration:none}
.gal-top__btn:hover{background:rgba(255,255,255,.08)}
.gal-top__right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gal-top__label{font-size:.9rem;opacity:.8}
.gal-top__select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.4rem .5rem}

.gal-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.gal-tag{padding:.35rem .6rem;border:1px solid var(--border);background:var(--surface);border-radius:9999px;color:var(--text);font-size:.9rem}
.gal-tag:hover{background:rgba(255,255,255,.08)}
.gal-tag.is-active{outline:2px solid color-mix(in srgb, var(--accent), white 35%);outline-offset:2px}

.gal-wrap{max-width:1200px;margin:0 auto;padding:1rem .8rem}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.gal-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.gal-link{display:block}
.gal-item img{width:100%;height:220px;object-fit:cover;display:block}
.gal-cap{font-size:.9rem;color:var(--muted);padding:.5rem .6rem;min-height:2.2rem}

.gal-empty{opacity:.8;margin:2rem 0;text-align:center}

.lb{position:fixed;inset:0;z-index:60;display:none}
.lb[aria-hidden="false"]{display:block}
.lb-inner{position:absolute;inset:6% 4%;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border-radius:12px;border:1px solid var(--border)}
.lb img{max-width:100%;max-height:100%;cursor:grab;user-select:none;touch-action:none;transform-origin:center center}
.lb-cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(0,0,0,.6);border:1px solid var(--border);padding:.4rem .6rem;border-radius:8px;color:#E8E8E8;font-size:.95rem}
.lb-x{position:absolute;top:12px;right:14px;padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);padding:.5rem .7rem;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text)}
#lbPrev{left:10px} #lbNext{right:10px}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.1)}