/* ================= Gallery Page ================= */

.gallery-hero{
  min-height:60vh;
}

/* Promo Video */
.promo-video{
  padding:110px 30px;
  background:linear-gradient(
    to left,
    color-mix(in srgb, var(--bg-accent) 35%, transparent),
    transparent
  );
}

.promo-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}

.promo-title{
  font-size:32px;
  margin-bottom:14px;
}

.promo-desc{
  font-size:16px;
  line-height:1.9;
  color:var(--text-muted);
  margin-bottom:26px;
}

.promo-media{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  box-shadow:var(--shadow-strong);
}

.promo-video-el{
  width:100%;
  height:100%;
  object-fit:cover;
}

.promo-overlay-text{
  position:absolute;
  bottom:20px;
  right:20px;
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:10px 18px;
  border-radius:22px;
  font-size:13px;
  backdrop-filter:blur(6px);
  animation:fadeSlideUp 2.5s ease infinite;
}

@keyframes fadeSlideUp{
  0%{opacity:0; transform:translateY(8px);}
  20%{opacity:1; transform:translateY(0);}
  80%{opacity:1;}
  100%{opacity:0;}
}

/* Filters */
.gallery-section{
  padding:90px 30px;
}

.gallery-filters{
  text-align:center;
  margin-bottom:40px;
}

.filter-btn{
  background:transparent;
  border:2px solid var(--primary);
  color:var(--primary);
  padding:10px 22px;
  border-radius:30px;
  margin:0 6px;
  cursor:pointer;
}

.filter-btn.active,
.filter-btn:hover{
  background:var(--primary);
  color:#fff;
}

/* Grid */
.gallery-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}

.gallery-item{
  overflow:hidden;
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Hide */
.gallery-item.hide{
  display:none;
}

/* Lightbox */
#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
  border-radius:20px;
}

#lightbox .close{
  position:absolute;
  top:30px;
  left:30px;
  font-size:40px;
  color:#fff;
  cursor:pointer;
}

/* Mobile */
@media(max-width:768px){
  .promo-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .promo-video{
    padding:70px 20px;
  }

  .gallery-section{
    padding:60px 20px;
  }

  .promo-overlay-text{
    right:50%;
    transform:translateX(50%);
  }
}