/* ==========================================================
   Visual Grid Gallery — Front-end Styles
   ========================================================== */

.vgg-gallery-wrap {
    --vgg-filter-bg: #f3f4f6;
    --vgg-filter-active-bg: #111;
    --vgg-filter-active-color: #fff;
    --vgg-radius: 4px;
    --vgg-gap: 10px;
    --vgg-overlay: rgba(10,10,10,.55);
    --vgg-transition: .3s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
    max-width: 100%;
}

/* ---------- Filter Bar ---------- */
.vgg-filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.vgg-filter-btn {
    display: inline-flex; align-items: center;
    padding: 7px 18px;
    background: var(--vgg-filter-bg); color: #444;
    border: 1.5px solid transparent; border-radius: 999px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background var(--vgg-transition), color var(--vgg-transition), transform .15s;
}
.vgg-filter-btn:hover { background:#e5e7eb; transform:translateY(-1px); }
.vgg-filter-btn.active { background:var(--vgg-filter-active-bg); color:var(--vgg-filter-active-color); border-color:var(--vgg-filter-active-bg); }

/* ---------- Grid ---------- */
.vgg-grid { display:grid; gap:var(--vgg-gap); }
.vgg-cols-1 { grid-template-columns:1fr; }
.vgg-cols-2 { grid-template-columns:repeat(2,1fr); }
.vgg-cols-3 { grid-template-columns:repeat(3,1fr); }
.vgg-cols-4 { grid-template-columns:repeat(4,1fr); }
.vgg-cols-5 { grid-template-columns:repeat(5,1fr); }
.vgg-cols-6 { grid-template-columns:repeat(6,1fr); }

.vgg-layout-grid .vgg-item { aspect-ratio:1; }
.vgg-layout-grid .vgg-img  { width:100%; height:100%; object-fit:cover; }

.vgg-layout-masonry { display:block; column-gap:var(--vgg-gap); }
.vgg-cols-1.vgg-layout-masonry { column-count:1; }
.vgg-cols-2.vgg-layout-masonry { column-count:2; }
.vgg-cols-3.vgg-layout-masonry { column-count:3; }
.vgg-cols-4.vgg-layout-masonry { column-count:4; }
.vgg-cols-5.vgg-layout-masonry { column-count:5; }
.vgg-cols-6.vgg-layout-masonry { column-count:6; }
.vgg-layout-masonry .vgg-item { break-inside:avoid; margin-bottom:var(--vgg-gap); }
.vgg-layout-masonry .vgg-img  { width:100%; height:auto; display:block; }

/* ---------- Item ---------- */
.vgg-item {
    position: relative;
    border-radius: var(--vgg-radius);
    background: #f0f0f0;
    transition: opacity .35s, transform .35s;
}
.vgg-item.vgg-hidden { opacity:0; pointer-events:none; transform:scale(.95); }
.vgg-layout-grid .vgg-item.vgg-hidden { display:none; }

/* ---------- Item Inner ---------- */
.vgg-item-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.vgg-img { display:block; transition:transform var(--vgg-transition); }
.vgg-item:hover .vgg-img { transform:scale(1.06); }

/* ---------- Overlay — IS the lightbox trigger ---------- */
.vgg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10,10,10,0);
    transition: background var(--vgg-transition);
    cursor: pointer;
    display: block;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 5;
}
.vgg-item:hover .vgg-overlay { background: rgba(10,10,10,.55); }
.vgg-overlay::before,
.vgg-overlay::after {
    display: none !important;
    width: 0 !important; height: 0 !important;
    opacity: 0 !important;
    background: none !important;
    animation: none !important;
    content: '' !important;
}

/* ---------- Lightbox ---------- */
.vgg-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vgg-lb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 99998;
    cursor: pointer;
}
.vgg-lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
    z-index: 1;
}
.vgg-lb-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    display: block;
    margin: 0 auto;
}
.vgg-lb-close, .vgg-lb-prev, .vgg-lb-next {
    position: fixed;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 44px; height: 44px;
    font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    z-index: 100000;
    backdrop-filter: blur(6px);
}
.vgg-lb-close { top:20px; right:20px; font-size:26px; }
.vgg-lb-prev  { left:20px; top:50%; transform:translateY(-50%); }
.vgg-lb-next  { right:20px; top:50%; transform:translateY(-50%); }
.vgg-lb-close:hover { background:rgba(255,255,255,.3); }
.vgg-lb-prev:hover  { background:rgba(255,255,255,.3); }
.vgg-lb-next:hover  { background:rgba(255,255,255,.3); }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
    .vgg-cols-5,.vgg-cols-6 { grid-template-columns:repeat(3,1fr); }
    .vgg-cols-5.vgg-layout-masonry,.vgg-cols-6.vgg-layout-masonry { column-count:3; }
}
@media (max-width:600px) {
    .vgg-cols-3,.vgg-cols-4,.vgg-cols-5,.vgg-cols-6 { grid-template-columns:repeat(2,1fr); }
    .vgg-cols-3.vgg-layout-masonry,.vgg-cols-4.vgg-layout-masonry,.vgg-cols-5.vgg-layout-masonry,.vgg-cols-6.vgg-layout-masonry { column-count:2; }
    .vgg-lb-prev { left:8px; }
    .vgg-lb-next { right:8px; }
}
@media (max-width:400px) {
    .vgg-cols-2,.vgg-cols-3,.vgg-cols-4 { grid-template-columns:1fr; }
    .vgg-cols-2.vgg-layout-masonry,.vgg-cols-3.vgg-layout-masonry,.vgg-cols-4.vgg-layout-masonry { column-count:1; }
}