/* قسم "الميديا/Media" (بطاقات المعارض): js/media-marquee.js بيكرر البطاقات مرة واحدة
   إضافية دايمًا (النسخة المكرَّرة عليها class="media-card-dup") — القرار في "تتشاف ولا
   لأ" بالكامل هنا في الـCSS، مش في الجافاسكريبت، عشان يفضل صح مهما كان عرض الشاشة لحظة
   تحميل الصفحة. الحركة نفسها (transform) بتتطبّق مباشرة من js/media-marquee.js عن طريق
   requestAnimationFrame — مفيش @keyframes/animation هنا خالص، عشان اللوب يبقى نفسه بالظبط
   في كل المتصفحات (كروم/إيدج/أي حد) بدل ما يعتمد على تطبيق كل متصفح لإعادة تشغيل الحركة
   اللانهائية. على الجوال: النسخة المكرَّرة مخفية تمامًا، والأصلية تفضل شكلها الطبيعي
   (بطاقات تحت بعض، من غير أي حركة). */
.media-card-dup {
  display: none;
}
@media (min-width: 768px) {
  .media-marquee {
    overflow: hidden;
    direction: ltr;
  }
  .media-track {
    flex-wrap: nowrap !important;
    width: max-content;
    will-change: transform;
    /* لازم ثابت LTR حتى في الصفحة العربية — الصف بيتحول لعرض عريض جدًا (كل الكروت
       متجاورة)، ولو سيبناه يورث اتجاه rtl من الصفحة، المتصفح بيحط الفائض على شمال
       الصندوق المرئي بدل يمينه فيبوّظ حساب الحركة بالكامل ويمنع اللوب من الاستمرار
       (وده السبب اللي كان بيخلي الشريط في الصفحة العربية يوقف بدل ما يلف). */
    direction: ltr;
  }
  .media-track > div {
    width: 380px !important;
    flex: 0 0 380px;
  }
  .media-card-dup {
    display: block;
  }
}

/* توحيد ارتفاع كل الكروت — على الجوال (تحت بعض) وعلى الشريط المتحرك بنفس الطريقة — بغض
   النظر عن طول اسم المعرض أو حجم شاشة الجهاز (آيفون/سامسونج/أي جوال تاني). الصورة أصلًا
   ثابتة الارتفاع (h-36 + object-cover)، والجزء المتغيّر الوحيد هو عنوان المعرض؛ نحجز له
   ارتفاع ثابت لسطرين دايمًا (حتى لو عنوانه سطر واحد بس)، وأي عنوان أطول من سطرين بيتقص
   بثلاث نقاط بدل ما يزوّد ارتفاع الكارت. */
.media-track h4 {
  min-height: 2.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .media-track h4 { min-height: 3.1rem; }
}