/* OakenGallery — Gallery Viewer CSS */

/* ── Layout ─────────────────────────────────────────────────────────── */
.gallery-layout { display:flex; min-height:calc(100vh - 57px); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.gallery-sidebar { width:240px; flex-shrink:0; background:#fff; border-right:1px solid #e0e0e0; padding:1.25rem 0; position:sticky; top:57px; height:calc(100vh - 57px); overflow-y:auto; display:flex; flex-direction:column; }
.gallery-project-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#888; padding:.25rem 1.125rem .75rem; }
.gallery-list { list-style:none; flex:1; }
.gallery-list-item { display:flex; align-items:center; gap:.625rem; padding:.625rem 1.125rem; text-decoration:none; color:#333; font-size:14px; font-weight:500; border-left:3px solid transparent; transition:background .12s, border-color .12s; }
.gallery-list-item:hover { background:#f5f5f5; }
.gallery-list-item.active { background:#e8f5e9; border-left-color:#2c5f2e; color:#2c5f2e; }
.gallery-list-thumb { width:36px; height:36px; border-radius:4px; object-fit:cover; flex-shrink:0; }

/* ── Main ─────────────────────────────────────────────────────────────── */
.gallery-main { flex:1; padding:1.75rem; min-width:0; }
.gallery-title { font-size:1.5rem; font-weight:700; margin-bottom:.375rem; }
.gallery-desc  { font-size:14px; color:#555; margin-bottom:1.5rem; }

/* ── Media grid ─────────────────────────────────────────────────────── */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.625rem; }
.media-item { aspect-ratio:1; overflow:hidden; border-radius:8px; cursor:pointer; background:#f0f0f0; }
.media-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s, opacity .2s; }
.media-item:hover img { transform:scale(1.04); opacity:.9; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1000; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.lb-stage { max-width:90vw; max-height:85vh; display:flex; flex-direction:column; align-items:center; }
.lb-stage img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:4px; display:block; }
.lb-caption { color:rgba(255,255,255,.6); font-size:13px; margin-top:.625rem; text-align:center; min-height:1.2em; }
.lb-close { position:absolute; top:1.25rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; line-height:1; opacity:.7; transition:opacity .15s; }
.lb-close:hover { opacity:1; }
.lb-prev, .lb-next { position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; padding:.75rem; opacity:.6; transition:opacity .15s; }
.lb-prev { left:1rem; }
.lb-next { right:1rem; }
.lb-prev:hover, .lb-next:hover { opacity:1; }
.lb-download { margin-top:.875rem; }
.btn-download { display:inline-block; padding:.5rem 1.25rem; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:6px; font-size:13px; text-decoration:none; transition:background .15s; }
.btn-download:hover { background:rgba(255,255,255,.22); }

/* ── Share meta ─────────────────────────────────────────────────────── */
.share-meta { padding:.875rem 1.125rem; font-size:12px; color:#888; border-top:1px solid #e0e0e0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:700px) {
  .gallery-layout  { flex-direction:column; }
  .gallery-sidebar { width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid #e0e0e0; padding:.75rem 0; flex-direction:row; overflow-x:auto; }
  .gallery-list    { display:flex; flex-direction:row; gap:.25rem; padding:0 .75rem; }
  .gallery-list-item { white-space:nowrap; border-left:none; border-bottom:3px solid transparent; padding:.5rem .75rem; }
  .gallery-list-item.active { border-bottom-color:#2c5f2e; border-left:none; }
  .gallery-list-thumb { display:none; }
  .gallery-project-title { display:none; }
  .gallery-main { padding:1rem; }
  .media-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .lb-prev, .lb-next { font-size:1.5rem; padding:.5rem; }
}