/* ============================================================
   news-portal.css — تخصيصات نمط "الصحيفة الإخبارية"
   يُحمَّل بعد style.css. يستخدم نفس المتغيرات (--primary, --ink...)
   ويحترم الوضع الليلي والألوان الدوّارة للتصنيفات (--c0..--c5).
   ============================================================ */

/* ============================================
   ★) صفحة الخبر: تخطيط الشبكة (محتوى + شريط جانبي)
   ============================================ */
article.article-page.card {
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
}

/* الصورة داخل المحتوى: شبه مربعة مع حواف مدوّرة */
article.article-page.card .article-main > img.article-hero-img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: 500px !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--line) !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    display: block !important;
    background: var(--canvas);
}

/* الفيديو/الصوت داخل المحتوى */
article.article-page.card .article-main > .article-hero-media {
    margin: 0 0 22px !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    max-width: 100%;
}
article.article-page.card .article-main > .article-hero-media > .audio-player,
article.article-page.card .article-main > .article-hero-media .video-frame {
    margin: 0 !important;
    border-radius: var(--radius-lg) !important;
    border: none !important;
}

@media (max-width: 700px) {
    article.article-page.card .article-main > img.article-hero-img {
        aspect-ratio: 16 / 10 !important;
        max-height: 380px !important;
    }
}

.article-body-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 16px 20px;
    align-items: start;
}
.article-body-grid > .article-main,
.article-body-grid > .article-sidebar {
    padding-top: 20px;
}
@media (min-width: 700px) {
    .article-body-grid {
        padding: 0 28px 28px;
    }
    .article-body-grid > .article-main,
    .article-body-grid > .article-sidebar {
        padding-top: 28px;
    }
}

/* عنوان المقال أصغر في الجوال */
@media (max-width: 640px) {
    .article-page .page-title {
        font-size: 22px !important;
        line-height: 1.45;
    }

    /* شريط المعلومات: الكاتب فوق، التصنيف يسار + الإحصائيات في صف واحد */
    .article-meta-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
    }
    .article-meta-bar .article-stats {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        width: 100%;
        justify-content: flex-start;
    }
    /* التصنيف آخر عنصر → يُدفع لأقصى اليسار في نفس الصف */
    .article-meta-bar .article-stats .cat-badge {
        order: 10;
        margin-inline-start: auto;
        flex-shrink: 0;
    }
    /* الإحصائيات خط أصغر عشان تسع في صف واحد */
    .article-meta-bar .article-stats .meta-item {
        font-size: 12px;
        flex-shrink: 0;
    }
}

.article-main { min-width: 0; }
.article-sidebar {
    min-width: 0;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.article-sidebar > .mv-widget:first-child {
    margin-top: 0 !important;
}

@media (min-width: 1000px) {
    .article-body-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 34px;
    }
    .article-sidebar {
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 28px !important;
    }
}

/* ============================================
   ★.٠) بطاقة الكاتب في السايدبار
   ============================================ */
.sb-author-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.sb-author-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    opacity: .08;
    pointer-events: none;
}
.sb-author-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--paper);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,.15);
    margin: 0 auto 14px;
    display: block;
    position: relative;
    background: var(--canvas);
}
.sb-author-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: var(--canvas);
}
.sb-author-placeholder svg {
    width: 44px;
    height: 44px;
}

.sb-author-name {
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.3;
    position: relative;
}
.sb-author-position {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-deep);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
}
.sb-author-bio {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 14px;
    position: relative;
}

.sb-author-socials {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
}
.ac-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--canvas);
    color: var(--muted);
    transition: all .2s;
    text-decoration: none;
}
.ac-social svg { width: 15px; height: 15px; }
.ac-social:hover {
    transform: translateY(-2px);
    color: #fff;
}
.ac-twitter:hover   { background: #000; }
.ac-linkedin:hover  { background: #0077b5; }
.ac-instagram:hover { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }

/* ============================================
   ★.١) قسم "الأكثر مشاهدة" في السايدبار
   ============================================ */
.mv-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.mv-widget-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 15px;
}
.mv-widget-head svg {
    width: 18px; height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.mv-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}
.mv-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: background .18s;
    border-bottom: 1px dashed var(--line);
}
.mv-list li:last-child .mv-item { border-bottom: none; }
.mv-item:hover { background: var(--primary-soft); }
.mv-item:hover .mv-title { color: var(--primary-deep); }

.mv-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    color: #fff;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 3px 6px -2px rgba(83,74,183,.35);
}
/* أول ٣: ألوان مميزة (ذهبي، فضي، برونزي) */
.mv-list li:nth-child(1) .mv-num {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 3px 6px -2px rgba(245,158,11,.5);
}
.mv-list li:nth-child(2) .mv-num {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}
.mv-list li:nth-child(3) .mv-num {
    background: linear-gradient(135deg, #b45309, #d97706);
}
/* ٤-١٠: ألوان متنوّعة حسب الترتيب */
.mv-list li:nth-child(4) .mv-num  { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.mv-list li:nth-child(5) .mv-num  { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.mv-list li:nth-child(6) .mv-num  { background: linear-gradient(135deg, #dc2626, #ef4444); }
.mv-list li:nth-child(7) .mv-num  { background: linear-gradient(135deg, #059669, #10b981); }
.mv-list li:nth-child(8) .mv-num  { background: linear-gradient(135deg, #be185d, #ec4899); }
.mv-list li:nth-child(9) .mv-num  { background: linear-gradient(135deg, #a16207, #ca8a04); }
.mv-list li:nth-child(10) .mv-num { background: linear-gradient(135deg, #4338ca, #6366f1); }

.mv-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.mv-title {
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s;
}
.mv-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.mv-views svg,
.mv-item svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
}
/* ============================================
   ★.٢) زر الإعجاب — داخل شريط المشاركة، الطرف المقابل
   ============================================ */
.share-like {
    color: #ef4444 !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    transition: all .22s cubic-bezier(.4, 1.4, .6, 1) !important;
    position: relative;
    margin-inline-start: auto !important; /* يدفعه للطرف المقابل من "شارك الخبر" */
}
.share-like svg {
    fill: transparent;
    transition: fill .2s;
}
.share-like:hover:not(.is-liked) {
    color: #dc2626 !important;
    border-color: #ef4444 !important;
    background: #fee2e2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -2px rgba(239, 68, 68, .25);
}
.share-like.is-liked {
    color: #fff !important;
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, .4);
}
.share-like.is-liked svg {
    fill: currentColor;
}
.share-like.is-liked:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    transform: translateY(-2px);
}

/* أنيميشن النبضة */
@keyframes like-pulse {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.3) rotate(-8deg); }
    50%  { transform: scale(.92) rotate(4deg); }
    75%  { transform: scale(1.12) rotate(-2deg); }
    100% { transform: scale(1); }
}
.share-like.is-pulsing svg {
    animation: like-pulse .6s cubic-bezier(.4, 1.4, .6, 1);
}

/* موبايل: شريط المشاركة — العنوان فوق، الأزرار صف متوسط، الإعجاب ضمنها */
@media (max-width: 640px) {
    .share-bar {
        justify-content: center;
        gap: 8px;
    }
    .share-bar > span {
        width: 100%;
        text-align: center;
        margin: 0 0 6px;
    }
    .share-like {
        margin-inline-start: 0 !important; /* يلغي الدفع — يبقى ضمن الأزرار */
    }
}

/* قلوب صغيرة تطير عند الإعجاب */
.share-like.is-pulsing::before,
.share-like.is-pulsing::after {
    content: "❤";
    position: absolute;
    top: 50%;
    left: 30%;
    font-size: 12px;
    color: #ef4444;
    animation: like-float .8s ease-out;
    pointer-events: none;
    opacity: 0;
}
.share-like.is-pulsing::after {
    left: 70%;
    animation-delay: .1s;
}
@keyframes like-float {
    0%   { opacity: 0; transform: translateY(0) scale(.5); }
    30%  { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(.6); }
}

.share-like.is-busy {
    opacity: .7;
    pointer-events: none;
}

html[data-theme="dark"] .share-like {
    background: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .share-like:hover:not(.is-liked) {
    background: rgba(239, 68, 68, .1) !important;
}

/* ============ عدّاد الإعجابات في شريط المعلومات ============ */
.meta-likes {
    transition: color .2s;
}
.meta-likes svg {
    transition: fill .2s;
}
.meta-likes.is-liked {
    color: #ef4444 !important;
}
.meta-likes.is-liked svg {
    fill: currentColor;
    stroke: currentColor;
}


/* ============================================
   ٠) التوب بار — شريط علوي رقيق فوق كل شي
   ============================================ */
.site-topbar {
    background: linear-gradient(90deg, var(--primary-deep), var(--primary));
    color: rgba(255,255,255,.92);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    line-height: 1;
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    padding: 5px 0;
}
.topbar-start,
.topbar-end {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tb-date,
.tb-city,
.tb-time,
.tb-weather {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: rgba(255,255,255,.92);
}
.tb-city { font-weight: 700; }
.tb-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-weather { font-weight: 700; }
.tb-date svg,
.tb-city svg,
.tb-time svg,
.tb-weather svg { width: 12px; height: 12px; }
.tbw-icon { display: inline-flex; }
.tbw-icon svg { width: 15px; height: 15px; color: #ffd25e; }

.tb-sep {
    color: rgba(255,255,255,.35);
    font-weight: 700;
    user-select: none;
    font-size: 10px;
}

/* ---- أيقونات السوشيال ---- */
.topbar-end {
    gap: 4px;
}
.tb-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.06);
    transition: all .2s;
    text-decoration: none;
}
.tb-social svg { width: 14px; height: 14px; }
.tb-social:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
    transform: translateY(-1px);
}
/* ألوان مميزة عند التحويم لكل شبكة */
.tb-social-twitter:hover   { background: #000; }
.tb-social-facebook:hover  { background: #1877f2; }
.tb-social-instagram:hover { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.tb-social-youtube:hover   { background: #ff0000; }
.tb-social-snapchat:hover  { background: #fffc00; color: #000; }
.tb-social-tiktok:hover    { background: #000; }

/* شاشة صغيرة: نخفي التوب بار (لتوفير المساحة) */
@media (max-width: 640px) {
    .site-topbar { display: none; }
}

/* ============================================
   ٠.١) شريط التِكر — حركة سلايد رأسية للأخبار
   ============================================ */
.news-ticker {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    height: 52px;
    margin-bottom: 20px;
    box-shadow: 0 3px 12px -6px rgba(83,74,183,.18);
}

/* اللابل الجانبي — أحمر إخباري بتدرّج */
.news-ticker-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    position: relative;
    white-space: nowrap;
    z-index: 2;
}

/* شرط قصّ مائل يعطي إحساس "لصاقة إخبارية" */
.news-ticker-label::after {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    transform: skewX(12deg);
    z-index: -1;
}
[dir="rtl"] .news-ticker-label::after {
    transform: skewX(-12deg);
}

/* نقطة نبضة حمراء */
.ntl-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: nt-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes nt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); transform: scale(1); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}

/* منطقة عرض الأخبار */
.news-ticker-viewport {
    overflow: hidden;
    position: relative;
    padding-inline-start: 16px; /* مساحة بعد اللصاقة المائلة */
}

.news-ticker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
}

/* كل خبر مطبق على البقية — يظهر واحد فقط في وقتها */
.news-ticker-list li {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.news-ticker-list li.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.news-ticker-list li.is-leaving {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.news-ticker-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    width: 100%;
    padding: 0;
    min-width: 0;
}
.news-ticker-list a:hover .nt-title {
    color: var(--primary-deep);
}

.nt-cat {
    padding: 4px 11px;
    border-radius: var(--pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--primary-soft);
    color: var(--primary-deep);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Cairo', sans-serif;
}
.nt-cat.cc-0 { background: var(--c0-bg); color: var(--c0-fg); }
.nt-cat.cc-1 { background: var(--c1-bg); color: var(--c1-fg); }
.nt-cat.cc-2 { background: var(--c2-bg); color: var(--c2-fg); }
.nt-cat.cc-3 { background: var(--c3-bg); color: var(--c3-fg); }
.nt-cat.cc-4 { background: var(--c4-bg); color: var(--c4-fg); }
.nt-cat.cc-5 { background: var(--c5-bg); color: var(--c5-fg); }

.nt-title {
    flex: 0 1 auto;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
    min-width: 0;
}

.nt-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    font-family: monospace;
    white-space: nowrap;
    background: var(--line);
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
html[data-theme="dark"] .nt-time {
    background: rgba(255,255,255,.05);
}

/* الجوّال: تصغير */
@media (max-width: 640px) {
    .news-ticker { height: 44px; margin-bottom: 16px; }
    .news-ticker-label { padding: 0 10px; font-size: 12px; gap: 6px; }
    .news-ticker-label::after { inset-inline-start: -8px; width: 16px; }
    .nt-title { font-size: 13px; }
    .nt-time { display: none; }
}

/* عنصر Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ١) الحاوية العامة (بدون شريط جانبي)
   نُوسّع الحاوية إلى 1400px (مناسب للشاشات العريضة الحديثة)
   بدل 1180px الأصلي — يشمل الهيدر وشريط التصنيفات والمحتوى والفوتر
   ============================================ */
.site-main--full { padding-top: 8px; }

/* padding عمودي فقط — الأفقي يُورَث من .container الأساسي */
.site-container {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* توسيع الحاوية على مستوى الموقع العام (لا يشمل admin) */
.site-topbar > .container,
.navbar > .container,
.site-nav-cats > .container,
.site-main--full > .container,
.site-footer > .container,
.site-footer .footer-bottom,
.search-panel .search-panel-form,
.cats-panel .cats-panel-inner {
    max-width: 1400px;
}

/* ============================================
   ٢) شريط التصنيفات الأفقي (Desktop)
   ============================================ */
.site-nav-cats {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
    /* على الجوال يُخفى — لدينا لوحة التصنيفات المنسدلة */
    display: none;
}

@media (min-width: 900px) {
    .site-nav-cats { display: block; }
}

.site-nav-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.scl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: none;
    position: relative;
    transition: color .2s ease;
    white-space: nowrap;
}
.scl-link:hover { color: var(--ink); }
.scl-link svg { width: 18px; height: 18px; }

.scl-link::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.scl-link:hover::after,
.scl-link.is-active::after { transform: scaleX(1); }

.scl-link.is-active {
    color: var(--ink);
}

.scl-link .scl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-mid);
    display: inline-block;
    flex-shrink: 0;
}

/* التصنيفات الملوّنة — النقطة تأخذ لون التصنيف */
.scl-link.cc-0 .scl-dot { background: var(--c0-mid); }
.scl-link.cc-1 .scl-dot { background: var(--c1-mid); }
.scl-link.cc-2 .scl-dot { background: var(--c2-mid); }
.scl-link.cc-3 .scl-dot { background: var(--c3-mid); }
.scl-link.cc-4 .scl-dot { background: var(--c4-mid); }
.scl-link.cc-5 .scl-dot { background: var(--c5-mid); }

.scl-link.cc-0.is-active::after { background: var(--c0-mid); }
.scl-link.cc-1.is-active::after { background: var(--c1-mid); }
.scl-link.cc-2.is-active::after { background: var(--c2-mid); }
.scl-link.cc-3.is-active::after { background: var(--c3-mid); }
.scl-link.cc-4.is-active::after { background: var(--c4-mid); }
.scl-link.cc-5.is-active::after { background: var(--c5-mid); }

.scl-home svg { color: var(--primary); }

/* الوضع الداكن للشريط */
html[data-theme="dark"] .site-nav-cats {
    background: var(--paper);
    border-bottom-color: var(--line);
}

/* الحالة النشطة في اللوحة المنسدلة على الجوال */
.cats-panel .cats-chip.is-active {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   ٣) رأس القسم (Section head) — عنوان + رابط "المزيد"
   ============================================ */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
    position: relative;
    flex-wrap: wrap;
}

.section-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 26px);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    line-height: 1.2;
}

.section-title-mark {
    display: inline-block;
    width: 6px;
    height: 26px;
    background: linear-gradient(180deg, var(--primary), var(--primary-mid));
    border-radius: 4px;
    flex-shrink: 0;
}

/* أقسام التصنيفات — العلامة تأخذ لون التصنيف */
.cat-section.cc-0 .section-title-mark { background: linear-gradient(180deg, var(--c0-fg), var(--c0-mid)); }
.cat-section.cc-1 .section-title-mark { background: linear-gradient(180deg, var(--c1-fg), var(--c1-mid)); }
.cat-section.cc-2 .section-title-mark { background: linear-gradient(180deg, var(--c2-fg), var(--c2-mid)); }
.cat-section.cc-3 .section-title-mark { background: linear-gradient(180deg, var(--c3-fg), var(--c3-mid)); }
.cat-section.cc-4 .section-title-mark { background: linear-gradient(180deg, var(--c4-fg), var(--c4-mid)); }
.cat-section.cc-5 .section-title-mark { background: linear-gradient(180deg, var(--c5-fg), var(--c5-mid)); }

.cat-section.cc-0 { border-top-color: var(--c0-mid); }

.section-date,
.section-count {
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    border-radius: var(--pill);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: var(--t);
}
.section-more:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}
.section-more svg { width: 14px; height: 14px; }

/* لون زر "شاهد الكل" داخل قسم التصنيف — يتلوّن حسب التصنيف */
.cat-section.cc-0 .section-more { background: var(--c0-bg); color: var(--c0-fg); }
.cat-section.cc-1 .section-more { background: var(--c1-bg); color: var(--c1-fg); }
.cat-section.cc-2 .section-more { background: var(--c2-bg); color: var(--c2-fg); }
.cat-section.cc-3 .section-more { background: var(--c3-bg); color: var(--c3-fg); }
.cat-section.cc-4 .section-more { background: var(--c4-bg); color: var(--c4-fg); }
.cat-section.cc-5 .section-more { background: var(--c5-bg); color: var(--c5-fg); }

.cat-section.cc-0 .section-more:hover { background: var(--c0-mid); color: #fff; }
.cat-section.cc-1 .section-more:hover { background: var(--c1-mid); color: #fff; }
.cat-section.cc-2 .section-more:hover { background: var(--c2-mid); color: #fff; }
.cat-section.cc-3 .section-more:hover { background: var(--c3-mid); color: #fff; }
.cat-section.cc-4 .section-more:hover { background: var(--c4-mid); color: #fff; }
.cat-section.cc-5 .section-more:hover { background: var(--c5-mid); color: #fff; }

/* ============================================
   ٤) Hero عام: خبر ضخم + شبكة ٢×٢ من الأخبار
   ============================================ */
.news-hero {
    margin-bottom: 40px;
}

.news-hero-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

/* موبايل: ارتفاع مناسب للبطل الرئيسي */
.news-hero-grid .hero-card--main {
    min-height: 420px;
}
@media (min-width: 500px) {
    .news-hero-grid .hero-card--main {
        min-height: 460px;
    }
}

/* الشبكة الجانبية الداخلية (تحوي الأخبار الأربعة) */
.news-hero-side-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

/* Tablet: بطاقتين في صف */
@media (min-width: 700px) {
    .news-hero-side-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: main يمين + شبكة ٢×٢ يسار */
@media (min-width: 1000px) {
    .news-hero-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 14px;
    }
    .news-hero-grid .hero-card--main {
        min-height: 540px;
        height: 540px;
    }
    /* شبكة ٢×٢ للأخبار الجانبية — بنفس ارتفاع الخبر الرئيسي */
    .news-hero-side-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 12px;
        min-height: 540px;
        height: 540px;
    }
    /* إذا فيه ٣ فقط: صف واحد + بطاقة ممتدة */
    .news-hero-grid[data-count="4"] .news-hero-side-grid {
        grid-template-rows: repeat(2, 1fr);
    }
    /* إذا فيه ٢ فقط: بطاقة واحدة تشغل الكل */
    .news-hero-grid[data-count="2"] .news-hero-side-grid {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }
    /* إذا فيه ٣: بطاقتين فوق تحت */
    .news-hero-grid[data-count="3"] .news-hero-side-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}

/* ============================================
   ٥) بطاقة Hero — Main (البطاقة الضخمة)
   ============================================ */
.hero-card {
    position: relative;
    display: block;
    background: var(--paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-pop);
    transition: var(--t);
    border: 1px solid var(--line);
}
.hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(36,30,53,.28);
}

/* Main: الصورة تملأ الخلفية والنص فوقها بتدرّج */
.hero-card--main {
    min-height: 340px;
}
.hero-card--main .hero-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-card--main .hero-card-media img,
.hero-card--main .hero-card-placeholder,
.hero-card--main .audio-cover,
.hero-card--main .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-card--main .hero-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 22px 24px;
    color: #fff;
    background: linear-gradient(180deg, rgba(20,15,35,0) 45%, rgba(20,15,35,.55) 70%, rgba(20,15,35,.92) 100%);
}
.hero-card--main .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.35;
    color: #fff;
    margin: 0 0 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-card--main .hero-card-excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,.9);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 70ch;
}
.hero-card--main .hero-card-meta {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    gap: 16px;
}
.hero-card--main .hero-card-meta svg {
    color: rgba(255,255,255,.75);
}

/* موبايل: نص البطل الرئيسي — عنوان أصغر ومختصر سطرين */
@media (max-width: 640px) {
    .hero-card--main .hero-card-title {
        font-size: 20px !important;
        -webkit-line-clamp: 2;
        margin-bottom: 8px;
    }
    .hero-card--main .hero-card-excerpt {
        font-size: 13px;
        -webkit-line-clamp: 2;
        margin-bottom: 10px;
    }
    .hero-card--main .hero-card-body {
        padding: 18px 18px 20px;
    }
}

/* شارة التصنيف داخل البطاقة الضخمة — أعلى يمين */
.hero-card--main .hero-card-cat {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 3;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--pill);
    text-shadow: none;
}
.hero-card--main.cc-0 .hero-card-cat { background: var(--c0-mid); }
.hero-card--main.cc-1 .hero-card-cat { background: var(--c1-mid); }
.hero-card--main.cc-2 .hero-card-cat { background: var(--c2-mid); }
.hero-card--main.cc-3 .hero-card-cat { background: var(--c3-mid); }
.hero-card--main.cc-4 .hero-card-cat { background: var(--c4-mid); }
.hero-card--main.cc-5 .hero-card-cat { background: var(--c5-mid); }

/* ============================================
   ٦) بطاقة Hero — Side (البطاقات الجانبية الصغيرة)
   ============================================ */
.hero-card--side {
    background: var(--paper);
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: stretch;
    min-height: 100px;
    padding: 0;
}

.hero-card--side .hero-card-media {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.hero-card--side .hero-card-media img,
.hero-card--side .hero-card-placeholder,
.hero-card--side .audio-cover,
.hero-card--side .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-card--side .hero-card-placeholder {
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.hero-card--side .hero-card-placeholder svg { width: 34px; height: 34px; }

.hero-card--side .hero-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.hero-card--side .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--side .hero-card-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--pill);
    background: var(--primary-soft);
    color: var(--primary-deep);
}
.hero-card--side.cc-0 .hero-card-cat { background: var(--c0-bg); color: var(--c0-fg); }
.hero-card--side.cc-1 .hero-card-cat { background: var(--c1-bg); color: var(--c1-fg); }
.hero-card--side.cc-2 .hero-card-cat { background: var(--c2-bg); color: var(--c2-fg); }
.hero-card--side.cc-3 .hero-card-cat { background: var(--c3-bg); color: var(--c3-fg); }
.hero-card--side.cc-4 .hero-card-cat { background: var(--c4-bg); color: var(--c4-fg); }
.hero-card--side.cc-5 .hero-card-cat { background: var(--c5-bg); color: var(--c5-fg); }

.hero-card--side .hero-card-meta {
    font-size: 12px;
}
.hero-card--side .hero-card-meta .hcm-author { display: none; }

@media (min-width: 1000px) {
    .hero-card--side {
        grid-template-columns: 130px 1fr;
    }
}

/* ============================================
   ٧) Meta الموحّد للبطاقات
   ============================================ */
.hero-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}
.hcm-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hcm-item svg {
    width: 12px;
    height: 12px;
    color: var(--faint);
}

/* ============================================
   ٨) أقسام التصنيفات (Category Sections)
   ============================================ */
.cat-section {
    margin-bottom: 40px;
    padding-top: 8px;
}

.cat-section-body {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

/* إخفاء شارة التصنيف داخل أقسام التصنيفات (العنوان يكفي) */
.cat-section .hero-card-cat {
    display: none;
}

/* ---- النمط الافتراضي: classic (بطل ضخم + شبكة ٢×٢) ---- */
@media (min-width: 700px) {
    .cat-hero--classic .cat-section-body {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-hero--classic .cat-section-body .hero-card--lead {
        grid-column: 1 / -1;
    }
    /* خبر واحد فقط: يمتد كامل العرض */
    .cat-hero--classic .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1000px) {
    /* البطل يمين (عمودين) + شبكة ٢×٢ يسار (عمودين) */
    .cat-hero--classic .cat-section-body {
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 16px;
        min-height: 460px;
    }
    /* البطل: العمود الأول، يمتد صفّين */
    .cat-hero--classic .cat-section-body .hero-card--lead {
        grid-column: 1 / 2;
        grid-row: 1 / -1;
    }
    /* الصغار: عمودين × صفّين */
    .cat-hero--classic .cat-section-body .hero-card--compact:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .cat-hero--classic .cat-section-body .hero-card--compact:nth-of-type(3) { grid-column: 3; grid-row: 1; }
    .cat-hero--classic .cat-section-body .hero-card--compact:nth-of-type(4) { grid-column: 2; grid-row: 2; }
    .cat-hero--classic .cat-section-body .hero-card--compact:nth-of-type(5) { grid-column: 3; grid-row: 2; }

    /* حالات أقل من ٥ أخبار */
    .cat-hero--classic .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 380px;
    }
    .cat-hero--classic .cat-section-body[data-count="2"] {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: 1fr;
    }
    .cat-hero--classic .cat-section-body[data-count="2"] .hero-card--lead {
        grid-column: 1; grid-row: 1;
    }
    .cat-hero--classic .cat-section-body[data-count="3"] {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .cat-hero--classic .cat-section-body[data-count="3"] .hero-card--lead {
        grid-column: 1; grid-row: 1 / -1;
    }
    .cat-hero--classic .cat-section-body[data-count="3"] .hero-card--compact:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .cat-hero--classic .cat-section-body[data-count="3"] .hero-card--compact:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .cat-hero--classic .cat-section-body[data-count="4"] {
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .cat-hero--classic .cat-section-body[data-count="4"] .hero-card--lead {
        grid-column: 1; grid-row: 1 / -1;
    }
    .cat-hero--classic .cat-section-body[data-count="4"] .hero-card--compact:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .cat-hero--classic .cat-section-body[data-count="4"] .hero-card--compact:nth-of-type(3) { grid-column: 3; grid-row: 1; }
    .cat-hero--classic .cat-section-body[data-count="4"] .hero-card--compact:nth-of-type(4) { grid-column: 2 / -1; grid-row: 2; }
}

/* ---- نمط grid: بطل فوق (نص على الصورة) + خبرين تحت ---- */
.cat-hero--grid .cat-section-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 700px) {
    .cat-hero--grid .cat-section-body {
        grid-template-columns: repeat(2, 1fr);
    }
    /* البطل يمتد كامل العرض */
    .cat-hero--grid .cat-section-body .hero-card--lead {
        grid-column: 1 / -1;
    }
    /* خبر واحد فقط */
    .cat-hero--grid .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
    }
    /* خبرين فقط: البطل فوق + واحد تحت (يمتد) */
    .cat-hero--grid .cat-section-body[data-count="2"] .hero-card--compact {
        grid-column: 1 / -1;
    }
    /* ٣ أخبار: بطل فوق + ٢ تحت (المثالي) */
    .cat-hero--grid .cat-section-body[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    /* ٤ أخبار: بطل فوق + ٣ تحت */
    .cat-hero--grid .cat-section-body[data-count="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* البطل: ارتفاع أكبر والنص على الصورة */
@media (min-width: 700px) {
    .cat-hero--grid .hero-card--lead {
        min-height: 360px;
    }
}

/* ---- نمط list: بطل ضخم يمين + ٤ أخبار أفقية يسار ---- */
.cat-hero--list .cat-section-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 1000px) {
    .cat-hero--list .cat-section-body {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 14px;
        min-height: 480px;
    }
    /* البطل: العمود الأول (يمين في RTL)، يمتد كل الصفوف */
    .cat-hero--list .cat-section-body .hero-card--lead {
        grid-column: 1;
        grid-row: 1 / -1;
    }
    /* الأخبار الأفقية: العمود الثاني (يسار)، كل واحد صف */
    .cat-hero--list .cat-section-body .hero-card--row:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .cat-hero--list .cat-section-body .hero-card--row:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .cat-hero--list .cat-section-body .hero-card--row:nth-of-type(4) { grid-column: 2; grid-row: 3; }
    .cat-hero--list .cat-section-body .hero-card--row:nth-of-type(5) { grid-column: 2; grid-row: 4; }

    /* حالات أقل */
    .cat-hero--list .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .cat-hero--list .cat-section-body[data-count="2"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 1fr;
    }
    .cat-hero--list .cat-section-body[data-count="3"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
    .cat-hero--list .cat-section-body[data-count="4"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
}

/* ---- نمط spotlight: خبر ضخم واحد فقط ---- */
.cat-hero--spotlight .cat-section-body {
    display: grid;
    grid-template-columns: 1fr;
}
.cat-hero--spotlight .hero-card--lead {
    min-height: 380px;
}
@media (min-width: 1000px) {
    .cat-hero--spotlight .hero-card--lead {
        min-height: 460px;
    }
}
.cat-hero--spotlight .hero-card--lead .hero-card-title {
    font-size: clamp(22px, 3vw, 34px);
}
.cat-hero--spotlight .hero-card--lead .hero-card-excerpt {
    -webkit-line-clamp: 3;
    font-size: 15px;
}

/* ---- نمط magazine: بطل يمين + ٤ أخبار أفقية بصور دائرية يسار ---- */
.cat-hero--magazine .cat-section-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 1000px) {
    .cat-hero--magazine .cat-section-body {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 14px;
        min-height: 480px;
    }
    /* البطل: يمين (العمود الأول)، يمتد كل الصفوف */
    .cat-hero--magazine .cat-section-body .hero-card--lead {
        grid-column: 1;
        grid-row: 1 / -1;
    }
    /* الأخبار الأفقية الدائرية: يسار */
    .cat-hero--magazine .cat-section-body .hero-card--circle:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .cat-hero--magazine .cat-section-body .hero-card--circle:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .cat-hero--magazine .cat-section-body .hero-card--circle:nth-of-type(4) { grid-column: 2; grid-row: 3; }
    .cat-hero--magazine .cat-section-body .hero-card--circle:nth-of-type(5) { grid-column: 2; grid-row: 4; }

    /* حالات أقل */
    .cat-hero--magazine .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .cat-hero--magazine .cat-section-body[data-count="2"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 1fr;
    }
    .cat-hero--magazine .cat-section-body[data-count="3"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
    .cat-hero--magazine .cat-section-body[data-count="4"] {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
}

/* ---- بطاقة circle: أفقية بصورة دائرية (صورة يمين، نص يسار) ---- */
.hero-card--circle {
    display: grid;
    grid-template-columns: 76px 1fr;
    background: var(--paper);
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    min-height: 100px;
    height: 100%;
}
.hero-card--circle .hero-card-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.hero-card--circle .hero-card-media {
    grid-column: 1;
    align-self: center;
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-soft);
    flex-shrink: 0;
}
.hero-card--circle .hero-card-media img,
.hero-card--circle .hero-card-placeholder,
.hero-card--circle .audio-cover,
.hero-card--circle .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-card--circle .hero-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.hero-card--circle .hero-card-placeholder svg { width: 26px; height: 26px; }
.hero-card--circle .play-badge {
    width: 26px;
    height: 26px;
}
.hero-card--circle .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--circle .hero-card-excerpt {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--circle .hero-card-meta {
    font-size: 10.5px;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-card--circle:hover .hero-card-title { color: var(--primary-deep); }

/* ---- نمط carousel: بطل عريض فوق (نص على الصورة) + ٤ شبكة تحت ---- */
.cat-hero--carousel .cat-section-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
/* البطل يمتد كامل العرض */
.cat-hero--carousel .cat-section-body .hero-card--lead {
    grid-column: 1 / -1;
    min-height: 320px;
}
@media (min-width: 700px) {
    .cat-hero--carousel .cat-section-body {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-hero--carousel .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1000px) {
    /* الشبكة السفلية: ٤ أعمدة */
    .cat-hero--carousel .cat-section-body {
        grid-template-columns: repeat(4, 1fr);
    }
    .cat-hero--carousel .cat-section-body .hero-card--lead {
        min-height: 400px;
    }
    /* حالات أقل */
    .cat-hero--carousel .cat-section-body[data-count="1"] {
        grid-template-columns: 1fr;
    }
    .cat-hero--carousel .cat-section-body[data-count="2"] {
        grid-template-columns: 1fr;
    }
    .cat-hero--carousel .cat-section-body[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-hero--carousel .cat-section-body[data-count="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Lead: مشابه لـ main لكن أصغر قليلاً */
.hero-card--lead {
    min-height: 280px;
    position: relative;
}
.hero-card--lead .hero-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-card--lead .hero-card-media img,
.hero-card--lead .hero-card-placeholder,
.hero-card--lead .audio-cover,
.hero-card--lead .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-card--lead .hero-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(20,15,35,0) 40%, rgba(20,15,35,.6) 70%, rgba(20,15,35,.92) 100%);
}
.hero-card--lead .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.35;
    color: #fff;
    margin: 0 0 8px;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-card--lead .hero-card-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,.9);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--lead .hero-card-meta {
    color: rgba(255,255,255,.85);
}
.hero-card--lead .hero-card-meta svg {
    color: rgba(255,255,255,.75);
}
.hero-card--lead .hero-card-cat {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 3;
    background: var(--primary);
    color: #fff;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--pill);
}
.hero-card--lead.cc-0 .hero-card-cat { background: var(--c0-mid); }
.hero-card--lead.cc-1 .hero-card-cat { background: var(--c1-mid); }
.hero-card--lead.cc-2 .hero-card-cat { background: var(--c2-mid); }
.hero-card--lead.cc-3 .hero-card-cat { background: var(--c3-mid); }
.hero-card--lead.cc-4 .hero-card-cat { background: var(--c4-mid); }
.hero-card--lead.cc-5 .hero-card-cat { background: var(--c5-mid); }

/* Compact: بطاقة عمودية صغيرة (صورة فوق، نص تحت) */
.hero-card--compact {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    min-height: 200px;
    overflow: hidden;
}

/* داخل شبكة الهيرو الجانبية: البطاقة تملأ الخلية بارتفاع محكم */
.news-hero-side-grid .hero-card--compact {
    min-height: 0;
    height: 100%;
}
.news-hero-side-grid .hero-card--compact .hero-card-media {
    flex: 0 0 54%; /* صورة أكبر لملء الفراغ السفلي */
    min-height: 0;
    height: auto;
}
.news-hero-side-grid .hero-card--compact .hero-card-body {
    flex: 1 1 auto;
    padding: 10px 12px;
    gap: 5px;
    justify-content: center;
    min-height: 0;
}
.news-hero-side-grid .hero-card--compact .hero-card-title {
    -webkit-line-clamp: 2;
    font-size: 13.5px;
    line-height: 1.4;
}
/* إظهار المختصر في الهيرو الجانبي */
.news-hero-side-grid .hero-card--compact .hero-card-excerpt {
    display: -webkit-box;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* الميتا (كاتب + تاريخ) على سطر واحد بخط صغير */
.news-hero-side-grid .hero-card--compact .hero-card-meta {
    flex-wrap: nowrap;
    gap: 10px;
    font-size: 11px;
    overflow: hidden;
}

/* موبايل: بطاقات الشبكة الجانبية — صورة بنسبة ثابتة فوق + نص تحت */
@media (max-width: 999px) {
    .news-hero-side-grid .hero-card--compact .hero-card-media {
        flex: 0 0 auto;
        height: 180px;
        width: 100%;
    }
    .news-hero-side-grid .hero-card--compact .hero-card-title {
        font-size: 16px;
    }
    .news-hero-side-grid .hero-card--compact .hero-card-excerpt {
        font-size: 13px;
    }
    .news-hero-side-grid .hero-card--compact .hero-card-body {
        padding: 14px 16px;
        gap: 7px;
    }
}
@media (max-width: 480px) {
    .news-hero-side-grid .hero-card--compact .hero-card-media {
        height: 160px;
    }
}
.news-hero-side-grid .hero-card--compact .hcm-item {
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-hero-side-grid .hero-card--compact .hcm-item svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.hero-card--compact .hero-card-media {
    position: relative;
    height: 130px;
    overflow: hidden;
    flex-shrink: 0;
}
/* المختصر مخفي افتراضياً في البطاقة المضغوطة (يظهر فقط في الهيرو الجانبي) */
.hero-card--compact .hero-card-excerpt {
    display: none;
}
.hero-card--compact .hero-card-media img,
.hero-card--compact .hero-card-placeholder,
.hero-card--compact .audio-cover,
.hero-card--compact .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-card--compact .hero-card-placeholder {
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.hero-card--compact .hero-card-placeholder svg { width: 32px; height: 32px; }
.hero-card--compact .hero-card-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}
.hero-card--compact .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--compact .hero-card-cat {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    background: rgba(255,255,255,.95);
    color: var(--ink);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--pill);
    backdrop-filter: blur(4px);
}

/* ============================================
   ٨.١) Row: بطاقة أفقية (لنمط list)
   [صورة] [عنوان + مقتطف + meta]
   ============================================ */
.hero-card--row {
    display: grid;
    grid-template-columns: 130px 1fr;
    background: var(--paper);
    align-items: stretch;
    min-height: 110px;
    height: 100%;
}
.hero-card--row .hero-card-media {
    position: relative;
    overflow: hidden;
    background: var(--primary-soft);
}
.hero-card--row .hero-card-media img,
.hero-card--row .hero-card-placeholder,
.hero-card--row .audio-cover,
.hero-card--row .video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-card--row .hero-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.hero-card--row .hero-card-placeholder svg { width: 32px; height: 32px; }

.hero-card--row .hero-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.hero-card--row .hero-card-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--row .hero-card-excerpt {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-card--row .hero-card-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--pill);
    background: var(--primary-soft);
    color: var(--primary-deep);
}
.hero-card--row.cc-0 .hero-card-cat { background: var(--c0-bg); color: var(--c0-fg); }
.hero-card--row.cc-1 .hero-card-cat { background: var(--c1-bg); color: var(--c1-fg); }
.hero-card--row.cc-2 .hero-card-cat { background: var(--c2-bg); color: var(--c2-fg); }
.hero-card--row.cc-3 .hero-card-cat { background: var(--c3-bg); color: var(--c3-fg); }
.hero-card--row.cc-4 .hero-card-cat { background: var(--c4-bg); color: var(--c4-fg); }
.hero-card--row.cc-5 .hero-card-cat { background: var(--c5-bg); color: var(--c5-fg); }

.hero-card--row .hero-card-meta {
    font-size: 12px;
}
.hero-card--row .play-badge {
    width: 40px; height: 40px;
}
.hero-card--row .play-badge svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
    .hero-card--row {
        grid-template-columns: 100px 1fr;
    }
    .hero-card--row .hero-card-title { font-size: 14px; }
}

/* شارة تشغيل — للفيديو والصوت (على البطاقات الكبيرة) */
.hero-card .play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.92);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-deep);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    z-index: 2;
}
.hero-card .play-badge svg { width: 22px; height: 22px; }

.hero-card--side .play-badge,
.hero-card--compact .play-badge {
    width: 40px; height: 40px;
}
.hero-card--side .play-badge svg,
.hero-card--compact .play-badge svg { width: 16px; height: 16px; }

/* ============================================
   ٩) قسم "المزيد من الأخبار" (شبكة أسفل)
   ============================================ */
.latest-news {
    margin-top: 16px;
}

/* ============================================
   ٩.١) الأخبار المثبتة — تحت الهيرو مباشرة
   ============================================ */
.pinned-news {
    margin-bottom: 36px;
}

/* أيقونة المسمار في العنوان */
.pin-icon {
    width: 22px;
    height: 22px;
    color: var(--primary);
    filter: drop-shadow(0 2px 3px rgba(83, 74, 183, .25));
}

.pinned-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
/* الجوال: عمودان بمقاسات أضيق */
@media (max-width: 520px) {
    .pinned-grid { gap: 7px; }
    .pinned-card { padding: 8px 10px !important; gap: 8px !important; }
    .pinned-num { width: 22px !important; height: 22px !important; font-size: 11px !important; }
    .pinned-title { font-size: 12px !important; line-height: 1.55 !important; }
}
@media (min-width: 520px) {
    .pinned-grid { gap: 10px; }
}
@media (min-width: 780px) {
    .pinned-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
    .pinned-grid { grid-template-columns: repeat(5, 1fr); }
}

.pinned-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    min-height: 76px;
}

/* شريط لوني رقيق يمين البطاقة (يتلوّن مع التصنيف) */
.pinned-card::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-mid);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.pinned-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -12px rgba(83, 74, 183, .35);
    border-color: var(--primary-mid);
}
.pinned-card:hover::before {
    transform: scaleY(1);
}

/* رقم البطاقة — بتدرّج جميل + دوران عند التحويم */
.pinned-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    color: #fff;
    border-radius: 10px;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(83, 74, 183, .45);
    transition: transform .35s cubic-bezier(.4, 1.4, .6, 1);
    position: relative;
    z-index: 1;
}

.pinned-card:hover .pinned-num {
    transform: rotate(-8deg) scale(1.08);
}

/* الرقم يأخذ لون التصنيف */
.pinned-card.cc-0 .pinned-num { background: linear-gradient(135deg, var(--c0-fg), var(--c0-mid)); box-shadow: 0 4px 10px -3px rgba(83, 74, 183, .35); }
.pinned-card.cc-1 .pinned-num { background: linear-gradient(135deg, var(--c1-fg), var(--c1-mid)); }
.pinned-card.cc-2 .pinned-num { background: linear-gradient(135deg, var(--c2-fg), var(--c2-mid)); }
.pinned-card.cc-3 .pinned-num { background: linear-gradient(135deg, var(--c3-fg), var(--c3-mid)); }
.pinned-card.cc-4 .pinned-num { background: linear-gradient(135deg, var(--c4-fg), var(--c4-mid)); }
.pinned-card.cc-5 .pinned-num { background: linear-gradient(135deg, var(--c5-fg), var(--c5-mid)); }

/* لون الرقم حسب الترتيب (لا يتكرر حتى لو نفس التصنيف) */
.pinned-grid .pinned-card:nth-child(1) .pinned-num { background: linear-gradient(135deg, #f59e0b, #f97316) !important; }
.pinned-grid .pinned-card:nth-child(2) .pinned-num { background: linear-gradient(135deg, #64748b, #94a3b8) !important; }
.pinned-grid .pinned-card:nth-child(3) .pinned-num { background: linear-gradient(135deg, #b45309, #d97706) !important; }
.pinned-grid .pinned-card:nth-child(4) .pinned-num { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }
.pinned-grid .pinned-card:nth-child(5) .pinned-num { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; }
.pinned-grid .pinned-card:nth-child(6) .pinned-num { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
.pinned-grid .pinned-card:nth-child(7) .pinned-num { background: linear-gradient(135deg, #059669, #10b981) !important; }
.pinned-grid .pinned-card:nth-child(8) .pinned-num { background: linear-gradient(135deg, #be185d, #ec4899) !important; }
.pinned-grid .pinned-card:nth-child(9) .pinned-num { background: linear-gradient(135deg, #a16207, #ca8a04) !important; }
.pinned-grid .pinned-card:nth-child(10) .pinned-num { background: linear-gradient(135deg, #4338ca, #6366f1) !important; }

/* شريط الحواف بلون التصنيف */
.pinned-card.cc-0::before { background: var(--c0-mid); }
.pinned-card.cc-1::before { background: var(--c1-mid); }
.pinned-card.cc-2::before { background: var(--c2-mid); }
.pinned-card.cc-3::before { background: var(--c3-mid); }
.pinned-card.cc-4::before { background: var(--c4-mid); }
.pinned-card.cc-5::before { background: var(--c5-mid); }

/* عنوان الخبر */
.pinned-title {
    flex: 1;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.pinned-card:hover .pinned-title {
    color: var(--primary-deep);
}

/* الوضع الليلي */
html[data-theme="dark"] .pinned-card {
    background: var(--paper);
    border-color: var(--line);
}
html[data-theme="dark"] .pinned-card:hover .pinned-title {
    color: #d4c4f5;
}

/* لا نُغيّر .articles-grid و .grid-card - يستخدمان أنماط style.css الحالية */

/* ============================================
   ١٠) الوضع الليلي — تعديلات
   ============================================ */
html[data-theme="dark"] .hero-card {
    background: var(--paper);
    border-color: var(--line);
}
html[data-theme="dark"] .hero-card--side .hero-card-placeholder,
html[data-theme="dark"] .hero-card--compact .hero-card-placeholder {
    background: var(--primary-soft);
}
html[data-theme="dark"] .hero-card--compact .hero-card-cat {
    background: rgba(30,27,41,.92);
    color: var(--ink);
}
html[data-theme="dark"] .section-head {
    border-bottom-color: var(--line);
}

/* ============================================
   ١١) دعم الشاشات الصغيرة جداً
   ============================================ */
@media (max-width: 480px) {
    .section-head {
        margin: 18px 0 12px;
        padding-bottom: 8px;
    }
    .section-title {
        font-size: 18px;
    }
    .section-title-mark {
        height: 20px;
    }
    .hero-card--main { min-height: 260px; }
    .hero-card--main .hero-card-body { padding: 16px; }
    .hero-card--side {
        grid-template-columns: 100px 1fr;
    }
    .hero-card--side .hero-card-title { font-size: 14px; }
    .hero-card--lead { min-height: 220px; }
}

/* ============================================
   ١٢) تحسين الهيدر — تقليل الحواف عند تفعيل شريط التصنيفات
   ============================================ */
@media (min-width: 900px) {
    /* على الديسكتوب: شريط التصنيفات يوفر التنقل، فنُخفي زر التصنيفات في الهيدر */
    .nav-cats-btn { display: none; }
}

/* ============================================
   ★) صفحة الكاتب العامة
   ============================================ */
.author-hero {
    display: flex;
    gap: 24px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 30px;
    margin: 20px 0 30px;
    position: relative;
    overflow: hidden;
}
.author-hero::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; right: 0;
    height: 90px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    opacity: .07;
    pointer-events: none;
}
.author-hero-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--paper);
    box-shadow: 0 6px 18px -4px rgba(0,0,0,.18);
    flex-shrink: 0;
    background: var(--canvas);
    position: relative;
}
.author-hero-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.author-hero-avatar-ph svg { width: 64px; height: 64px; }

.author-hero-info { flex: 1; min-width: 0; position: relative; }
.author-hero-name {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.3;
}
.author-hero-position {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-deep);
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}
.author-hero-bio {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 16px;
    max-width: 68ch;
}
.author-hero-foot {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.author-hero-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--canvas);
    padding: 7px 14px;
    border-radius: 100px;
}
.author-hero-count svg { width: 15px; height: 15px; color: var(--primary); }

.author-hero-socials { display: flex; gap: 8px; }
.ah-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--canvas);
    color: var(--muted);
    transition: all .2s;
    text-decoration: none;
}
.ah-social svg { width: 17px; height: 17px; }
.ah-social:hover { transform: translateY(-2px); color: #fff; }
.ah-twitter:hover   { background: #000; }
.ah-linkedin:hover  { background: #0077b5; }
.ah-instagram:hover { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }

@media (max-width: 640px) {
    .author-hero {
        flex-direction: column;
        text-align: center;
        padding: 26px 20px;
    }
    .author-hero-position { margin-inline: auto; }
    .author-hero-foot { justify-content: center; }
    .author-hero-bio { margin-inline: auto; }
}

/* رابط اسم الكاتب */
.author-link {
    color: inherit;
    text-decoration: none;
    transition: color .18s;
}
.author-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.sb-author-avatar-link { display: inline-block; }

/* إعلان/راعي الشريط الجانبي في صفحة الخبر */
.sb-ad-slot {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
}
.sb-ad-slot img { max-width: 100%; height: auto; border-radius: 12px; }
.sb-ad-slot :empty { display: none; }

/* ============================================
   ★) صفحة "عن الموقع"
   ============================================ */
.about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
    margin: 20px 0 40px;
}
@media (min-width: 1000px) {
    .about-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 34px;
    }
}
.about-main { min-width: 0; }
.about-content {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--ink);
}
.about-content h2 { font-size: 22px; margin: 22px 0 12px; color: var(--primary-deep); }
.about-content h3 { font-size: 18px; margin: 18px 0 10px; }
.about-content p { margin: 0 0 14px; }
.about-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.about-content ul, .about-content ol { margin: 0 14px 14px; padding-inline-start: 20px; }
.about-content a { color: var(--primary); text-decoration: underline; }

/* الشريط الجانبي: فريق العمل */
.about-sidebar { min-width: 0; }
@media (min-width: 1000px) {
    .about-sidebar { position: sticky; top: 80px; }
}
.team-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.team-widget-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 15px;
}
.team-widget-head svg { width: 18px; height: 18px; }
.team-list { list-style: none; margin: 0; padding: 6px; }
.team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: background .18s;
    border-bottom: 1px dashed var(--line);
}
.team-list li:last-child .team-item { border-bottom: none; }
.team-item:hover { background: var(--primary-soft); }
.team-item:hover .team-name { color: var(--primary-deep); }
.team-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--canvas);
    border: 2px solid var(--line);
}
.team-avatar-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.team-avatar-ph svg { width: 24px; height: 24px; }
.team-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-name {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    transition: color .18s;
}
.team-position {
    font-size: 11.5px;
    color: var(--muted);
}

/* إخفاء بصري مع البقاء في السورس (لأجل SEO ومحركات البحث) */
.seo-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* زر لوحة التحكم في الهيدر */
.nav-admin-btn {
    color: var(--primary) !important;
}
.nav-admin-btn:hover {
    background: var(--primary-soft) !important;
    color: var(--primary-deep) !important;
}

/* زر الترفيه في الهيدر — خلفية بنفسجية بارزة */
.nav-fun-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-mid)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.nav-fun-btn:hover {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary)) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* زر الترفيه في شريط الأقسام — أقصى اليسار */

/* ============================================
   الفوتر الغني (٤ أعمدة + إحصائيات)
   ============================================ */
.site-footer .footer-top {
    grid-template-columns: 1.4fr 1.2fr 1.3fr 1.1fr !important;
    gap: 28px !important;
}

/* التصنيفات: صفوف بحدود أنيقة */
.footer-col .footer-links .footer-cat {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    transition: all .18s;
    width: 100%;
}
.footer-col .footer-links li { margin-bottom: 8px; }
.footer-col .footer-links .footer-cat:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: none;
}
.footer-cat-dot { flex-shrink: 0; }
.footer-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    margin-inline-start: auto;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 11px;
    font-weight: 800;
    border-radius: 100px;
    font-family: 'Cairo', sans-serif;
}
.footer-cat:hover .footer-cat-count {
    background: var(--primary);
    color: #fff;
}

/* إحصائيات مصغّرة تحت السوشيال */
.footer-stats {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: nowrap;
    max-width: 300px;
}
.fstat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    padding: 8px 4px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.fstat-num {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--primary);
    line-height: 1;
}
.fstat-label {
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* عمود الأكثر قراءة */
.footer-popular {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-popular a {
    display: flex;
    gap: 10px;
    text-decoration: none;
    align-items: flex-start;
}
.fp-rank {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-popular li:nth-child(1) .fp-rank { background: linear-gradient(135deg, #f59e0b, #f97316); }
.footer-popular li:nth-child(2) .fp-rank { background: linear-gradient(135deg, #64748b, #94a3b8); }
.footer-popular li:nth-child(3) .fp-rank { background: linear-gradient(135deg, #b45309, #d97706); }
.fp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s;
}
.footer-popular a:hover .fp-title { color: var(--primary); }
.fp-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--faint);
}
.fp-views svg { width: 11px; height: 11px; }

@media (max-width: 980px) {
    .site-footer .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 26px !important;
    }
}
@media (max-width: 560px) {
    .site-footer .footer-top {
        grid-template-columns: 1fr !important;
    }
}

/* الروابط والتصنيفات في عمودين */
.footer-links-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    align-content: start;
}
.footer-links-2col li { margin-bottom: 0 !important; }
.footer-cats-2col .footer-cat { padding: 7px 10px; }

/* روابط الفوتر بنفس بوردر التصنيفات */
.footer-col .footer-links-2col:not(.footer-cats-2col) a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    transition: all .18s;
    width: 100%;
    box-sizing: border-box;
}
.footer-col .footer-links-2col:not(.footer-cats-2col) a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-deep);
    transform: none;
}
/* الجوال: تبقى عمودين مع مقاسات أضيق */
@media (max-width: 560px) {
    .footer-links-2col {
        grid-template-columns: 1fr 1fr;
        gap: 7px 9px;
    }
    .footer-col .footer-links-2col a,
    .footer-cats-2col .footer-cat {
        padding: 8px 10px;
        font-size: 12px;
        gap: 6px;
    }
    .footer-cat-count {
        min-width: 19px;
        height: 18px;
        padding: 0 5px;
        font-size: 10px;
    }
    .footer-cat-dot { width: 6px; height: 6px; }
}

/* ============================================
   بلوك النشرة البريدية في الفوتر
   ============================================ */
.footer-newsletter {
    background: linear-gradient(135deg, var(--primary), var(--primary-mid));
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    text-align: center;
}
.fn-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 8px;
    background: rgba(255,255,255,.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fn-icon svg { width: 20px; height: 20px; color: #fff; }
.fn-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 15px;
    margin: 0 0 5px;
    color: #fff;
}
.fn-desc {
    font-size: 12px;
    line-height: 1.6;
    opacity: .92;
    margin: 0 0 12px;
}
/* فورم العرض (بدون ربط) */
.fn-form-demo {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.15);
    padding: 6px;
    border-radius: 100px;
}
.fn-form-demo input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #fff;
    padding: 8px 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    outline: none;
}
.fn-form-demo input::placeholder { color: rgba(255,255,255,.7); }
.fn-form-demo button {
    flex-shrink: 0;
    border: none;
    background: #fff;
    color: var(--primary-deep);
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .18s;
}
.fn-form-demo button:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 4px 12px -2px rgba(0,0,0,.25); }
.fn-form-demo button:disabled { background: #dcfce7; color: #16a34a; cursor: default; }
.fn-hint {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255,255,255,.8);
    line-height: 1.6;
}
/* كود embed المخصّص (iframe من Brevo وغيره) */
.footer-col-newsletter { display: flex; }
.fn-embed {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    overflow: hidden;
}
.fn-embed iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 305px;
    border: none !important;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}
/* اسم الموقع للطباعة (مخفي في العرض العادي) */
.print-site-name { display: none; }

/* ============================================
   الطباعة — المقال فقط (اسم الموقع بدل الكاتب)
   ============================================ */
@media print {
    /* إخفاء كل العناصر خارج المقال */
    .site-topbar, .navbar, header.navbar,
    .site-nav-cats, .cats-panel, .search-panel,
    .breadcrumbs, .news-ticker, .reading-progress,
    .site-footer, footer,
    .nav-icon-btn, .back-to-top {
        display: none !important;
    }

    /* إخفاء العناصر غير المرغوبة داخل المقال — بقوة عالية */
    .article-page .ai-summary-box,
    .article-page .ai-keywords,
    .article-main .ai-summary-box,
    .article-main .ai-keywords,
    .article-page .share-bar,
    .article-main .share-bar,
    .article-sidebar .sb-ad-slot,
    .article-sidebar .mv-widget,
    .related-section,
    .comments-section, .comments-wrap, #comments,
    div[class*="comments"],
    .adsbygoogle, .ad-slot, .sponsor-slot {
        display: none !important;
    }

    /* التخطيط */
    .article-page { box-shadow: none !important; border: none !important; padding: 0 !important; }
    .article-body-grid { display: block !important; }
    .article-main {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 !important; float: none !important;
    }

    /* إخفاء السايدبار كامل (بطاقة الكاتب + الأكثر مشاهدة + الإعلان) */
    .article-sidebar { display: none !important; }

    /* استبدال اسم الكاتب باسم الموقع + إخفاء الإحصائيات */
    .article-meta-bar .article-author > .author-pic,
    .article-meta-bar .article-author-info > strong:not(.print-site-name),
    .article-meta-bar .article-author-info > strong .author-link,
    .article-stats { display: none !important; }
    .print-site-name {
        display: block !important;
        font-family: 'Cairo', sans-serif;
        font-weight: 800;
        font-size: 14pt;
        color: #000 !important;
    }

    /* تحسينات */
    /* وضع التركيز لا يؤثر على الطباعة */
    .font-controls, .focus-btn { display: none !important; }
    .focus-mode .fx-block { opacity: 1 !important; filter: none !important; }

    .article-hero-img { max-height: 340px !important; object-fit: contain !important; }
    .article-content { font-size: 12pt !important; line-height: 1.7 !important; color: #000 !important; }
    .article-content a { color: #000 !important; text-decoration: none !important; }
    body, .article-page, .article-main, .article-content {
        background: #fff !important; box-shadow: none !important;
    }
    @page { margin: 1.5cm; }
}

/* شارت لوحة التحكم */
.dash-chart-wrap {
    position: relative;
    height: 220px;
    margin-top: 8px;
}
.dash-chart-donut { height: 260px; }

/* ============================================
   نظام حفظ الأخبار (Bookmarks)
   ============================================ */
/* زر الحفظ في شريط المشاركة */
.share-bookmark { color: var(--primary) !important; }
.share-bookmark:hover { background: var(--primary-soft) !important; }
.share-bookmark.is-saved {
    background: var(--primary) !important;
    color: #fff !important;
}
.share-bookmark.is-saved svg { fill: currentColor; }

/* زر المحفوظات في الهيدر + العدّاد */
.nav-saved-btn { position: relative; color: var(--primary) !important; }
.nav-saved-btn:hover { background: var(--primary-soft) !important; }
.nav-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #dc2626;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 10px;
    font-weight: 800;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--paper);
}

/* تنبيه الحفظ */
.bm-toast {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 50%;
    transform: translateX(50%) translateY(20px);
    background: var(--ink);
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 22px;
    border-radius: 100px;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    z-index: 9999;
}
.bm-toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

/* صفحة المحفوظات */
.saved-page { margin: 20px 0 46px; }
.saved-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.saved-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 9px;
    margin-inline-start: 8px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 13px;
    font-weight: 800;
    border-radius: 100px;
    vertical-align: middle;
}
.saved-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all .18s;
}
.saved-clear-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.saved-clear-btn svg { width: 15px; height: 15px; }
.saved-note {
    font-size: 13px;
    color: var(--muted);
    margin: 8px 0 22px;
}
.saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.saved-card {
    display: flex;
    gap: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    position: relative;
    transition: all .18s;
}
.saved-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px -8px rgba(83,74,183,.25); }
.sv-media {
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--canvas);
    display: block;
}
.sv-media img { width: 100%; height: 100%; object-fit: cover; }
.sv-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--faint);
}
.sv-noimg svg { width: 28px; height: 28px; }
.sv-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline-end: 22px;
}
.sv-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sv-title:hover { color: var(--primary); }
.sv-meta { font-size: 11.5px; color: var(--muted); margin-top: auto; }
.sv-remove {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--canvas);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .16s;
}
.sv-remove:hover { background: #fee2e2; color: #dc2626; }
.sv-remove svg { width: 13px; height: 13px; }

/* الحالة الفارغة */
.saved-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--muted);
}
.saved-empty svg { width: 60px; height: 60px; color: var(--faint); margin-bottom: 14px; }
.saved-empty h3 {
    font-family: 'Cairo', sans-serif;
    font-size: 19px;
    color: var(--ink);
    margin: 0 0 8px;
}
.saved-empty p { font-size: 14px; margin: 0 0 20px; }

/* ============================================
   البحث الفوري (Live Search)
   ============================================ */
.sp-live {
    margin: 12px auto 0;
    max-width: 1400px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.18);
    max-height: 420px;
    overflow-y: auto;
}
.sp-live-list { display: flex; flex-direction: column; }

.spl-item {
    display: flex;
    gap: 12px;
    padding: 11px 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}
.spl-item:last-child { border-bottom: none; }
.spl-item:hover, .spl-item.is-active { background: var(--primary-soft); }

.spl-media {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--canvas);
    display: block;
}
.spl-media img { width: 100%; height: 100%; object-fit: cover; }
.spl-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--faint);
}
.spl-noimg svg { width: 22px; height: 22px; }

.spl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.spl-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spl-title mark {
    background: rgba(240, 180, 41, .32);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}
.spl-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
}
.spl-cat {
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

.sp-live-loading, .sp-live-empty {
    padding: 22px 16px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: var(--muted);
}
.sp-live-more {
    display: block;
    padding: 12px;
    text-align: center;
    background: var(--canvas);
    color: var(--primary-deep);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    border-top: 1px solid var(--line);
    transition: background .16s;
}
.sp-live-more:hover { background: var(--primary-soft); }

@media (max-width: 560px) {
    .sp-live { max-height: 320px; }
    .spl-media { width: 48px; height: 48px; }
    .spl-title { font-size: 12.5px; }
}


/* ============================================
   قائمة الجوال (ملء الشاشة)
   ============================================ */
.nav-extra { display: contents; }
.nav-extra-label { display: none; }

@media (max-width: 700px) {
    /* الهيدر: شعار + بحث + هامبرغر فقط */
    .nav-extra,
    .nav-submit-btn,
    .navbar .theme-toggle {
        display: none !important;
    }

    /* زر القائمة آخر عنصر */
    .nav-cats-btn { position: relative; order: 99; }

    /* ===== اللوحة: ملء الشاشة ===== */
    .cats-panel[hidden] { display: none !important; }
    .cats-panel {
        position: fixed !important;
        inset: 0 !important;
        z-index: 200;
        background: var(--paper);
        display: flex;
        flex-direction: column;
        padding: 0;
        border: none;
        box-shadow: none;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .22s, transform .26s cubic-bezier(.34,1.3,.64,1);
    }
    .cats-panel.is-open { opacity: 1; transform: none; }

    /* زر الإغلاق */
    .menu-close {
        flex-shrink: 0;
        align-self: flex-start;
        margin: 16px 18px 6px;
        width: 42px; height: 42px;
        border: none;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        transition: background .16s;
    }
    .menu-close:active { background: var(--canvas); }
    .menu-close svg { width: 26px; height: 26px; }

    /* صفوف التصنيفات */
    .menu-rows {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 18px 10px;
        display: flex;
        flex-direction: column;
        background: var(--canvas);
        margin: 0 18px;
        border-radius: 14px;
    }
    .menu-row {
        display: block;
        padding: 13px 6px;
        font-family: 'Cairo', sans-serif;
        font-weight: 700;
        font-size: 14.5px;
        color: var(--ink);
        text-decoration: none;
        border-bottom: 1px solid var(--line);
        transition: color .16s;
    }
    .menu-row:last-child { border-bottom: none; }
    .menu-row:active { color: var(--primary); }
    .menu-row.is-active {
        color: var(--ink);
        position: relative;
    }
    .menu-row.is-active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        inset-inline-start: 6px;
        width: 52px;
        height: 3px;
        border-radius: 3px;
        background: var(--primary);
    }
    .menu-row-admin { color: var(--primary); }

    /* شريط الأيقونات السفلي */
    .menu-dock {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        background: transparent;
    }
    .dock-btn {
        position: relative;
        width: 52px; height: 52px;
        border-radius: 50%;
        border: 1.5px solid var(--line);
        background: var(--paper);
        color: var(--ink);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: all .16s;
        text-decoration: none;
    }
    .dock-btn svg { width: 22px; height: 22px; }
    .dock-btn:active { transform: scale(.94); }
    .dock-btn-fun {
        background: linear-gradient(135deg, var(--primary), var(--primary-mid));
        border-color: transparent;
        color: #fff;
    }
    .dock-btn-saved { color: var(--primary); }
    .dock-badge {
        position: absolute;
        top: -3px;
        inset-inline-end: -3px;
        min-width: 21px; height: 21px;
        padding: 0 5px;
        background: #dc2626; color: #fff;
        font-family: 'Cairo', sans-serif;
        font-size: 11px; font-weight: 800;
        border-radius: 100px;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid var(--paper);
    }

    /* أيقونات الوضع الليلي */
    .dock-btn .theme-icon-sun { display: none; }
    [data-theme="dark"] .dock-btn .theme-icon-moon { display: none; }
    [data-theme="dark"] .dock-btn .theme-icon-sun { display: block; }

    /* منع تمرير الصفحة خلف القائمة */
    body.menu-open { overflow: hidden; }
}

/* الديسكتوب: عناصر القائمة الجوالية مخفية */
@media (min-width: 701px) {
    .menu-close, .menu-rows, .menu-dock { display: none; }
}

/* حماية: خاصية hidden يجب أن تُخفي دائماً */
[hidden] { display: none !important; }

/* ============================================
   صفحات الوسوم
   ============================================ */
.tag-page, .tags-page { margin: 20px 0 46px; }

.tag-hash { color: var(--primary); font-weight: 800; }
.tag-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 10px;
    margin-inline-start: 10px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 100px;
    vertical-align: middle;
}
.tags-note {
    font-size: 13.5px;
    color: var(--muted);
    margin: 6px 0 22px;
}

/* سحابة الوسوم */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 13px;
    background: var(--canvas);
    border: 1px solid transparent;
    border-radius: 100px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: all .16s;
}
.tag-chip:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-deep);
}
.tag-chip-n {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--faint);
}
.tag-chip:hover .tag-chip-n { color: var(--primary); }

/* ثلاثة أحجام هادئة */
.tag-s1 { font-size: 13px; }
.tag-s2 { font-size: 14px; font-weight: 700; }
.tag-s3 { font-size: 15.5px; font-weight: 800; }

/* طيّ باقي الوسوم */
.tags-more { margin-top: 18px; }
.tags-more summary {
    cursor: pointer;
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    list-style: none;
    transition: all .16s;
}
.tags-more summary::-webkit-details-marker { display: none; }
.tags-more summary:hover { border-color: var(--primary); color: var(--primary); }
.tags-more[open] summary { margin-bottom: 14px; }

/* شارات الوسوم داخل صفحة الخبر (صارت روابط) */
a.ai-kw { text-decoration: none; transition: all .16s; }
a.ai-kw:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* إحصائيات الفوتر: شبكة ٣ أعمدة */
.footer-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 320px;
}
.fstat { min-width: 0; }
.fstat-views .fstat-num { color: #185fa5; }
.fstat-growth.is-up .fstat-num { color: #3b6d11; }
.fstat-growth.is-down .fstat-num { color: #a32d2d; }

/* ============================================
   الأكثر تداولاً هذا الأسبوع
   ============================================ */
.trending-news { margin: 26px 0; }
.trend-icon { width: 20px; height: 20px; color: #d85a30; }

.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.trend-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: all .18s;
}
.trend-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(83,74,183,.3);
}
.trend-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--canvas);
    overflow: hidden;
}
.trend-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.trend-card:hover .trend-media img { transform: scale(1.04); }
.trend-rank {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d85a30, #f0a029);
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trend-body {
    padding: 11px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.trend-cat {
    align-self: flex-start;
    font-family: 'Cairo', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary-deep);
    background: var(--primary-soft);
    padding: 2px 9px;
    border-radius: 100px;
}
.trend-title {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
.trend-title a {
    color: var(--ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trend-title a:hover { color: var(--primary); }

.trend-excerpt {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trend-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
}
.trend-meta span { display: inline-flex; align-items: center; gap: 4px; }
.trend-meta svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px;
    max-width: 13px;
    flex: 0 0 13px;
}
.tm-author {
    font-weight: 700;
    max-width: 100%;
    min-width: 0;
}
.tm-author a, .tm-author {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-author a { color: var(--muted); text-decoration: none; }
.tm-author a:hover { color: var(--primary); }
.tm-date { color: var(--faint); }
.tm-date::before { content: '•'; margin-inline-end: 8px; color: var(--faint); }

@media (max-width: 900px) {
    .trending-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .trending-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================
   نتائج البحث — تخطيط أفقي
   ============================================ */
.search-results-list {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
}
.search-results-list .grid-card {
    max-width: 100% !important;
    flex-direction: row;
    display: flex;
    align-items: stretch;
}
.search-results-list .grid-card-image {
    flex: 0 0 200px;
    height: auto !important;
    min-height: 128px;
    border-radius: 0;
}
.search-results-list .grid-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-results-list .grid-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.search-results-list .grid-card-body {
    padding: 14px 16px !important;
    gap: 7px;
    justify-content: center;
}
.search-results-list .grid-card-title { font-size: 16.5px; margin: 0; }
.search-results-list .grid-card-excerpt {
    -webkit-line-clamp: 2;
    margin: 0;
}
/* صف المعلومات: كله في سطر واحد */
.search-results-list .grid-card-meta {
    padding-top: 9px !important;
    margin: 0;
    gap: 6px 14px;
}
.gcm-date { color: var(--faint); }
.gcm-date::before { content: '•'; margin-inline-end: 10px; }

@media (max-width: 640px) {
    .search-results-list .grid-card { flex-direction: column; }
    .search-results-list .grid-card-image {
        flex: 0 0 auto;
        height: 175px !important;
        min-height: 0;
    }
    .search-results-list .grid-card-title { font-size: 15px; }
}

/* شعار وحده (الاسم والوصف مخفيان) → أكبر */
.logo.logo-only img { height: 70px !important; }

/* نص وحده (الشعار مخفي) → أكبر */
.logo.text-only .logo-name { font-size: 30px !important; }
.logo.text-only .logo-tagline { font-size: 13px; }

@media (max-width: 700px) {
    .logo.logo-only img { height: 48px !important; }
    .logo.text-only .logo-name { font-size: 22px !important; }
    .logo.text-only .logo-tagline { font-size: 11px !important; }
}
@media (max-width: 640px) {
    .logo.logo-only img { height: 44px !important; }
    .logo.text-only .logo-name { font-size: 20px !important; }
}

/* هوية الفوتر: تتكيّف مثل الهيدر */
.footer-logo.logo-only img { height: 54px !important; }
.footer-logo.text-only .footer-logo-name { font-size: 25px !important; }

@media (max-width: 700px) {
    .footer-logo.logo-only img { height: 46px !important; }
    .footer-logo.text-only .footer-logo-name { font-size: 21px !important; }
}

/* خط الهوية البرتقالي تحت اسم الموقع في الفوتر (مثل الهيدر) */
.footer-logo-name {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.footer-logo-name::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: var(--c3-mid);
    border-radius: var(--pill);
    opacity: .45;
    z-index: -1;
    transform: skewX(-12deg);
    transition: var(--t);
}
.footer-logo:hover .footer-logo-name::after { height: 55%; opacity: .35; }

/* ============================================
   وضع التركيز في القراءة
   ============================================ */
.focus-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--paper);
    color: var(--muted);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .18s;
}
.focus-btn:hover { border-color: var(--primary); color: var(--primary); }
.focus-btn.is-on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* التعتيم */
.focus-mode .fx-block {
    opacity: .28;
    filter: blur(.4px);
    transition: opacity .35s ease, filter .35s ease;
}
.focus-mode .fx-block.is-focused {
    opacity: 1;
    filter: none;
}

/* أثناء التركيز: هدّئ كل ما حول النص */
.focus-mode .ai-summary-box,
.focus-mode .ai-keywords,
.focus-mode .article-hero-img,
.focus-mode .article-hero-media,
.focus-mode .article-meta-bar,
.focus-mode .share-bar,
.focus-mode .article-sidebar,
.focus-mode .related-section,
.focus-mode .comments-section,
.focus-mode .site-footer,
.focus-mode .site-topbar,
.focus-mode .navbar,
.focus-mode .site-nav-cats,
.focus-mode .breadcrumbs {
    opacity: .35;
    transition: opacity .35s ease;
}
/* ترجع كاملة عند التمرير عليها */
.focus-mode .ai-summary-box:hover,
.focus-mode .ai-keywords:hover,
.focus-mode .article-hero-img:hover,
.focus-mode .article-hero-media:hover,
.focus-mode .article-meta-bar:hover,
.focus-mode .share-bar:hover,
.focus-mode .article-sidebar:hover,
.focus-mode .related-section:hover,
.focus-mode .comments-section:hover,
.focus-mode .site-footer:hover,
.focus-mode .site-topbar:hover,
.focus-mode .navbar:hover,
.focus-mode .site-nav-cats:hover,
.focus-mode .breadcrumbs:hover { opacity: 1; }

/* أدوات القراءة تبقى واضحة دائماً */
.focus-mode .font-controls { opacity: 1 !important; }

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .focus-mode .fx-block { transition: none; filter: none; }
    .focus-mode .fx-block.is-focused { filter: none; }
}

@media (max-width: 560px) {
    .focus-btn span { display: none; }
    .focus-btn { padding: 6px 10px; }
}

/* ============================================
   مؤشر القراءة على حافة المقال
   ============================================ */
.article-content {
    --rp: 0;                     /* نسبة القراءة 0 → 1 (يحدّثها JS) */
    --edge-inset: 22px;          /* يطابق border-radius البطاقة */
    position: relative;
    overflow: hidden;            /* يمنع المحتوى الملصوق من تجاوز الإطار */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===== احتواء المحتوى الملصوق من مواقع أخرى ===== */
.article-content * {
    max-width: 100%;
}
.article-content img,
.article-content video,
.article-content iframe,
.article-content embed,
.article-content object {
    max-width: 100% !important;
    height: auto;
}
.article-content table {
    max-width: 100%;
    display: block;
    overflow-x: auto;            /* جدول عريض يمرّر داخلياً بدل ما يكسر الصفحة */
}
.article-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}
/* روابط طويلة بلا مسافات لا تمدّد الصندوق */
.article-content a {
    overflow-wrap: break-word;
    word-break: break-word;
}
/* ألغِ أي تموضع أو عرض ثابت ملصوق مع النص */
.article-content [style*="position:fixed"],
.article-content [style*="position: fixed"],
.article-content [style*="position:absolute"],
.article-content [style*="position: absolute"] {
    position: static !important;
}
.article-content [style*="width:"] {
    max-width: 100% !important;
}

/* المسار: يحاذي الجزء المستقيم من الحافة (يتفادى الزوايا المدوّرة) */
.article-content::before {
    content: '';
    position: absolute;
    top: var(--edge-inset);
    bottom: var(--edge-inset);
    inset-inline-start: 1px;
    width: 3px;
    border-radius: 3px;
    background: var(--line);
    pointer-events: none;
}

/* الجزء المقروء */
.article-content::after {
    content: '';
    position: absolute;
    top: var(--edge-inset);
    inset-inline-start: 1px;
    width: 3px;
    height: calc(var(--rp) * (100% - var(--edge-inset) * 2));
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--primary), var(--primary-mid));
    pointer-events: none;
    transition: height .12s linear;
}

@media print {
    .article-content::before,
    .article-content::after { display: none !important; }
}


/* ============================================
   التوب بار في الوضع الليلي
   (المتغيّرات البنفسجية تنقلب لفاتحة ليلاً،
    فنعطيه خلفية داكنة بدل اللافندر الباهت)
   ============================================ */
html[data-theme="dark"] .site-topbar,
html[data-theme="dark"] body .site-topbar,
[data-theme="dark"] .site-topbar {
    background: linear-gradient(90deg, #221D3A, #2C2650 55%, #241F42) !important;
    color: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
html[data-theme="dark"] .site-topbar .tb-sep {
    color: rgba(255, 255, 255, .28);
}
html[data-theme="dark"] .site-topbar svg {
    opacity: .8;
}
html[data-theme="dark"] .tb-city,
html[data-theme="dark"] .tb-date,
html[data-theme="dark"] .tb-time,
html[data-theme="dark"] .tb-weather {
    color: rgba(255, 255, 255, .88);
}
html[data-theme="dark"] .tb-social {
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .1);
}
html[data-theme="dark"] .tb-social:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}