/* Gallery page styles (builds on contact.css + services.css) */

/* Filter navigation bar */
#cp .g-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-top:calc(-1 * clamp(20px,3vw,38px))}
#cp .g-btn{font-family:inherit;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;background:#111;color:#fff;border:1.5px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 22px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .2s;min-height:44px}
#cp .g-btn:hover{background:#222;border-color:#fff;transform:translateY(-1px)}
#cp .g-btn.active{background:#c69419;color:#fff;border-color:#c69419}

/* Gallery Grid */
#cp .g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);width:100%}
@media(max-width:980px){#cp .g-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#cp .g-grid{grid-template-columns:1fr}}

/* Gallery item card */
#cp .g-item{position:relative;border-radius:clamp(16px,2.2vw,22px);overflow:hidden;background:#161814;aspect-ratio:4/3;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
#cp .g-item:hover{transform:scale(1.025);border-color:#c69419;z-index:2}
#cp .g-item.tall{aspect-ratio:3/4}
#cp .g-item.wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:980px){#cp .g-item.wide{grid-column:span 1;aspect-ratio:4/3}}

#cp .g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#cp .g-item:hover img{transform:scale(1.08)}

/* Overlay on hover */
#cp .g-item .g-over{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 80%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2vw,24px);opacity:0;transition:opacity .3s ease;z-index:2}
#cp .g-item:hover .g-over{opacity:1}
#cp .g-item .g-tag{align-self:flex-start;background:#c69419;color:#fff;font-size:10px;font-weight:600;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
#cp .g-item h3{margin:0;font-family:Tanker,Anton,Oswald,sans-serif;font-weight:400;font-size:clamp(18px,2vw,24px);line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:#fff}
#cp .g-item p{margin:4px 0 0;font-size:13px;color:rgba(255,255,255,.8);line-height:1.4}
#cp .g-zoom{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.65);border:1px solid #fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,transform .25s}
#cp .g-item:hover .g-zoom{transform:rotate(90deg);background:#c69419;border-color:#c69419}

/* Lightbox Modal */
#g-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:20px}
#g-modal.active{display:flex}
#g-modal-content{position:relative;max-width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;align-items:center}
#g-modal-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.85)}
#g-modal-bar{width:100%;margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;color:#fff}
#g-modal-info{display:flex;flex-direction:column;gap:4px}
#g-modal-title{font-family:Tanker,Anton,Oswald,sans-serif;font-size:22px;text-transform:uppercase;margin:0}
#g-modal-desc{font-size:14px;color:#cbd5be;margin:0}
#g-modal-close{position:absolute;top:-48px;right:0;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
#g-modal-prev,#g-modal-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .2s}
#g-modal-prev:hover,#g-modal-next:hover{background:#c69419;transform:translateY(-50%) scale(1.1)}
#g-modal-prev{left:24px}
#g-modal-next{right:24px}
@media(max-width:768px){
  #g-modal-prev{left:10px;width:42px;height:42px}
  #g-modal-next{right:10px;width:42px;height:42px}
  #g-modal-close{top:-40px}
}