/* =============================================
   PORTFOLIO PAGE STYLES
   ============================================= */

/* --- FILTER BAR --- */
.filter-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:48px 0 56px; }
.filter-btn {
  padding:8px 22px; border-radius:50px;
  font-family:var(--font-mono); font-size:.78rem;
  border:1px solid rgba(255,255,255,.1); color:var(--text-muted);
  transition:all .25s var(--ease); letter-spacing:.5px;
  background:transparent;
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--neon-purple); color:var(--neon-purple);
  background:rgba(168,85,247,.1); box-shadow:var(--glow-p);
}

/* --- PROJECT GRID --- */
.project-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  gap:28px;
}
.project-card {
  position:relative; background:var(--bg-card);
  border:var(--glass-border); border-radius:var(--r-lg);
  overflow:hidden; transition:all .4s var(--ease);
  aspect-ratio:4/3;
}
.project-card:hover { border-color:rgba(168,85,247,.3); transform:scale(1.02); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.project-card.hidden { display:none; }

.project-img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(60%) brightness(.7);
  transition:all .5s var(--ease);
}
.project-card:hover .project-img { filter:grayscale(0%) brightness(.5); }

/* Overlay */
.project-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.9) 30%, rgba(0,0,0,.2) 70%, transparent);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px;
}

.project-status {
  position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:.68rem; padding:5px 12px;
  background:var(--neon-cyan); color:#000; font-weight:700; border-radius:4px;
}
.project-status.ai     { background:var(--neon-purple); color:#fff; }
.project-status.secure { background:var(--neon-red);    color:#fff; }

.project-cat { font-family:var(--font-mono); font-size:.72rem; color:var(--neon-purple); display:block; margin-bottom:8px; }
.project-title { font-size:1.6rem; color:#fff; margin-bottom:8px; }
.project-desc {
  font-size:.85rem; color:#ccc; opacity:0;
  transform:translateY(8px); transition:all .35s var(--ease);
}
.project-card:hover .project-desc { opacity:1; transform:translateY(0); }

.project-links {
  display:flex; gap:10px; margin-top:14px;
  opacity:0; transform:translateY(8px); transition:all .35s .05s var(--ease);
}
.project-card:hover .project-links { opacity:1; transform:translateY(0); }
.project-link {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem; transition:.25s;
}
.project-link:hover { background:var(--neon-purple); border-color:var(--neon-purple); }

/* --- FEATURED PROJECT (LARGE) --- */
.project-card.featured { grid-column:span 2; aspect-ratio:16/7; }

/* --- RESPONSIVE --- */
@media (max-width:900px) {
  .project-grid { grid-template-columns:1fr; }
  .project-card.featured { grid-column:span 1; aspect-ratio:4/3; }
}