/* ===== صفحة المشاريع ===== */

/* banner: dark like the home hero, so the transparent fixed header stays readable */
.page-hero{
  padding:160px 0 72px;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(220,183,93,.12) 1.5px,transparent 1.5px);background-size:22px 22px;
}
.page-hero .container{position:relative;z-index:1;}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#a79edb;margin-bottom:20px;flex-wrap:wrap;}
.crumbs a{color:#a79edb;transition:.3s;}
.crumbs a:hover{color:var(--gold-400);}
.crumbs svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
html[dir="rtl"] .crumbs svg{transform:scaleX(-1);}
.crumbs .current{color:var(--gold-400);font-weight:700;}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);color:#fff;margin-bottom:14px;}
.page-hero .lead{color:#c7c0ea;max-width:660px;font-size:1.05rem;}
.page-hero .lead .short{display:none;}

/* filters */
.projects{padding:56px 0 110px;}
.proj-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:46px;}
.filter-chip{
  padding:10px 22px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;
  color:var(--navy-800);font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:.3s var(--ease);box-shadow:var(--shadow-sm);
}
.filter-chip:hover{border-color:var(--gold-400);color:var(--gold-700);transform:translateY(-2px);}
.filter-chip.active{background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:#fff;border-color:transparent;box-shadow:var(--shadow-gold-sm);}

/* cards */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.proj-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.proj-card:hover{transform:translateY(-6px);border-color:var(--gold-400);box-shadow:0 26px 50px -30px rgba(30,22,96,.55);}

/* 3-image mosaic: one large + two stacked */
.proj-shots{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:264px;background:var(--line);}
.proj-shot{
  position:relative;overflow:hidden;border:0;padding:0;cursor:zoom-in;
  background:linear-gradient(160deg,#fffdf6,#f2ecdd);
}
.proj-shot:first-child{grid-row:span 2;}
.proj-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.proj-shot:hover img{transform:scale(1.06);}
.shot-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.shot-ph svg{width:28px;height:28px;stroke:var(--gold-500);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75;}
.proj-shot::after{
  content:"";position:absolute;inset:0;background:rgba(16,12,43,.16);opacity:0;transition:opacity .3s var(--ease);
}
.proj-shot:hover::after{opacity:1;}

.proj-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1;}
.proj-tag{
  align-self:flex-start;font-size:.76rem;font-weight:800;color:var(--gold-700);
  background:linear-gradient(180deg,#fff8ea,#fbf0d8);border:1px solid var(--gold-300);
  padding:5px 14px;border-radius:var(--radius-pill);
}
.proj-body h3{font-size:1.15rem;color:var(--navy-900);line-height:1.6;}
.proj-body .proj-text{color:var(--muted);font-size:.95rem;}
.proj-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);}
.proj-meta span{
  display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:var(--navy-800);
  background:var(--cream);border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius-sm);
}
.proj-meta span.ph{border-style:dashed;color:var(--muted);opacity:.75;}
.proj-meta svg{width:15px;height:15px;stroke:var(--gold-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.proj-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:70px 0;font-weight:600;}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(10,7,26,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.open{opacity:1;visibility:visible;}

.lb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 28px 18px;flex-shrink:0;}
.lb-cat{display:block;font-size:.76rem;font-weight:800;letter-spacing:2px;color:var(--gold-400);margin-bottom:7px;}
.lb-title{color:#fff;font-size:clamp(1.05rem,2.4vw,1.6rem);line-height:1.5;}

.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 24px;}
.lb-frame{
  flex:1;max-width:1040px;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,22,96,.5);border:1px solid rgba(220,183,93,.18);
  border-radius:var(--radius-lg);overflow:hidden;
}
.lb-frame img{max-width:100%;max-height:100%;object-fit:contain;display:block;}

.lb-btn{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);padding:0;
}
.lb-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.lb-btn:hover{background:var(--gold-500);border-color:transparent;}
html[dir="rtl"] .lb-prev svg,html[dir="rtl"] .lb-next svg{transform:scaleX(-1);}

.lb-thumbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:18px 24px 4px;flex-shrink:0;}
.lb-thumb{
  width:86px;height:60px;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:rgba(255,255,255,.08);opacity:.5;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lb-thumb:hover{opacity:.85;transform:translateY(-2px);}
.lb-thumb.active{opacity:1;border-color:var(--gold-400);}
.lb-count{text-align:center;color:#a79edb;font-size:.85rem;font-weight:700;letter-spacing:1px;padding:12px 0 22px;flex-shrink:0;}

@media (max-width:900px){
  .proj-grid{grid-template-columns:1fr;}
}

/* on phones the chips stay on one line and are swiped sideways instead of wrapping */
@media (max-width:760px){
  .proj-filters{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
    /* bleed past the container so a chip can sit half off the screen as a scroll hint */
    margin-inline:-28px;padding:2px 28px 8px;
  }
  .proj-filters::-webkit-scrollbar{display:none;}
  .filter-chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center;}
}
@media (max-width:640px){
  .proj-filters{margin-inline:-20px;padding-inline:20px;}
  .page-hero{padding:120px 0 40px;}
  /* phones: no big "مشاريع" title, one short line instead of the full intro */
  .page-hero h1{display:none;}
  .page-hero .lead .long{display:none;}
  .page-hero .lead .short{display:inline;}
  .page-hero .lead{font-size:.98rem;}
  .projects{padding:40px 0 64px;}
  .proj-shots{height:220px;}
  .proj-body{padding:20px;}
  .lb-top{padding:18px 18px 12px;}
  .lb-stage{padding:0 10px;gap:8px;}
  .lb-btn{width:40px;height:40px;}
  .lb-thumb{width:64px;height:46px;}
  .lb-thumbs{padding:14px 16px 2px;}
  .lb-count{padding:10px 0 16px;}
}