/* ============================================================
   شكل نافذة بورتفوليو العميل

   الأصل: كان جوّه clients.html. اتنقل هنا لما صفحات القطاعات
   بقت بتعرض نفس النافذة — الشغل مع العميل معلومة واحدة،
   ونسختين من شكلها معناها إن أي تعديل يمشي على صفحة ويسيب
   التانية.

   ⚠ المعرّفات (.pf-bg · .pf-g · .pz …) لازم تفضل زي ما هي —
     /assets/client-pf.js بيولّدها بالأسماء دي.
   ============================================================ */
.pf-bg{position:fixed;inset:0;background:rgba(3,3,3,.88);backdrop-filter:blur(6px);
  z-index:120;display:none;align-items:center;justify-content:center;padding:16px}
.pf-bg.on{display:flex}
.pf{background:var(--soft);border:1px solid var(--line);border-radius:22px;
  width:min(960px,96vw);max-height:92vh;overflow-y:auto;position:relative}
.pf-x{position:absolute;top:13px;left:13px;width:38px;height:38px;border-radius:50%;
  background:rgba(5,5,5,.75);border:1px solid var(--line);color:#fff;font-size:15px;
  cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.pf-hd{display:flex;align-items:center;gap:16px;padding:24px 26px 18px;
  border-bottom:1px solid var(--line)}
.pf-lg{width:82px;height:62px;background:#fff;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding:9px}
.pf-lg img{max-width:100%;max-height:100%;object-fit:contain}
.pf-hd h3{font-size:21px;font-weight:900;line-height:1.4}
.pf-hd .pf-s{font-size:13px;color:var(--mute);margin-top:2px}
.pf-b{padding:20px 26px 26px}
.pf-about{font-size:15px;line-height:1.95;color:#D8D8D8;margin-bottom:6px}
.pf-note{display:inline-block;margin-top:12px;background:var(--soft);
  border:1px solid rgba(246,179,46,.28);color:var(--gold);border-radius:100px;
  padding:6px 15px;font-size:13px;font-weight:700}
.pf-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:14px;margin-top:20px}
.pf-c{background:#111;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.pf-c .im{aspect-ratio:4/3;background:#0D0D0D;cursor:zoom-in}
/* عارض الصورة كاملة — الصفحة دي مش محمّلة cart.js فمعندهاش
   العارض المشترك، فده نسخة صغيرة خاصة بيها */
.pz{position:fixed;inset:0;z-index:190;display:none;align-items:center;
  justify-content:center;padding:28px;background:rgba(3,3,3,.95);cursor:zoom-out}
.pz.on{display:flex}
.pz img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.pf-c .im img{width:100%;height:100%;object-fit:cover;display:block}
.pf-c .cap{padding:10px 13px;font-size:13px;color:var(--mute);line-height:1.7}
.pf-ft{border-top:1px solid var(--line);padding:18px 26px;display:flex;gap:11px;
  flex-wrap:wrap;align-items:center}
.pf-ft .t{flex:1;min-width:180px;font-size:13.5px;color:var(--mute)}
@media(max-width:640px){
  .pf-hd{padding:20px 18px 15px;gap:12px}
  .pf-b{padding:16px 18px 22px}
  .pf-hd h3{font-size:18px}
  .pf-lg{width:64px;height:50px}
  .pf-g{grid-template-columns:1fr 1fr;gap:10px}
}