/* ====== 相册页面 ====== */

/* 瀑布流容�?�?CSS columns 实现 */
.gallery-masonry{
  column-count:3;
  column-gap:12px;
}
@media (max-width:1024px){.gallery-masonry{column-count:2;}}
@media (max-width:600px){.gallery-masonry{column-count:1;}}

/* 单张图片卡片 */
.gallery-item{
  break-inside:avoid;
  margin-bottom:12px;
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:rgba(255,255,255,0.3);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:transform 0.3s var(--ease-spring),box-shadow 0.3s ease;
  opacity:0;
  transform:translateY(20px) translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.gallery-item.loaded{
  opacity:1;
  transform:translateY(0) translateZ(0);
}
.gallery-item:hover{
  transform:translateY(-4px) scale(1.02) translateZ(0);
  box-shadow:0 8px 28px rgba(0,0,0,0.15);
  z-index:2;
}
.gallery-item img{
  width:100%;
  height:auto;
  display:block;
  transition:transform 0.4s ease;
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.gallery-item:hover img{transform:scale(1.05) translateZ(0);}
/* 标题遮罩 */
.gallery-item .gallery-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 12px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,0.6));
  opacity:0;
  transition:opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-overlay span{
  font-size:13px;font-weight:500;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* 加载指示�?*/
.gallery-loader{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:30px 0;color:var(--accent-soft);font-size:14px;
}
.gallery-loader.hidden{display:none;}
.gallery-end{
  text-align:center;padding:30px 0;color:var(--text-hint);font-size:13px;
}

/* ====== 灯箱 ====== */
.gallery-lightbox{
  position:fixed;inset:0;z-index:10002;display:none;
  align-items:center;justify-content:center;
}
.gallery-lightbox.open{display:flex;}
.lightbox-mask{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:search-fade 0.25s ease;
}
.lightbox-content{
  position:relative;z-index:1;
  max-width:90vw;max-height:85vh;
}
.lightbox-content img{
  max-width:90vw;max-height:85vh;
  border-radius:var(--radius-md);
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  animation:search-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.lightbox-close{
  position:absolute;top:20px;right:20px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.15);border:none;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,0.3);}
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:none;
  color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.25);}

/* 暗黑模式 */
[data-theme="dark"] .gallery-item{background:rgba(50,50,60,0.4);}