/* ============================================================================
   لوحة أخبار المنصة — تُستخدم في موضعين بنفس الملف:
   - الصفحة المستقلة /portal/news (جسم بعرض مقروء + رأس تعريفي).
   - التبويب المدمج #tab-news داخل /portal (بلا رأس تعريفي — التبويب
     يغني عنه؛ رقاقات التصفية والخيط الزمني فقط).
   بتوكنز البوابة (portal.css): --surface/--text/--muted/--border/--primary
   حصراً ولا لون مصلَّد. القواعد المنطقية (inline-start/end) كي تنقلب تلقائياً
   مع تبديل اللغة.
   ============================================================================ */

/* جسم الصفحة المستقلة — في التبويب المدمج لا يُستخدم */
.np-body {
    padding: 22px clamp(14px, 3vw, 30px) 48px;
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== الرأس التعريفي (الصفحة المستقلة فقط) — تدرّج هيرو البوابة ===== */
.np-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    border-radius: var(--radius);
    background:
        radial-gradient(420px 200px at 12% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 6%, var(--surface)),
            color-mix(in srgb, var(--accent) 6%, var(--surface)) 60%,
            var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: var(--shadow-sm);
}

.np-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

.np-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: .06em;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.np-hero-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--title);
    letter-spacing: -.015em;
    margin-bottom: 6px;
}

.np-hero-sub {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
}

.np-hero-art {
    width: 64px;
    height: 64px;
    flex: none;
    color: color-mix(in srgb, var(--primary) 55%, transparent);
}

/* ===== شريط التصفية — مقسّم (segmented) ثابت أعلى الصفحة =====
   مسار رمادي واحد وتبويب نشط بقبّة بيضاء، يلحق بالتمرير كي يبقى
   تبديل النوع متاحاً في أي موضع من القائمة. */
.np-filters {
    position: sticky;
    /* الإزاحة تحت الترويسة اللاصقة (~62px) وإلا انزلق الشريط خلفها عند التمرير */
    top: 74px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: 4px;
    background: color-mix(in srgb, var(--title) 6%, var(--surface));
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    margin-bottom: 18px;
}

.np-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.np-chip:hover { color: var(--title); }

.np-chip.is-active {
    background: var(--surface);
    color: var(--title);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.np-chip-count {
    font-size: 10.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.np-chip.is-active .np-chip-count {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}

/* ===== القائمة التحريرية — حاوية واحدة وفواصل شعرية =====
   لا بطاقة لكل خبر: كل المنشورات في سطح واحد، ويفصلها خط حِدّيّ هادئ،
   والعنوان هو بطل كل صفّ والنوع/الإصدار/التاريخ سطر تعريف علوي صغير. */
.np-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* الحاوية الفعلية في الوضعين هي #npList — render في portal-news.js يرسم
   ‎.np-card مباشرة داخله بلا غلاف، فبدون تنسيقه تظهر البطاقات عائمة بلا
   سطح. ‎.np-list مرآة صنفية لو استُخدمت يوماً. */
#npList,
.np-list {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.np-card {
    padding: 20px 24px;
    transition: background-color .15s ease;
}

.np-card + .np-card {
    border-top: 1px solid var(--border);
}

.np-card:hover { background: color-mix(in srgb, var(--primary) 3%, transparent); }

.np-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.np-kind {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--primary-soft);
    color: var(--primary);
}

/* لكل نوع لونه: الإصدار أساسيّ، والعرض تحذيريّ دافئ، والخبر محايد */
.np-kind.offer {
    background: color-mix(in srgb, #eba02e 18%, transparent);
    color: #a8701a;
}

.np-kind.news {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
}

.np-version {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 2px 9px;
    direction: ltr;
    unicode-bidi: isolate;
}

.np-date {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.np-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--title);
    letter-spacing: -.012em;
    margin-bottom: 8px;
    line-height: 1.45;
}

.np-card-body {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.85;
    max-width: 68ch;
}

.np-card-body p + p {
    margin-top: 10px;
}

/* ===== الفراغ ===== */
.np-empty {
    text-align: center;
    padding: 52px 18px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

.np-empty-ic {
    font-size: 30px;
    margin-bottom: 10px;
}

.np-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--title);
    margin-bottom: 4px;
}

.np-empty-sub {
    font-size: 12.5px;
    color: var(--muted);
}

/* ===== داخل التبويب المدمج (#tab-news في /portal) =====
   الرأس التعريفي غائب (التبويب يغني عنه). شريط التصفيّة هنا رقاقات حبّة
   مدمجة بلغة تبويبات البوابة — لا المسار المقسّم بعرض الصفحة كاملاً الذي
   يليق بالصفحة المستقلة وحدها — ولا التصاق داخل تبويب مدمج. */
#tab-news .np-filters {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    margin-bottom: 0;
}
#tab-news .np-chip {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
}
#tab-news .np-chip:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
    color: var(--primary);
}
#tab-news .np-chip.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: none;
}
#tab-news .np-section { margin-top: 16px; }

@media (max-width: 640px) {
    /* على الجوال: الشريط يلفّ إلى شبكة ٢×٢ — وبلا التصاق (الترويسة الملتفّة
       أعلى الجوال لا عرض ثابت لها فيصعب حساب إزاحة آمنة) */
    .np-filters { position: static; grid-template-columns: repeat(2, 1fr); }

    .np-hero { padding: 18px 20px; }

    .np-hero-art { display: none; }

    .np-hero-title { font-size: 20px; }

    .np-card { padding: 16px 18px; }

    .np-card-title { font-size: 16px; }
}