/* ========================================================
   تأثير الشاشة المنقسمة اللاصقة (Sticky Split-Screen)
   لصفحة تفاصيل "أعمالنا"
   ======================================================== */

/* نطبق التأثير فقط على الشاشات الكبيرة (الكمبيوتر والتابلت العريض) */
@media (min-width: 782px) {
    .is-sticky-column {
        position: -webkit-sticky;
        position: sticky;
        /* المسافة من أعلى الشاشة عند التثبيت (نترك مساحة للهيدر) */
        top: 120px; 
        /* نحدد أقصى ارتفاع للعمود لكي لا يتجاوز الشاشة */
        max-height: calc(100vh - 140px);
        /* إذا كان المحتوى الثابت طويلاً، نضيف شريط تمرير داخلي مخفي */
        overflow-y: auto;
        /* تخصيص شكل شريط التمرير الداخلي (اختياري لجمالية أكثر) */
        scrollbar-width: thin;
        scrollbar-color: var(--wp--preset--color--neon-purple) transparent;
    }

    /* إخفاء شريط التمرير الافتراضي القبيح في متصفحات كروم وسفاري للعمود اللاصق */
    .is-sticky-column::-webkit-scrollbar {
        width: 4px;
    }
    .is-sticky-column::-webkit-scrollbar-thumb {
        background-color: var(--wp--preset--color--neon-purple);
        border-radius: 10px;
    }
}