/* ============================================================
   إصلاحات عرض موزات — تُحمّل على index.html و index-ar.html
   (1) توحيد أبعاد صور الكاروسيل على كل الأجهزة
   (2) كاروسيل بتقنية CSS Scroll Snap (تمرير أصلي متوافق مع كل نظام)
   (3) توحيد ارتفاع كروت قسم «وسائط / Media»
   ============================================================ */


/* ============================================================
   (1) توحيد أبعاد صور الكاروسيل
   (مقدمة موزات #slider-services + حول موزات #slider)
   على iPhone / iPad / Android / Desktop — نفس الكرت الموحّد بالظبط،
   الصورة دايمًا في المنتصف. نستخدم !important لتجاوز المقاس الثابت
   المكتوب inline في بعض الصور.
   ============================================================ */
#slider-services > div,
#slider > div {
  box-sizing: border-box;
}

#slider-services > div > img,
#slider > div > img {
  /* عرض الصورة أضيق شوية من الكرت عشان تفضل مسافة (gutter) حواليها،
     فتبان الصور متباعدة زي الموقع المباشر بدل ما تكون ملتصقة.
     24px إجمالي (12px كل جنب) => المسافة بين كل صورتين متجاورتين = 24px. */
  width: calc(100% - 24px) !important;
  height: auto !important;
  aspect-ratio: 358 / 450 !important;       /* نسبة الكرت الموحّدة */
  object-fit: cover !important;
  object-position: center center !important; /* الصورة دايمًا في المنتصف */
  display: block !important;
  margin: 0 auto !important;                 /* توسيط الصورة داخل الكرت */
  max-width: calc(100% - 24px) !important;
  border-radius: 20px !important;
}

@supports not (aspect-ratio: 1 / 1) {
  #slider-services > div > img,
  #slider > div > img { height: auto !important; }
}


/* ============================================================
   (2) كاروسيل CSS Scroll Snap — تمرير أفقي أصلي من المتصفح
   الكلاسات (mz-snap-*) بيضيفها carousal.js على الحاوية/الشريط/الصور.
   الفايدة: نفس السلوك بالظبط على كل الأنظمة، السحب باللمس والتراك باد
   native بدون كود، وكل صورة تقف كاملة في المنتصف (ما تقف في النص).
   ============================================================ */

/* الحاوية = منطقة التمرير */
.mz-snap-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;  /* تمرير سلس بالزخم على iOS */
  scrollbar-width: none;              /* إخفاء شريط التمرير - Firefox */
  -ms-overflow-style: none;           /* إخفاء شريط التمرير - Edge قديم */
  overscroll-behavior-x: contain;     /* يمنع سحب الصفحة كلها وقت التمرير الأفقي */
}
/* إخفاء شريط التمرير - Chrome / Safari */
.mz-snap-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* الشريط: صف مرن، بدون أي transform (اللي كان بيحرّكه في النسخة القديمة).
   نصفّر فجوة الفليكس المتغيّرة (lg:gap-1/md:gap-6/gap-2) عشان تكون المسافة
   بين الصور موحّدة على كل المقاسات وجايّة فقط من الفراغ حوالين الصورة. */
.mz-snap-track {
  transform: none !important;
  transition: none !important;
  gap: 0 !important;
}

/* كل صورة تتمركز لوحدها وتقف كاملة */
.mz-snap-slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}


/* ============================================================
   (3) قسم «وسائط / Media»: توحيد ارتفاع الكروت الثلاثة على كل الأجهزة.
   التواريخ الطويلة كانت تلفّ أسطر مختلفة على عرض الآيباد الضيّق فيطلع
   كل كرت بارتفاع مختلف. الحل: الكروت تتمدّد لنفس الارتفاع، وصف الموقع
   (Riyadh) يلتصق بأسفل كل كرت.
   ============================================================ */
#media > #media-heading > div:last-child {
  align-items: stretch;
}
#media > #media-heading > div:last-child > div {
  display: flex;
}
#media > #media-heading > div:last-child > div > a {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#media > #media-heading > div:last-child > div > a > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
#media > #media-heading > div:last-child > div > a > div > div:last-child {
  margin-top: auto;
}