/* ============================================================
   المشروع المفرد (project.php) — هيرو مدمج + بودي أبيض
   نفس تصميم الخدمة المفردة (بادئة pj-).
   ============================================================ */
.pj-page{
  --c-accent: var(--accent,#1f9296);
  --c-ink:    var(--ink,#0d2b2d);
  --c-paper:  var(--paper,#fff);
  --c-cream:  var(--cream,#f3f5f8);
  --c-muted:  var(--muted,#5e7a7b);
  background:var(--paper,#fff);
}
#pj-section-hero{position:relative;overflow:hidden;padding:64px 0 72px;background:var(--pj-hero-bg,var(--c-ink));text-align:center}
#pj-section-hero .container{position:relative;z-index:2;padding-top:46px}
.pj-deco-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--c-accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 8%,transparent) 1px,transparent 1px);
  background-size:64px 64px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent)}
.pj-deco-glow{position:absolute;top:-160px;inset-inline-start:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 18%,transparent),transparent 62%)}
.pj-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:color-mix(in srgb,var(--c-accent) 78%,#fff);text-decoration:none;position:absolute;top:0;inset-inline-start:0;z-index:3;transition:gap .25s,opacity .25s}
.pj-back:hover{gap:13px;opacity:.85}
.pj-back svg{width:17px!important;height:17px!important;max-width:17px;flex:none}
html[dir="rtl"] .pj-back svg{transform:scaleX(-1)}
.pj-cat{display:inline-block;font-size:var(--pj-cat-size,12.5px);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pj-cat,var(--c-accent));background:var(--pj-cat-bg,color-mix(in srgb,var(--c-accent) 14%,transparent));padding:7px 16px;border-radius:999px;margin-bottom:20px}
.pj-hero-title{font-size:var(--pj-title-size,clamp(30px,4.2vw,48px));font-weight:800;margin:0 0 16px;letter-spacing:-.6px;line-height:1.2;color:var(--pj-title,#fff)}
.pj-hero-lead{font-size:var(--pj-lead-size,17px);line-height:1.9;color:var(--pj-lead,rgba(255,255,255,.78));margin:0 auto;font-weight:300;max-width:600px}
#pj-section-hero::after{content:"";position:absolute;bottom:0;inset-inline:0;height:4px;z-index:3;background:linear-gradient(90deg,transparent,var(--c-accent),transparent);opacity:.6}

#pj-section-body{position:relative;padding:72px 0 84px;background:var(--pj-body-bg,var(--c-paper))}
.pj-body-inner{max-width:820px;margin:0 auto;position:relative;z-index:2}
.pj-body-img{margin:0 0 44px;border-radius:18px;overflow:hidden;aspect-ratio:16/8;background:var(--c-cream);border:1px solid color-mix(in srgb,var(--c-ink) 8%,transparent)}
.pj-body-img img{width:100%;height:100%;object-fit:cover}
.pj-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--pj-label-size,22px);font-weight:800;letter-spacing:.2px;color:var(--pj-label,var(--c-ink));margin-bottom:24px}
.pj-eyebrow>span:first-child{width:44px;height:3px;background:var(--pj-line,var(--c-accent));display:inline-block;border-radius:3px;flex:none}
.pj-eyebrow .pj-eyebrow-txt{width:auto;height:auto;background:none;display:inline}
.pj-body-text p{font-size:var(--pj-body-size,20px);line-height:2.2;color:var(--pj-body-text,var(--c-muted));margin:0 0 22px}
.pj-body-text p:last-child{margin-bottom:0}

/* تثبيت v2/v3: البودي أبيض دائماً (الهيرو وحده داكن) */
.theme-v2 #pj-section-body,.theme-v3 #pj-section-body{background:var(--pj-body-bg,var(--paper,#fff))}
.theme-v2 .pj-body-text p,.theme-v3 .pj-body-text p{color:var(--pj-body-text,color-mix(in srgb,var(--ink) 84%,#fff))}
.theme-v2 .pj-eyebrow,.theme-v3 .pj-eyebrow{color:var(--pj-label,var(--ink))}
.theme-v2 .pj-eyebrow>span:first-child,.theme-v3 .pj-eyebrow>span:first-child{background:var(--pj-line,var(--accent))}
.theme-v2 .pj-cat,.theme-v3 .pj-cat{color:var(--pj-cat,var(--accent));background:var(--pj-cat-bg,color-mix(in srgb,var(--accent) 14%,transparent))}

@media(max-width:860px){
  #pj-section-hero{padding:48px 0 56px}
  #pj-section-body{padding:52px 0 64px}
  .pj-back{position:static;margin-bottom:24px}
  #pj-section-hero .container{padding-top:0}
}