/* ----------------------------------------
   GALLERY PAGE STYLES (Style-E Compatible)
----------------------------------------- */

/* HERO */
.gallery-hero{
  background:
    linear-gradient(135deg, rgba(0,119,255,0.55), rgba(0,201,167,0.55)),
    url('../img/gallery-hero.jpg') center/cover no-repeat;
  padding:90px 0;
  color:white;
}

.hero-center{
  text-align:center;
  max-width:700px;
}

.gallery-hero h1{
  font-size:42px;
  font-weight:800;
  margin:0 0 10px;
}

/* FILTER BUTTONS */
.filter-buttons{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.filter-btn{
  padding:10px 18px;
  background:white;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

.filter-btn.active,
.filter-btn:hover{
  background:var(--cta);
  color:white;
  border-color:transparent;
}

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

.gallery-item{
  overflow:hidden;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  cursor:pointer;
}

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

/* LIGHTBOX */
.lightbox{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.8);
  display:flex;
  justify-content:center;
  align-items:center;
  visibility:hidden;
  opacity:0;
  transition:.3s ease;
  z-index:9999;
}

.lightbox.active{
  visibility:visible;
  opacity:1;
}

.lightbox-img{
  max-width:85%;
  max-height:85%;
  border-radius:10px;
}

.close-lightbox{
  position:absolute;
  top:20px;right:30px;
  font-size:40px;
  color:white;
  cursor:pointer;
}

/* RESPONSIVE */
@media (max-width:680px){
  .gallery-hero h1{font-size:32px;}
}