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


/* ---------------------------------------------------------------------
   1) عنوان الهيرو «أعمالنا» (العنوان المفرّغ الكبير)
   الـ-webkit-text-stroke في Cairo بيرسم خطوط التداخل جوه الحروف المتصلة
   (دواير صغيرة عند كل وصلة بين حرفين)، فشكله بيبان مكسور.
   الحل: الحروف بتتملي أبيض، والفلتر (#owTitleOutline في الـHTML) بيرسم
   إطار حوالين شكل الكلمة كلها ويشيل الملو — فيفضل العنوان مفرّغ ونضيف.
   الوهج اللي الـGSAP بيضيفه مع السكرول (text-shadow) بيفضل شغال برا الحروف.
   ExtraBold عشان تقل الحروف يقرب من Metropolis Bold في الإنجليزي.
   --------------------------------------------------------------------- */
html[dir="rtl"] .ask-contact-header h1 {
    font-family: 'MyGilroy', 'Cairo', sans-serif;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 0 !important;
    filter: url(#owTitleOutline);
}

/* على الموبايل الإطار في الإنجليزي 1px، فبنستخدم نسخة الفلتر الأرفع،
   والكلمة العربي أقصر من OUR WORK فبنكبّرها سنة عشان تفضل حاضرة */
@media only screen and (max-width: 600px) {
    html[dir="rtl"] .ask-contact-header h1 {
        filter: url(#owTitleOutlineSm);
        font-size: 60px;
        line-height: 76px;
    }
}


/* ---------------------------------------------------------------------
   2) رأس سيكشن الأعمال (العنوان + الوصف + زرار التصفية)
   الـgrid بيتعكس لوحده (العنوان يمين والتصفية شمال).
   العنوان متدرّج بـbackground-clip:text و line-height:1، وده بيقص
   الهمزة وأطراف الحروف العربي — فبنوسّع السطر ونزود padding بسيط.
   --------------------------------------------------------------------- */
html[dir="rtl"] .s1-ow-portfolio-head h1 {
    line-height: 1.2;
    padding: 0.08em 0 0.02em;
}

/* الوصف: سطر أريح للقراءة بالعربي */
html[dir="rtl"] .s1-ow-section-desc {
    line-height: 1.8;
    max-width: 560px;
}


/* ---------------------------------------------------------------------
   3) زرار التصفية والقائمة
   الزرار مالوش font-family فكان بياخد خط النظام — بنديله Cairo زي باقي الموقع.
   القائمة في الإنجليزي لازقة في يمين الزرار (right:0) لأن الزرار على اليمين؛
   في العربي الزرار على الشمال، فالقائمة لازم تلزق في شماله وتفتح ناحية
   الصفحة، وإلا بتطلع برا الشاشة من الشمال.
   --------------------------------------------------------------------- */
html[dir="rtl"] .s1-ow-filter-btn,
html[dir="rtl"] .s1-ow-dropdown-item {
    font-family: 'Cairo', sans-serif;
}

html[dir="rtl"] .s1-ow-filter-btn {
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 28px;
}

html[dir="rtl"] .s1-ow-dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .s1-ow-dropdown-item {
    text-align: right;
    line-height: 1.5;
}

/* حركة الـhover والعنصر المختار بتزق النص ناحية بداية السطر (اليمين) */
html[dir="rtl"] .s1-ow-dropdown-item:hover,
html[dir="rtl"] .s1-ow-dropdown-item.s1-ow-active {
    padding-left: 20px;
    padding-right: 25px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .s1-ow-filter-btn {
        padding: 10px 30px;
    }

    html[dir="rtl"] .s1-ow-dropdown-menu {
        left: 0;
        right: auto;
    }
}


/* ---------------------------------------------------------------------
   4) كروت الأعمال
   المحتوى (التصنيف + الاسم) متثبت بـleft:20px من غير right، فكان الصندوق
   بيلزق شمال وبيقف على قد الكلام — التاج بيطلع في نص الكارت أو على الشمال.
   بنثبته من الناحيتين، فالتاج والاسم يبدأوا من اليمين بنفس المسافة.
   --------------------------------------------------------------------- */
html[dir="rtl"] .s1-ow-card-content {
    left: 20px;
    right: 20px;
    text-align: right;
}

/* التاج: العربي بيبان أصغر من الإنجليزي الـuppercase في نفس المقاس */
html[dir="rtl"] .s1-ow-category-badge {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 4px 12px;
}

/* اسم «الشركة الوطنية الذكية للاستثمار» أطول من عرض الكارت فبيتقسم سطرين —
   balance بيخلي السطرين متوازنين بدل كلمة يتيمة في السطر التاني */
html[dir="rtl"] .s1-ow-card-content h3 {
    line-height: 1.45;
    text-wrap: balance;
}


/* ---------------------------------------------------------------------
   5) جملة «نكرّس خبرتنا…» (الكلمات بتنوّر مع السكرول)
   في الإنجليزي النص مزقوق من الشمال بـmargin-left ومحاذي شمال —
   بنعكسها: الهامش يمين والمحاذاة يمين، والتدرج يبدأ من بداية القراءة (اليمين).
   --------------------------------------------------------------------- */
html[dir="rtl"] .dedicate-reveal-text {
    text-align: right;
    line-height: 1.65;
    padding: 0.08em 0;
    background: linear-gradient(270deg, #ff4d47 0, #fff 50%, #E10600);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (min-width: 1200px) {
    html[dir="rtl"] .dedicate-reveal-text {
        margin-left: 0;
        margin-right: 10%;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    html[dir="rtl"] .dedicate-reveal-text {
        margin-left: 0;
        margin-right: 5%;
    }
}

/* الموبايل: النص في النص زي الإنجليزي، والسطور متوازنة من غير كلمة يتيمة في الآخر */
@media (max-width: 768px) {
    html[dir="rtl"] .dedicate-reveal-text {
        text-align: center;
        margin-right: 0;
        text-wrap: balance;
    }
}


/* ---------------------------------------------------------------------
   6) سيكشن الـCTA
   --------------------------------------------------------------------- */
html[dir="rtl"] .cta-section h2 {
    line-height: 1.4;
}

html[dir="rtl"] .cta-section .btn-primary {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}