/* =====================================================================
   Orbita — النسخة العربية: تعديلات RTL خاصة بصفحة Careers
   بيتحمّل في careers.html (العربي) بس، بعد style.css و rtl.css.
   كل القواعد لازم تبدأ بـ html[dir="rtl"] عشان ماتأثرش على الإنجليزي.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) الهيرو — كلمة «الوظائف» المفرّغة ورا اللوجو
   الـ text-stroke العادي بيرسم خطوط جوه الحروف العربي عند أماكن الوصل
   (الحروف المتصلة في Cairo راكبة على بعض)، فبيطلع شخابيط صغيرة جوه الكلمة.
   الحل: نرسم الإطار الأول (paint-order) وبعدين نملى الحرف بأسود يغطي أي خط
   جوه، و mix-blend-mode: screen بيخلي الأسود شفاف — فيفضل الإطار الخارجي
   بس، نضيف ونفس شكل الإنجليزي. نص سُمك الإطار بيتغطى بالملى، عشان كده الرقم
   أكبر من الـ 2px بتاعة الإنجليزي. والكلمة أقصر من CAREERS فكبّرناها سنة.
   --------------------------------------------------------------------- */
html[dir="rtl"] .LLHeroBanner h1 {
    color: #000 !important;
    -webkit-text-stroke: clamp(6px, 0.62vw, 9px) #fff !important;
    paint-order: stroke fill;
    mix-blend-mode: screen;
    font-size: 14.5vw;
}

@media screen and (max-width: 768px) {
    html[dir="rtl"] .LLHeroBanner h1 {
        font-size: 17vw;
    }
}


/* ---------------------------------------------------------------------
   2) العمود اللي فيه الكلام — المسافة الكبيرة (60px) لازم تبقى على الطرف
   الخارجي (الشمال في العربي) والصغيرة ناحية العنوان، زي الإنجليزي بالظبط.
   تحت 1024 style.css بيصفّرهم، فالقاعدة دي للديسكتوب بس.
   --------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    html[dir="rtl"] .LLInnerBlock {
        padding-left: 20px;
        padding-right: 60px;
    }
}


/* ---------------------------------------------------------------------
   3) العناوين المتدرّجة («مسيرتك المهنية في أوربيتا» و«الوظائف المتاحة»)
   - التدرّج معكوس: يبدأ أحمر من اليمين (أول الكلام) ويفتح للأبيض، مرآة
     للإنجليزي اللي بيبدأ أحمر من الشمال.
   - line-height 1.1 بيقص الهمزات فوق ونقط الياء والباء تحت، لأن
     background-clip: text مابيلوّنش أي حتة برّه صندوق العنوان (كانت
     «في أوربيتا» بتبان «فى اوربيتا»). فبنكبّر السطر ونزوّد مسافة تحت.
     !important عشان «الوظائف المتاحة» عليه line-height inline.
   --------------------------------------------------------------------- */
html[dir="rtl"] .LLBigTitleLeft h3,
html[dir="rtl"] .LLGradientText {
    background-image: linear-gradient(257deg, #E10600 0.02%, #fff 40.02%, #E10600 100.02%);
    line-height: 1.4 !important;
    padding-bottom: 0.16em;
}

html[dir="rtl"] .LLBigTitleLeft h3 {
    margin-bottom: 18px;      /* الـ padding اللي تحت عوّض جزء من الـ 30px */
}


/* ---------------------------------------------------------------------
   4) النصوص — العربي محتاج مسافة سطور أوسع عشان النقط والحروف الطويلة
   ماتلزقش في السطر اللي بعدها
   --------------------------------------------------------------------- */
html[dir="rtl"] .LLTextWhite p {
    line-height: 1.9;
}

html[dir="rtl"] .LLJobDescription h5 {
    font-size: 22px;          /* العربي بيبان أصغر من الإنجليزي في نفس المقاس */
    line-height: 1.6;
}

html[dir="rtl"] .LLJobDescription ul {
    line-height: 1.9;
}

/* «أرسل سيرتك الذاتية إلى» — نكبّرها سنة ونسيب مكان للهمزة اللي تحت الألف */
html[dir="rtl"] .LLTextGradientCustom {
    font-size: 18px;
    line-height: 1.8;
    background-image: linear-gradient(257deg, #E10600 0.02%, #fff 40.02%, #E10600 100.02%);
}


/* ---------------------------------------------------------------------
   5) الـ CTA اللي تحت — 1.15 بيخلّي السطرين يخبطوا في بعض في الموبايل
   --------------------------------------------------------------------- */
html[dir="rtl"] .cta-section h2 {
    line-height: 1.5;
}


/* ---------------------------------------------------------------------
   6) الموبايل
   style.css بيزق «Careers at Orbita» 20px من الشمال، فالعنوان كان بيبدأ
   أبعد من باقي الكلام. في العربي بنخليه على نفس خط البداية (اليمين) زي
   «الوظائف المتاحة» والفقرات والزرار — شكله أنضف ومتساوي.
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    html[dir="rtl"] .LLBigTitleLeft h3 {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {
    html[dir="rtl"] .LLBigTitleLeft h3 {
        font-size: 34px;
    }

    html[dir="rtl"] .LLTextWhite p {
        line-height: 1.95;
    }

    /* الـ CTA: بمقاس الإنجليزي (32px) السطر كان بيتكسر بين «مسيرتك» و«المهنية».
       بنصغّره سنة ونقلل الحواف عشان «انطلق بمسيرتك المهنية» تفضل سطر واحد
       و«مع أوربيتا.» تحتها — والـ vw بتحافظ على نفس التقسيمة في الشاشات الأصغر */
    html[dir="rtl"] .cta-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    html[dir="rtl"] .cta-section h2 {
        font-size: min(30px, 7.6vw);
    }
}