/* portfolio.css — dark theme
   ─────────────────────────── */

/* ── FILTER BAR ── */
.filter-bar {
  padding: 1.6rem clamp(1.5rem,4vw,3.5rem);
  display: flex; gap: .4rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.filter-btn {
  font-size: .68rem; letter-spacing: .1em;
  border: 1px solid var(--border);
  padding: .4rem 1rem; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
  font-family: 'PPMori','DM Sans',sans-serif;
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* ── GRID ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-left: 1px solid var(--border);
}
.proj-card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
  cursor: pointer; display: block;
  background: var(--bg);
  transition: background .2s;
}
.proj-card.hidden { display: none; }
.proj-card:hover  { background: var(--surface); }

/* ── THUMBNAIL ── */
.proj-thumb-wrap {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: #0a0a0a;
}
.proj-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(20%) brightness(.82);
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
.proj-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 5rem; letter-spacing: -.06em;
  color: rgba(238,236,234,.08);
  background: linear-gradient(135deg,#111,#0d0d0d);
}
.proj-card:hover .proj-thumb { transform: scale(1.06); filter: grayscale(0%) brightness(.72); }

/* ── SPOTLIGHT CURSOR ── */
.proj-spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle 180px at 50% 50%, rgba(37,88,255,.18) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.proj-card:hover .proj-spotlight { opacity: 1; }

/* ── HOVER OVERLAY ── */
.proj-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(4,4,4,.94) 0%, rgba(4,4,4,.38) 55%, rgba(4,4,4,.08) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem 1.8rem;
  opacity: 0; transition: opacity .38s ease;
}
.proj-card:hover .proj-overlay { opacity: 1; }

.proj-overlay-body {
  transform: translateY(14px);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover .proj-overlay-body { transform: translateY(0); }

.proj-overlay-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
.proj-overlay-tags .proj-tag { border-color: rgba(238,236,234,.18); color: rgba(238,236,234,.55); }
.proj-overlay-tags .proj-tag.client { border-color: rgba(37,88,255,.45); color: rgba(37,88,255,.9); }

.proj-overlay-title {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: clamp(1.15rem,1.9vw,1.65rem);
  letter-spacing: -.028em; line-height: 1.05; color: #eeecea;
}

.proj-overlay-arrow {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-size: 1.15rem; color: var(--accent);
  opacity: 0; transform: translate(-5px,5px);
  transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.proj-card:hover .proj-overlay-arrow { opacity: 1; transform: translate(0,0); }

/* ── INFO ── */
.proj-info {
  padding: 1.1rem clamp(1.2rem,2.5vw,1.8rem);
  border-top: 1px solid var(--border);
}
.proj-info-top {
  display: flex; justify-content: space-between; align-items: center;
}
.proj-name {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 1rem; letter-spacing: -.012em; color: var(--text);
}
.proj-arrow {
  font-size: .9rem; color: var(--muted);
  transition: transform .25s cubic-bezier(.16,1,.3,1), color .2s;
}
.proj-card:hover .proj-arrow { transform: translate(4px,-4px); color: var(--accent); }

.proj-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.proj-tag {
  font-size: .6rem; letter-spacing: .09em;
  border: 1px solid var(--border); padding: .24rem .7rem;
  color: var(--muted);
}
.proj-tag.client { border-color: rgba(37,88,255,.28); color: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .filter-bar     { padding: 1rem 1.5rem; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .proj-info      { padding: 1.2rem 1.5rem; }
}