/* Filters */
.gallery-filters{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.filter{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    font-weight:800;
    font-size:13px;
    letter-spacing:.2px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

@media (hover:hover){
    .filter:hover{
        transform: translateY(-2px);
        background: rgba(184,138,68,.10);
        border-color: rgba(184,138,68,.22);
        color: var(--text);
    }
}

.filter.is-active{
    background: rgba(184,138,68,.16);
    border-color: rgba(184,138,68,.30);
    color: var(--text);
}

/* Gallery grid */
.gallery{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.gallery img{
    width:100%;
    aspect-ratio: 4 / 3;
    height:auto;
    object-fit:cover;
    border-radius:18px;
    border:1px solid var(--border);
    cursor:pointer;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

@media (hover:hover){
    .gallery img:hover{
        transform: translateY(-4px) scale(1.01);
        filter: brightness(1.05);
        border-color: rgba(184,138,68,.22);
    }
}

/* ✅ Fix: respect hidden attribute for lightbox */
.lightbox[hidden]{ display:none !important; }

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:grid;
    place-items:center;
    padding:16px;
    z-index:80;
}

.lb-img{
    max-width:min(1100px, 96vw);
    max-height:82vh;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 18px 45px rgba(0,0,0,.5);
}

.lb-close{
    position:absolute;
    top:16px; right:16px;
    width:44px;height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

@media (max-width:900px){
    .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
    .gallery{grid-template-columns:1fr}
}