/* ==========================================================================
   Work / Portfolio page
   ========================================================================== */
.work-controls{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;margin-bottom:44px;
}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.ftab{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;transition:all .2s ease;
}
.ftab:hover{color:var(--text);border-color:var(--line-strong);}
.ftab.active{background:var(--teal);color:var(--ink);border-color:var(--teal);font-weight:700;}

.search-wrap{position:relative;flex:1;max-width:280px;min-width:200px;}
.search-wrap input{
  width:100%;padding:11px 16px 11px 38px;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-size:14px;
}
.search-wrap input:focus{outline:none;border-color:var(--teal);}
.search-wrap .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;}

.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:800px){.projects-grid{grid-template-columns:1fr;}}
.project-card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;background:var(--surface);
  transition:border-color .25s ease, transform .25s ease;
}
.project-card:hover{border-color:rgba(76,224,210,0.4);transform:translateY(-4px);}
.project-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.project-cat{font-family:var(--font-mono);font-size:12px;color:var(--teal);padding:5px 11px;border:1px solid var(--teal-dim);border-radius:100px;}
.project-card h3{font-size:22px;margin-bottom:10px;}
.project-card p{font-size:14.5px;margin-bottom:20px;}
.project-card.hidden{display:none;}

.no-results{text-align:center;padding:60px 0;color:var(--muted);display:none;}
.no-results.show{display:block;}

/* ---- Tech stack ---- */
.tech-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
@media(max-width:900px){.tech-wrap{grid-template-columns:repeat(2,1fr);}}
.tech-cat h4{font-family:var(--font-mono);font-size:12.5px;color:var(--amber);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.tech-cat ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.tech-cat li{font-size:15px;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line);}