/* =========================================================
   RAASA — GALLERY PAGE STYLES
   Rich Royal / Palace Direction
   ========================================================= */

.gallery-hero{ min-height:52vh; padding:5rem 0; }
.gallery-hero-bg{
  background:url('https://images.unsplash.com/photo-1600891964092-4316c288032e?q=80&w=1600&auto=format&fit=crop') center 40%/cover no-repeat !important;
}
.gallery-hero .hero-frame{ padding:2.4rem 2.6rem; }

/* ---------- Filter Tabs ---------- */
.gallery-tabs-wrap{
  background:var(--ivory);
  border-bottom:1px solid rgba(212,175,55,.25);
  position:sticky;
  top:0;
  z-index:900;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.15);
}
.gallery-tabs{
  display:flex;
  gap:.6rem;
  overflow-x:auto;
  padding:1.1rem 0;
  scrollbar-width:none;
}
.gallery-tabs::-webkit-scrollbar{ display:none; }
.gallery-tab{
  flex:0 0 auto;
  background:#fff;
  border:1px solid rgba(212,175,55,.35);
  color:var(--maroon);
  font-family:'Cinzel', serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.6rem 1.3rem;
  border-radius:30px;
  white-space:nowrap;
  transition:.25s ease;
}
.gallery-tab:hover{ border-color:var(--gold-mid); color:var(--gold-deep); }
.gallery-tab.active{
  background:linear-gradient(135deg, var(--gold-mid), var(--gold-deep));
  border-color:var(--gold-mid);
  color:#fff;
  box-shadow:0 10px 20px -10px rgba(212,175,55,.6);
}

/* ---------- Gallery Grid ---------- */
.gallery-section{ padding-top:3.5rem; background:var(--ivory); }
.gallery-col{ display:block; transition:opacity .3s ease; }
.gallery-col.hidden{ display:none; }

.gallery-frame{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 20px 35px -22px rgba(59,36,24,.4);
  height:100%;
}
.gallery-frame img{
  width:100%;
  height:280px;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.gallery-frame:hover img{ transform:scale(1.09); }
.gallery-frame .corner{ z-index:3; width:26px; height:26px; }
.gallery-frame .corner.tl{ top:6px; left:6px; }
.gallery-frame .corner.br{ bottom:6px; right:6px; }

.gallery-tag{
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  background:linear-gradient(135deg, var(--gold-mid), var(--royal-orange));
  color:#fff;
  font-family:'Cinzel', serif;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.32rem .8rem;
  border-radius:20px;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.4);
}

.gallery-shine{
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .7s ease;
  pointer-events:none;
}
.gallery-frame:hover .gallery-shine{ transform:translateX(100%); }

/* ---------- Lightbox ---------- */
.lightbox-frame{
  position:relative;
  padding:10px;
  background:linear-gradient(160deg, var(--gold-mid), var(--gold-deep) 55%, var(--gold-mid));
  border-radius:8px;
}
.lightbox-frame img{ border-radius:4px; display:block; width:100%; }
.lightbox-frame .corner{ width:22px; height:22px; }
.lightbox-frame .corner.tl{ top:6px; left:6px; }
.lightbox-frame .corner.tr{ top:6px; right:6px; }
.lightbox-frame .corner.bl{ bottom:6px; left:6px; }
.lightbox-frame .corner.br{ bottom:6px; right:6px; }

@media (max-width:576px){
  .gallery-frame img{ height:230px; }
}