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


/* ---------------------------------------------------------------------
   1) الهيرو — العنوان المفرّغ «خدماتنا»
   الحروف العربي في Cairo متركّبة من أجزاء فوق بعض (عند الوصلات)، فالـ
   text-stroke العادي بيرسم حدود كل جزء ويطلع خطوط ودواير جوه الكلمة.
   الحل: بنرسم الـstroke الأول وبعدين نملا الحرف بالأسود فوقه (paint-order)
   فالخطوط الداخلية تتغطّى ويفضل الإطار الخارجي بس، وبعدين screen بتخلّي
   الأسود شفاف على الخلفية — النتيجة عنوان مفرّغ نضيف زي الإنجليزي.
   الـstroke بقى أتقل لأن نصّه الداخلي بيتغطّى (الظاهر ≈ 2.5px زي الإنجليزي).
   --------------------------------------------------------------------- */
html[dir="rtl"] .e8_banner_animation__ba7CH h1 {
    -webkit-text-fill-color: #000 !important;
    -webkit-text-stroke: 5px #fff !important;
    paint-order: stroke fill;
    mix-blend-mode: screen;
}

/* ---------------------------------------------------------------------
   2) السكشن الأول (نصمّم ونبني البرمجيات) — النص يمين والرسمة شمال
   --------------------------------------------------------------------- */
html[dir="rtl"] .content-col {
    padding-right: 0;
    padding-left: 20px;
    text-align: right;
}

/* العنوان المتدرّج: Cairo محتاج line-height أكبر عشان background-clip
   مايقصّش رؤوس الحروف ونقطها */
html[dir="rtl"] .content-col h1 {
    line-height: 1.45;
}

html[dir="rtl"] .content-col .gradient-text {
    line-height: 1.6;
    padding-top: 4px;
}

html[dir="rtl"] .content-col p {
    font-size: 1.15rem;
    line-height: 1.9;
}


/* ---------------------------------------------------------------------
   3) سكشن الخدمات (الكروت)
   --------------------------------------------------------------------- */
/* العنوان الضخم المتدرّج: 1.1 بتقص الحروف العربي من تحت ومن فوق */
html[dir="rtl"] h1.ws-main-title {
    line-height: 1.3;
    padding-bottom: 6px;
}

html[dir="rtl"] .ws-subtitle {
    font-size: 1.3rem;
    line-height: 1.8;
}

/* عناوين الكروت: مسافة سطور أكبر للعربي، و2rem بدل 2.2 لأن حروف Cairo
   أعرض وأتقل من Gilroy — كده العنوان بيتقري متوازن مع الوصف ومايتقسمش لـ3 سطور */
html[dir="rtl"] .ws-service-title {
    font-size: 2rem;
    line-height: 1.4;
}

/* محاذاة الكروت في نفس الصف (ملاحظة صاحب الموقع):
   - الأيقونة فوق مع أول سطر من العنوان بدل ما تبقى في النص
   - الكارت عمود flex وزرار «اقرأ المزيد» بيتزق لتحت، فالأزرار كلها على
     نفس الخط في الصف حتى لو الوصف أطول أو أقصر */
html[dir="rtl"] .ws-card-header {
    align-items: flex-start;
}

html[dir="rtl"] .ws-icon-img {
    margin-top: 3px;
}

@media (min-width: 769px) {
    html[dir="rtl"] .ws-service-card {
        display: flex;
        flex-direction: column;
    }

    html[dir="rtl"] .ws-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    html[dir="rtl"] .ws-read-more-btn {
        margin-top: auto;
        align-self: flex-start;
    }
}

/* (UI/UX) في عنوان كارت التصميم: كانت بتنزل لوحدها في سطر تالت؛
   بقت وسم صغير هادي جنب السطر التاني، فكل الكروت عناوينها سطرين زي الإنجليزي */
html[dir="rtl"] .ws-service-title bdi {
    white-space: nowrap;
    font-size: 0.55em;
    font-weight: 600;
    opacity: 0.65;
    vertical-align: middle;
}

/* الوصف: Cairo الخفيف (300) بيبهت على الأسود، فبنتقّله سنة ونكبّره */
html[dir="rtl"] .ws-service-desc {
    font-size: 1.05rem;
    line-height: 1.9;
    font-weight: 400;
    margin-bottom: 26px;
}

/* النص المخفي (اقرأ المزيد): الخط الجانبي يروح ناحية اليمين */
html[dir="rtl"] .ws-more-text {
    padding-left: 0;
    border-left: 0;
    padding-right: 12px;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    line-height: 1.9;
}

/* زرار «اقرأ المزيد»: الخط أكبر سنة، والسهم يشاور ناحية الشمال */
html[dir="rtl"] .ws-read-more-btn {
    font-size: 1rem;
}

html[dir="rtl"] .ws-read-more-btn::after {
    transform: scaleX(-1);
}

/* بعد القلب، الـtranslateX الموجب بيحرك السهم ناحية الشمال (اتجاه القراية) */
html[dir="rtl"] .ws-read-more-btn:hover::after {
    transform: scaleX(-1) translateX(5px);
}

/* ---------------------------------------------------------------------
   4) نص «نكرّس جهودنا…» (كلمة كلمة مع السكرول)
   --------------------------------------------------------------------- */
html[dir="rtl"] .dedicate-reveal-text {
    text-align: right;
    line-height: 1.6;
    padding-bottom: 6px;
}

@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%;
    }
}


/* ---------------------------------------------------------------------
   5) الـCTA الأخير
   --------------------------------------------------------------------- */
html[dir="rtl"] .cta-section h2 {
    line-height: 1.5;
}

html[dir="rtl"] .cta-section .btn-primary {
    font-size: 16px;
    padding: 12px 40px;
}


/* ---------------------------------------------------------------------
   6) الموبايل
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* العنوان المفرّغ أصغر في الموبايل (60px) — الإنجليزي 1px، فبنخلي الظاهر عندنا قريب منه */
    html[dir="rtl"] .e8_banner_animation__ba7CH h1 {
        -webkit-text-stroke: 2.4px #fff !important;
    }

    /* الإنجليزي بيتوسّط في الموبايل — بنرجّع نفس السلوك */
    html[dir="rtl"] .content-col {
        text-align: center;
        padding: 0 15px;
    }

    html[dir="rtl"] .dedicate-reveal-text {
        text-align: center;
        margin-right: 0;
    }
}

/* الموبايل (عمود واحد): مفيش صف نحتاج نساوي ارتفاعه، فبنلغي كسر السطر
   الإجباري في العنوان — «تطبيقات الجوال» بتيجي في سطر واحد لو مكفية —
   وبنرجّع حجم الموبايل الأصلي (1.6rem) بدل 2rem بتاعة الديسكتوب */
@media (max-width: 768px) {
    html[dir="rtl"] .ws-service-title {
        font-size: 1.6rem;
    }

    html[dir="rtl"] .ws-service-title br {
        display: none;
    }
}