/* ==========================================================
   إصلاح تجاوب هيدر الصفحة الرئيسية (سلايدر البانرات) مع الجوال
   خاص بصفحة كلية جازان التقنية فقط (default.aspx)

   المشكلة الأصلية: القاعدة .collage__home في الملف المشترك
   college.css تضع "height: 100vh" و"min-height: 700px" ثابتتين
   بدون أي تصغير على الشاشات الصغيرة، فتغطي صورة الهيدر الشاشة
   بالكامل (أو أكثر) على الجوال.

   صور البانرات (Banner_1.png وغيرها) نسبة عرضها إلى ارتفاعها
   الحقيقية 4267×2201 (أي 1.939:1 تقريبًا)، وتحمل نصًا/شعارًا داخل
   الصورة نفسها. لذلك بدل استخدام ارتفاع ثابت اعتباطي (كان يترك إما
   قصًا سيئًا للصورة مع object-fit:cover، أو مساحة فارغة كبيرة أسفلها
   مع object-fit:contain)، الحل الصحيح هو جعل حاوية الهيدر تأخذ بالضبط
   نفس نسبة عرض الصورة إلى ارتفاعها عبر "aspect-ratio"، فتُصبح الحاوية
   بحجم الصورة تمامًا بلا أي مساحة زائدة ولا أي قص، على أي عرض شاشة.

   تنبيه: بحساب aspect-ratio، يصبح ارتفاع الحاوية على الجوال أقصر من
   ارتفاع القائمة العلوية الثابتة (header، تصل إلى 244px قِسته فعليًا)،
   فتختفي الحاوية بالكامل خلفها. لذلك أضفنا "margin-top" بارتفاع
   القائمة العلوية بالضبط في كل نقطة توقف، لدفع الحاوية لتبدأ مباشرة
   أسفل القائمة العلوية بدل الاختفاء خلفها، مع بقاء حجمها مطابقًا
   للصورة تمامًا كما هو مطلوب.
   ========================================================== */

/* ==========================================================
   توسيع حل aspect-ratio (المُطبَّق أصلًا على الجوال فقط) ليشمل كل
   أحجام الشاشات بما فيها الحاسوب. السبب: آلية college.css الأصلية
   على الحاسوب (height:100vh + transform:scale(1.17) على الشريحة
   النشطة لإنتاج تأثير حركة + object-fit:cover) تعتمد على Slick
   لإعادة حساب عرض كل شريحة بالبكسل عند تغيّر حجم النافذة - وهذا
   لا يحدث بالسرعة/الموثوقية الكافية أثناء سحب حافة المتصفح فعليًا
   (تأكّد بالاختبار وبتقارير المستخدم)، فتخرج الصورة المكبّرة عن
   حدود الهيدر بشكل متكرر ولا يمكن إصلاحه بموثوقية طالما بقينا
   نعتمد على تلك الآلية. الحل الجذري: عدم استخدامها إطلاقًا - نفس
   أسلوب aspect-ratio (CSS بحت، لا يعتمد على Slick أو أي JS) في كل
   مكان، فيعاد حساب الحجم فورًا مع أي تغيّر لعرض النافذة دون أي
   تأخير ممكن.

   تنبيه: هذا يُغيّر شكل الهيدر على الحاسوب - بدل ملء ارتفاع الشاشة
   بالكامل (100vh)، يأخذ ارتفاعًا يطابق نسبة عرض/ارتفاع صورة
   البانر فقط (4267×2201) - تغيير مقصود ومتفَّق عليه.

   ارتفاع الهيدر الثابت (position:fixed) نفسه يتغيّر بين نقاط توقف
   الموقع الداخلية (137px على الحاسوب الواسع، ~187px عند التوقفات
   المتوسطة، 177/244px على الجوال) وبشكل غير منتظم تمامًا حسب
   قياساتنا الفعلية - فبدل تخمين قيمة margin-top لكل نقطة توقف (ما
   قد يخطئ فيها التوقيت أيضًا)، نقيس ارتفاع الهيدر الحقيقي مباشرة من
   الـDOM عبر logo-link.js (بنفس أسلوب --jzct-hero-bg-height) ونضعه
   في المتغيّر --jzct-header-height، ونستخدمه هنا مباشرة.
   ========================================================== */

/* حاوية الهيدر الرئيسية (صورة/سلايدر البانر الكبير أعلى الصفحة) */
.collage__home {
  /* نخفي أي جزء من المحتوى الداخلي يتجاوز حدود هذه الحاوية (مثل الصورة المكبّرة بتأثير الحركة) */
  overflow: hidden;
  /* نلغي الارتفاع الثابت الأصلي (100vh) ونجعله يُحسب تلقائيًا حسب المحتوى/النسبة أدناه */
  height: auto;
  /* نلغي الحد الأدنى للارتفاع الأصلي (700px) حتى لا يفرض ارتفاعًا أكبر من المطلوب */
  min-height: 0;
  /* نلغي أي حد أقصى للارتفاع قد يكون موروثًا من مكان آخر */
  max-height: none;
  /* نجعل نسبة عرض الحاوية إلى ارتفاعها مطابقة تمامًا لنسبة أبعاد صورة البانر الحقيقية */
  aspect-ratio: 4267 / 2201;
  /* نضع مسافة من الأعلى تساوي ارتفاع الهيدر الثابت الحقيقي (مقاسة ديناميكيًا)، وإلا نستخدم 137px احتياطيًا إن لم يُحسب المتغيّر بعد */
  margin-top: var(--jzct-header-height, 137px);
}

/* صورة الشريحة داخل السلايدر (كل شريحة من شرائح البانر) */
.collage__home .home__slider .home__slider__list .slider__item .slider__item__content .slider__img__main .slider__img {
  /* نعرض الصورة كاملة دون أي قص، بما يناسب حجم الحاوية المضبوط بدقة أعلاه */
  object-fit: contain;
}

/* عند الشاشات الصغيرة والمتوسطة (بعرض 991px أو أقل) */
@media (max-width: 991px) {
  /* عنوان الشريحة الرئيسي (h1) داخل نص caption__slider */
  .collage__home .home__slider .caption__slider .caption__slider__container .caption__slider__list .caption__slider__item h1 {
    /* نصغّر حجم خط العنوان ليناسب المساحة الأصغر */
    font-size: 1.5rem;
  }
}

/* ==========================================================
   إخفاء "الوميض الأبيض" الذي يظهر فوق الهيدر عند سحب الصفحة
   للأسفل لتحديثها (iOS). الهيدر ثابت (position:fixed)، وخلفية
   الصفحة (html/body) بيضاء مائلة بدل التيل المطابق لخلفية
   caption__slider، فيظهر هذا الأبيض فوق الهيدر أثناء السحب
   المطاطي. الحل: تدرّج لوني على خلفية html وbody يطابق التيل
   بارتفاع الهيدر + caption__slider (يُقاس فعليًا من الـDOM عبر
   logo-link.js ويُوضع في المتغيّر --jzct-hero-bg-height) ثم يتحول
   للون الأصلي - وبما أن خلفية html/body لا تتحرك أصلًا أثناء
   السحب المطاطي في iOS، يبقى هذا الشريط بلون التيل مهما استمر
   السحب.

   ملاحظة 1: جُرِّب إزالة background-attachment:fixed بالكامل بعد
   الاشتباه بأنه سبب اختفاء نص زر "عرض المزيد" عند المرور عليه،
   لكن المشكلة استمرت رغم إزالته تمامًا - أي أن هذه القاعدة ليست
   السبب فعليًا، فأُعيدت كما كانت.

   ملاحظة 2: كانت القاعدة مقيَّدة بعرض الشاشة فقط (max-width:991px)،
   وهذا يشمل أيضًا نوافذ متصفح حاسوب مصغّرة (لا علاقة لها بالسحب
   المطاطي إطلاقًا، وهي ظاهرة خاصة باللمس على iOS فقط). أدّى هذا
   لظهور اللون الأخضر فوق خلفيات أدوات أخرى في الصفحة عند التمرير
   على نوافذ حاسوب صغيرة تحديدًا. الحل: تقييد القاعدة أيضًا بشرط
   "الجهاز يعمل باللمس" (pointer:coarse وhover:none) بجانب شرط
   العرض، فلا تُطبَّق إطلاقًا على أي متصفح حاسوب (بغض النظر عن عرض
   نافذته)، وتبقى مقتصرة على الجوال/التابلت الحقيقيين فقط.
   ========================================================== */

/* عند الشاشات الصغيرة والمتوسطة (991px أو أقل) وعلى أجهزة اللمس فقط (لا تنطبق على أي متصفح حاسوب مهما صغر عرض نافذته) */
@media (max-width: 991px) and (hover: none) and (pointer: coarse) {
  /* عنصر الصفحة الجذري بالكامل */
  html {
    /* تدرّج لوني: تيل من الأعلى حتى ارتفاع الهيدر المحسوب، ثم يتحول للون الخلفية الأصلي بعدها، بلا تكرار */
    background: linear-gradient(to bottom, rgb(31, 187, 180) var(--jzct-hero-bg-height, 480px), rgb(247, 252, 251) var(--jzct-hero-bg-height, 480px)) no-repeat;
    /* نُثبّت هذه الخلفية بالنسبة للنافذة (لا تتحرك مع محتوى الصفحة) حتى تبقى ظاهرة أثناء السحب المطاطي */
    background-attachment: fixed;
  }

  /* عنصر جسم الصفحة */
  body {
    /* نفس التدرّج اللوني بالضبط، مكرّر هنا لأن بعض المتصفحات تعتمد على خلفية body وليس html أثناء السحب المطاطي */
    background: linear-gradient(to bottom, rgb(31, 187, 180) var(--jzct-hero-bg-height, 480px), rgb(247, 252, 251) var(--jzct-hero-bg-height, 480px)) no-repeat;
    /* نفس التثبيت بالنسبة للنافذة */
    background-attachment: fixed;
  }
}

/* ==========================================================
   رفع زر "عرض المزيد" ونقاط التنقل (slick-dots) عن الحافة السفلية
   لصورة الهيدر - كانا يلامسانها أو يظهران خارجها تقريبًا. المحاولة
   الأولى استخدمت margin-top ثابت على .slick-dots للجوال فقط، لكن
   نفس المشكلة تظهر على كل مقاسات الشاشات (الحاسوب أيضًا) لأن سببها
   الحقيقي أن .caption__slider يستخدم "align-items: center" لتوسيط
   محتواه (العنوان + الوصف + الزر + النقاط) رأسيًا داخل الهيدر بارتفاع
   متغيّر - فكلما قصر ارتفاع الهيدر نسبةً لطول المحتوى، اقترب أسفل
   المحتوى (النقاط) من حافة الصورة السفلية.

   الحل العام (يعمل على أي حجم شاشة دون تخمين أرقام لكل نقطة توقف):
   إضافة padding-bottom لحاوية المحتوى المُوسَّطة - هذا "يُثقّل"
   صندوقها من الأسفل فقط، فيدفعه التوسيط الرأسي لأعلى تلقائيًا
   بمقدار نصف هذا الـpadding، تاركًا مسافة فارغة دائمة أسفل النقاط
   مهما كان ارتفاع الهيدر.
   ========================================================== */

/* حاوية محتوى الشريحة (العنوان + الوصف + الزر + النقاط) داخل caption__slider */
.collage__home .home__slider .caption__slider .caption__slider__container {
  /* نضيف حشوًا فارغًا أسفل هذه الحاوية، فيدفعها التوسيط الرأسي لأعلى قليلًا تلقائيًا (على الحاسوب) */
  padding-bottom: 48px;
}

/* عند الشاشات الصغيرة (768px أو أقل) */
@media (max-width: 768px) {
  .collage__home .home__slider .caption__slider .caption__slider__container {
    /* حشو أكبر قليلًا على الجوال، لأن ارتفاع الهيدر هناك أقصر نسبيًا فيحتاج دفعًا أكبر */
    padding-bottom: 56px;
  }
}

/* عند الجوالات الصغيرة جدًا (480px أو أقل) */
@media (max-width: 480px) {
  .collage__home .home__slider .caption__slider .caption__slider__container {
    /* حشو أكبر أيضًا لنفس السبب، مضبوط خصيصًا لهذا الحجم الصغير جدًا */
    padding-bottom: 70px;
  }
}

/* ==========================================================
   تصغير زر "عرض المزيد" تدريجيًا على الشاشات الأصغر - كان بحجم
   ثابت (46px ارتفاع، 200px أدنى عرض) على كل المقاسات، فيبدو كبيرًا
   نسبةً لصورة الهيدر المصغّرة على الجوال
   ========================================================== */

/* عند الشاشات الصغيرة والمتوسطة (991px أو أقل) */
@media (max-width: 991px) {
  /* رابط زر "عرض المزيد" داخل كل شريحة */
  .collage__home .home__slider .caption__slider .caption__slider__container .caption__slider__list .caption__slider__item a {
    /* أقل عرض ممكن للزر (بدل 200px الأصلية) */
    min-width: 150px;
    /* ارتفاع الزر (بدل 46px الأصلي) */
    height: 38px;
    /* ارتفاع سطر النص داخل الزر، ليتوسّط رأسيًا مع الارتفاع الجديد */
    line-height: 24px;
    /* حجم خط النص داخل الزر */
    font-size: 0.85rem;
  }
}

/* عند الشاشات الصغيرة (768px أو أقل) */
@media (max-width: 768px) {
  .collage__home .home__slider .caption__slider .caption__slider__container .caption__slider__list .caption__slider__item a {
    /* أقل عرض أصغر أكثر لملاءمة الجوال */
    min-width: 110px;
    /* ارتفاع أصغر للزر */
    height: 30px;
    /* ارتفاع سطر متناسب مع الارتفاع الجديد الأصغر */
    line-height: 18px;
    /* حجم خط أصغر */
    font-size: 0.75rem;
    /* حشو داخلي أصغر (أعلى/أسفل، يمين/يسار) يناسب الحجم المصغّر */
    padding: 0.3rem 0.7rem;
  }
}

/* عند الجوالات الصغيرة جدًا (480px أو أقل) */
@media (max-width: 480px) {
  .collage__home .home__slider .caption__slider .caption__slider__container .caption__slider__list .caption__slider__item a {
    /* أصغر عرض ممكن للزر */
    min-width: 95px;
    /* أصغر ارتفاع للزر */
    height: 26px;
    /* ارتفاع سطر متناسب مع هذا الارتفاع الأصغر جدًا */
    line-height: 16px;
    /* أصغر حجم خط */
    font-size: 0.7rem;
    /* أصغر حشو داخلي */
    padding: 0.25rem 0.6rem;
  }
}

/* ==========================================================
   توسيط نقاط التنقل (slick-dots) تحت زر "عرض المزيد" - كانت
   القائمة تمتد بعرض الحاوية بالكامل (width:100%) فتظهر مساحتها
   ممركزة في منتصف الحاوية، وليس تحت الزر نفسه (الذي يقع عند حافة
   الحاوية وليس منتصفها). حل ذلك: نجعل القائمة تنكمش على حجم
   محتواها (auto بدل 100%) وتصبح inline-flex بدل flex، فتخضع حينها
   لنفس محاذاة النص (text-align) في الحاوية الأصلية - وهي نفس
   المحاذاة التي يخضع لها الزر تلقائيًا، فتتطابق مراكزهما.
   ========================================================== */

/* قائمة نقاط التنقل (slick-dots) الخاصة بسلايدر الهيدر تحديدًا */
.collage__home .slick-dots {
  /* نجعل عرض القائمة يتقلّص ليطابق حجم محتواها فقط (بدل امتدادها لعرض الحاوية بالكامل) */
  width: auto;
  /* نجعلها صندوق مرن (flex) لكنه سطري (inline)، فيخضع لمحاذاة النص المطبَّقة على العنصر الأب */
  display: inline-flex;
}

/* على الجوال فقط: نقاط أصغر وأقرب للزر (كانت بنفس حجم الحاسوب
   وبمسافة كبيرة أعلاها من القاعدة المشتركة margin:32px 0). النقطة
   النشطة (slick-active) مستثناة من هذا التصغير الدائري لأن لها
   شكلًا مختلفًا (قرص بيضاوي عريض) في college.css - استُبعدت هنا
   بـ ":not(.slick-active)" مع تصغير مكافئ لها بنفس النسبة على حدة،
   حتى لا يطغى تصغير النقاط العادية عليها ويفقدها شكلها البيضاوي. */
/* عند الشاشات الصغيرة (768px أو أقل) */
@media (max-width: 768px) {
  .collage__home .slick-dots {
    /* مسافة صغيرة جدًا أعلى صف النقاط (بدل 32px الأصلية)، لتقريبها من الزر */
    margin: 10px 0 0;
  }

  /* كل نقطة عادية (غير النشطة) داخل صف النقاط */
  .collage__home .slick-dots li:not(.slick-active) button {
    /* عرض دائرة صغير (بدل 14px الأصلي)، مع !important لتجاوز القاعدة المشتركة الأقوى تحديدًا */
    width: 10px !important;
    /* ارتفاع مطابق للعرض، لتبقى دائرية الشكل تمامًا */
    height: 10px !important;
  }

  /* النقطة النشطة تحديدًا (التي تمثّل الشريحة الظاهرة حاليًا) */
  .collage__home .slick-dots li.slick-active button {
    /* عرض أكبر بيضاوي الشكل (بدل 40px الأصلي)، يميّزها عن باقي النقاط الدائرية */
    width: 28px !important;
    /* نفس الارتفاع الصغير للنقاط العادية، فيبقى الشكل بيضاويًا لا دائريًا */
    height: 10px !important;
  }
}

/* ==========================================================
   تصغير ارتفاع بطاقة الإحصائيات (statistics__home__container)
   على الشاشات الصغيرة - كانت ثابتة 180px بغض النظر عن حجم الشاشة
   ========================================================== */

/* عند الشاشات الصغيرة (768px أو أقل) */
@media (max-width: 768px) {
  /* حاوية قسم الإحصائيات بالكامل (الشريط الأبيض العائم فوق الهيدر) */
  .statistics__home {
    /* نرفعها قليلًا للأعلى (تراكب أكبر فوق حافة الهيدر) */
    top: -20px;
  }

  /* الصندوق الأبيض الداخلي لبطاقة الإحصائيات */
  .statistics__home .container .statistics__home__container {
    /* ارتفاع أصغر (بدل 180px الأصلي) يناسب الجوال */
    height: 130px;
  }

  /* أيقونة كل عنصر إحصائي (صورة صغيرة بجانب الرقم) */
  .statistics__home .container .statistics__home__container .statistics__list .statistics__list__item .statistics__item .statistics__item__container .statistics__item__icon img {
    /* عرض أصغر للأيقونة */
    width: 50px;
    /* ارتفاع أصغر مطابق للعرض */
    height: 50px;
  }
}

/* عند الجوالات الصغيرة جدًا (480px أو أقل) */
@media (max-width: 480px) {
  .statistics__home {
    /* رفع أقل قليلًا من نقطة التوقف السابقة، يناسب الشاشة الأصغر */
    top: -10px;
  }

  .statistics__home .container .statistics__home__container {
    /* ارتفاع أصغر أكثر */
    height: 110px;
    /* حشو داخلي (أعلى/أسفل، يمين/يسار) أصغر يناسب الحجم المصغّر */
    padding: 12px 16px;
  }

  .statistics__home .container .statistics__home__container .statistics__list .statistics__list__item .statistics__item .statistics__item__container .statistics__item__icon img {
    /* عرض أيقونة أصغر */
    width: 40px;
    /* ارتفاع مطابق للعرض */
    height: 40px;
  }
}

/* ==========================================================
   تقليل المسافة أعلى قسم "بوابات الكلية" (WPQ4) على كل أحجام
   الشاشات - كانت padding-top ثابتة 180px (مصمَّمة أصلاً لتناسب
   الهيدر الطويل قبل التصغير)
   ========================================================== */

/* قسم "بوابات الكلية" الأصلي في الصفحة (منطقة/زون SharePoint باسم WPQ4) */
.colleges__gates {
  /* إزالة المسافة الفارغة أعلى القسم بالكامل، على كل أحجام الشاشات افتراضيًا */
  padding-top: 0px;
}

/* عند الجوالات الصغيرة جدًا (480px أو أقل) */
@media (max-width: 480px) {
  .colleges__gates {
    /* تأكيد إضافي لنفس القيمة (صفر) لهذا الحجم تحديدًا */
    padding-top: 0px;
  }
}

/* ==========================================================
   إصلاح اختفاء نص زر "عرض المزيد" (btn-white) عند المرور بالمؤشر
   في caption__slider - القاعدة المشتركة .btn في college.css تطبّق
   transition: all 0.3s على كل الخصائص معًا، فيتحوّل لون النص
   ولون الخلفية في نفس الوقت وبنفس المدة، لكن بالاتجاه المعاكس
   تمامًا لبعضهما (النص من تيل إلى أبيض، الخلفية من أبيض إلى تيل).
   رياضيًا، في منتصف مدة الانتقال يتساوى اللونان تمامًا فيختفي النص
   تمامًا للحظة قبل أن يعود التباين الصحيح - وهذا ما يظهر كزر أخضر
   بالكامل بلا نص. الحل: تغيير لون النص فورًا (بلا أي مدة انتقال)
   بينما تبقى خلفية الزر وحدها تتحول تدريجيًا، فلا يتقاطع اللونان
   في أي لحظة.
   ========================================================== */

/* زر "عرض المزيد" في حالته العادية (غير مُمرّر عليه بالمؤشر) */
.btn-white {
  /* نُحدِّد أن لون الخلفية فقط هو ما يتحول تدريجيًا خلال 0.3 ثانية (وليس كل الخصائص معًا كما في القاعدة الأصلية) */
  transition: background-color 0.3s ease-in;
  /* نُلغي أي حركة (animation) قد تُطبَّق على هذا الزر من قواعد أخرى في الموقع، لمنع أي تعارض بصري */
  animation: none !important;
  /* نُثبّت الزر على طبقة رسومية منفصلة (GPU) لمنع أي خلل تركيب بصري أثناء الانتقال */
  transform: translateZ(0);
  /* نخفي الوجه الخلفي للعنصر (إجراء تقني إضافي لتثبيت الطبقة الرسومية بشكل صحيح) */
  backface-visibility: hidden;
  /* نُخبر المتصفح مسبقًا أن لون الخلفية سيتغيّر، ليُحسِّن أداء الرسم لهذا التغيير تحديدًا */
  will-change: background-color;
}

/* زر "عرض المزيد" أثناء مرور مؤشر الفأرة فوقه */
.btn-white:hover {
  /* نكرر نفس قاعدة الانتقال: الخلفية تتدرّج خلال 0.3 ثانية، ولون النص يتغيّر فورًا (0 ثانية، أي بلا أي تدرّج) */
  transition: background-color 0.3s ease-in, color 0s;
  /* نفرض لون النص الأبيض فورًا عند المرور، بأولوية قصوى (!important) تتجاوز أي قاعدة أخرى */
  color: #fff !important;
}

/* ==========================================================
   إبطال قابلية النقر على شرائح caption__slider غير الظاهرة حاليًا
   - تحققت فعليًا: كل شرائح caption__slider (النشطة وغير النشطة)
   تتموضع في نفس المكان بالضبط فوق بعضها (تأثير "fade")، والشرائح
   غير النشطة تختفي فقط عبر opacity:0 دون أي تعطيل لقابلية النقر
   (pointer-events تبقى auto) - فإذا كانت شريحة أخرى (غير الظاهرة
   حاليًا) تحمل رابطًا في زرها "عرض المزيد"، يبقى ذلك الرابط قابلًا
   للنقر فوق الشريحة الظاهرة فعليًا، رغم عدم ظهور أي زر مرئيًا. الحل:
   تعطيل قابلية النقر تمامًا لأي شريحة ليست هي الشريحة النشطة/الحالية.
   ========================================================== */

/* أي شريحة داخل caption__slider ليست هي الشريحة النشطة أو الحالية حاليًا */
.collage__home .caption__slider__item:not(.slick-active):not(.slick-current) {
  /* نمنع تمامًا أي تفاعل (نقر/مرور) مع محتوى هذه الشريحة المخفية، حتى لا تسرق نقرات مقصودة للشريحة الظاهرة فعليًا */
  pointer-events: none;
}

/* ==========================================================
   إصلاح توسيط عنوان بطاقات "بوابات الكلية" (CollegeGate) عند
   التفاف النص لسطرين - السطر الأول يتوسّط بشكل صحيح، لكن السطر
   الأخير لا يتّبع نفس التوسيط في بعض المتصفحات رغم text-align:
   center (خلل معروف مع النصوص العربية الملتفة). الحل: text-align-
   last تتحكّم تحديدًا في محاذاة آخر سطر من النص.

   ملاحظة 1: القاعدة الأولى استخدمت ".colleges__gates .card .title"
   بافتراض أن أداة CollegeGate (.bg-wrapper/.card) تقع داخل قسم
   ".colleges__gates" - لكن تحقّقت فعليًا من شجرة DOM الحية ووجدت
   أنها ويب بارت منفصل تمامًا لا علاقة له بذلك القسم إطلاقًا (رغم
   تشابه العنوان الظاهر "بوابات الكلية")، فلم تُطبَّق القاعدة أبدًا.
   الأصل الصحيح المؤكد هو ".bg-wrapper".

   ملاحظة 2: بعد تصحيح النطاق، جُرِّبت text-align-last: center (مع
   إضافة direction:rtl وunicode-bidi:plaintext أيضًا كمحاولة أقوى)
   ولم تنجح إطلاقًا - تحققت بلقطات شاشة حقيقية متكررة وبقي السطر
   الأخير ملتصقًا باليمين تمامًا كما كان (خلل معروف في Chrome مع
   محاذاة آخر سطر لنص عربي ملتف قصير مثل "(رايات)"). الحل الفعلي:
   استخدام flexbox بدل خصائص محاذاة النص - يعتمد على تخطيط الصندوق
   بدل منطق محاذاة السطور الداخلي المُصاب بالخلل، فيصبح عرض العنصر
   بحجم أطول سطر بالضبط (بدل امتداده لعرض البطاقة كاملة)، ويُوسَّط
   هذا الصندوق نفسه داخل البطاقة - فيتوسّط كل سطر تلقائيًا بصريًا.
   ========================================================== */

/* عنوان كل بطاقة داخل أداة "بوابات الكلية" (CollegeGate) - تبيّن لاحقًا أنها أداة غير مستخدمة فعليًا، انظر الملاحظة أدناه */
.bg-wrapper .card .title {
  /* نجعل هذا العنصر صندوقًا مرنًا (flex) بدل صندوق نص عادي */
  display: flex;
  /* نرتّب محتواه (أسطر النص) عموديًا واحدًا فوق الآخر */
  flex-direction: column;
  /* نُوسِّط كل سطر أفقيًا داخل هذا الصندوق المرن */
  align-items: center;
}

/* ==========================================================
   تصحيح مهم: القاعدة أعلاه (.bg-wrapper .card .title) تستهدف أداة
   غير ذات صلة بما يظهر فعليًا للمستخدم. فحصت DevTools على جهاز
   المستخدم مباشرة ووجدت أن أداة "بوابات الكلية" المعروضة فعليًا هي
   عنصر مختلف كليًا وبنية HTML مختلفة تمامًا:
   .colleges__gates > ... > ul.gates__list > li.gates__list__item >
   a.gates__item > h4 (العنوان)
   - وليس ".bg-wrapper .card .title" كما افترضت سابقًا.

   السبب الحقيقي هنا مختلف أيضًا: h4 لا يملك أي text-align صريح في
   college.css فيرث القيمة الافتراضية "right" من اتجاه الصفحة RTL.
   بما أن العنصر الأب (.gates__item) نفسه flex column مع
   align-items:center بالفعل (بخلاف الحالة السابقة)، فصندوق h4
   مُوسَّط أصلاً - يكفي فقط تغيير محاذاة النص داخله من "right" إلى
   "center" ليتوسّط كل سطر بداخله بشكل صحيح.
   ========================================================== */

/* عنوان (h4) كل بطاقة في أداة "بوابات الكلية" الحقيقية المعروضة فعليًا للمستخدم */
.colleges__gates .gates__list__container .gates__list .gates__list__item .gates__item h4 {
  /* نغيّر محاذاة النص من "يمين" (الافتراضية الموروثة من اتجاه الصفحة) إلى "توسيط"، فيتوسّط كل سطر بما فيه الأخير */
  text-align: center;
}