@charset "UTF-8";

.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:40px;
}
.filter-bar button{
  font:500 11px/1.15 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:transparent;
  color:rgba(42,10,12,.78);
  cursor:pointer; transition:all .25s ease;
}
.filter-bar button:hover{ color:#2A0A0C; border-color:rgba(232,196,101,.45); }
.filter-bar button.on{ border-color:var(--maroon); background:var(--maroon); color:#2A0A0C; }

.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proj-card{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#160808;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
  cursor:pointer;
}
.proj-card:hover{ border-color:rgba(232,196,101,.5); }
.proj-img{
  aspect-ratio:4/3;
  background-size:cover; background-position:center;
  position:relative;
  transition:transform .6s var(--ease);
}
.proj-card:hover .proj-img{ transform:scale(1.04); }
.proj-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(14,6,6,.92) 100%);
}
.proj-tag{
  position:absolute; top:14px; left:18px; z-index:2;
  font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  padding:5px 12px;
  background:rgba(14,6,6,.6); backdrop-filter:blur(8px);
  border-radius:4px;
}
.proj-body{ padding:22px 24px 24px; }
.proj-id{ font:600 10px/1.15 var(--font-mono); letter-spacing:.28em; color:rgba(42,10,12,.6); margin-bottom:8px; }
.proj-name{ font:500 22px/1.25 var(--font-display); color:#2A0A0C; margin:0 0 8px; }
.proj-name em{ color:var(--gold); font-weight:400; }
.proj-client{ font:300 13px/1.5 var(--font-body); color:rgba(42,10,12,.78); margin:0; }

@media (max-width:900px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .proj-grid{ grid-template-columns:1fr; } }

/* ===== NEW: sticky filter bar + chip + grid loading state ===== */

.proj-filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:18px 5vw;
  margin:0 -5vw 40px;
  background:rgba(251, 243, 222, .92);
  border-bottom:1px solid rgba(232,196,101,.25);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
}
.proj-filter-bar.is-sticky{
  position:sticky;
  top:80px;
  z-index:5;
}

.proj-filter-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  padding:10px 22px;
  border-radius:999px;
  border:1px solid rgba(232,196,101,.35);
  background:transparent;
  font:600 11px/1 var(--font-mono, var(--font-body));
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#2A0A0C;
  cursor:pointer;
  transition:all .25s ease;
}
.proj-filter-chip:hover{
  border-color:var(--gold);
  color:#8B6914;
}
.proj-filter-chip:focus-visible{
  outline:2px solid rgba(139, 105, 20, .5);
  outline-offset:2px;
}
.proj-filter-chip.is-active,
.proj-filter-chip.on{
  background:linear-gradient(135deg, #7A5A12, #C99838);
  color:#fff;
  border-color:transparent;
}

/* Grid loading state */
[data-proj-grid-wrap]{
  position:relative;
  transition:opacity .25s ease;
}
[data-proj-grid-wrap].is-loading{
  opacity:.5;
  pointer-events:none;
}
[data-proj-grid-wrap].is-loading::after{
  content:"";
  position:absolute;
  top:60px;
  left:50%;
  width:28px;
  height:28px;
  margin-left:-14px;
  border-radius:50%;
  border:2px solid rgba(232,196,101,.3);
  border-top-color:var(--gold);
  animation:projFilterSpin .8s linear infinite;
  z-index:2;
}
@keyframes projFilterSpin{
  to{ transform:rotate(360deg); }
}

@media (max-width:900px){
  .proj-filter-bar{
    padding:14px 5vw;
    gap:8px;
    top:64px;
  }
  .proj-filter-chip{
    padding:8px 16px;
    font-size:10px;
    letter-spacing:.16em;
  }
}
@media (max-width:600px){
  .proj-filter-bar{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .proj-filter-bar::-webkit-scrollbar{ display:none; }
  .proj-filter-chip{ flex:0 0 auto; }
}