/* Custom gallery — responsive grid + lightbox. No external deps. */

.cg{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.cg--justified{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.cg--compact{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; }

.cg__item{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    cursor:pointer;
    aspect-ratio: 4/3;
    background:#f1f1f1;
}
.cg--justified .cg__item{ aspect-ratio: 1/1; }
.cg__item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition: transform .3s ease;
}
.cg__item:hover img{ transform:scale(1.05); }
.cg__item::after{
    content:"";
    position:absolute; inset:0;
    background:rgba(0,0,0,0);
    transition: background .2s;
}
.cg__item:hover::after{ background:rgba(0,0,0,.25); }

/* Lightbox */
.cg-lightbox{
    position:fixed; inset:0;
    background:rgba(0,0,0,.9);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}
.cg-lightbox.is-open{ display:flex; }
.cg-lightbox__img{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:6px;
    box-shadow:0 10px 50px rgba(0,0,0,.6);
    user-select:none;
    -webkit-user-drag:none;
}
.cg-lightbox__btn{
    position:absolute;
    background:rgba(255,255,255,.15);
    border:0; color:#fff;
    width:44px; height:44px;
    border-radius:50%;
    cursor:pointer;
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.cg-lightbox__btn:hover{ background:rgba(255,255,255,.3); }
.cg-lightbox__close{ top:16px; right:16px; }
.cg-lightbox__prev{ left:16px; top:50%; transform:translateY(-50%); }
.cg-lightbox__next{ right:16px; top:50%; transform:translateY(-50%); }
.cg-lightbox__counter{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:14px; background:rgba(0,0,0,.4);
    padding:4px 10px; border-radius:40px;
}