/* ===== nav.css ===== */
/* ===== قسم: شريط التنقّل ===== */
.s-nav{
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:background .45s, box-shadow .45s, backdrop-filter .45s;
}
/* بعرض المحتوى لا بعرض الشاشة — القياسات نفسها التي في `.container`.
   كان الشريط يمتدّ من حافةٍ إلى حافة والنصُّ تحته محصورٌ في `--container`،
   فيقف الشعارُ وأزرارُ التنقّل خارج عمود الصفحة كأنّهما ليسا منها. */
.s-nav__inner{
  display:flex; align-items:stretch;
  max-width:var(--container); margin-inline:auto;
  padding-inline:24px;
  padding-block:26px 0;
  transition:padding .45s var(--ease);
}
/* الشعار كاملاً — لا جزءاً منه ولا اسماً بخطّ الموقع بديلاً عنه.
   قناعٌ لا صورة، فيأخذ لون النصّ ويتبعه في التحويم وفي حالة الشريط
   الصلبة، بملفٍّ واحدٍ لا نسخةٍ لكل لون. */
.s-nav__logo{
  display:block; flex:0 0 auto; align-self:center;
  width:89px; height:70px;
  color:var(--paper);
  background:currentColor;
  -webkit-mask:url(/assets/img/logo.svg) no-repeat center/contain;
          mask:url(/assets/img/logo.svg) no-repeat center/contain;
  transition:color .3s, width .45s var(--ease), height .45s var(--ease);
}
/* ⚠ لا ذهبَ على الشعار: «الشعار بالأخضر أو بالكلسي — لا غير» (القاعدة
   الثانية في نظام الألوان: شعارٌ برونزيٌّ أو أزرق يكسر التعرّف من أوّل
   مرّة). والتحويمُ يخفت قليلاً بدل أن يبدّل اللون. */
.s-nav__logo:hover{opacity:.82}
/* بعد التمرير يصغر ولا يُستبدل: الشريط يضيق، والشعار يضيق معه. */
.s-nav.is-solid .s-nav__logo{width:61px; height:48px}

.s-nav__bar{
  margin-inline-start:auto;
  background:#fff;
  display:flex; align-items:center;
  padding-inline:30px;
  transition:background .45s, box-shadow .45s;
}
.s-nav__links{display:flex; align-items:center; gap:22px}
/* المستوى الأوّل وحده — لا روابطُ القوائم المنسدلة، ولها ستايلُها */
.s-nav__links > li > a,
.s-nav__top{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--green); font-size:14.5px; font-weight:500;
  padding-block:19px;
  position:relative;
  transition:color .3s;
}
.s-nav__links > li > a::after,
.s-nav__top::after{
  content:""; position:absolute; inset-inline:0; bottom:13px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:right center;
  transition:transform .35s var(--ease);
}
.s-nav__links > li > a:hover,
.s-nav__top:hover{color:var(--gold-2)}
.s-nav__links > li > a:hover::after,
.s-nav__has:hover .s-nav__top::after,
.s-nav__top:hover::after{transform:scaleX(1)}
/* الصفحة المفتوحة — يعرف الزائر أين هو، ويقرؤه قارئُ الشاشة من `aria-current` */
.s-nav__links > li > a[aria-current]{color:var(--gold-2)}
.s-nav__links > li > a[aria-current]::after{transform:scaleX(1)}
/* ⚠ وإن كانت الصفحة داخل منسدلة أضاء عنوانُ المجموعة أيضاً. بدونه يقف
   الزائر في `/facilities` وليس في الشريط ما يدلّه أين هو — فالعلامةُ
   مخبوءةٌ في لوحةٍ مطويّة لا تُرى حتى تُفتح. */
.s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top{color:var(--gold-2)}
.s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top::after{transform:scaleX(1)}

/* ---------- القوائم المنسدلة ---------- */
.s-nav__has{position:relative}
/* السهم — حرفٌ مرسوم بالحدود لا محرفُ نصّ، فلا يتبدّل شكلُه بين الخطوط */
.s-nav__top::before{
  content:""; flex:0 0 auto; order:2;
  width:7px; height:7px; margin-top:-3px;
  border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
  opacity:.65;
}
.s-nav__has:hover .s-nav__top::before,
.s-nav__top[aria-expanded="true"]::before{transform:rotate(-135deg) translate(-2px,-2px)}

.s-nav__pop{
  position:absolute; top:100%; inset-inline-start:50%;
  transform:translateX(50%) translateY(8px);
  min-width:264px;
  background:var(--card);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:0 0 14px 14px;
  box-shadow:0 22px 48px rgba(22,33,26,.16);
  padding:8px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s, transform .3s var(--ease), visibility .25s;
  z-index:2;
}
/* ⚠ جسرٌ شفّاف يغطّي الثمانيةَ بكسلاً بين الزرّ واللوحة. بدونه يمرّ
   المؤشّر على فراغٍ فتُغلق اللوحة قبل أن يبلغها. */
.s-nav__pop::before{content:""; position:absolute; inset-inline:0; top:-10px; height:10px}
.s-nav__has:hover .s-nav__pop,
.s-nav__has:focus-within .s-nav__pop,
.s-nav__has.is-open .s-nav__pop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(50%) translateY(0);
}
.s-nav__pop a{
  display:flex; flex-direction:column; gap:1px;
  padding:11px 14px; border-radius:9px;
  color:var(--ink);
  transition:background .25s, color .25s;
}
.s-nav__pop a b{font-weight:600; font-size:14.5px}
.s-nav__pop a span{font-size:12.5px; color:var(--muted); line-height:1.6}
.s-nav__pop a:hover{background:var(--sand-2)}
.s-nav__pop a:hover b{color:var(--gold-2)}
.s-nav__pop a[aria-current]{background:var(--sand-2)}
.s-nav__pop a[aria-current] b{color:var(--gold-2)}

.s-nav__cta{
  background:var(--green);
  color:var(--paper);
  display:flex; align-items:center;
  padding-inline:32px;
  font-size:14.5px; font-weight:600;
  transition:background .35s, color .35s;
}
.s-nav__cta:hover{background:var(--gold-face); color:var(--on-gold)}

/* ---------- خلف الباب ----------
   البابُ عتبة، وشريطٌ يقف أمامها ينقضها. فيُخفى حتى ينفتح.

   ⚠ من أوّل رسمةٍ لا بسكربت: لو انتظرنا الجافاسكربت لظهر الشريطُ لحظةً
   ثمّ اختفى — وهي أسوأُ من بقائه. و`:has` يحصر القاعدة في الصفحة التي
   فيها بابٌ، أي الرئيسية وحدها.

   ⚠ و`opacity` لا `visibility`: الثانيةُ تُخرجه من مسار لوحة المفاتيح
   فلا يبلغه من يكبس Tab أصلاً — ولا يعمل `:focus-within` تحته.
================================================================= */
body:has(.s-hero__gate) .s-nav{
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease);
}
/* ⚠ ضمانةٌ مشروطة: تعمل **ما لم** يُعلن `hero.js` عن نفسه بـ`gate-live`.
   فإن تعثّر السكربتُ ظهر الشريطُ بعد أربع ثوانٍ بدل أن يبقى الزائر بلا
   قائمةٍ إلى الأبد — وإن عمل فلا مؤقّتَ أصلاً، فلا يقفز الشريطُ في وجه
   من وقف يتأمّل الباب. (كانت غيرَ مشروطةٍ فظهر بعد ستٍّ مهما حدث.) */
body:has(.s-hero__gate):not(.gate-live) .s-nav{
  animation:s-nav-rescue 0s linear 4s forwards;
}
/* يبلغه من يكبس Tab قبل أن ينفتح الباب — فيظهر له وحده */
body:has(.s-hero__gate).is-nav-in .s-nav,
body:has(.s-hero__gate) .s-nav:focus-within{
  opacity:1; pointer-events:auto; animation:none;
}
/* زيارةٌ ثانيةٌ في الجلسة نفسها: لا بابَ ولا تلاشيَ — يقف الشريطُ مكانَه */
body.no-gate .s-nav{opacity:1; pointer-events:auto; transition:none; animation:none}
@keyframes s-nav-rescue{to{opacity:1; pointer-events:auto}}

/* ---------- بعد التمرير ---------- */
.s-nav.is-solid{
  background:rgba(33,47,37,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(243,236,225,.09);
}
/* ⚠ 24 على الطرفين لا `28px 0`: الصفرُ كان يُلصق زرَّ الحجز بحافّة الشاشة،
   وهو ما ينقض المحاذاة نفسها التي من أجلها حُصر الشريط. */
.s-nav.is-solid .s-nav__inner{padding-block:0; padding-inline:24px}
.s-nav.is-solid .s-nav__bar{background:transparent}
.s-nav.is-solid .s-nav__links > li > a,
.s-nav.is-solid .s-nav__top{color:var(--paper)}
.s-nav.is-solid .s-nav__links > li > a:hover,
.s-nav.is-solid .s-nav__top:hover{color:var(--gold-3)}
.s-nav.is-solid .s-nav__links > li > a[aria-current]{color:var(--gold-3)}
.s-nav.is-solid .s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top{color:var(--gold-3)}
/* اللوحةُ المنسدلة تبقى فاتحةً على الحالين — هي بطاقةٌ فوق الصفحة لا
   جزءٌ من الشريط، وقلبُ ألوانها مع الشريط يجعلها تختفي في المحتوى. */
.s-nav.is-solid .s-nav__cta{background:var(--gold-3); color:var(--forest)}
.s-nav.is-solid .s-nav__cta:hover{background:var(--gold-3)}

/* ---------- الجوّال ---------- */
.s-nav__burger{display:none; flex-direction:column; gap:6px; padding:16px 20px; align-self:center}
.s-nav__burger span{width:24px; height:2px; background:var(--paper); transition:transform .3s var(--ease)}
.s-nav__burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.s-nav__burger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.s-nav__mobile{
  display:none; flex-direction:column; gap:2px;
  background:rgba(33,47,37,.97); padding:14px 24px 26px;
  /* المجموعتان مطويّتان، فإذا فُتحتا معاً صارت الوجهاتُ تسعاً — وقد
     تتجاوز الشاشة على هاتفٍ قصير، فتنساب بدل أن تُقصّ. */
  max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain;
}
.s-nav__mobile.is-open{display:flex}
.s-nav__mobile > a{color:var(--paper); padding:12px 4px; font-size:16px; border-bottom:1px solid rgba(243,236,225,.08)}
.s-nav__mobile a.btn{border:none; margin-top:14px; justify-content:center}

/* المجموعات المطويّة — `<details>` فتعمل بلا سكربت */
.s-nav__m-group{border-bottom:1px solid rgba(243,236,225,.08)}
.s-nav__m-group summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; color:var(--paper); font-size:16px;
  cursor:pointer; list-style:none;
}
.s-nav__m-group summary::-webkit-details-marker{display:none}
.s-nav__m-group summary::after{
  content:""; width:8px; height:8px; margin-inline-end:4px;
  border-inline-end:1.5px solid var(--gold-3); border-block-end:1.5px solid var(--gold-3);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.s-nav__m-group[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.s-nav__m-group a{
  display:block; color:var(--paper-muted);
  padding:9px 18px 9px 4px; font-size:15px;
}
.s-nav__m-group a:last-child{padding-bottom:14px}

@media (max-width:1040px){
  .s-nav__bar, .s-nav__cta{display:none}
  .s-nav__burger{display:flex}
  /* 24 عند الشعار كالمحتوى، و4 عند الزرّ لأنّ للزرّ حشوتَه الداخلية 20 —
     فيقف حدُّه البصري على 24 هو أيضاً. */
  .s-nav__inner{padding-inline:24px 4px; padding-block:16px}
  .s-nav__burger{margin-inline-start:auto}
  .s-nav.is-solid .s-nav__inner{padding-inline:24px 4px; padding-block:10px}
  /* على الجوّال يبقى الشعار كاملاً ويصغر: الشريط هنا يخلو من الروابط
     فلا شيء يوازنه، والمقاسُ الكامل يأكل عرضاً لا يفضل منه شيء. */
  .s-nav__logo{width:67px; height:53px}
  .s-nav.is-solid .s-nav__logo{width:56px; height:44px}
}

/* ===== footer.css ===== */
/* ===== قسم: التذييل ===== */
.s-footer{background:var(--green-2); color:var(--paper); padding-top:70px; position:relative}

/* نقشُ الغصون خلف التذييل — قناعٌ لا صورة، لأنّ النقش مرسومٌ بالأسود
   ووضعُه صورةً على أرضٍ داكنة يجعله أدكنَ فلا يُرى. القناعُ يقلب المعادلة:
   الشكلُ يصير ورقياً فاتحاً والأرضُ تبقى خضراء.

   عند 4٪ — نسيجٌ يُحسّ ولا يُقرأ. وارتفاعُ البلاطة 4/3 عرضِها كنسبة الملفّ،
   وإلّا تمطّط النقش وانكسر التحامُ حوافّه. */
.s-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--paper); opacity:.04;
  /* ⚠ مربّعٌ لا 210×280: بلاطةُ النقش صارت 1000×1000 (2026-08-31) بعد أن
     كانت 240×320 — ومقاسٌ غيرُ متناسبٍ يمطّ الزخرفةَ في اتّجاهٍ واحد. */
  -webkit-mask:url(/assets/orn/pattern.svg) repeat; -webkit-mask-size:300px 300px;
          mask:url(/assets/orn/pattern.svg) repeat;         mask-size:300px 300px;
}
.s-footer > *{position:relative; z-index:1}
/* أربعةُ أعمدة: التعريف، ثمّ عمودا الصفحات، ثمّ التواصل. صار التذييل
   خريطةَ الموقع بعد أن جاوزت الصفحاتُ الاثنتي عشرة. */
.s-footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:36px 32px; padding-bottom:50px;
  border-bottom:1px solid rgba(243,236,225,.08);
}
/* عنوانُ العمود — `h2` للبنية لا للحجم، فتقرأه قارئةُ الشاشة عنواناً */
.s-footer__h{
  font-family:var(--f-display); font-weight:600;
  font-size:13px; letter-spacing:.06em;
  color:var(--gold-3); margin-bottom:14px;
}
.s-footer__col{display:flex; flex-direction:column}
/* ذهبيٌّ على الأخضر الداكن — وهو التقابل نفسه في كرّاسة المشروع ولوحة
   السور، فمن رآهما ووصل الموقع وجد الشيء نفسه لا ترجمةً له. */
.s-footer__logo{
  display:block; width:106px; height:83px; margin-bottom:20px;
  /* ⚠ كلسيٌّ لا ذهبيّ: التذييلُ أخضرُ داكن، والقاعدةُ الثانية في نظام
     الألوان تحصر الشعارَ في الأخضر أو الكلسي. وكان `--gold-3`. */
  color:var(--paper); background:currentColor;
  -webkit-mask:url(/assets/img/logo.svg) no-repeat center/contain;
          mask:url(/assets/img/logo.svg) no-repeat center/contain;
}
.s-footer__line{font-size:14px; color:var(--paper-muted); max-width:40ch}
.s-footer__links{display:flex; flex-direction:column; gap:10px}
.s-footer__links a{color:var(--paper-muted); font-size:14.5px; transition:color .3s}
.s-footer__links a:hover{color:var(--gold-3)}
.s-footer__contact{display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--paper-muted)}
.s-footer__contact a{transition:color .3s}
.s-footer__contact a:hover{color:var(--gold-3)}
.s-footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:24px; font-size:13px; color:var(--paper-muted);
}
.s-footer__bottom a{transition:color .3s}
.s-footer__bottom a:hover{color:var(--gold-3)}

@media (max-width:960px){ .s-footer__grid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:620px){ .s-footer__grid{grid-template-columns:1fr; gap:28px} }


/* ===== page.css ===== */
/* =====================================================
   مشترك الصفحات الداخلية

   الرئيسية أقسامٌ لكلٍّ ستايلُه. والصفحات الداخلية اثنتا عشرة، ولو
   أخذت كلٌّ منها ستايلَها كاملاً لافترقت اثنتا عشرة نسخةً من الجدول
   والبطاقة والواجهة. فهنا المكوّنات، وفي `pages/<slug>/page.css` ما
   يخصّ صفحةً بعينها لا غير.

   والأسماء تبدأ بـ`p-` تمييزاً لها عن `s-` في أقسام الرئيسية.
   ===================================================== */

/* ---------- واجهة الصفحة ----------
   داكنةٌ عن ضرورةٍ لا عن ذوق: الشريط في أعلاه شفّافٌ وشعارُه بلونِ
   الورق، فلو كانت الواجهة فاتحةً لاختفى الشعار حتى يمرّر الزائر. */
.p-hero{
  position:relative; isolation:isolate;
  background:var(--green);
  color:var(--paper);
  padding-block:clamp(132px, 17vw, 186px) clamp(52px, 7vw, 84px);
  overflow:hidden;
}
/* زخرفةٌ باهتة لا صورة — الصفحات الداخلية اثنتا عشرة، وصورةُ واجهةٍ
   لكلٍّ منها اثنتا عشرة صورةً تُطلب قبل أن يُقرأ حرف. */
.p-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:url(/assets/orn/pattern.svg) repeat center/380px;
  opacity:.05;
}
.p-hero::after{
  content:''; position:absolute; z-index:-1;
  inset-inline-start:-90px; bottom:-120px;
  width:340px; height:340px;
  background:currentColor;
  -webkit-mask:url(/assets/orn/arch.svg) no-repeat center/contain;
          mask:url(/assets/orn/arch.svg) no-repeat center/contain;
  opacity:.07;
  pointer-events:none;
}
.p-hero__in{max-width:var(--container); margin-inline:auto; padding-inline:24px; position:relative}
.p-hero h1{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:clamp(32px, 5.6vw, 62px);
  line-height:1.32; letter-spacing:-.02em; text-wrap:balance;
  max-width:19ch;
}
.p-hero__lede{
  color:var(--paper-muted);
  max-width:62ch; margin-top:20px;
  font-size:clamp(16.5px, 1.5vw, 18.5px);
}
.p-hero .eyebrow{color:var(--gold-3)}
.p-hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* ---------- فتات الخبز ----------
   ليست زينة: هي المسار الذي يعرضه محرّك البحث تحت العنوان بدل الرابط
   الخام، ويقابله `BreadcrumbList` الذي يحقنه الخادم. */
.p-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13.5px; color:var(--paper-muted); margin-bottom:18px;
}
.p-crumbs a{color:var(--paper-muted); transition:color .3s; position:relative}
.p-crumbs a:hover{color:var(--gold-3)}
/* ⚠ هدفُ اللمس لا حجمُ النصّ: سطرُ الفتات ارتفاعه 27 بكسلاً، ودون الحدّ
   المريح على الهاتف. وحشوةٌ حقيقية كانت تباعد السطر عن العنوان — فمساحةٌ
   شفّافة تكبّر الهدف ولا تمسّ التخطيط. */
.p-crumbs a::after{content:''; position:absolute; inset:-10px -7px}
.p-crumbs span[aria-hidden]{opacity:.45}
.p-crumbs [aria-current]{color:var(--paper)}

/* ---------- الأقسام ---------- */
.p-sec{padding-block:clamp(58px, 8vw, 104px)}
.p-sec--tight{padding-block:clamp(40px, 5.5vw, 68px)}
.p-sec--alt{background:var(--sand-2)}
.p-sec--card{background:var(--card)}
.p-sec--dark{background:var(--green); color:var(--paper)}
.p-sec--dark .section-sub, .p-sec--dark .p-lede{color:var(--paper-muted)}
.p-sec--dark .eyebrow{color:var(--gold-3)}
.p-sec--dark .footnote{color:var(--paper-muted)}

.p-head{max-width:74ch; margin-bottom:clamp(30px, 4vw, 48px)}
.p-head--center{margin-inline:auto; text-align:center}
.p-head--center .eyebrow{justify-content:center}
.p-lede{color:var(--muted); max-width:66ch; font-size:17.5px}

/* ---------- نصٌّ طويل ---------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:18px}
.prose p{color:var(--ink)}
.prose h3{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:clamp(20px, 2.3vw, 26px); line-height:1.5;
  margin-top:38px; letter-spacing:-.01em;
}
.prose h4{font-weight:600; font-size:17.5px; margin-top:26px}
.prose strong{font-weight:600; color:var(--ink)}
.p-sec--dark .prose p, .p-sec--dark .prose strong{color:var(--paper)}
.prose ul, .prose ol{padding-inline-start:0}
.prose li{position:relative; padding-inline-start:24px; margin-top:9px}
.prose ul li::before{
  content:''; position:absolute; inset-inline-start:2px; top:.72em;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{
  content:counter(n); position:absolute; inset-inline-start:0; top:.15em;
  font-size:12.5px; font-weight:700; color:var(--gold-2);
  width:18px; text-align:center;
}
.p-sec--dark .prose ol li::before{color:var(--gold-3)}
.prose a:not(.btn){
  color:var(--gold-2); font-weight:500;
  border-bottom:1px solid rgba(154,123,65,.4);
  transition:border-color .3s, color .3s;
}
.prose a:not(.btn):hover{border-color:var(--gold); color:var(--gold)}
.p-sec--dark .prose a:not(.btn){color:var(--gold-3); border-color:rgba(221,180,104,.45)}

/* ---------- الشبكة والبطاقات ---------- */
.p-grid{display:grid; gap:clamp(16px, 2vw, 24px)}
.p-grid--2{grid-template-columns:repeat(2, 1fr)}
/* بطاقةُ صدارةٍ تمتدّ على العمودين — تتصدّر الشبكةَ ولا تترك فردةً وحيدة */
.p-grid--2 > .p-card--lead{grid-column:1 / -1}
.p-grid--3{grid-template-columns:repeat(3, 1fr)}
.p-grid--4{grid-template-columns:repeat(4, 1fr)}

.p-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px, 2.6vw, 32px);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.p-card__t{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:19.5px; line-height:1.5; letter-spacing:-.01em;
}
.p-card__d{color:var(--muted); font-size:15.5px; line-height:1.85}
.p-card--link:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(22,33,26,.09); border-color:var(--gold)}
.p-card--gold{background:var(--gold-face); color:var(--on-gold); border-color:transparent}
.p-card--gold .p-card__d{color:rgba(19,30,25,.78)}
.p-card--dark{background:var(--green-2); color:var(--paper); border-color:var(--green-line)}
.p-card--dark .p-card__d{color:var(--paper-muted)}
.p-sec--dark .p-card{background:var(--green-2); color:var(--paper); border-color:var(--green-line)}
.p-sec--dark .p-card .p-card__d{color:var(--paper-muted)}

/* أيقونةُ البطاقة — قناعٌ بـ`currentColor` فتأخذ لون سياقها */
.p-card__i{
  width:30px; height:30px; flex:0 0 auto;
  background:var(--gold);
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-repeat:no-repeat;         mask-position:center;         mask-size:contain;
}
.p-sec--dark .p-card__i, .p-card--dark .p-card__i{background:var(--gold-3)}

/* رابطُ «اقرأ المزيد» في ذيل البطاقة */
.p-more{
  margin-top:auto; padding-top:14px;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold-2); font-weight:600; font-size:14.5px;
}
.p-more::after{content:'‹'; transition:transform .3s var(--ease)}
.p-card--link:hover .p-more::after{transform:translateX(-4px)}
.p-sec--dark .p-more, .p-card--dark .p-more{color:var(--gold-3)}

/* ---------- الرقم الكبير ---------- */
.p-stat{display:flex; flex-direction:column; gap:2px}
.p-stat__n{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:clamp(34px, 4.6vw, 54px); line-height:1.25;
  letter-spacing:-.02em; color:var(--gold-2);
}
.p-sec--dark .p-stat__n{color:var(--gold-3)}
.p-stat__l{font-size:14.5px; color:var(--muted)}
.p-sec--dark .p-stat__l{color:var(--paper-muted)}

/* ---------- جدول المواصفات ----------
   جدولٌ حقيقي لا شبكةُ divات: هذه بياناتٌ مقترنة، وقارئةُ الشاشة تقرأ
   عنوان العمود مع كل خانةٍ إن كان جدولاً، وتقرأ نصّاً سائباً إن لم يكن. */
.p-spec{width:100%; border-collapse:collapse; font-size:15.5px}
.p-spec caption{text-align:start; color:var(--muted); font-size:14px; padding-bottom:12px}
.p-spec th, .p-spec td{text-align:start; padding:15px 18px; vertical-align:top; line-height:1.8}
.p-spec thead th{
  font-weight:600; font-size:13.5px; letter-spacing:.02em;
  color:var(--paper); background:var(--green);
}
.p-spec thead th:first-child{border-start-start-radius:12px}
.p-spec thead th:last-child{border-start-end-radius:12px}
.p-spec tbody tr{border-bottom:1px solid var(--line)}
.p-spec tbody tr:nth-child(odd){background:var(--card)}
.p-spec tbody th{font-weight:600; width:32%; color:var(--ink)}
.p-spec td{color:var(--muted)}
.p-spec__wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- الخطوات المرقّمة ---------- */
.p-steps{counter-reset:s; display:grid; gap:2px}
.p-steps li{
  counter-increment:s; position:relative;
  padding:20px 62px 20px 0;
  border-bottom:1px solid var(--line);
}
.p-steps li:last-child{border-bottom:none}
.p-steps li::before{
  content:counter(s); position:absolute; inset-inline-start:0; top:20px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green); color:var(--paper);
  font-size:15px; font-weight:600;
}
.p-steps__t{font-weight:600; font-size:17.5px; display:block}
.p-steps__d{color:var(--muted); font-size:15.5px; display:block; margin-top:4px}
.p-sec--dark .p-steps li{border-color:var(--green-line)}
.p-sec--dark .p-steps li::before{background:var(--gold-3); color:var(--on-gold)}
.p-sec--dark .p-steps__d{color:var(--paper-muted)}

/* ---------- ملاحظةٌ بارزة ---------- */
.p-note{
  border-inline-start:3px solid var(--gold);
  background:var(--card);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
  color:var(--muted); font-size:15.5px;
}
.p-note strong{color:var(--ink); font-weight:600}
.p-sec--dark .p-note{background:var(--green-2); color:var(--paper-muted); border-color:var(--gold-3)}
.p-sec--dark .p-note strong{color:var(--paper)}

/* ---------- الصور ---------- */
.fig{margin:0; display:flex; flex-direction:column; gap:12px}
.fig img{width:100%; height:auto; border-radius:var(--radius)}
.fig figcaption{color:var(--muted); font-size:14px; line-height:1.8}
.p-sec--dark .fig figcaption{color:var(--paper-muted)}

/* ---------- شريطٌ بعرض الصفحة ----------
   ⚠ خارج `.container` عن قصد: يُستعمل حيث تكون الجملةُ أقوى ما في
   الصفحة. وكان «بين الأبنية… حياة، لا طرق» في عمودٍ من 36% من العرض
   (459 بكسلاً على شاشة 1280) ورندرُه 1672 — فيُستهلك ثلثُ دقّته،
   وتُحشر أقوى جملةٍ في زاوية. */
.p-band{
  position:relative; overflow:clip;
  /* ⚠ أطول: الصورةُ هي الحدث لا النصّ. وعند 426 بكسلاً كانت الجملةُ
     تملأ ثلثَه فيُقرأ كتلةَ نصٍّ على خلفية. */
  min-height:clamp(460px, 76vh, 800px);
  display:flex; align-items:flex-end;
  color:#fff;
}
/* ⚠ الفسحةُ والإزاحةُ مرتبطتان بمعادلة: الإزاحةُ على الشاشة = `SHIFT` ×
   (ارتفاع الصورة ÷ 100). فبفسحة 12% وصورةٍ 124% يكون أقصى `SHIFT`
   آمنٍ 9.6 — و8 المستعملة تعطي 9.9% وتبقى داخلها.
   وهي فسحةُ «اللقطة المسائية» و«الدعوة» في الرئيسية نفسُها، فالحركةُ
   واحدةٌ في الموقع كلِّه لا اثنتان. */
.p-band__media{position:absolute; inset:-12% 0; z-index:0}
.p-band__media img{width:100%; height:100%; object-fit:cover; display:block}
/* ⚠ لافتةُ «قيد التحضير» تحمل نسبتَها في `style` مضمّناً، فتُلغى هنا
   بـ`!important` لتملأ الشريط — وإلا انكمشت في ركنه. */
.p-band__media .ph{width:100%; height:100%; aspect-ratio:auto !important; border-radius:0}
.p-band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(22,33,26,.80) 0%, rgba(22,33,26,.38) 44%, rgba(22,33,26,.06) 78%, transparent 100%);
}
.p-band__in{position:relative; z-index:2; padding-block:clamp(30px, 5vw, 58px)}
.p-band__in .eyebrow{color:var(--gold-3)}
.p-band__in h2{color:#fff; text-shadow:0 3px 30px rgba(0,0,0,.42); margin-bottom:14px}
.p-band__in p{color:rgba(243,236,225,.94); max-width:62ch; margin-bottom:10px}
.p-band__in p:last-child{margin-bottom:0}
.p-band__in strong{color:#fff}

/* ---------- صورةٌ عريضة تتصدّر مجموعة ----------
   بعرض العمود كاملاً (1180) لا بثلثه — لتقرأ المجموعةُ صورةً قبل أن
   تُقرأ قائمة. */
.p-lead{margin:0 0 clamp(26px, 3.6vw, 44px)}
/* ⚠ حاويةٌ بنسبة 3/2 لا الصورةُ بنسبتها: أطولُ من 16/9 بالثلث، و`cover`
   يقصّ ما زاد — فيبقى المقاسُ واحداً مهما اختلفت نسبةُ ما يصل. */
.p-lead__in{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  border-radius:var(--radius); background:var(--sand-2);
}
.p-lead__in img{
  position:absolute; inset-inline:0; top:-12%;
  width:100%; height:124%; object-fit:cover; display:block;
}
/* اللافتة تملأ الحاوية: نسبتُها المضمّنة تُلغى، فالحاويةُ تحملها */
.p-lead__in .ph{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto !important; border-radius:0;
}
.p-lead figcaption{margin-top:10px; color:var(--muted); font-size:13.5px; line-height:1.8}
.p-sec--alt .p-lead figcaption{color:var(--muted)}

/* موضعُ صورةٍ لم تصل بعد.
   ⚠ يُبنى من `data-img` في الخادم حين لا يجد الملفّ (انظر `pages.py`).
   والنسبةُ محجوزةٌ سلفاً، فلا تقفز الصفحة يوم تصل الصورة. ومظهرُه
   مقصودٌ أن يُقرأ «قيد التحضير» لا «معطوب». */
.ph{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:
    linear-gradient(rgba(208,200,185,.16), rgba(208,200,185,.16)),
    var(--sand-2);
  border:1px dashed var(--stone);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
}
.ph__i{
  width:34px; height:34px; opacity:.4;
  background:var(--gold-2);
  -webkit-mask:url(/assets/orn/fleuron.svg) no-repeat center/contain;
          mask:url(/assets/orn/fleuron.svg) no-repeat center/contain;
}
.ph__t{color:var(--muted); font-size:14px; line-height:1.7; max-width:34ch}
.ph__t::after{content:' — قيد التحضير'; opacity:.62}
.p-sec--dark .ph{background:rgba(255,255,255,.04); border-color:var(--green-line)}
.p-sec--dark .ph__t{color:var(--paper-muted)}
.p-sec--dark .ph__i{background:var(--gold-3)}

/* ---------- نصٌّ وصورة جنباً إلى جنب ---------- */
.p-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px, 4vw, 64px); align-items:center;
}
.p-split--wide{grid-template-columns:1.15fr .85fr}
.p-split--flip > :first-child{order:2}

/* ---------- الأسئلة ----------
   `<details>` لا جافاسكربت: تعمل بلا سكربت، ويقرأ الزاحفُ جوابَها
   مطويّاً كما يقرؤه مفتوحاً — وهو شرطُ ظهورها نتيجةً غنيّة. */
.p-faq{display:grid; gap:2px; max-width:80ch}
.p-faq details{border-bottom:1px solid var(--line)}
.p-faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:20px 2px; cursor:pointer;
  font-weight:600; font-size:17.5px; line-height:1.7;
  list-style:none;
}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::after{
  content:''; flex:0 0 auto; width:13px; height:13px; margin-top:.5em;
  border-inline-end:2px solid var(--gold-2); border-block-end:2px solid var(--gold-2);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.p-faq details[open] summary::after{transform:rotate(-135deg)}
.p-faq summary:hover{color:var(--gold-2)}
.p-faq__a{padding:0 2px 22px; color:var(--muted); max-width:70ch}
.p-faq__a > * + *{margin-top:14px}

/* ---------- شريط الدعوة ---------- */
.p-cta{
  background:var(--green-2); color:var(--paper);
  border-radius:var(--radius);
  padding:clamp(30px, 4vw, 52px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px;
  position:relative; overflow:hidden; isolation:isolate;
}
.p-cta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:url(/assets/orn/pattern.svg) repeat center/300px; opacity:.05;
}
.p-cta__t{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:clamp(22px, 2.8vw, 32px); line-height:1.45; letter-spacing:-.015em;
}
.p-cta__d{color:var(--paper-muted); font-size:15.5px; margin-top:8px; max-width:52ch}
.p-cta__acts{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- روابط الصفحات الشقيقة ----------
   في ذيل كل صفحة — الزائر الذي بلغ آخرها مهتمّ، ولا يُترك عند حائط. */
.p-next{border-top:1px solid var(--line); padding-block:clamp(40px, 5vw, 66px)}
.p-next .p-grid{margin-top:26px}

/* ---------- شارات ---------- */
.p-chips{display:flex; flex-wrap:wrap; gap:9px}
.p-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:99px;
  border:1px solid var(--line); background:var(--card);
  font-size:14px; color:var(--muted);
}
.p-chip--on{background:var(--green); border-color:var(--green); color:var(--paper)}
.p-sec--dark .p-chip{background:rgba(255,255,255,.05); border-color:var(--green-line); color:var(--paper-muted)}

/* ---------- الجوّال ---------- */
@media (max-width:960px){
  .p-grid--4{grid-template-columns:repeat(2, 1fr)}
  .p-grid--3{grid-template-columns:repeat(2, 1fr)}
  .p-split, .p-split--wide{grid-template-columns:1fr}
  .p-split--flip > :first-child{order:0}
}
@media (max-width:620px){
  .p-grid--2, .p-grid--3, .p-grid--4{grid-template-columns:1fr}
  .p-hero h1{max-width:none}
  .p-steps li{padding-inline:52px 0}
  .p-steps li::before{width:32px; height:32px; font-size:14px}
  .p-cta{flex-direction:column; align-items:flex-start}
  .p-cta__acts{width:100%}
  .p-cta__acts .btn{flex:1 1 auto}

  /* الجدول على الهاتف: صفوفٌ مكدّسة لا أعمدةٌ تُقصّ.
     عنوانُ العمود يُطبع قبل الخانة من `data-l`، فيبقى المعنى قائماً. */
  .p-spec, .p-spec tbody, .p-spec tr, .p-spec td, .p-spec th{display:block; width:auto}
  .p-spec thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .p-spec tbody tr{
    border:1px solid var(--line); border-radius:12px;
    margin-bottom:12px; padding:6px 4px; background:var(--card);
  }
  .p-spec tbody th{width:auto; padding-bottom:4px; font-size:16.5px}
  .p-spec td{padding-block:4px}
  .p-spec td[data-l]::before{
    content:attr(data-l) ' — '; color:var(--ink); font-weight:600;
  }
}

@media (prefers-reduced-motion: reduce){
  .p-card, .p-more::after{transition:none}
}