/* ═══════════════════════════════════════
   صفحه پروژه‌ها و نمونه‌کارها — استایل اختصاصی
   گالری فیلترپذیر، هم‌خانواده با ساختار بلاگ
   از همون توکن‌های رنگی سایت اصلی استفاده می‌کنه
   ═══════════════════════════════════════ */

.active-link{color:var(--g) !important}
.active-link::after{width:100% !important}

.tag-blue{background:rgba(107,143,255,0.15);color:#7ab8ff;border:0.5px solid rgba(107,143,255,0.3)}
.tag-purple{background:rgba(155,111,255,0.15);color:#c4a8ff;border:0.5px solid rgba(155,111,255,0.3)}
.tag-amber{background:rgba(255,94,58,0.15);color:#ffb088;border:0.5px solid rgba(255,94,58,0.3)}

/* ── HERO ── */
.pr-hero{position:relative;min-height:54vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:120px 24px 40px;max-width:100%}
#c_pr_hero{position:absolute;inset:0;width:100%;height:100%;display:block}
.pr-hero-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:680px;padding:0 12px}
.pr-h1{font-size:clamp(28px,5.5vw,56px);font-weight:200;letter-spacing:-2px;line-height:1.3;max-width:100%;word-wrap:break-word}
.pr-h1 .g{background:linear-gradient(135deg,var(--g),var(--purple),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pr-sub{font-size:14px;color:rgba(255,255,255,0.3);max-width:480px;line-height:1.9}

/* ── FILTERS ── */
.pr-filter-sec{padding-top:0}
.pr-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.pr-filter{font-size:12.5px;color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.02);border:0.5px solid rgba(255,255,255,0.1);border-radius:24px;padding:9px 20px;cursor:pointer;transition:all 0.2s;font-family:inherit}
.pr-filter:hover{border-color:rgba(107,143,255,0.3);color:rgba(255,255,255,0.7)}
.pr-filter.active{background:rgba(107,143,255,0.12);border-color:rgba(107,143,255,0.4);color:var(--g)}

/* ── GRID / CARDS ── */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:0 auto;max-width:100%}
.pr-card{background:rgba(10,15,40,0.42);border:0.5px solid rgba(107,143,255,0.13);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:all 0.32s;min-width:0}
.pr-card:hover{transform:translateY(-5px);border-color:rgba(107,143,255,0.35);box-shadow:0 18px 40px -20px var(--g-glow)}
.pr-card-visual{position:relative;height:170px;overflow:hidden}
.pr-card-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pr-card-tag{position:absolute;bottom:12px;right:12px;z-index:2;font-size:10.5px;font-weight:500;padding:4px 12px;border-radius:18px}
.pr-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.pr-card-meta{font-size:11px;color:rgba(255,255,255,0.26)}
.pr-card-body h3{font-size:16.5px;font-weight:400;color:white;letter-spacing:-0.3px}
.pr-card-body p{font-size:12px;color:rgba(255,255,255,0.27);line-height:1.85;flex:1}
.pr-card-stat{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.05)}
.pr-card-stat span:first-child{font-size:18px;font-weight:300;color:var(--g);letter-spacing:-0.5px}
.pr-card-stat span:last-child{font-size:11px;color:rgba(255,255,255,0.26)}

.pr-empty{display:none;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;color:rgba(255,255,255,0.2);font-size:13px}
.pr-empty.show{display:flex}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .pr-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pr-hero{padding:100px 16px 32px;min-height:auto}
  .pr-grid{grid-template-columns:1fr}
}