/* =============================================================================
   custom-overrides.css
   ملتقى المسرح المدرسي — تصحيحات UX لمؤشر التقدّم (.scene-indicator)
   -----------------------------------------------------------------------------
   يُحمَّل بعد assets/index-*.css  ولا يعدّل الملف المبني (minified) إطلاقًا.

   المشكلة الأصلية:
     .scene-indicator كان `position:fixed` مربوطًا بحافة الـ viewport
     (inset-inline-start:20px) وبعرض ١٤٦ بكسل (صندوق ١٣٢px + خط ٢px).
     الحاوية العريضة للصفحة هي:  .page-width { width: min(1180px, 100% - 48px) }
     فعلى شاشة ١٢٨٠px تكون الفجوة الجانبية ٥٠px فقط بينما المؤشر ١٤٦px
     => تداخل فعلي بمقدار ~٩٦px فوق نص "الأهداف" وعنوان "شروط التقديم"
     وصور التكريم والورش وشعارات الشركاء.

   الحل:
     • ديسكتوب/تابلت: نربط المؤشر برياضيات نفس الحاوية بدل حافة الشاشة،
       ونضعه بالكامل داخل الهامش الخارجي (gutter) خارج صندوق المحتوى،
       ونختصره إلى "عمود فقري" رفيع من نقط صغيرة. صندوق اسم القسم يظهر
       عند الـ hover على النقطة النشطة فقط.
     • موبايل: نستبدل الشكل الرأسي بشريط تقدّم أفقي رفيع أعلى الشاشة.

   سُلّم الـ z-index في المشروع (من الملف الأصلي):
       0   .content-section:after
       1   .content-section > .page-width      ← ملاحظة: .content-section فيها
       2   .hero-inner                            isolation:isolate أي أنها
       4   .curtain                               تُنشئ stacking context خاص،
       6   .curtain-replay                        ولأن <nav> يسبق <main> في الـ DOM
      50   .site-header                           فإن أي z-index < 1 يخفي المؤشر
      60   .site-footer                           تمامًا خلف الأقسام.
     100   .skip-link
   لذلك:
      40  = العمود الجانبي  → فوق محتوى الأقسام (شرط الظهور) وتحت الهيدر/الفوتر.
      55  = شريط الموبايل   → فوق الهيدر (شريط علوي) وتحت الفوتر ورابط التخطي.
   عدم التغطية مضمون هندسيًا (الموضع خارج صندوق المحتوى) وليس بالـ z-index.
   ========================================================================== */

:root {
  /* نفس أرقام .page-width بالضبط */
  --sf-page-max: 1180px;
  --sf-page-gutter: 48px;

  /* العمود الفقري (ديسكتوب/تابلت) */
  --sf-rail-w: 10px;                        /* عرض منطقة النقط */
  --sf-rail-gap: 6px;                       /* خلوص بين العمود وحافة المحتوى */
  --sf-rail-h: clamp(140px, 26vh, 200px);   /* أقصر من ١٦٨px الأصلية ليبتعد عن الهيدر/الفوتر */

  /* شريط الموبايل */
  --sf-bar-h: 3px;

  /* z-index محسوب — انظر التعليق أعلاه */
  --sf-z-rail: 40;
  --sf-z-topbar: 55;
}

/* =============================================================================
   ١) ديسكتوب وتابلت  (> 680px)
   ========================================================================== */
@media (min-width: 681px) {

  /* ---------------------------------------------------------------------------
     الموضع: مشتق من حاوية الصفحة لا من حافة الشاشة.
       عرض الحاوية      C = min(1180px, 100% - 48px)
       الهامش الجانبي   G = 50% - C/2            (لا يقل عن 24px)
       موضع العمود      = G - عرض العمود - الخلوص
     => العمود يقع كاملًا داخل الهامش، خارج صندوق المحتوى، مع خلوص ٦px دائمًا،
        ويتحرك للداخل تلقائيًا كلما اتسعت الشاشة (يبقى ملاصقًا لعمود المحتوى).
  --------------------------------------------------------------------------- */
  .scene-indicator {
    position: fixed;
    top: 50%;
    inset-inline-start: calc(
      50%
      - min(var(--sf-page-max), 100% - var(--sf-page-gutter)) / 2
      - var(--sf-rail-w)
      - var(--sf-rail-gap)
    );
    inset-inline-end: auto;
    transform: translateY(-50%);

    /* عمود واحد فقط بعرض النقط — لا صندوق دائم بعد الآن */
    display: grid;
    grid-template-columns: var(--sf-rail-w);
    width: var(--sf-rail-w);
    gap: 0;
    align-items: center;

    z-index: var(--sf-z-rail);
    pointer-events: none;
  }

  /* ---- الخط الرفيع (العمود الفقري) ---- */
  .scene-progress-track {
    grid-area: 1 / 1;
    justify-self: center;
    width: 1px;
    height: var(--sf-rail-h);
    background: rgba(247, 246, 243, 0.16);
  }

  .scene-progress-track span {
    box-shadow: 0 0 6px rgba(224, 181, 101, 0.45);
  }

  /* ---- النقط الصغيرة ---- */
  .scene-dots {
    inset-inline: 0;
    top: 0;
    height: var(--sf-rail-h);
    transform: none;
    justify-items: center;
  }

  .scene-dots i {
    width: 4px;
    height: 4px;
    background: transparent;
    border-color: rgba(247, 246, 243, 0.38);
  }

  .scene-dots a.is-active i {
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-color: var(--gold-light);
    box-shadow: 0 0 8px rgba(224, 181, 101, 0.6);
  }

  /* مساحة نقر/تحويم أوسع من النقطة نفسها دون تغيير الشكل أو التخطيط.
     التوسيع الرأسي ١px فقط: المسافة بين النقطتين تصل إلى ١٢px على الشاشات
     القصيرة، وأي توسيع أكبر يجعل مناطق النقط المتجاورة تتداخل. */
  .scene-dots a::before {
    content: "";
    position: absolute;
    inset: -1px -9px;
  }

  /* ---- التسميات: لا شيء ظاهر بشكل دائم ---- */

  /* رقم القسم بجوار النقطة كان يخرج خارج الشاشة بعد التضييق — نلغيه */
  .scene-dots a b {
    display: none;
  }

  /* اسم القسم يظهر عند تحويم نقطته هو فقط (وليس للنقطة النشطة: لها الصندوق) */
  .scene-dots a span {
    opacity: 0;
    transform: translateX(-5px);
  }

  .scene-dots a:hover span,
  .scene-dots a:focus-visible span {
    opacity: 1;
    transform: translateX(0);
  }

  .scene-dots a.is-active span,
  .scene-dots a.is-active:hover span,
  .scene-dots a.is-active:focus-visible span {
    opacity: 0;
  }

  /* ---- صندوق القسم الحالي: مخفي افتراضيًا، يظهر عند hover النقطة النشطة ---- */
  .scene-indicator-current {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 12px);   /* ناحية المحتوى، خارج العمود */
    inset-inline-end: auto;
    width: max-content;
    max-width: 160px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.96);
    transform-origin: center;
    transition:
      opacity 0.18s ease,
      transform 0.18s var(--ease-out),
      visibility 0s linear 0.18s;
    pointer-events: none;
  }

  /* :has() غير مدعوم ⇒ القاعدة تُتجاهل والصندوق يبقى مخفيًا (تدهور مقبول) */
  .scene-indicator:has(.scene-dots a.is-active:hover) .scene-indicator-current,
  .scene-indicator:has(.scene-dots a.is-active:focus-visible) .scene-indicator-current {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    transition-delay: 0s;
  }
}

/* =============================================================================
   ٢) موبايل  (≤ 680px) — شريط تقدّم أفقي رفيع أعلى الشاشة
   ========================================================================== */
@media (max-width: 680px) {

  .scene-indicator {
    position: fixed;
    top: 0;
    bottom: auto;
    inset-inline: 0;
    width: 100%;
    height: var(--sf-bar-h);

    display: block;
    gap: 0;
    transform: none;
    overflow: hidden;

    background: rgba(247, 246, 243, 0.12);
    z-index: var(--sf-z-topbar);
    pointer-events: none;

    /* يتيح cqw أدناه = عرض الشريط الفعلي (بدون شريط التمرير) */
    container-type: size;
  }

  /* لا نص ولا صندوق ولا نقط على الموبايل */
  .scene-indicator-current,
  .scene-dots {
    display: none;
  }

  /* ---------------------------------------------------------------------------
     خط التعبئة: العنصر <span> يحمل style="height:X%" مولّدًا من الـ JS،
     ولا يمكن تعديله من CSS. لذلك نُدوّر المسار ٩٠° فيتحول محور الارتفاع
     إلى محور العرض، ويصبح الـ X% تعبئة أفقية تتقدّم مع تغيّر القسم
     (مع انتقال .26s الموجود أصلًا فتبدو التعبئة انسيابية).
     الاتجاه يُراعى: RTL يمتلئ من اليمين، LTR من اليسار (الموقع يقلب dir
     عند تبديل اللغة عبر document.documentElement.dir).

     ملاحظة: تعمدنا عدم استخدام animation-timeline: scroll() هنا. صحيح أنها
     تعطي تعبئة مستمرة ١٠٠٪، لكنها تتطلب تعطيل هذا المسار البديل، وأي فشل
     صامت فيها يعني شريطًا فارغًا تمامًا. الحل الحالي يعتمد على قيمة يولّدها
     الـ JS الموجود أصلًا، فيعمل في كل المتصفحات بلا ميزات جديدة.
  --------------------------------------------------------------------------- */
  .scene-progress-track {
    position: absolute;
    /* inset-inline أولًا لتحييد أي إزاحة منطقية موروثة، ثم الإحداثيات
       الفيزيائية — الترتيب مهم لأن inset-inline يكتب فوق left/right */
    inset-inline: auto;
    left: 0;
    top: 0;
    width: var(--sf-bar-h);
    height: 100vw;
    height: 100cqw;
    background: transparent;
    transform-origin: top left;
  }

  [dir="rtl"] .scene-progress-track {
    transform: rotate(90deg) translateY(-100%);
  }

  [dir="ltr"] .scene-progress-track {
    transform: rotate(-90deg) translateX(-100%);
  }

  .scene-progress-track span {
    box-shadow: none;
  }
}

/* =============================================================================
   ٣) تفضيلات الحركة المخفّضة
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scene-indicator-current,
  .scene-dots a span {
    transition: none;
  }
}


/* #############################################################################
   #  الجزء الثاني — Tier 1: قراءة، حركة، وإتاحة                              #
   #  كله CSS، عكوس بالكامل بحذف هذا القسم، ولا يمس أي ملف مبني.              #
   ############################################################################# */

/* =============================================================================
   ٤) الطباعة العربية — إلغاء الـ tracking السالب
   -----------------------------------------------------------------------------
   الأصل يطبّق  h1{letter-spacing:-.04em}  و .section-heading h2{-.03em}
   بلا أي شرط لغة (القاعدة الوحيدة المرتبطة باللغة في الملف الأصلي هي
   body.lang-en{font-family:Poppins}).

   القياس الحيّ على 1440px:  h1 = -3.44px  |  h2 = -1.74px

   العربي خط متصل: تضييق التتبّع يضغط وصلات الحروف ويشوّه شكل الكلمة.
   نصيحة "العناوين الكبيرة تحب tracking سالب" (apple-design §15) قاعدة
   لاتينية بحتة — لذلك نُبقيها للإنجليزي (Poppins) ونصفّرها للعربي.
   الموقع يقلب dir تلقائيًا: document.documentElement.dir = ar ? rtl : ltr
   ========================================================================== */
:root[dir="rtl"] h1,
:root[dir="rtl"] .section-heading h2 {
  letter-spacing: 0;
}

/* =============================================================================
   ٥) ارتفاع سطر العناوين العربية
   -----------------------------------------------------------------------------
   المقاس: h2 = 1.16 ، h1 = 1.07 (والـ h1 يلتف إلى ٣ أسطر فعليًا على 1440px).
   القيم دي مضبوطة لعرض لاتيني؛ Cairo عنده صاعدات ونازلات أطول والتشكيل
   بياخد مساحة رأسية، فبتتلاصق الأسطر. نوسّعها في العربي فقط.
   ========================================================================== */
:root[dir="rtl"] .section-heading h2 {
  line-height: 1.25;
}

:root[dir="rtl"] h1 {
  line-height: 1.18;
}

/* =============================================================================
   ٦) طول السطر (measure)
   -----------------------------------------------------------------------------
   الأصل: .section-heading p { max-width: 720px }  =  ٩٦ حرف عربي/سطر
   المريح ٤٥–٧٥. معايرة حيّة بخط Cairo 16px (٧.٤٨px للحرف):
       65ch = 582px = ٧٨ حرف   (لسه أكتر من اللازم)
       60ch = 538px = ٧٢ حرف   ✔ المختار
   استعملنا ch لأنها نسبية للخط، فتضبط نفسها في الإنجليزي (Poppins) كمان.
   .section-heading محاذاته start مش center، فتقصير العرض بيقصّر السطر بس
   من غير أي إزاحة في التخطيط.
   ========================================================================== */
.section-heading p {
  max-width: 60ch;
}

/* =============================================================================
   ٧) بوابة الـ hover لأجهزة اللمس
   -----------------------------------------------------------------------------
   الملف الأصلي فيه ١١ قاعدة hover بتحرّك transform، ومفيش ولا واحدة منها
   متغلّفة بـ (hover:hover) — الـ٣ بلوكات الموجودة كلها أدوات Tailwind
   ولا تمسّ الكروت أو الأزرار المخصصة. على اللمس الـ:hover بيلزق بعد الضغطة
   وبيفضل مرفوع لحد ما تضغط في مكان تاني.

   هنا نلغي *الحركة* فقط على الأجهزة اللي مش بتدعم hover حقيقي، ونسيب
   تغيّرات اللون/الحدود كأثر لمس مقبول. كل قيمة رجوع هي قيمة الأساس
   الحقيقية من الملف الأصلي (مش none عشوائي).
   ========================================================================== */
@media (hover: none) {
  .button-primary:hover,
  .button-ghost:hover,
  .social-link:hover,
  .goal-card:hover,
  .difference-card:hover,
  .workshop-card:hover {
    transform: none;
  }

  /* قيم الأساس الأصلية — مش none */
  .difference-card:hover::after {
    transform: translate(-100%);
  }

  .site-nav a:hover::after {
    transform: scaleX(0);
  }

  .portrait-card:hover .portrait img,
  .workshop-card:hover .workshop-photo img {
    transform: none;
  }
}

/* =============================================================================
   ٨) تدريج (stagger) لعناصر «شروط التقديم»
   -----------------------------------------------------------------------------
   .info-panel نفسه ضمن عائلة الكشف المتدرّج، لكن الـ <li> جواه كانت
   transition-delay:0s للكل — المجموعة الوحيدة الشاذة وسط ٤ شبكات مُدرَّجة.
   بنكرّر نفس آلية الأشقاء بالظبط (نفس المتغيرات ونفس التوقيت) عشان تقرأ
   كنظام واحد، مع translateY أصغر (10px) لأن العناصر أقرب لبعضها.

   أقصى عدد عناصر في لوحة = ٥ (لوحتان: ٣ و ٥).

   مهم — تدرّج بالـ opacity فقط، بدون translateY:
   قِسنا أن هذا البناء يعطّل كشف الإزاحة للعائلة كلها (.goal-card و
   .info-panel كلاهما يحسب transform:none على الديسكتوب والموبايل)، والكشف
   الفعلي بيحصل بالـ opacity + blur. أول محاولة أضافت translateY فظهرت
   الـ<li> مزاحة ٨.٢px تحت بينما الأشقاء مسطّحون. الـ opacity وحده يطابق
   سلوك الأشقاء تمامًا، وأرخص لأنه لا يضيف transform جديد كل فريم.

   القيم الافتراضية آمنة: لو الـ JS لسه ما اشتغلش أو الحركة مخفّضة
   تبقى --card-opacity = 1 ⇒ opacity: 1.
   ========================================================================== */
.content-section .info-panel li {
  opacity: max(0.84, var(--card-opacity, 1));
  transition: opacity 0.26s var(--ease-out);
}

.content-section .info-panel li:nth-child(2) { transition-delay: 40ms; }
.content-section .info-panel li:nth-child(3) { transition-delay: 80ms; }
.content-section .info-panel li:nth-child(4) { transition-delay: 120ms; }
.content-section .info-panel li:nth-child(5) { transition-delay: 160ms; }

/* =============================================================================
   ٩) ضغطة (:active) على الروابط التفاعلية
   -----------------------------------------------------------------------------
   الملف الأصلي فيه قاعدتين :active بس (.button و .language-switch/
   .mobile-menu-button). روابط النڤ ونقط المؤشر مالهاش أي رد فعل للضغط.
   ========================================================================== */
.site-nav a {
  transition: color 0.18s, transform 0.14s var(--ease-out);
}

.site-nav a:active {
  transform: scale(0.97);
}

/* النقطة ٤px — تصغيرها غير مُدرَك، فالضغط يكبّرها لحظيًا بدل ما يصغّرها */
.scene-dots a:active i {
  transform: scale(1.35);
}

/* =============================================================================
   ١٠) تفضيلات الشفافية والتباين
   -----------------------------------------------------------------------------
   الملف الأصلي فيه ١٤ استخدام لـ backdrop-filter وصفر تغطية لـ
   prefers-reduced-transparency أو prefers-contrast (بيغطي reduced-motion
   و forced-colors كويس، لكن دول إشارتان مستقلتان — apple-design §14).

   العناصر الشفافة فعليًا (مقاسة حيًّا): .site-header.is-scrolled ،
   .site-footer ، .scene-indicator-current
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled,
  .site-footer,
  .scene-indicator-current {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--navy-deep);
  }
}

@media (prefers-contrast: more) {
  .site-header.is-scrolled,
  .site-footer,
  .scene-indicator-current {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--navy-deep);
    border-color: var(--gold-light);
  }

  /* نرفع نص المتن من --muted إلى --ivory عند طلب تباين أعلى */
  .section-heading p,
  .info-panel li,
  .goal-card p {
    color: var(--ivory);
  }
}

/* =============================================================================
   ١١) احترام الحركة المخفّضة للإضافات أعلاه
   -----------------------------------------------------------------------------
   الملف الأصلي بيصفّر كل المدد بـ transition-duration:1ms!important، لكن
   بنلغي الإزاحة صراحةً هنا: الحركة المخفّضة = ألطف، مش صفر — التلاشي
   بيفضل لأنه بيساعد الفهم، والانتقال المكاني هو اللي بيتشال.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .content-section .info-panel li {
    transition-delay: 0s;
  }

  .site-nav a:active {
    transform: none;
  }

  .scene-dots a:active i {
    transform: none;
  }
}


/* #############################################################################
   #  الجزء الثالث — إصلاحات التخطيط (مراجعة بصرية، الجولة ٣)                 #
   ############################################################################# */

/* =============================================================================
   ١٢) الجذر: قصّ المحتوى على الموبايل والتابلت  (≤ 960px)
   -----------------------------------------------------------------------------
   السبب المقاس (مش مشكلة توقيت قياس — مفيش JS بيقيس أي ارتفاع هنا):

     .content-section > .page-width {
       height: 100svh; min-height: 100svh;   ← مسرح بارتفاع ثابت
       position: sticky; top: 0;             ← مثبّت أعلى الشاشة
       padding-block: 92px 82px;             ← @media (max-width:680px)
     }

   الصندوق المتاح = 812 − 92 − 82 = ٦٣٨px، و٩ أقسام من ١٢ محتواها أطول:
       الورش 1467 (+829) · الأهداف 1397 (+759) · لماذا 1222 (+584)
       المكرمون 1049 (+411) · التواصل 867 (+229) · المسابقة 912 (+274)
       اللجنة 854 (+216) · التحكيم 745 (+107) · اللجنة٢ 722 (+84)

   الـ overflow هنا visible، فالزيادة **مش** بتتقص — بتفيض تحت حافة الشاشة.
   وبما إن المسرح مثبّت عند top:0 طول مدى سكرول القسم، الفائض ميطلعش أبدًا.
   الدليل القاطع: روابط التواصل عند أقصى قاع الصفحة بتقع y=839→885 في شاشة
   ارتفاعها 812 ⇒ غير مرئية في أي وضع سكرول (dwell = ٠٪).

   الحل موجود أصلًا في الملف الأصلي لكن معلّق على الإشارة الغلط —
   داخل @media (prefers-reduced-motion: reduce). هنا نطبّقه على العرض.

   ⚠️ مقصود: ده بيلغي تثبيت المشاهد على الموبايل/التابلت. مفيش بديل —
   sticky مع محتوى أطول من الشاشة = الجزء السفلي غير قابل للوصول رياضيًا.
   الديسكتوب (≥961px) مايتغيرش.
   ========================================================================== */
@media (max-width: 960px) {
  .content-section {
    min-height: auto;
  }

  .content-section > .page-width {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;      /* يفضل شاشة كاملة لما المحتوى يسمح */
    justify-content: center;
  }
}

/* =============================================================================
   ١٣) «من نحن» — تكوين صورة + نص  (ديسكتوب فقط ≥ 961px)
   -----------------------------------------------------------------------------
   الوضع قبل: .about-layout بتعلن أصلًا
       grid-template-columns: minmax(0,1.3fr) minmax(290px,0.7fr)
   لكن .content-section > .page-width (تخصيص أعلى: 0,2,0 مقابل 0,1,0) بتفرض
   display:flex; flex-direction:column ⇒ الشبكة معطّلة والعمودان بيتكدّسوا،
   فالمحتوى بيتحشر في ٤٥٪ اليمين ونص الشاشة الشمال يفضل فاضي.

   الصورة: stage-atmosphere.jpg — نفس الملف المستخدم في .hero-image
   (z-index:-3, opacity:.62). الاستخدامان منفصلان تمامًا (عنصر زائف جديد
   مقابل عنصر .hero-image قائم) فمفيش تعارض، **والوزن الإضافي = صفر بايت**
   لأن الهيرو فوق الطية بيحمّلها أصلًا عند فتح الصفحة فتكون مخزّنة مؤقتًا.
   ========================================================================== */
/* عتبة 1100px مش 961px: تحت كده عمود النص بيضيق فيلتف العنوان لسطر زيادة
   (قِسناه: الترويسة 236→269px عند 1024px عرض) وده بيكبّر عجز القسم من
   ٢٠ إلى ٥٣px. فوق 1100px العرض كافٍ ومفيش التفاف إضافي. */
@media (min-width: 1100px) {
  #about > .page-width.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    gap: 34px 54px;
  }

  /* عمود الصورة (شمال في RTL) — يمتد على الصفّين */
  #about > .page-width.about-layout::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 430px;
    /* الصورة داكنة أصلًا (مسرح ليلي)؛ تدرّج خفيف فقط + رفع سطوع
       عشان الضوء المسرحي وأرضية الخشبة يبانوا بدل مستطيل شبه أسود */
    background:
      linear-gradient(180deg, rgba(7, 19, 38, 0.05), rgba(7, 19, 38, 0.38)),
      url(/assets/stage-atmosphere.jpg) 50% / cover no-repeat;
    border: 1px solid var(--line);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
    filter: brightness(1.28) saturate(1.06);
  }

  #about > .page-width.about-layout .section-heading {
    grid-column: 1;
    grid-row: 1;
  }

  /* لوحة الأرقام كانت يتيمة في الركن — دلوقتي شريط تحت النص بعرض العمود */
  #about > .page-width.about-layout .stat-board {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
}

/* =============================================================================
   ١٤) الشركاء — دمج القسمين في شاشة واحدة + إزالة التكرار
   -----------------------------------------------------------------------------
   التكرار مؤكد من الـ DOM (نص مطابق حرفيًا):
     #partners          : <p>«رعاية رسمية دائمة»   و <h3>«رعاية رسمية دائمة»
     #partners-success  : <h2>«شركاء نجاح وثقوا…»  و <h3>«شركاء نجاح وثقوا…»

   وقبل التعديل القسمان 1665px لكل واحد = 3330px ≈ ٣.٧ شاشة، وكمان
   الصورتان بلا سقف ارتفاع (max-height:none) فبتفيضا حتى على الديسكتوب:
     partners 1113 مقابل 706 متاح (+407) · partners-success 986 (+280)

   ملاحظة: وضوح اللوجوهات نفسه لا يمكن حله من CSS — الشبكة كلها ملف PNG
   مسطّح واحد 1024×768 بنص مطبوع جواه، متمدّد لـ1026px عرض. في انتظار
   ملفات اللوجوهات المنفردة لبناء شبكة HTML حقيقية.
   ========================================================================== */

/* النص المكرر — يتشال في كل المقاسات */
#partners .partner-stack h3,
#partners-success .partner-stack h3 {
  display: none;
}

/* «شركاؤنا» مكررة كـ eyebrow في القسمين المتتاليين — نكتفي بواحدة */
#partners-success .section-heading .eyebrow {
  display: none;
}

@media (min-width: 961px) {
  /* القسمان يرجعوا لتدفّق طبيعي مضغوط بدل مسرحين ثابتين بـ185vh لكل واحد */
  #partners,
  #partners-success {
    min-height: auto;
  }

  /* النص جنب الصورة بدل ما يكون فوقها: ده بينصّف ارتفاع كل قسم من غير
     ما نضطر نصغّر اللوجوهات. تكديس رأسي كان بيدي 541+507=1048px
     (أكبر من الشاشة)؛ الصف الأفقي بيوصّلهم ~660px مع صورة أكبر. */
  #partners > .page-width,
  #partners-success > .page-width {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding-block: 22px 14px;

    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    justify-content: stretch;
    gap: 30px;
  }

  #partners > .page-width > .section-heading,
  #partners-success > .page-width > .section-heading {
    grid-column: 1;
  }

  #partners > .page-width > .partner-stack,
  #partners-success > .page-width > .partner-stack {
    grid-column: 2;
  }

  #partners .partner-stack img,
  #partners-success .partner-stack img {
    max-height: min(320px, 34vh);
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    display: block;
    object-fit: contain;
  }

  /* عنوان أصغر للقسم التاني: القصة واحدة، مش عنوانين متساويين */
  #partners-success .section-heading h2 {
    font-size: clamp(24px, 2.2vw, 34px);
  }

  #partners .section-heading h2 {
    font-size: clamp(26px, 2.6vw, 40px);
  }

  #partners .section-heading p,
  #partners-success .section-heading p {
    margin-top: 10px;
  }
}

/* على الموبايل/التابلت القسمان قصيران أصلًا (567px لكل واحد) فيكفي
   سقف ارتفاع يمنع الصورة من ابتلاع الشاشة */
@media (max-width: 960px) {
  #partners .partner-stack img,
  #partners-success .partner-stack img {
    max-height: 46vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    display: block;
    object-fit: contain;
  }
}