/* ==========================================================================
   WORK — filter tabs + portfolio grid
   ========================================================================== */

.work-hero{
  padding: 11rem clamp(1.25rem,4vw,3rem) 3rem;
  border-bottom: 1px solid var(--hairline);
}
.work-hero h1{ font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 14ch; }
.work-hero p{ margin-top:1.4rem; max-width:46ch; color:var(--muted-2); font-size:1rem; line-height:1.7; }

.filters{
  display:flex; gap:0.6rem; flex-wrap:wrap;
  padding: 2rem clamp(1.25rem,4vw,3rem) 0;
}
.filter-btn{
  font-family:'JetBrains Mono', monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  padding: 0.7rem 1.2rem; border:1px solid var(--hairline); background:none; color:var(--muted-2); cursor:pointer;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover{ color:var(--ink); border-color:var(--muted); }
.filter-btn.is-active{ color:#08080A; background:var(--gold); border-color:var(--gold); }

.grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: var(--hairline);
  margin: 3rem clamp(1.25rem,4vw,3rem) 0;
  border:1px solid var(--hairline);
}
.card{
  display:block; cursor:pointer;
  background: var(--bg); position:relative; overflow:hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.card.is-hidden{ display:none; }

.works-status{
  margin: 3rem clamp(1.25rem,4vw,3rem) 0;
  font-family:'JetBrains Mono', monospace; font-size:0.85rem; color: var(--muted-2);
}
.card__img{
  height: 260px; background-size:cover; background-position:center;
  filter: grayscale(0.7) brightness(0.55);
  transition: filter 0.6s var(--ease), transform 0.8s var(--ease);
}
.card:hover .card__img{ filter:grayscale(0) brightness(0.7); transform:scale(1.04); }
.card__body{ padding: 1.6rem 1.7rem 2rem; }
.card__tag{ font-family:'JetBrains Mono', monospace; font-size:0.66rem; color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; }
.card__title{ font-size:1.3rem; margin-top:0.6rem; }
.card__meta{ margin-top:0.6rem; font-size:0.82rem; color:var(--muted-2); }

@media (max-width: 960px){
  .grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; margin-left:1.25rem; margin-right:1.25rem; }
  .filters{ padding-left:1.25rem; padding-right:1.25rem; }
}