/* ============================================================
   projects.css — أثر | صفحة المشاريع
   ============================================================ */

.proj-card { display: flex; flex-direction: column; height: 100%; cursor: pointer; }
.proj-top { display: flex; align-items: center; justify-content: space-between; }
.proj-field { font-family: var(--font-mono); font-size: 0.76rem; color: var(--primary-strong); margin: 16px 0 8px; }
.proj-card h3 { font-size: 1.16rem; margin-bottom: 9px; }
.proj-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.proj-card .more { margin-top: 16px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--primary-strong); display: inline-flex; align-items: center; gap: 6px; }
.proj-card .more i { transition: transform .2s; }
.proj-card:hover .more i { transform: translateX(-4px); }

/* تفاصيل داخل النافذة */
.proj-detail .proj-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.proj-detail .svc-icon { width: 56px; height: 56px; font-size: 1.6rem; }
.proj-detail .field { font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary-strong); }
.proj-detail h2 { font-size: 1.45rem; margin-top: 2px; }
.proj-detail p { color: var(--ink-2); line-height: 1.8; }
.proj-detail-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.proj-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

.no-proj { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--muted); }
.no-proj i { font-size: 2.2rem; opacity: .4; display: block; margin-bottom: 10px; }