/* ============================================================================
 * Projects page styles — uses global dark tokens
 * ========================================================================== */

/* Subtle hero variant */
.hero--projects{
  background: linear-gradient(120deg,#1a1f29,#101620);
}

/* ----- Filters ------------------------------------------------------------ */
.sq-filters{
  display:flex; flex-wrap:wrap; gap:.5rem .5rem;
  margin: .5rem 0 1rem;
}
.sq-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:999px;
  border:1px solid var(--border);
  background:#1a1f29; color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sq-chip:hover{ background:#161b24; }
.sq-chip.is-active{
  background:var(--brand); border-color:transparent; color:#fff;
}

/* ----- Grid --------------------------------------------------------------- */
.sq-grid{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .sq-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .sq-grid{ grid-template-columns:repeat(4,1fr); } }

.sq-item{ display:block; }
.sq-figure{ margin:0; }
.sq-box{
  position:relative; overflow:hidden; border-radius:.75rem;
  border:1px solid var(--border); background:#131a23; box-shadow:var(--shadow);
  aspect-ratio:1 / 1; /* square */
}
.sq-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.01); transition:transform .25s ease, filter .25s ease;
}
.sq-shine{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient( to bottom, rgba(0,0,0,.0), rgba(0,0,0,.15) 60%, rgba(0,0,0,.35) 100% );
  transition:opacity .25s ease;
}
.sq-cap{
  position:absolute; left:0; right:0; bottom:0; padding:.6rem .7rem .7rem;
  display:grid; gap:.15rem; z-index:2;
}
.sq-title{ margin:0; font-size:1rem; color:var(--ink) }
.sq-meta{ margin:0; font-size:.9rem; color:var(--muted) }

.sq-link:hover .sq-img{ transform:scale(1.05); filter:brightness(1.02); }
.sq-link:hover .sq-shine{ opacity:1; }

/* ----- Pagination / Count ------------------------------------------------- */
.sq-more-wrap{
  display:flex; gap:.75rem; align-items:center; justify-content:center;
  margin-top:1rem;
}

/* ----- Lightbox ----------------------------------------------------------- */
.sq-lightbox[hidden]{ display:none; }
.sq-lightbox{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
}
.sq-lbx-bg{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
.sq-lbx-img{
  max-width:min(92vw, 1200px); max-height:80vh; border-radius:.75rem;
  box-shadow:0 40px 80px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.6);
}
.sq-lbx-caption{
  margin-top:.5rem; text-align:center; color:var(--ink);
}
.sq-lbx-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#1a1f29; color:var(--ink); border:1px solid var(--border);
  width:42px; height:42px; border-radius:999px; cursor:pointer;
}
.sq-lbx-close{
  top:calc(10%); right:calc(4%); transform:none; width:46px; height:46px; font-size:26px;
}
.sq-lbx-prev{ left:3%; }
.sq-lbx-next{ right:3%; }
.sq-lbx-btn:hover{ background:#161b24; }