/* ==========================================================================
   سلايدر الصور في القسم الرئيسي (#section-hero)
   الصور الفعلية المُدارة من لوحة التحكم (uploads/sliders)، بتلاشي متبادل
   (crossfade) بدل الاعتماد على مكتبة jarallax التي تدعم صورة واحدة فقط لكل
   حاوية (تلتقط أول .jarallax-img عبر querySelector وتتجاهل الباقي).
   ========================================================================== */

#section-hero {
    position: relative;
    overflow: hidden;
    /* ارتفاع مستقل عن محتوى النص (كله absolute) حتى لا ينهار القسم */
    min-height: 100vh;
    height: 100%;
    /* لا نستخدم flex/v-center هنا: النصوص تُوسَّط مطلقاً حتى لا تشارك
       الموجات أو الصور في تدفق التخطيط ولا تؤثر على ارتفاع/تموضع السلايدر. */
    display: block;
}

#section-hero.v-center {
    display: block;
    align-items: initial;
    justify-content: initial;
}

#section-hero .jarallax-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.6s ease-in-out;
    will-change: opacity;
}

#section-hero .jarallax-img.is-active {
    opacity: 1;
}

/* طبقة تعتيم حتى يبقى النص مقروءاً فوق الصور */
#section-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* الموجات المتحركة: تغطي السلايدر بالكامل دون دخول تدفق العناصر */
#section-hero .waves {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* ==========================================================================
   نصوص السلايدر — طبقة مطلقة فوق الموجات؛ لا تؤثر على أبعاد السلايدر
   ========================================================================== */
#section-hero .hero-text-slide {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

#section-hero .hero-text-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#section-hero .hero-text-slide .container {
    width: 100%;
}

/* منع خروج العنوان عن حدود الشاشة على أي مقاس */
#section-hero h1.title-3 {
    font-size: clamp(28px, 5vw, 72px);
    line-height: 1.25;
    word-break: break-word;
    max-width: 100%;
    /* فجوة كافية قبل النص الفرعي بدل margin:0 الموروثة عالمياً من h1،
       والتي تلصق العنوان بالنص عندما يلتف العنوان لسطرين. */
    margin-bottom: 16px;
}

/* letter-spacing العالمية على h1 (5px) مصممة للنص اللاتيني فقط: الحروف العربية
   متصلة السياق (initial/medial/final)، وفرض تباعد موحّد بينها يكسر الاتصال
   ويجعل الحروف تتراكب أو تبدو متعارضة بصرياً. النسخة الانجليزية لا تتأثر لهذا
   السبب بالضبط. */
html[dir="rtl"] #section-hero h1.title-3,
html[dir="rtl"] #section-hero h1.title-3 strong {
    letter-spacing: normal;
    text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
    #section-hero .jarallax-img {
        transition: opacity 0.3s linear;
    }

    #section-hero .hero-text-slide {
        transition: none;
    }
}