/* ==============================================================
   rtl.css — تصحيحات الاتجاه من اليمين لليسار
   يُحمَّل في صفحات /ar فقط، بعد main.css و etfe-enhance.css
   لا يعدّل أي ملف قائم — كل القواعد مقيّدة بـ [dir="rtl"]
   ============================================================== */

/* ---------- 1) الخط العربي ---------- */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p,  [dir="rtl"] a,  [dir="rtl"] li,
[dir="rtl"] button, [dir="rtl"] input,
[dir="rtl"] textarea, [dir="rtl"] label,
[dir="rtl"] .btn, [dir="rtl"] .nav-link{
  font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, sans-serif;
}

/* ---------- 1ب) خطوط الأيقونات — إعادة تأكيد صريحة ----------
   ملاحظة: لا تستخدم font-family: inherit هنا إطلاقاً.
   قاعدة [dir="rtl"] .fa أعلى تحديداً من .fa الخاصة بـ FontAwesome،
   فلو ورّثنا الخط ورثت الأيقونة الخط العربي وظهرت مستطيلات فارغة.
   لذلك نعيد تسمية عائلة الخط والوزن صراحةً لكل نمط.
   الترتيب مقصود: fa / fa-sharp أولاً كأساس، ثم solid ثم regular ثم brands،
   لأن العناصر قد تجمع بين صنفين (مثل fa-sharp fa-solid). */

/* الأساس — يطابق سلوك FontAwesome الافتراضي (النمط الصلب) */
[dir="rtl"] .fa,
[dir="rtl"] .fa-classic,
[dir="rtl"] .fa-sharp,
[dir="rtl"] .fa::before,
[dir="rtl"] .fa-classic::before,
[dir="rtl"] .fa-sharp::before{
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
}

/* الصلب — fa-solid / fas (وكذلك fa-sharp fa-solid) */
[dir="rtl"] .fa-solid, [dir="rtl"] .fas,
[dir="rtl"] .fa-sharp.fa-solid, [dir="rtl"] .fa-sharp.fas,
[dir="rtl"] .fa-solid::before, [dir="rtl"] .fas::before,
[dir="rtl"] .fa-sharp.fa-solid::before, [dir="rtl"] .fa-sharp.fas::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* العادي — fa-regular / far */
[dir="rtl"] .fa-regular, [dir="rtl"] .far,
[dir="rtl"] .fa-sharp.fa-regular, [dir="rtl"] .fa-sharp.far,
[dir="rtl"] .fa-regular::before, [dir="rtl"] .far::before,
[dir="rtl"] .fa-sharp.fa-regular::before, [dir="rtl"] .fa-sharp.far::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

/* العلامات التجارية — fa-brands / fab */
[dir="rtl"] .fa-brands, [dir="rtl"] .fab,
[dir="rtl"] .fa-brands::before, [dir="rtl"] .fab::before{
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/* أيقونات بوتستراب — المحتوى على ::before */
[dir="rtl"] .bi::before,
[dir="rtl"] [class^="bi-"]::before,
[dir="rtl"] [class*=" bi-"]::before{
  font-family: "bootstrap-icons" !important;
  font-weight: normal !important;
  font-style: normal;
}

/* ---------- 2) السلايدر (الإصلاح الأهم) ----------
   بوتستراب يستخدم margin-right:-100% للـ carousel-item.
   في RTL هذا يدفع الشريحة النشطة خارج الشاشة تماماً،
   فتظهر الصفحة بيضاء والنص الأبيض يختفي. */
[dir="rtl"] .carousel-item{
  margin-right: 0;
  margin-left: -100%;
}
[dir="rtl"] .carousel-item-next:not(.carousel-item-start),
[dir="rtl"] .active.carousel-item-end{ transform: translateX(-100%); }
[dir="rtl"] .carousel-item-prev:not(.carousel-item-end),
[dir="rtl"] .active.carousel-item-start{ transform: translateX(100%); }

/* أسهم السلايدر تتبادل مواقعها */
[dir="rtl"] .carousel-control-prev{ right: 0; left: auto; }
[dir="rtl"] .carousel-control-next{ left: 0; right: auto; }

/* ---------- 3) محاذاة عامة ---------- */
[dir="rtl"] .text-start{ text-align: right !important; }
[dir="rtl"] .text-end{ text-align: left !important; }
[dir="rtl"] .float-start{ float: right !important; }
[dir="rtl"] .float-end{ float: left !important; }
[dir="rtl"] .ms-auto{ margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto{ margin-right: 0 !important; margin-left: auto !important; }

/* القوائم لا تحتفظ بمسافة بادئة يسارية */
[dir="rtl"] ul, [dir="rtl"] ol{ padding-right: 0; }

/* ---------- 4) أسهم الاتجاه تنعكس ---------- */
[dir="rtl"] .bi-chevron-left::before{ content: "\F285"; }
[dir="rtl"] .bi-chevron-right::before{ content: "\F284"; }
[dir="rtl"] .bi-arrow-right::before{ content: "\F12F"; }
[dir="rtl"] .bi-arrow-left::before{ content: "\F138"; }

/* ---------- 5) الأرقام والرموز اللاتينية ---------- */
[dir="rtl"] [dir="ltr"], [dir="rtl"] .ltr{
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==============================================================
   إصلاحات مراجعة RTL البصرية — 31 أغسطس 2026
   (المهمة ب‑3: العربي مقابل الإنجليزي على 375 و 768 و 1440)
   كل ما يلي مقيّد بـ [dir="rtl"] ولا يمسّ الصفحات الإنجليزية.
   ============================================================== */

/* ---------- 6) السلايدرات — الإصلاح الأهم في هذه الجولة ----------
   السبب: .slick-track عرضه أكبر من .slick-list بكثير (7992px داخل 1296px).
   حين يرث الـ list الاتجاه rtl يُرسى الفائض من الحافة اليمنى، فيبدأ الـ track
   عند left = -6624px، بينما حساب slick لـ translateX يفترض أنه يبدأ من الصفر.
   النتيجة: كل الشرائح خارج الشاشة والقسم يظهر فارغاً تماماً.
   العلاج: نُبقي آلية السلايدر بـ ltr ونعيد rtl لمحتوى الشريحة وحدها.
   (اتجاه تصفّح السلايدر نفسه يحتاج rtl:true في تهيئة slick — وهي جافاسكربت
    خارج نطاق هذا الملف؛ انظر التقرير.) */
[dir="rtl"] .slick-list,
[dir="rtl"] .slick-track{ direction: ltr; }
[dir="rtl"] .slick-slide{ float: left; direction: rtl; }
/* النقاط تتبع نفس اتجاه الشرائح، وإلا صار ترتيبها معكوساً عن ترتيب الشرائح
   فتقفز النقرة على أول نقطة إلى آخر شريحة. */
[dir="rtl"] .slick-dots{ direction: ltr; }

/* كاروسيل Dilight المخصّص — نفس العلة: مسار flex يحرّكه translateX من جافاسكربت */
[dir="rtl"] .carousel-track{ direction: ltr; }
[dir="rtl"] .carousel-track > .carousel-slide{ direction: rtl; }

/* ---------- 7) أدوات بوتستراب المنطقية ----------
   النسخة المحمّلة هي bootstrap.min.css (LTR)، فيها ps-* = padding-left
   و ms-* = margin-left. في صفحة RTL تعني "البداية" اليمين، فنعكسها. */
[dir="rtl"] .ps-0{padding-left:0!important;padding-right:0!important}
[dir="rtl"] .ps-1{padding-left:0!important;padding-right:.25rem!important}
[dir="rtl"] .ps-2{padding-left:0!important;padding-right:.5rem!important}
[dir="rtl"] .ps-3{padding-left:0!important;padding-right:1rem!important}
[dir="rtl"] .ps-4{padding-left:0!important;padding-right:1.5rem!important}
[dir="rtl"] .ps-5{padding-left:0!important;padding-right:3rem!important}
[dir="rtl"] .pe-0{padding-right:0!important;padding-left:0!important}
[dir="rtl"] .pe-1{padding-right:0!important;padding-left:.25rem!important}
[dir="rtl"] .pe-2{padding-right:0!important;padding-left:.5rem!important}
[dir="rtl"] .pe-3{padding-right:0!important;padding-left:1rem!important}
[dir="rtl"] .pe-4{padding-right:0!important;padding-left:1.5rem!important}
[dir="rtl"] .pe-5{padding-right:0!important;padding-left:3rem!important}
[dir="rtl"] .ms-1{margin-left:0!important;margin-right:.25rem!important}
[dir="rtl"] .ms-2{margin-left:0!important;margin-right:.5rem!important}
[dir="rtl"] .ms-3{margin-left:0!important;margin-right:1rem!important}
[dir="rtl"] .ms-4{margin-left:0!important;margin-right:1.5rem!important}
[dir="rtl"] .ms-5{margin-left:0!important;margin-right:3rem!important}
[dir="rtl"] .me-1{margin-right:0!important;margin-left:.25rem!important}
[dir="rtl"] .me-2{margin-right:0!important;margin-left:.5rem!important}
[dir="rtl"] .me-3{margin-right:0!important;margin-left:1rem!important}
[dir="rtl"] .me-4{margin-right:0!important;margin-left:1.5rem!important}
[dir="rtl"] .me-5{margin-right:0!important;margin-left:3rem!important}

/* ---------- 8) الترويسة والقائمة ---------- */
[dir="rtl"] .header .logo img{ margin-right:0; margin-left:6px; }
[dir="rtl"] .navbar a i,
[dir="rtl"] .navbar a:focus i{ margin-left:0; margin-right:5px; }
/* الخط السفلي المتحرك تحت رابط القائمة ينمو من جهة البداية */
[dir="rtl"] .navbar>ul>li>a:before{ left:auto; right:0; }

@media (min-width:1280px){
  [dir="rtl"] .navbar .dropdown ul{ left:auto; right:28px; }
  [dir="rtl"] .navbar .dropdown .dropdown ul{ left:auto; right:calc(100% - 30px); }
  [dir="rtl"] .navbar .dropdown .dropdown:hover>ul{ left:auto; right:100%; }
}
@media (min-width:1280px) and (max-width:1366px){
  [dir="rtl"] .navbar .dropdown .dropdown ul{ left:auto; right:-90%; }
  [dir="rtl"] .navbar .dropdown .dropdown:hover>ul{ left:auto; right:-100%; }
}
@media (max-width:1279px){
  [dir="rtl"] .mobile-nav-show{ padding-right:0; padding-left:10px; }
}
/* ملاحظة: .navbar تنزلق من اليمين (right:-100% ← 0) وهي الجهة الصحيحة
   للعربية، فلا تُعكس عمداً. وكذلك .mobile-nav-hide تبقى داخل اللوحة. */

/* ---------- 9) مسار التنقّل ---------- */
[dir="rtl"] .breadcrumbs ol li+li{ padding-left:0; padding-right:10px; }
[dir="rtl"] .breadcrumbs ol li+li::before{ padding-right:0; padding-left:10px; }

/* ---------- 10) فجوات الأيقونات بجانب النص ---------- */
[dir="rtl"] .about ul i{ margin-right:0; margin-left:4px; }
[dir="rtl"] .about .watch-video a{ margin-left:0; margin-right:8px; }
[dir="rtl"] .alt-services .icon-box i{ margin-right:0; margin-left:25px; }
[dir="rtl"] .stats-counter .stats-item i{ margin-right:0; margin-left:20px; }
[dir="rtl"] .services-cards ul li i{ margin-right:0; margin-left:6px; }
[dir="rtl"] .services-cards h3 i{ margin-left:0; margin-right:6px; }
[dir="rtl"] .service-details ul i{ margin-right:0; margin-left:8px; }
[dir="rtl"] .features .nav-link i{ padding-right:0; padding-left:15px; }
[dir="rtl"] .features .tab-pane ul i,
[dir="rtl"] .features .features-item ul i{ padding-right:0; padding-left:4px; }
[dir="rtl"] .recent-blog-posts .post-item .readmore i,
[dir="rtl"] .blog .posts-list .readmore i{ margin-left:0; margin-right:6px; }
[dir="rtl"] .footer .footer-content .social-links a{ margin-right:0; margin-left:8px; }
/* هذه مكتوبة inline في servicesA.html فتحتاج !important */
[dir="rtl"] li>i.bi-check2-all{ padding-right:0!important; padding-left:4px!important; }

/* ---------- 11) أقسام "من نحن" و"الخدمات" ---------- */
/* قسم "قصتنا": الصورة مثبّتة position:absolute على الحافة، والنص يحجز 35%
   من الجهة نفسها حتى لا يمرّ تحتها. لا بد أن ينعكس الاثنان معاً —
   عكس الحشوة وحدها يُبقي الصورة يميناً والفراغ يساراً فيتراكبان. */
@media(min-width:991px){
  [dir="rtl"] .about .our-story{ padding-right:40px; padding-left:35%; }
}
@media(min-width:992px){
  [dir="rtl"] .about .about-img{ right:auto; left:0; }
}
[dir="rtl"] .services .service-item .icon:before{ right:auto; left:-15px; }
[dir="rtl"] .hero .carousel-control-prev{ padding-left:0; padding-right:15px; }
[dir="rtl"] .hero .carousel-control-next{ padding-right:0; padding-left:15px; }

/* ---------- 12) طبقة etfe-enhance ---------- */
[dir="rtl"] .tmsi-scroll-indicator{ left:auto; right:28px; }
[dir="rtl"] .orbit-item h4{ text-align:right; }
[dir="rtl"] .etfe-kicker,
[dir="rtl"] .case-study-tag{ padding-left:0; padding-right:36px; }
[dir="rtl"] .etfe-kicker::before,
[dir="rtl"] .case-study-tag::before{ left:auto; right:0; }
[dir="rtl"] .etfe-float-badge{ left:auto; right:24px; }
[dir="rtl"] .metro-stats-card{ right:auto; left:24px; }
[dir="rtl"] .ex-zoom-btn{ right:auto; left:14px; }
[dir="rtl"] .ex-quote-btn-arrow{ margin-left:0; margin-right:6px; }

/* ---------- 13) قسم المشاريع الخارجية (sections-variants) ---------- */
[dir="rtl"] #cars-parking .ex-project-card-compact,
[dir="rtl"] #cars-parking .ex-project-card-compact .ex-project-body,
[dir="rtl"] #cars-parking .ex-project-card-compact .ex-project-title{ text-align:right; }
[dir="rtl"] #pvc-tensile .ex-project-media::before{
  border-right:0; border-left:40px solid transparent;
  left:auto; right:0; transform:translate(8px,-8px);
}

/* ---------- 14) اتجاه حركات التحويم ----------
   translateX موجب يعني "للأمام" في LTR، وللأمام في RTL هو السالب. */
[dir="rtl"] .orbit-item:hover,
[dir="rtl"] .orbit-item[data-pos]:hover{ transform:translateX(-4px)!important; }
[dir="rtl"] .orbit-center:hover .explore-cue{ transform:translateX(-4px); }
[dir="rtl"] .alt-services .icon-box:hover{ transform:translateX(-4px); }
[dir="rtl"] .services-cards>.container>.row>[class*="col-"]:hover h3 i{ transform:translateX(-8px); }
[dir="rtl"] .etfe-service-section ul li:hover,
[dir="rtl"] .etfe-lighting-section ul li:hover,
[dir="rtl"] .etfe-lighting-section .icon-box:hover,
[dir="rtl"] .maintenance-featured .icon-box:hover{ transform:translateX(-6px); }
[dir="rtl"] .ex-readmore:hover{ transform:translateX(-4px); }
[dir="rtl"] .ex-readmore:hover i{ transform:translateX(-3px); }
[dir="rtl"] .ex-quote-btn:hover .ex-quote-btn-arrow{ transform:translateX(-6px); }
[dir="rtl"] .aboutT .icon-boxes .icon-box::before{ transform:translateX(4px); }

/* ---------- 15) زر الصعود للأعلى ----------
   في main.css هو right:30px. في العربية ينتقل لليسار ليطابق اتجاه القراءة.
   الزران مرصوفان عمودياً: واتساب أعلى (bottom:70px) وزر الصعود تحته
   (bottom:15px)، بينهما 15px، ومركزاهما على محور واحد
   (واتساب 56px عند 22px → المركز 50 · الصعود 40px عند 30px → المركز 50). */
[dir="rtl"] .scroll-top{ right:auto; left:30px; }

/* ---------- 16) قوائم الميزات في صفحة Dilight ----------
   النقطة مرسومة بـ ::before عند left:0 مع padding-left:20px على li.
   في RTL يبقى ذلك عند الحافة اليسرى للـ li (عرضه 350px) بينما النص
   محاذى لليمين، فتنفصل النقطة عن النص بنحو 94px. نعكسها لتسبق النص
   من اليمين بنفس مسافة النسخة الإنجليزية (12px). */
[dir="rtl"] .product-features li{ padding-left:0; padding-right:20px; }
[dir="rtl"] .product-features li::before{ left:auto; right:0; }

/* ---------- 17) الشريط المتحرك في صفحة Dilight ----------
   علّة اكتمال الدورة (width:max-content) مُصلَحة في الصفحتين معاً داخل
   كتلة <style> الخاصة بكل منهما، لأنها ليست مشكلة اتجاه.
   ما يخصّ RTL هنا فقط: المسار يُرسى حسب اتجاه الحاوية، فلو بقيت rtl
   لالتصقت المقاطع بالحافة اليمنى وانزلقت يساراً كاشفةً فراغاً متزايداً
   على اليمين. نجعل الحاوية ltr ليُرسى المسار يساراً كما في الإنجليزية،
   ونعيد rtl لنص كل مقطع. الحركة تبقى من اليمين إلى اليسار. */
[dir="rtl"] .scrolling-text-container{ direction: ltr; }
[dir="rtl"] .scrolling-text span{ direction: rtl; }

/* ---------- 18) أسهم FontAwesome الاتجاهية ----------
   القسم ٤ أعلاه يقلب أسهم Bootstrap Icons. أسهم FontAwesome تحتاج نفس
   المعالجة: سهم "التالي" في تدفّق عربي يشير لليسار لا لليمين.
   (fa-arrow-right = \f061 · fa-arrow-left = \f060) */
[dir="rtl"] .fa-arrow-right::before{ content: "\f060"; }
[dir="rtl"] .fa-arrow-left::before{ content: "\f061"; }

/* ---------- 19) عزل ثنائي الاتجاه لأرقام الهاتف والبريد ----------
   رقم مثل "+966 920 011 060" داخل فقرة عربية تقلبه خوارزمية bidi إلى
   "060 011 920 966+" لأن المسافات بين المجموعات الرقمية تأخذ اتجاه الفقرة.
   العزل يبقيه كتلة واحدة تُقرأ من اليسار لليمين.
   ⚠️ ينفع فقط حين يكون الرقم داخل عنصر. أرقام التذييل نص عارٍ بلا وسم،
      فلا تطالها CSS — انظر التقرير (تحتاج <span dir="ltr"> في الـ HTML). */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"]{
  unicode-bidi: isolate;
}

/* ==============================================================
   ٢٠) التيبوغرافيا العربية
   الخط العربي أعلى كثافة رأسية من اللاتيني (نقاط وهمزات وتشكيل)،
   فارتفاع سطر 1.5 المناسب للاتيني يجعل الأسطر متلاصقة بالعربية.
   وتباعد الأحرف (letter-spacing) يفكّ اتصال الحروف العربية —
   وهو ضار دائماً لا نافع، فيُصفَّر على كل عناصر النص.
   ============================================================== */

[dir="rtl"] body,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] dt,
[dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] label,
[dir="rtl"] figcaption, [dir="rtl"] blockquote{
  line-height: 1.9;
}

/* العناوين: 1.2 اللاتينية تقصّ الهمزات والتشكيل في العربية */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6{
  line-height: 1.5;
}

/* تصفير تباعد الأحرف — يشمل span لأن الشارات الصغيرة تستعمله بـ 3px.
   هذه خاصية تباعد لا خط، فلا تمسّ قاعدة §5.3 الخاصة بـ font-family. */
[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li,
[dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] strong, [dir="rtl"] em,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .btn, [dir="rtl"] button, [dir="rtl"] label,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] td, [dir="rtl"] th{
  letter-spacing: normal;
}

/* العناوين العربية تبدو أصغر عند نفس المقاس اللاتيني — رفع معتدل للأدوار
   الرئيسية فقط، دون المساس بالتسلسل الذي وُحّد في النقطة ١. */
[dir="rtl"] .section-header h2,
[dir="rtl"] .about h2,
[dir="rtl"] .ex-cat-header h2{ font-size: 44px; }
[dir="rtl"] .ex-project-title{ font-size: 19px; }

/* قواعد أعلى تحديداً من الانتقاء العام أعلاه — تُصفَّر صراحةً */
[dir="rtl"] .get-started .php-email-form h3,
[dir="rtl"] .hero .info .btn-get-started,
[dir="rtl"] .orbit-center-overlay h3,
[dir="rtl"] .orbit-item h4,
[dir="rtl"] .aboutT .content h3,
[dir="rtl"] .madinah-highlight-body h4,
[dir="rtl"] .maintenance-featured .icon-box h4{
  letter-spacing: normal;
}

/* ==============================================================
   ٢١) الزخارف المثبّتة على الحافة اليسرى
   خطوط ذهبية تحت العناوين وأشرطة جانبية معرّفة بـ left:0 في القالب
   الأصلي. في RTL يبقى الخط أقصى اليسار بينما العنوان محاذى لليمين،
   فينفصل عنه ويبدو خطاً سائباً في فراغ الصفحة.
   ============================================================== */

[dir="rtl"] .get-started .content h3:after,
[dir="rtl"] .features .tab-pane h4:after,
[dir="rtl"] .alt-services h3:after,
[dir="rtl"] .project-details .portfolio-info h3:after,
[dir="rtl"] .teamM .member span::after,
[dir="rtl"] .aboutT .content h3::after,
[dir="rtl"] .etfe-service-section h3::after,
[dir="rtl"] .etfe-lighting-section h3::after,
[dir="rtl"] .maintenance-featured h3::after,
[dir="rtl"] .blog .blog-details .content blockquote:after{
  left: auto;
  right: 0;
}

/* الشريط الذهبي على بطاقات "من نحن": يختبئ بالانزلاق خارج البطاقة
   لا بالشفافية. في RTL يجب أن يُرسى على الحافة اليمنى وينزلق يميناً
   ليختفي — وإلا انزلق إلى داخل البطاقة فبقي ظاهراً دائماً. */
[dir="rtl"] .aboutT .icon-boxes .icon-box::before{
  left: auto;
  right: 0;
  transform: translateX(4px);
}
[dir="rtl"] .aboutT .icon-boxes .icon-box:hover::before{
  transform: translateX(0);
}

/* ==========================================================================
   SPOR — اتجاه سلسلة القدرات في العربية
   السلسلة تُقرأ من اليمين لليسار، فالسهم ← لا →.
   على الجوال تصير عموداً فيعود السهم ↓ في الاتجاهين.
   ========================================================================== */
.spor-chain li:not(:last-child)::after{content:"\2190"}
@media (max-width:575.98px){
  .spor-chain li:not(:last-child)::after{content:"\2193"}
}

/* حدّ 16ch مقاس للإنجليزية؛ الحروف العربية أضيق فيُبقي «تداخل.» وحدها
   على سطر ثانٍ. 28ch يُبقي العنوان سطراً واحداً على الشاشات الواسعة. */
.spor-title{max-width:28ch}