/* ===================================================================
   PORTFOLIO.CSS — صفحه‌ی نمونه‌کارها
=================================================================== */

.filter-bar{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 52px;
}
.filter-bar button{
  padding: 11px 26px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-soft);
  font-weight:700;
  font-size:14px;
  transition: all .35s var(--ease-luxury);
}
.filter-bar button.active{
  color:#fff;
  background: var(--grad-primary);
  box-shadow: 0 10px 26px rgba(124,58,237,.35);
}

.masonry{
  column-count: 3;
  column-gap: 24px;
}
.masonry .proj-card{
  break-inside: avoid;
  margin-bottom: 24px;
  display:block;
}
.masonry .proj-card.hide{ display:none; }

.proj-card{
  position:relative;
  border-radius: var(--r-lg);
  overflow:hidden;
  border:1px solid var(--card-border);
  cursor: pointer;
  perspective:1200px;
}
.proj-card .thumb{
  position:relative;
  height: var(--h, 320px);
  transition: transform .6s var(--ease-luxury);
}
.proj-card .thumb .pattern{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.5;
}
.proj-card:hover .thumb{ transform: scale(1.05) translateZ(10px); }

.proj-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,9,13,0) 35%, rgba(8,9,13,.95) 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 28px;
}
.proj-card .cat-tag{
  align-self:flex-start;
  font-size:11.5px;
  font-weight:700;
  padding:5px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  color: var(--accent-soft);
  margin-bottom: 14px;
}
.proj-card h3{ font-size:21px; margin-bottom:6px; }
.proj-card p{ font-size:13.5px; }
.proj-card .zoom-btn{
  position:absolute;
  top:22px; left:22px;
  width:46px; height:46px;
  border-radius:50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform: translateY(-10px) scale(.85);
  transition: all .4s var(--ease-luxury);
}
.proj-card:hover .zoom-btn{ opacity:1; transform:translateY(0) scale(1); }
.proj-card .zoom-btn svg{ width:18px; height:18px; }

/* =========================== لایت‌باکس جزئیات پروژه =========================== */
.lightbox-overlay{
  position:fixed; inset:0;
  background: rgba(5,6,10,.82);
  backdrop-filter: blur(6px);
  z-index: 2500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  opacity:0;
  visibility:hidden;
  transition: opacity .4s var(--ease-luxury), visibility .4s;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-box{
  width:100%;
  max-width: 880px;
  max-height: 86vh;
  overflow-y:auto;
  border-radius: var(--r-xl);
  position:relative;
  transform: scale(.92) translateY(20px);
  transition: transform .45s var(--ease-spring);
}
.lightbox-overlay.open .lightbox-box{ transform: scale(1) translateY(0); }
.lightbox-cover{
  height: 280px;
  position:relative;
}
.lightbox-cover .pattern{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity:.5;
}
.lightbox-close{
  position:absolute;
  top:20px; left:20px;
  width:42px; height:42px;
  border-radius:50%;
  background: rgba(8,9,13,.6);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.lightbox-close svg{ width:18px; height:18px; }
.lightbox-body{ padding: 38px 40px 44px; }
.lightbox-body .cat-tag{
  display:inline-block;
  font-size:12px; font-weight:700; color: var(--accent-soft);
  background: var(--accent-dim);
  padding:6px 16px; border-radius: var(--r-pill);
  margin-bottom:18px;
}
.lightbox-body h3{ font-size:27px; margin-bottom:18px; }
.lightbox-body p{ font-size:15px; margin-bottom:24px; }
.lightbox-meta{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-bottom:28px;
}
.lightbox-meta div{ padding:16px 18px; }
.lightbox-meta span{ display:block; font-size:12px; color: var(--text-faint); margin-bottom:6px; }
.lightbox-meta strong{ font-size:14.5px; }
.lightbox-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }

@media (max-width: 1100px){
  .masonry{ column-count:2; }
}
@media (max-width: 700px){
  .masonry{ column-count:1; }
  .lightbox-meta{ grid-template-columns: 1fr; }
  .lightbox-body{ padding: 28px 22px 34px; }
  .filter-bar{ overflow-x:auto; justify-content:flex-start; padding-bottom:6px; }
}