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

.pf-filter {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}

.pf-btn {
  padding: 6px 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-dim); cursor: pointer; transition: var(--transition);
}
.pf-btn:hover  { color: var(--text-sub); border-color: var(--border-light); }
.pf-btn.active { background: var(--bg-hover); border-color: var(--border-light); color: var(--text); }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pf-card { padding: 0; overflow: hidden; }

.pf-preview {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.1); transition: var(--transition);
}
.pf-card:hover .pf-preview { color: rgba(255,255,255,0.22); background: var(--bg-hover); }

.pf-info { padding: 20px 22px 24px; }

.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-tag {
  padding: 2px 8px;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.65rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.pf-info h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); margin-bottom: 7px;
}
.pf-info p { font-size: 0.83rem; color: var(--text-sub); line-height: 1.62; margin-bottom: 14px; }

.pf-link {
  font-size: 0.8rem; font-weight: 600; color: var(--text-dim);
  text-decoration: none; transition: color 0.2s;
}
.pf-link:hover { color: var(--text); }

@media (max-width: 900px)  { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pf-grid { grid-template-columns: 1fr; } }