/**
 * 画廊页样式
 * 瀑布流 / 悬停说明 / 分类筛选 / 灯箱
 */

.page-header { text-align: center; padding: 4rem 0 2.5rem; }
.page-header h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin: 0.6rem 0; }
.page-header p { color: var(--text-secondary); letter-spacing: 0.06em; }

/* 分类筛选（复用角色页样式语义） */
.filter-bar { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.filter-btn {
    font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em;
    padding: 0.6rem 1.5rem; background: transparent;
    border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.35s var(--ease-out);
}
.filter-btn:hover { border-color: var(--accent-rose); color: var(--text-primary); }
.filter-btn.active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }

/* 瀑布流 */
.gallery-masonry { column-count: 3; column-gap: 1.6rem; }
@media (max-width: 900px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 560px) { .gallery-masonry { column-count: 1; } }

.gallery-item {
    --c: var(--accent-rose);
    break-inside: avoid;
    margin-bottom: 1.6rem;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.gallery-item[data-cat="scenery"] { --c: var(--accent-jade); }
.gallery-item[data-cat="daily"]   { --c: var(--accent-rose); }
.gallery-item[data-cat="battle"]  { --c: var(--accent-red); }
.gallery-item[data-cat="promo"]   { --c: var(--accent-gold); }
.gallery-item[data-cat="memory"]  { --c: var(--accent-moon); }
.gallery-item img {
    width: 100%; display: block;
    filter: grayscale(30%);
    transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); filter: grayscale(0%); }
.gallery-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2rem 1.2rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.95rem; color: #fff;
    background: linear-gradient(transparent, rgba(44, 62, 80, 0.72));
    transform: translateY(100%);
    transition: transform 0.45s var(--ease-out);
}
.gallery-item:hover figcaption { transform: translateY(0); }
.gallery-item::after {
    content: "查看";
    position: absolute; top: 1rem; right: 1rem;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; background: color-mix(in srgb, var(--c) 88%, transparent);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    opacity: 0; transform: translateY(-8px);
    transition: all 0.4s var(--ease-out);
}
.gallery-item:hover::after { opacity: 1; transform: translateY(0); }

.gallery-item.hide { display: none; }
.filter-empty { text-align: center; color: var(--text-muted); padding: 3rem 0; }

/* ============ 灯箱 ============ */
.lightbox {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(247, 245, 239, 0.92);
    backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
}
.lightbox.show { opacity: 1; }
.lb-img {
    max-width: 84vw; max-height: 80vh;
    box-shadow: var(--shadow-lg);
    border: 6px solid #fff;
    animation: lbZoom 0.45s var(--ease-out);
}
@keyframes lbZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.lb-caption {
    position: absolute; bottom: 2.5rem; left: 0; right: 0;
    text-align: center; font-family: var(--font-serif);
    color: var(--text-primary); font-size: 1.1rem; letter-spacing: 0.05em;
}
.lb-close, .lb-prev, .lb-next {
    position: absolute; background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line-strong); color: var(--text-primary);
    cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s var(--ease-out);
}
.lb-close { top: 2rem; right: 2rem; width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; line-height: 1; }
.lb-prev { left: 2rem; }
.lb-next { right: 2rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }

@media (max-width: 560px) {
    .lb-prev { left: 0.6rem; } .lb-next { right: 0.6rem; }
    .lb-prev, .lb-next { width: 42px; height: 42px; font-size: 1.5rem; }
    .lb-img { max-width: 92vw; border-width: 4px; }
}