/* =====================================
   MELANNIE SERVICES
   GALLERY PAGE STYLES
===================================== */

/* =====================================
   HERO
===================================== */

.gallery-hero{

background:
linear-gradient(
rgba(255,255,255,.85),
rgba(255,255,255,.85)
),
url('../images/gallery-hero.jpg');

background-size:cover;

background-position:center;

}

/* =====================================
   FILTER BUTTONS
===================================== */

.gallery-filters{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:50px;

}

.filter-btn{

padding:12px 25px;

border:none;

border-radius:50px;

background:white;

color:var(--dark);

font-weight:600;

cursor:pointer;

box-shadow:var(--shadow);

transition:var(--transition);

}

.filter-btn:hover{

background:var(--primary);

color:white;

transform:translateY(-2px);

}

.filter-btn.active{

background:var(--primary);

color:white;

}

/* =====================================
   GALLERY GRID
===================================== */

.filter-gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

/* =====================================
   GALLERY ITEM
===================================== */

.gallery-item{

position:relative;

overflow:hidden;

border-radius:var(--radius);

cursor:pointer;

box-shadow:var(--shadow);

background:white;

border:1px solid rgba(232,92,148,.08);

transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;

}

.gallery-item:hover{

transform:
translateY(-10px)
scale(1.02);

box-shadow:
0 30px 70px rgba(0,0,0,.18);

border-color:
rgba(232,92,148,.20);

}

.gallery-item img{

width:100%;

height:420px;

object-fit:cover;

display:block;

transition:
transform .6s ease;

}

.gallery-item:hover img{

transform:
scale(1.12);

filter:
brightness(1.05);

}

.gallery-item{

opacity:0;

transform:translateY(30px);

animation:
galleryLuxuryFade .8s ease forwards;

}

.gallery-item:nth-child(1){
animation-delay:.05s;
}

.gallery-item:nth-child(2){
animation-delay:.10s;
}

.gallery-item:nth-child(3){
animation-delay:.15s;
}

.gallery-item:nth-child(4){
animation-delay:.20s;
}

.gallery-item:nth-child(5){
animation-delay:.25s;
}

.gallery-item:nth-child(6){
animation-delay:.30s;
}

.gallery-item:nth-child(7){
animation-delay:.35s;
}

.gallery-item:nth-child(8){
animation-delay:.40s;
}

.gallery-item:nth-child(9){
animation-delay:.45s;
}

.gallery-item:nth-child(10){
animation-delay:.50s;
}

/* =====================================
   CAPTION
===================================== */

.gallery-caption{

position:absolute;

bottom:20px;

left:20px;

right:20px;

padding:15px 20px;

background:
rgba(255,255,255,.15);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

border:
1px solid rgba(255,255,255,.3);

border-radius:15px;

color:white;

font-weight:500;

}

/* =====================================
   CATEGORY BADGES
===================================== */

.gallery-item::before{

position:absolute;

top:15px;

left:15px;

padding:8px 12px;

border-radius:20px;

font-size:.8rem;

font-weight:600;

color:white;

z-index:2;

}

.gallery-item.floral::before{

content:"Floral";

background:#E85C94;

}

.gallery-item.cleaning::before{

content:"Cleaning";

background:#4C9AFF;

}

.gallery-item.catering::before{

content:"Catering";

background:#D7B04A;

}

.gallery-item.food::before{

content:"Food";

background:#FF8C42;

}

.gallery-item.markets::before{

content:"Market";

background:#2E8B57;

}

/* =====================================
   IMAGE OVERLAY
===================================== */

.gallery-item::after{

content:"View Image";

position:absolute;

top:50%;

left:50%;

transform:
translate(-50%,-50%);

background:
rgba(255,255,255,.9);

padding:12px 20px;

border-radius:30px;

font-weight:600;

opacity:0;

transition:.3s;

}

.gallery-item:hover::after{

opacity:1;

box-shadow:
0 0 30px rgba(232,92,148,.25);

}

/* =====================================
   LIGHTBOX
===================================== */

#dynamicLightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:
rgba(0,0,0,.95);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

#dynamicLightbox.active{

display:flex;

}

#lightboxImage{

max-width:85%;

max-height:85%;

border-radius:20px;

box-shadow:
0 30px 80px rgba(0,0,0,.4);

}

#lightboxClose{

position:absolute;

top:20px;

right:35px;

font-size:55px;

color:white;

cursor:pointer;

}

#lightboxPrev,
#lightboxNext{

position:absolute;

top:50%;

transform:
translateY(-50%);

font-size:55px;

color:white;

cursor:pointer;

padding:15px;

user-select:none;

}

#lightboxPrev{

left:20px;

}

#lightboxNext{

right:20px;

}

#lightboxCaption{

position:absolute;

bottom:30px;

left:50%;

transform:
translateX(-50%);

color:white;

background:
rgba(0,0,0,.5);

padding:12px 20px;

border-radius:30px;

}

/* =====================================
   EMPTY GALLERY MESSAGE
===================================== */

.no-results{

text-align:center;

padding:50px;

font-size:1.2rem;

color:var(--gray);

}

/* =====================================
   ANIMATION
===================================== */

@keyframes galleryLuxuryFade{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.gallery-filters{

gap:10px;

}

.filter-btn{

font-size:.9rem;

padding:10px 18px;

}

.gallery-item img{

height:240px;

}

#lightboxPrev,
#lightboxNext{

font-size:40px;

}

#lightboxClose{

font-size:45px;

}

}

@media(max-width:480px){

.filter-gallery{

grid-template-columns:1fr;

}

.gallery-item img{

height:220px;

}

.gallery-caption{

font-size:.9rem;

}

}