/* ==========================================================
   PrimeTech Solutions
   gallery.css
   Gallery & Portfolio Styles v1.0
   ========================================================== */

/* Section */
.gallery{
    position:relative;
    overflow:hidden;
}

.gallery::before{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:460px;
    height:460px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,138,0,.10),transparent 70%);
    pointer-events:none;
}

/* Grid */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.5rem;
}

/* Card */
.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-lg);
    border:1px solid var(--glass-border);
    background:var(--bg-card);
    box-shadow:var(--shadow-sm);
}

.gallery-item img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .6s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/* Overlay */
.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.5rem;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.35),
        transparent
    );
    opacity:0;
    transition:opacity var(--transition);
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay h3{
    margin:0 0 .35rem;
    color:#fff;
}

.gallery-overlay p{
    margin:0;
    color:#e8e8e8;
    font-size:.92rem;
}

/* Category Badge */
.gallery-badge{
    position:absolute;
    top:16px;
    left:16px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,138,0,.92);
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

/* View Button */
.gallery-view{
    margin-top:1rem;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:#fff;
    font-weight:600;
}

.gallery-view:hover{
    color:var(--color-accent);
}

/* Filter Bar */
.gallery-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.8rem;
    margin-bottom:2.5rem;
}

.gallery-filter button{
    padding:.7rem 1.2rem;
    border-radius:999px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text);
    transition:var(--transition);
}

.gallery-filter button:hover,
.gallery-filter button.active{
    background:var(--gradient-primary);
    color:#fff;
    border-color:transparent;
    box-shadow:var(--shadow-glow);
}

/* Empty Placeholder */
.gallery-placeholder{
    display:grid;
    place-items:center;
    min-height:240px;
    border:2px dashed rgba(255,138,0,.25);
    border-radius:var(--radius-lg);
    color:var(--text-light);
    text-align:center;
    padding:2rem;
}

/* Responsive */
@media(max-width:768px){
    .gallery-overlay{
        opacity:1;
        background:linear-gradient(
            to top,
            rgba(0,0,0,.78),
            rgba(0,0,0,.18),
            transparent
        );
    }

    .gallery-filter{
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:.5rem;
    }
}

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

    .gallery-overlay{
        padding:1.2rem;
    }

    .gallery-badge{
        font-size:.68rem;
    }
}