/* ===== Projects page ===== */
.sub-hero{padding:56px 0;border-bottom:1px solid var(--line)}
.breadcrumbs{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.breadcrumbs a{color:var(--muted)} .breadcrumbs a:hover{color:var(--text)}
.page-title{margin:0;font-size:clamp(26px,4vw,42px);font-weight:800}
.page-lead{color:#b9c2ea;max-width:860px}

/* Toolbar */
.toolbar{display:grid;gap:12px;margin-top:14px}
.toolbox{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px;display:grid;gap:10px}
.search-box{position:relative}
.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9bb0d3}
.search-box input{padding-left:34px}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#0a1430;border:1px solid #1e2e57;color:#cfe0ff;border-radius:999px;padding:8px 12px;font-size:.92rem;cursor:pointer;transition:.2s ease}
.chip:hover{border-color:var(--gold)}
.chip.active{background:linear-gradient(135deg,#d4af37,#b8921b);color:#0b1020;font-weight:800;border-color:transparent}

/* Grid */
.projects{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:900px){.projects{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.projects{grid-template-columns:repeat(4,1fr)}}

.proj{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:170px auto;transition:.25s ease;cursor:pointer}

.proj:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
}

.cover{background:#0a1430 center/cover no-repeat;border-bottom:1px solid var(--line);position:relative}
.badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:4px 10px;font-size:.84rem}
.p-body{padding:14px}
.p-title{margin:0 0 6px;font-size:1.04rem;font-weight:800}
.p-meta{color:#9bb0d3;margin:0 0 10px;font-size:.92rem}
.p-desc{color:#cfe0ff;margin:0;font-size:.95rem}
.p-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.p-actions .btn{padding:9px 16px;font-size:.92rem}

/* Participations (cards + album dialog) */
.participations{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.participations{grid-template-columns:repeat(2,1fr)}}
.part{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:180px auto;transition:.25s ease}
.part:hover{transform:translateY(-3px)}

dialog.case{width:min(980px,96%);border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.5)}
.pv-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.pv-body{padding:16px;display:grid;gap:14px}
.pv-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.pv-grid{grid-template-columns:.9fr 1.1fr}}
.pv-meta{display:grid;gap:10px}
.pv-meta div{display:flex;gap:8px;align-items:center;color:#cfe0ff}
.pv-close{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}

/* Album */
.album{display:grid;gap:12px}
.album-viewer{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0a1430;min-height:280px}
.album-viewer img{width:100%;height:auto;display:block}
.album-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%}
.album-nav button{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 10px;border-radius:10px;cursor:pointer}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
.thumbs img{width:100%;height:64px;object-fit:cover;border:2px solid transparent;border-radius:8px;cursor:pointer}
.thumbs img.active{border-color:#d4af37}

/* CTA background */
.cta-section{
  border:1px solid var(--line);border-radius:14px;padding:18px;
  background:linear-gradient(0deg,rgba(11,16,32,.35),rgba(11,16,32,.35)),url('/img/programing.jpg') center/cover no-repeat
}

/* Skeletons (لطيف) */
.skel{background:linear-gradient(90deg,#0f162f 25%,#132045 37%,#0f162f 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
.skel.card{height:250px;border-radius:16px;border:1px solid var(--line)}