/* gallery.css */
.gallery-filter { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.gallery-filter-btn { padding: .55rem 1.25rem; font-family: var(--font-accent); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-full); color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); }
.gallery-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.gallery-filter-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,17,23,.85) 0%, transparent 55%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 1.25rem; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-label { font-family: var(--font-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); flex: 1; }
.gallery-zoom { width: 36px; height: 36px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: var(--transition-fast); }
.gallery-zoom:hover { background: var(--secondary); }
.gallery-zoom svg { width: 16px; height: 16px; color: var(--primary); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(13,17,23,.95); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; padding: 1rem; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-inner { position: relative; max-width: 900px; width: 100%; }
.lightbox-img-wrap { border-radius: var(--radius-lg); overflow: hidden; background: var(--dark-2); }
#lb-img { width: 100%; max-height: 80vh; object-fit: contain; display: block; }
#lb-caption { text-align: center; font-family: var(--font-accent); font-size: .78rem; color: rgba(255,255,255,.6); margin-top: .75rem; letter-spacing: .06em; text-transform: uppercase; }
#lb-close { position: absolute; top: -3rem; right: 0; width: 40px; height: 40px; background: rgba(255,255,255,.1); border: none; border-radius: 50%; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
#lb-close:hover { background: var(--secondary); color: var(--dark); }
#lb-close svg { width: 18px; height: 18px; }
#lb-prev, #lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,.1); border: none; border-radius: 50%; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
#lb-prev { left: -3.5rem; }
#lb-next { right: -3.5rem; }
#lb-prev:hover, #lb-next:hover { background: var(--secondary); color: var(--dark); }
#lb-prev svg, #lb-next svg { width: 20px; height: 20px; }
@keyframes galleryFadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } #lb-prev { left: -.5rem; } #lb-next { right: -.5rem; } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr; } }