/* ============================================================
   WELDONE EVENTS — Gallery page styles
   ============================================================ */

/* filter chips */
.g-filters{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-bottom:clamp(40px, 5vw, 60px);
}
.g-chip{
  padding:12px 26px; border-radius:99px;
  border:1px solid var(--line); color:var(--ink-2);
  font-size:.74rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  transition:all .4s var(--ease);
}
.g-chip:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.g-chip.on{
  background:var(--grad-gold); color:#1d0f16; border-color:transparent;
  box-shadow:0 14px 30px -12px rgba(217,143,156,.45);
}

/* grid */
.g-grid{ columns:3; column-gap:22px; }
.g-item{
  position:relative; margin-bottom:22px; break-inside:avoid;
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  isolation:isolate;
  animation:g-in .7s var(--ease-out) both;
}
@keyframes g-in{ from{ opacity:0; transform:translateY(30px) scale(.97) } to{ opacity:1; transform:none } }
.g-item.hide{ display:none; }
.g-item img{ width:100%; transition:transform 1.2s var(--ease); }
.g-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(15,7,12,.78));
  opacity:0; transition:opacity .5s;
}
.g-item:hover img{ transform:scale(1.07); }
.g-item:hover::after{ opacity:1; }
.g-item figcaption{
  position:absolute; left:22px; right:22px; bottom:18px; z-index:2;
  font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:#f9eff2;
  opacity:0; transform:translateY(14px); transition:all .5s var(--ease) .05s;
  display:flex; align-items:center; gap:12px;
}
.g-item figcaption::after{
  content:""; height:1px; flex:1; background:linear-gradient(90deg, rgba(246,212,218,.6), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease) .15s;
}
.g-item:hover figcaption{ opacity:1; transform:none; }
.g-item:hover figcaption::after{ transform:scaleX(1); }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2500;
  background:rgba(8,6,4,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-stage{
  max-width:min(1200px, 88vw); max-height:82vh;
  display:flex; flex-direction:column; gap:16px;
  transform:scale(.94); transition:transform .55s var(--ease);
}
.lightbox.open .lb-stage{ transform:scale(1); }
.lb-stage img{
  max-width:100%; max-height:74vh; object-fit:contain;
  border-radius:12px; box-shadow:0 50px 120px -30px rgba(0,0,0,.8);
}
.lb-stage figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  color:#e9d4d9;
}
.lb-stage figcaption #lbCap{
  font-family:var(--font-display); font-style:italic; font-size:1.35rem;
}
.lb-stage figcaption #lbCount{
  font-size:.72rem; letter-spacing:.34em; color:#d98f9c;
}
.lb-close{
  position:absolute; top:26px; right:26px; z-index:3;
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(243,236,223,.25); color:#f7edf0;
  display:grid; place-items:center; transition:all .35s;
}
.lb-close:hover{ border-color:#d98f9c; color:#d98f9c; transform:rotate(90deg); }
.lb-close svg{ width:20px; height:20px; }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(243,236,223,.25); color:#f7edf0;
  display:grid; place-items:center; transition:all .35s;
}
.lb-arrow svg{ width:20px; height:20px; }
.lb-prev{ left:clamp(12px, 3vw, 44px); }
.lb-next{ right:clamp(12px, 3vw, 44px); }
.lb-arrow:hover{ border-color:#d98f9c; color:#d98f9c; background:rgba(217,143,156,.12); }
body.lb-open{ overflow:hidden; }

@media (max-width:1024px){ .g-grid{ columns:2; } }
@media (max-width:620px){
  .g-grid{ columns:1; }
  .lb-arrow{ width:48px; height:48px; }
  .lb-prev{ left:10px } .lb-next{ right:10px }
}