/* ===========================================================
   GALLERY PAGE STYLES
   =========================================================== */
.gallery-filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: var(--sp-lg);
}
.filter-btn{
  padding: 10px 22px; border-radius: var(--r-pill);
  background:#fff; border:1.5px solid var(--line);
  font-family: var(--font-btn); font-size:0.82rem; font-weight:600; color: var(--text);
  transition: background .25s, color .25s, border-color .25s;
}
.filter-btn:hover{ border-color: var(--blue); }
.filter-btn.active{ background: var(--grad-primary); color:#fff; border-color:transparent; }

.pin-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
}
.pin-item{
  border-radius: var(--r-md);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  break-inside: avoid;
}
.pin-item .scene{ width:100%; display:block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pin-item:hover .scene{ transform: scale(1.07); }
.pin-item .pin-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,32,58,0) 50%, rgba(8,32,58,0.82) 100%);
  display:flex; align-items:flex-end; padding:18px;
  opacity:0; transition: opacity .35s ease;
}
.pin-item:hover .pin-overlay{ opacity:1; }
.pin-overlay span{ color:#fff; font-weight:600; font-size:0.88rem; display:flex; align-items:center; gap:8px; }

.pin-item.h-tall{ grid-row: span 2; }
@media (max-width: 980px){ .pin-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .pin-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .pin-grid{ grid-template-columns: 1fr; } }