/* 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; } }

/* ── Before / After Reveal Slider ── */
.ba-section { background: var(--light); }
.ba-section .section-desc { color: var(--text-muted); max-width: 560px; margin: .75rem auto 0; text-align: center; font-size: 1rem; line-height: 1.6; }
.ba-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; margin-top: .25rem; }
.ba-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow .3s ease; }
.ba-card:hover { box-shadow: var(--shadow-lg); }
.ba-card-title { padding: .85rem 1.15rem; font-family: var(--font-accent); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--border); }
.ba-slider { position: relative; height: 260px; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y; --pos: 50%; }
.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-before img, .ba-after img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-after  { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); width: 2px; background: rgba(255,255,255,.9); z-index: 10; pointer-events: none; }
.ba-handle-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: var(--white); border-radius: 50%; box-shadow: 0 3px 16px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; }
.ba-handle-btn svg { width: 18px; height: 18px; stroke: var(--primary); }
.ba-hint { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem; font-family: var(--font-accent); font-size: .68rem; color: var(--text-muted); letter-spacing: .05em; }
.ba-hint svg { width: 13px; height: 13px; flex-shrink: 0; }
@media (max-width: 1024px) { .ba-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .ba-grid { grid-template-columns: 1fr; } }