.elementor-126 .elementor-element.elementor-element-0248240{--display:flex;}.elementor-126 .elementor-element.elementor-element-947e3ad > .jet-listing-grid > .jet-listing-grid__items{--columns:3;}/* Start custom CSS for container, class: .elementor-element-0248240 *//* ======================================================= */
/* ۱. تنظیمات عمومی RTL و فونت (Global Settings) */
/* ======================================================= */

body {
    /* تنظیم جهت‌دهی کلی و فونت اصلی */
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', Tahoma, sans-serif !important; 
    /* اگر فونت Vazirmatn نصب نشده، از فونت‌های استاندارد استفاده شود */
}

/* اصلاح جهت لیست‌ها و منوهای Icon List */
ul, ol {
    padding-right: 20px; 
    padding-left: 0;
}

/* اصلاح جایگاه آیکون‌ها در Icon List Widget */
.elementor-icon-list-items .elementor-icon-list-icon {
    margin-left: 10px; /* فاصله از متن سمت چپ */
    margin-right: 0;
}


/* ======================================================= */
/* ۲. طرح‌بندی سه ستونه صفحه اصلی (Homepage 20% | 60% | 20%) */
/* کلاس سفارشی: homepage-3col */
/* ======================================================= */

/* اعمال به Container اصلی صفحه خانه که شامل سه ستون است */
.homepage-3col {
    display: flex;
    flex-direction: row-reverse; /* اجبار به قرارگیری ستون راست در سمت راست */
    width: 100%;
    gap: 30px; /* فاصله بین ستون‌ها */
}

/* تعریف عرض دقیق ستون‌ها (به عنوان مثال برای حالت قدیمی Section/Column) */
.homepage-3col > .sidebar-right {
    flex-basis: 20%;
}
.homepage-3col > .main-content {
    flex-basis: 60%;
}
.homepage-3col > .sidebar-left {
    flex-basis: 20%;
}


/* ======================================================= */
/* ۳. شبکه‌ی مقالات پیچیده آرشیو (Archive Complex Grid) */
/* کلاس سفارشی: complex-post-grid */
/* ======================================================= */

/* اعمال به Container اصلی بخش Top Grid آرشیو بلاگ */
.complex-post-grid {
    display: grid;
    /* تعریف شبکه: 2 ستون (60% برای بزرگ، 40% برای دو کوچک) و 2 ردیف */
    grid-template-columns: 60% 40%;
    grid-template-rows: repeat(2, minmax(250px, auto));
    grid-gap: 30px; 
    direction: rtl; 
}

/* استایل برای پست بزرگ (Big Post) */
/* کلاس سفارشی: post-big */
.complex-post-grid .post-big {
    grid-column: 1 / 2; /* در ستون اول (سمت راست) قرار گیرد */
    grid-row: 1 / 3;    /* دو ردیف را پوشش دهد */
}

/* استایل برای پست‌های کوچک (Small Posts) */
/* کلاس‌های سفارشی: post-small-1 و post-small-2 */
.complex-post-grid .post-small-1,
.complex-post-grid .post-small-2 {
    grid-column: 2 / 3; /* در ستون دوم (سمت چپ) قرار گیرد */
}

/* ======================================================= */
/* ۴. ریسپانسیو موبایل (برگشت به تک ستون برای موبایل) */
/* ======================================================= */

@media (max-width: 767px) {
    /* تمامی ستون‌ها و گریدها در موبایل به صورت ردیفی قرار می‌گیرند */
    .homepage-3col, .complex-post-grid {
        flex-direction: column;
        display: block; /* برای موبایل، گریدها به حالت بلاک برمی‌گردند */
    }

    /* عرض 100% برای تمام اجزا در موبایل */
    .homepage-3col > * {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* حذف منطق گرید برای موبایل */
    .complex-post-grid .post-big,
    .complex-post-grid .post-small-1,
    .complex-post-grid .post-small-2 {
        grid-column: auto;
        grid-row: auto;
    }
}/* End custom CSS */