@import url('../style.css');

body{ background: var(--bg); }
.projects-shell{ padding:150px 0 80px; }
.projects-hero{ text-align:center; max-width:700px; margin:0 auto 45px; }
.projects-hero h1{ font-family: var(--display); font-size: clamp(2.4rem,6vw,4.2rem); line-height:1.05; margin:16px 0; letter-spacing:-.01em; }

.back-home{ display:inline-flex; align-items:center; gap:8px; }
.back-home i{ font-size:1.1rem; }

.category-tabs{ display:flex; gap:6px; padding:4px; border-radius: var(--radius-full); background: var(--surface-strong); }
.category-tabs a{
  padding:8px 16px; border-radius: var(--radius-full); font-weight:600; font-size:.82rem;
  color: var(--muted); transition: color .2s, background .25s var(--ease);
}
.category-tabs a::after{ display:none; content:none; }
.category-tabs a.is-active{ background: var(--accent); color:#fff; box-shadow:0 6px 18px rgba(255,42,42,.35); }
.category-tabs a:not(.is-active):hover{ color: var(--text); }

.filters{
  display:flex; align-items:center; gap:18px; padding:14px 18px; margin-bottom:30px;
  border-radius: var(--radius-full); flex-wrap:wrap;
}
.search-field{
  flex:1; min-width:200px; display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius: var(--radius-full);
  background: var(--surface-strong); border:1px solid var(--border);
}
.search-field i{ color: var(--muted); }
.search-field input{ flex:1; background:none; border:none; outline:none; color: var(--text); }

.filter-count{ color: var(--muted); font-size:.85rem; white-space:nowrap; }

.project-card[hidden]{ display:none; }

@media(max-width:800px){
  .nav{ flex-wrap:wrap; row-gap:8px; border-radius: var(--radius-lg); padding:12px; }
  .category-tabs{ order:3; width:100%; justify-content:center; }
}
@media(max-width:600px){
  .filters{ align-items:stretch; flex-direction:column; border-radius: var(--radius-lg); }
  .filter-count{ align-self:flex-start; }
}