/**
 * 7-archive.css — arabdown.net Category / Archive / Tag / Search
 * إعادة كتابة كاملة وفق برومت التصميم.
 *
 * المراجع البصرية:
 *   - BBC Arabic category pages → اسم تصنيف بارز بشريط لوني + grid منتظم
 *   - TechCrunch archive         → شبكة نظيفة بدون زخرفة + typography هادئة
 *   - The Verge                   → section headers هادئة + فاصل أخضر دقيق
 *
 * بنية الأب:
 *   .archive-outer
 *     ├── .primary-header       ← اسم التصنيف + الوصف
 *     ├── .glob-links           ← sub-categories (filter pills)
 *     └── .primary-content
 *          ├── .posts-loop      ← شبكة المقالات
 *          └── .nav-pages       ← pagination
 *
 * ملاحظة على !important:
 *   ضروري لتجاوز inline CSS من القالب الأب (Ultra News v50) — يحقن
 *   على .primary-header و .post-content بـ specificity عالية.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. CATEGORY HEADER — اسم التصنيف + الوصف
   ──────────────────────────────────────────────────────────────────────
   نظيف، أبيض، بشريط أخضر دقيق قبل العنوان (مرجع: BBC Arabic).
   ════════════════════════════════════════════════════════════════════════ */
.adc-archive .archive-outer .primary-header,
.archive-outer .primary-header {
    background: #ffffff !important;
    padding: 48px 0 32px !important;
    border-bottom: 1px solid #eeeeee !important;
    margin-bottom: 0;
    position: static;
    overflow: visible;
}
/* إلغاء أي pseudo زخرفي من نسخ قديمة */
.adc-archive .archive-outer .primary-header::before,
.archive-outer .primary-header::before {
    content: none;
}

/* اسم التصنيف */
.adc-archive .archive-outer .primary-header h1,
.archive-outer .primary-header h1 {
    font-size: clamp(28px, 4vw, 48px) !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
}

/* شريط لوني قبل العنوان */
.adc-archive .archive-outer .primary-header h1::before,
.archive-outer .primary-header h1::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 0.8em;
    background: #6e9f44;
    border-radius: 3px;
    margin-inline-end: 12px;
    flex-shrink: 0;
    box-shadow: none;
}

/* وصف التصنيف (the_archive_description) */
.adc-archive .archive-outer .primary-header h2,
.adc-archive .archive-outer .primary-header .archive-description,
.archive-outer .primary-header h2,
.archive-outer .primary-header .archive-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    margin-top: 8px !important;
    max-width: 600px;
    line-height: 1.6 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2. FILTERS BAR — sub-categories (.glob-links)
   ──────────────────────────────────────────────────────────────────────
   pills رمادية فاتحة مع active أخضر — مرجع: TechCrunch tag filter.
   ════════════════════════════════════════════════════════════════════════ */
.archive-outer .glob-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    margin: 0 0 16px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    list-style: none;
}

.archive-outer .glob-links a,
.archive-outer .glob-links li > a {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 200ms ease;
    transform: none;
    box-shadow: none;
}

.archive-outer .glob-links a:hover {
    border-color: #6e9f44;
    color: #6e9f44;
    background: #f5f5f5;
    transform: none;
    box-shadow: none;
}

.archive-outer .glob-links a.active,
.archive-outer .glob-links a.current,
.archive-outer .glob-links .current-cat > a,
.archive-outer .glob-links li.active > a {
    background: #6e9f44;
    color: #ffffff;
    border-color: #6e9f44;
}

/* sort bar (إن وُجد) — يستخدم نفس نمط الـ pills */
.archive-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin-bottom: 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.archive-sort a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: all 200ms ease;
}
.archive-sort a:hover {
    border-color: #6e9f44;
    color: #6e9f44;
    background: #f5f5f5;
}
.archive-sort a.active {
    background: #6e9f44 !important;
    border-color: #6e9f44 !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
   3. CONTENT WRAPPER
   ════════════════════════════════════════════════════════════════════════ */
.adc-archive .archive-outer .primary-content,
.archive-outer .primary-content {
    background: #ffffff !important;
    padding-block: 32px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   4. POSTS GRID — Mobile (افتراضي): row layout
   ──────────────────────────────────────────────────────────────────────
   كارد عرض كامل، صورة 100×80 (4:3) جانب النص — مرجع: BBC Arabic mobile.
   ════════════════════════════════════════════════════════════════════════ */
.adc-archive .posts-loop,
.archive-outer .posts-loop {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-wrap: nowrap;
}

.adc-archive .posts-loop .post,
.archive-outer .posts-loop .post {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

.adc-archive .posts-loop .post .post-content,
.archive-outer .posts-loop .post .post-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 16px 0;
    transform: none !important;
    transition: none;
}

.adc-archive .posts-loop .post:last-child .post-content,
.archive-outer .posts-loop .post:last-child .post-content {
    border-bottom: 0 !important;
}

.adc-archive .posts-loop .post .post-thumb,
.archive-outer .posts-loop .post .post-thumb {
    flex: 0 0 100px;
    margin: 0;
    border: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    height: 80px;
}
.adc-archive .posts-loop .post .post-thumb img,
.archive-outer .posts-loop .post .post-thumb img {
    width: 100px;
    height: 80px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.adc-archive .posts-loop .post .post-title,
.archive-outer .posts-loop .post .post-title {
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.adc-archive .posts-loop .post .post-title h3,
.archive-outer .posts-loop .post .post-title h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adc-archive .posts-loop .post .post-meta,
.archive-outer .posts-loop .post .post-meta {
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #888;
}
.adc-archive .posts-loop .post .post-meta *,
.archive-outer .posts-loop .post .post-meta * {
    color: #888;
    font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════════
   5. POSTS GRID — Tablet ≥768px: column layout, 2 أعمدة
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .adc-archive .posts-loop,
    .archive-outer .posts-loop {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }

    .adc-archive .posts-loop .post,
    .archive-outer .posts-loop .post {
        width: auto !important;
        flex: none !important;
    }

    .adc-archive .posts-loop .post .post-content,
    .archive-outer .posts-loop .post .post-content {
        flex-direction: column;
        gap: 0;
        padding: 0;
        border: 0 !important;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        height: 100%;
    }

    .adc-archive .posts-loop .post .post-thumb,
    .archive-outer .posts-loop .post .post-thumb {
        flex: none;
        width: 100%;
        height: auto;
        border-radius: 0;
    }
    .adc-archive .posts-loop .post .post-thumb img,
    .archive-outer .posts-loop .post .post-thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 0;
    }

    .adc-archive .posts-loop .post .post-title,
    .archive-outer .posts-loop .post .post-title {
        padding: 14px 14px 6px;
    }
    .adc-archive .posts-loop .post .post-title h3,
    .archive-outer .posts-loop .post .post-title h3 {
        font-size: 17px;
        -webkit-line-clamp: 3;
    }
    .adc-archive .posts-loop .post .post-meta,
    .archive-outer .posts-loop .post .post-meta {
        padding: 0 14px 14px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   6. POSTS GRID — Desktop ≥1024px: 3 أعمدة + كارد بحدود وhover
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .adc-archive .posts-loop,
    .archive-outer .posts-loop {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .adc-archive .posts-loop .post .post-content,
    .archive-outer .posts-loop .post .post-content {
        border: 1px solid #ebebeb !important;
        border-radius: 8px;
        transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .adc-archive .posts-loop .post .post-content:hover,
    .archive-outer .posts-loop .post .post-content:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   7. PAGINATION — أرقام دائرية + سابق/تالي نصي
   ════════════════════════════════════════════════════════════════════════ */
.nav-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 48px;
    padding: 0;
    list-style: none;
}

.nav-pages a,
.nav-pages span,
.nav-pages .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #ffffff;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 200ms ease;
    box-shadow: none !important;
    transform: none !important;
}

.nav-pages a:hover {
    border-color: #6e9f44;
    color: #6e9f44;
    background: #ffffff;
}

.nav-pages .current,
.nav-pages span.current,
.nav-pages .page-numbers.current {
    background: #6e9f44 !important;
    border-color: #6e9f44 !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* "السابق" / "التالي" — text فقط بشكل بيضاوي بدل دائرة */
.nav-pages a.prev,
.nav-pages a.next,
.nav-pages a.prev-page,
.nav-pages a.next-page,
.nav-pages .prev.page-numbers,
.nav-pages .next.page-numbers {
    border-radius: 20px;
    padding: 0 16px;
    gap: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   8. STICKY SIDEBAR — لو فُعِّل في القالب
   ════════════════════════════════════════════════════════════════════════ */
.archive-outer .secondary-content,
.archive-outer aside.sidebar,
.adc-archive aside.sidebar {
    background: #fafafa;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 16px;
}
@media (min-width: 1024px) {
    .archive-outer .secondary-content,
    .archive-outer aside.sidebar,
    .adc-archive aside.sidebar {
        position: sticky;
        top: calc(var(--adc-header-h, 64px) + 16px);
        align-self: start;
    }
}

.archive-outer .secondary-content .widget-title,
.archive-outer aside.sidebar .widget-title,
.adc-archive aside.sidebar .widget-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px !important;
    padding: 0 0 8px 0 !important;
    border: 0 !important;
    border-bottom: 2px solid #6e9f44 !important;
    background: none !important;
    display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   9. 404 PAGE
   ════════════════════════════════════════════════════════════════════════ */
.error-outer .primary-content-inner {
    text-align: center;
    padding: 96px 16px;
}
.error-outer h1 {
    font-size: clamp(4rem, 3rem + 5vw, 8rem);
    font-weight: 900;
    color: #6e9f44;
    line-height: 1;
    margin-bottom: 24px;
}

/* صفحة الكاتب: انظر 14-author.css — لها قالب مستقل (author.php) */