/* ====== Responsive Gallery ====== */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  align-items:stretch;
}
.gallery figure{
  margin:0;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#f4f4f5;
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.gallery figure:hover img{ transform:scale(1.03); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:6px 10px; font-size:12px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

@media (max-width:520px){
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
  .gallery figure{ aspect-ratio:3/2; border-radius:10px; }
}

/* ====== Lightbox ====== */
.lightbox{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(0,0,0,.75);
  z-index:20000;
  /* 与顶栏共用同一份内边距，避免错位 */
  --lb-pad: clamp(12px, 4vw, 32px);
  padding:var(--lb-pad);
  overflow:hidden;
}
.lightbox.is-open{ display:grid; }

/* 顶部右上角按钮：相对 lightbox 绝对定位，永不跑偏 */
.lightbox__topbar{
  position:absolute;
  top:var(--lb-pad);
  right:var(--lb-pad);
  display:flex; gap:10px;
  z-index:10010;
}
.lightbox__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; cursor:pointer;
  backdrop-filter:blur(4px);
}
.lightbox__btn:hover{ background:rgba(0,0,0,.55); }
.lightbox__link{ text-decoration:none; color: #ffffff; }

/* 预览图（含二级放大） */
.lightbox__img{
  max-width:min(92vw,1600px);
  max-height:86vh;
  object-fit:contain;
  border-radius:10px;
  background:#111;
  cursor:zoom-in;
  transition:transform .15s ease;
  position:relative;
  z-index:1; /* 不盖住按钮 */
}
.lightbox__img.is-zoomed{
  cursor:grab;
  transform:scale(2); /* 放大倍率可改 2~3 */
}

/* 导航箭头与计数器 */
.lightbox__nav,
.lightbox__counter{
  position:absolute;
  color:#fff; line-height:1;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  backdrop-filter:blur(4px);
  z-index:10000;
}
.lightbox__nav{ padding:8px 12px; cursor:pointer; }
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }
.lightbox__counter{
  bottom:18px; left:50%; transform:translateX(-50%);
  font-size:12px; padding:6px 10px;
}

/* 交互细节 */
.lightbox__btn,.lightbox__img{ user-select:none; }

/* 弹窗打开时禁用背景滚动（配合 JS 的 body.lb-open） */
body.lb-open{ overflow:hidden; }