/* Wrapper + accent var */
.ail { --ail-accent:#1491C6 !important; max-width:1100px !important; margin:0 auto !important; display:block !important; }

/* RTL text but keep LTR visual layout (image left, text right) */
.ail .ail-content,
.ail .ail-title,
.ail .ail-excerpt { direction:rtl !important; text-align:right !important; }

/* Row layout — IMAGE LEFT, TEXT RIGHT */
.ail-item {
    display:grid !important;
    grid-template-columns:300px 1fr !important;
    grid-template-areas:"thumb content" !important;
    gap:24px !important;
    align-items:start !important;
    padding:28px 0 !important;
    border-bottom:1px solid #eef1f4 !important;
}
.ail-item:first-child { border-top:1px solid #eef1f4 !important; }
.ail-item .ail-thumb { grid-area:thumb !important; }
.ail-item .ail-content { grid-area:content !important; }

/* Image (fixed size 300×169) */
.ail-thumb img.ail-thumb-img { display:block !important; width:300px !important; height:169px !important; border-radius:6px !important; object-fit:cover !important; object-position:center center !important; }
/* Anchor reserves exact image box to avoid layout shift */
.ail-thumb a { display:inline-block !important; width:300px !important; height:169px !important; }
/* Prevent any global img styles from forcing max-height/height */
.ail-thumb { overflow:visible !important; }
.ail-thumb--ph { background:#f1f5f9 !important; width:300px !important; height:169px !important; border-radius:6px !important; }

/* Title */
.ail-title { font-size:20px !important; line-height:1.4 !important; margin:0 0 12px 0 !important; display:flex !important; gap:12px !important; align-items:center !important; }
.ail-title > span { display:inline-block !important; width:6px !important; height:22px !important; background:var(--ail-accent) !important; border-radius:2px !important; }
.ail-title a { color:#0f172a !important; text-decoration:none !important; }
.ail-title a:hover { text-decoration:underline !important; }

/* ====== DATE like screenshot ====== */
.ail-meta {
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#0f1f4a !important;     /* لون أزرق داكن مشابه للصورة */
    font-size:18px !important;    /* حجم واضح */
    line-height:1.2 !important;
    margin:0 0 12px 0 !important;
}
.ail-meta time {
    display:inline-flex !important;
    align-items:center !important;
    font-weight:500 !important;
    gap:8px !important;
}

/* Date icon image element styling */
.ail-date-icn {
    width:20px !important;
    height:20px !important;
    display:inline-block !important;
    object-fit:contain !important;
}
/* Remove legacy calendar pseudo-elements (no longer needed) */
.ail-date-icn::before,
.ail-date-icn::after {
    content: none !important;
}
/* Optional larger size when wrapped in .ail-meta--clock */
.ail-meta--clock .ail-date-icn {
    width:22px !important;
    height:22px !important;
}

/* Excerpt + Read more */
.ail-excerpt { color:#334155 !important; font-size:16px !important; line-height:1.8 !important; margin:0 0 12px !important; }
/* Read more: turn into button and align based on site language */
.ail-readmore { display:inline-block !important; font-weight:600 !important; color:#fff !important; background: var(--ail-accent) !important; text-decoration:none !important; padding:10px 16px !important; border-radius:8px !important; line-height:1 !important; border:1px solid transparent !important; width:auto !important; max-width:max-content !important; }
.ail-readmore:hover { background:#fff !important; color:#000 !important; border-color:var(--ail-accent) !important; text-decoration:none !important; }
/* Alignment: left in Arabic (RTL), right in English (LTR) without HTML changes */
html[dir="rtl"] .ail .ail-readmore { float:left !important; text-align:left !important; }
html[dir="ltr"] .ail .ail-readmore { float:right !important; text-align:right !important; }

/* Centered pagination */
.ail-pagi { display:flex !important; justify-content:center !important; margin:28px 0 8px !important; }
.ail-pagi ul { list-style:none !important; padding:0 !important; margin:0 !important; display:flex !important; gap:8px !important; }
.ail-pagi a,
.ail-pagi span { display:inline-block !important; padding:8px 12px !important; border-radius:6px !important; border:1px solid #e5e7eb !important; text-decoration:none !important; color:#111827 !important; }
.ail-pagi .current,
.ail-pagi a:hover { background:var(--ail-accent) !important; border-color:var(--ail-accent) !important; color:#fff !important; }

/* Empty */
.ail-empty { text-align:center !important; color:#6b7280 !important; }

/* Mobile */
@media (max-width: 860px) {
    .ail-item { grid-template-columns:1fr !important; grid-template-areas:"thumb" "content" !important; gap:14px !important; }
    /* Keep fixed image size on mobile; center the thumbnail */
    .ail-item .ail-thumb { display:flex !important; justify-content:center !important; }
    .ail-thumb a { width:300px !important; height:169px !important; margin:0 auto !important; }
    .ail-thumb img.ail-thumb-img { width:300px !important; height:169px !important; }
    .ail-thumb--ph { width:300px !important; height:169px !important; }
    .ail-meta { font-size:16px !important; }
}