/* ══════════════════════════════════════════════════════════════════════════════
   Wolf IPTV — wolf-blog.css   (M0 — تصميم editorial، لغة الـ Home، كلاساتنا)
   ──────────────────────────────────────────────────────────────────────────────
   المكوّنات المشتركة لكل صفحات المدونة (blog · post · category · tag · search):
     .blog-mast    رأس المدونة + إحصائيات
     .blog-bar     شريط الأدوات (بحث + تبويبات تصنيفات)
     .blog-feat    المقال المميّز
     .blog-item    الصف المرقّم (قلب التصميم)
     .blog-pager   ترقيم الصفحات
   توكنز حديثة · breakpoints رسمية (1024/768/640/480) · sprite icons.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────── */
.blog-page { padding-bottom: var(--sp-24); }
.blog-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-5); }

/* ══ MASTHEAD ══════════════════════════════════════ */
.blog-mast { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-2) var(--sp-5) var(--sp-8); }
.blog-mast__inner { max-width: 720px; }
.blog-mast__content { max-width: 680px; }
.blog-mast__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--brand-soft); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--sp-5); }
.blog-mast__eyebrow .icon { width: 14px; height: 14px; }
.blog-mast__title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -1.2px; color: var(--text); margin-bottom: var(--sp-5); }
.blog-mast__title .accent { background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.blog-mast__lede { font-size: 16px; line-height: 1.7; color: var(--text-soft); }
.blog-mast__stats { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); position: relative; overflow: hidden; }
.blog-mast__stats::before { content: ''; position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--brand-soft), var(--brand), var(--brand-deep)); }
.blog-mast__stat { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) 0; }
.blog-mast__num { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -1.5px; line-height: 1; }
.blog-mast__num span { color: var(--brand-soft); font-size: 0.7em; }
.blog-mast__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }

/* ══ TOOLBAR (بحث + تبويبات) ═══════════════════════ */
.blog-bar__wrap { position: sticky; top: calc(var(--nav-h) + var(--sp-3)); z-index: 50; margin: var(--sp-4) auto var(--sp-10); padding: 0 var(--sp-5); max-width: var(--container-max); }
.blog-bar { background: var(--nav-bg); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 8px; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; box-shadow: var(--shadow-md); }
.blog-search { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-muted); font-size: 13px; font-weight: 600; transition: border-color var(--t-fast), background var(--t-fast); min-width: 200px; cursor: text; }
.blog-search:hover, .blog-search:focus-within { border-color: var(--border-brand); background: var(--surface-2); }
.blog-search .icon { color: var(--text-muted); width: 14px; height: 14px; flex-shrink: 0; }
.blog-search input { background: transparent; border: none; outline: none; flex: 1; font-family: var(--font-body); font-weight: 500; color: var(--text); min-width: 0; }
.blog-search input::placeholder { color: var(--text-muted); }
.blog-cats { display: flex; gap: 2px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.blog-cats::-webkit-scrollbar { display: none; }
.blog-cat { padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text-soft); border-radius: var(--r-pill); transition: color var(--t-fast), background-color var(--t-fast); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; }
.blog-cat:hover { color: var(--text); }
.blog-cat.is-active { color: var(--brand-soft); background: var(--brand-tint); }
.blog-cat__count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); font-weight: 700; }
.blog-cat.is-active .blog-cat__count { color: inherit; opacity: 0.7; }

/* ══ FEATURED (المقال المميّز) ═════════════════════ */
.blog-feat__wrap { max-width: var(--container-max); margin: 0 auto var(--sp-10); padding: 0 var(--sp-5); }
.blog-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; position: relative; transition: border-color var(--t-base), transform var(--t-fast); }
.blog-feat::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; background: linear-gradient(90deg, var(--brand-soft), var(--brand), var(--brand-deep)); }
.blog-feat:hover { border-color: var(--border-brand); transform: translateY(-2px); }
.blog-feat__link { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); padding: var(--sp-10); align-items: center; text-decoration: none; color: inherit; }
.blog-feat__content { min-width: 0; }
.blog-feat__badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--brand-soft); text-transform: uppercase; letter-spacing: 1.5px; background: var(--brand-tint); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: var(--sp-5); }
.blog-feat__badge::before { content: '★'; color: var(--gold); font-size: 13px; line-height: 1; }
.blog-feat__top { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-4); }
.blog-feat__cat { color: var(--brand-soft); }
.blog-feat__time { color: var(--text-muted); }
.blog-feat__title { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 900; line-height: 1.2; letter-spacing: -0.8px; color: var(--text); margin-bottom: var(--sp-4); transition: color var(--t-fast); }
.blog-feat:hover .blog-feat__title { color: var(--brand-soft); }
.blog-feat__excerpt { font-size: 15px; color: var(--text-soft); line-height: 1.75; margin-bottom: var(--sp-5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-feat__meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-weight: 600; }
.blog-feat__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.blog-feat__num { font-family: var(--font-display); font-size: clamp(80px, 12vw, 140px); font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--brand-tint); letter-spacing: -6px; user-select: none; }

/* ══ BLOG LIST — الصفوف المرقّمة (قلب التصميم) ═════ */
.blog-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.blog-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base); position: relative; }
.blog-item:hover { border-color: var(--border-brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-item__link { display: grid; grid-template-columns: 80px 1fr 36px; gap: var(--sp-5); align-items: center; padding: var(--sp-5) var(--sp-6); text-decoration: none; color: inherit; }
.blog-item__num { font-family: var(--font-display); font-size: 56px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--brand-tint); letter-spacing: -3px; transition: -webkit-text-stroke-color var(--t-base); user-select: none; text-align: center; }
.blog-item:hover .blog-item__num { -webkit-text-stroke-color: var(--border-brand); }
.blog-item__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.blog-item__top { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.blog-item__cat { color: var(--brand-soft); }
.blog-item__time { color: var(--text-muted); }
.blog-item__title { font-family: var(--font-display); font-size: clamp(17px, 2vw, 19px); font-weight: 800; line-height: 1.4; color: var(--text); letter-spacing: -0.3px; transition: color var(--t-fast); }
.blog-item:hover .blog-item__title { color: var(--brand-soft); }
.blog-item__excerpt { font-size: 14px; color: var(--text-soft); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-item__meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.blog-item__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.blog-item__arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); flex-shrink: 0; }
.blog-item__arrow .icon { width: 14px; height: 14px; }
.blog-item:hover .blog-item__arrow { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px var(--brand-glow); }

/* ══ PAGER ═════════════════════════════════════════ */
.blog-pager { max-width: 880px; margin: var(--sp-10) auto 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.blog-pager__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 40px; height: 40px; padding: 0 var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-soft); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.blog-pager__btn .icon { width: 15px; height: 15px; }
.blog-pager__btn:hover { border-color: var(--border-brand); color: var(--brand-soft); }
.blog-pager__btn.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: var(--brand); color: #fff; }
.blog-pager__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ══ EMPTY STATE ═══════════════════════════════════ */
.blog-empty { max-width: 880px; margin: 0 auto; text-align: center; padding: var(--sp-20) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
.blog-empty .icon { width: 40px; height: 40px; color: var(--text-muted); opacity: .5; margin-bottom: var(--sp-4); }
.blog-empty__title { font-size: 18px; font-weight: 900; color: var(--text); margin-bottom: var(--sp-2); }
.blog-empty__sub { font-size: 14px; color: var(--text-soft); }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints رسمية (1024 / 768 / 640 / 480)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .blog-mast__inner { grid-template-columns: 1fr; gap: var(--sp-8); align-items: start; }
    .blog-feat__link { grid-template-columns: 1fr; gap: var(--sp-4); }
    .blog-feat__num { display: none; }
}
@media (max-width: 768px) {
    .blog-bar { grid-template-columns: 1fr; border-radius: var(--r-xl); padding: var(--sp-2); gap: var(--sp-2); }
    .blog-search { width: 100%; min-width: 0; }
    .blog-mast { padding: var(--sp-10) var(--sp-5) var(--sp-8); }
    .blog-feat__link { padding: var(--sp-6); }
    .blog-item__link { grid-template-columns: 56px 1fr 32px; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
    .blog-item__num { font-size: 44px; }
    .blog-item__arrow { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
    .blog-mast__stats { grid-template-columns: 1fr 1fr; padding: var(--sp-5); }
    .blog-item__link { grid-template-columns: 40px 1fr; gap: var(--sp-3); padding: var(--sp-4); }
    .blog-item__num { font-size: 32px; -webkit-text-stroke-width: 1px; }
    .blog-item__arrow { display: none; }
    .blog-item__excerpt { -webkit-line-clamp: 3; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARTICLE (blog-post.php) — صفحة المقال editorial
   ══════════════════════════════════════════════════════════════════════════════ */
.blog-article { padding-top: var(--sp-2); padding-bottom: var(--sp-20); }
.blog-article__head { max-width: 760px; margin: 0 auto var(--sp-10); padding: 0 var(--sp-5); text-align: center; }
.blog-article__cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--brand-tint); color: var(--brand-soft); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; margin-bottom: var(--sp-5); }
.blog-article__title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 46px); font-weight: 900; line-height: 1.12; letter-spacing: -1.2px; color: var(--text); margin-bottom: var(--sp-5); }
.blog-article__lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.75; color: var(--text-soft); font-weight: 500; margin: 0 auto var(--sp-6); max-width: 640px; }
.blog-article__metarow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; max-width: 640px; margin: 0 auto; padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.blog-article__author { display: flex; align-items: center; gap: var(--sp-3); }
.blog-article__author-avatar { width: 44px; height: 44px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; font-weight: 900; flex-shrink: 0; }
.blog-article__author-name { font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--text); text-align: start; }
.blog-article__author-role { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-soft); text-align: start; }
.blog-article__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.blog-article__meta span { display: inline-flex; align-items: center; gap: 5px; }
.blog-article__meta .icon { width: 14px; height: 14px; }

.blog-article__feature { max-width: 960px; margin: 0 auto var(--sp-10); padding: 0 var(--sp-5); }
.blog-article__feature img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--r-2xl); border: 1px solid var(--border); display: block; background: var(--surface-2, rgba(255,255,255,.03)); }

.blog-article__layout { max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-5); display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-10); align-items: start; }

/* TOC */
.blog-toc { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-5); }
.blog-toc__title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-soft); margin-bottom: var(--sp-4); }
.blog-toc__title .icon { width: 14px; height: 14px; }
.blog-toc__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.blog-toc__list a { color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.5; display: block; padding: 6px var(--sp-3); border-inline-end: 2px solid transparent; margin-inline-end: -1px; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); border-radius: var(--r-xs) 0 0 var(--r-xs); }
.blog-toc__list a:hover { background: var(--surface-2); color: var(--text); }
.blog-toc__list a.is-active { color: var(--brand-soft); border-inline-end-color: var(--brand); font-weight: 800; }
.blog-toc__list a:hover { color: var(--brand-soft); }

/* Article body typography */
.blog-article__body { font-size: 17px; line-height: 1.85; color: var(--text-soft); max-width: 760px; }
.blog-article__body > *:first-child { margin-top: 0; }
.blog-article__body h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 900; line-height: 1.2; letter-spacing: -0.8px; color: var(--text); margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.blog-article__body h2::before { content: '§'; color: var(--brand-soft); font-weight: 900; margin-inline-end: var(--sp-2); }
.blog-article__body h3 { font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; letter-spacing: -0.4px; color: var(--text); margin-top: var(--sp-8); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.blog-article__body p { margin-bottom: var(--sp-5); }
.blog-article__body ul, .blog-article__body ol { padding-inline-start: var(--sp-5); margin: var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.blog-article__body li { padding-inline-start: var(--sp-1); }
.blog-article__body a { color: var(--brand-soft); border-bottom: 1px solid currentColor; font-weight: 700; text-decoration: none; transition: color var(--t-fast); }
.blog-article__body a:hover { color: var(--brand); }
.blog-article__body img { max-width: 100%; height: auto; border-radius: var(--r-lg); margin: var(--sp-6) 0; }
.blog-article__body blockquote { position: relative; margin: var(--sp-10) 0; padding: var(--sp-6) var(--sp-8); border-inline-start: 4px solid var(--brand); background: linear-gradient(135deg, var(--brand-tint) 0%, transparent 80%); border-radius: 0 var(--r-lg) var(--r-lg) 0; color: var(--text); font-size: 19px; font-weight: 600; line-height: 1.6; }
.blog-article__body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 6px; color: var(--brand-soft); }
.blog-article__body pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); overflow-x: auto; margin: var(--sp-6) 0; }
.blog-article__body pre code { background: none; border: none; padding: 0; }

/* Tags + share */
.blog-article__foot { max-width: 760px; }
.blog-article__tags { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.blog-tag { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
.blog-tag:hover { border-color: var(--border-brand); color: var(--brand-soft); }
.blog-tag::before { content: '#'; color: var(--brand-soft); }

/* Author card */
.blog-author { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; gap: var(--sp-5); align-items: flex-start; }
.blog-author__avatar { width: 56px; height: 56px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 900; flex-shrink: 0; }
.blog-author__name { font-size: 15px; font-weight: 900; color: var(--text); margin-bottom: 3px; }
.blog-author__role { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--brand-soft); margin-bottom: var(--sp-2); }
.blog-author__bio { font-size: 13px; color: var(--text-soft); line-height: 1.7; }

/* Related (يعيد استخدام .blog-list / .blog-item) */
.blog-related { max-width: 880px; margin: var(--sp-16) auto 0; padding: 0 var(--sp-5); }
.blog-related__title { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--text); margin-bottom: var(--sp-6); text-align: center; }

@media (max-width: 1024px) {
    .blog-article__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
    .blog-toc { position: static; }
}
@media (max-width: 768px) {
    .blog-article__body { font-size: 16px; }
}

/* Article: no-TOC layout + breadcrumb + share sidebar + reading progress */
.blog-article__layout--notoc { grid-template-columns: 1fr; max-width: 760px; }
.bp-share-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; transition: transform var(--t-fast); box-shadow: var(--shadow-md); text-decoration: none; }
.bp-share-btn:hover { transform: scale(1.1); }
.bp-share-btn .icon { width: 18px; height: 18px; }
.bp-share-btn .icon-brand { fill: currentColor; stroke: none; }
@media (max-width: 1024px) { .bp-share { position: static !important; flex-direction: row !important; transform: none !important; justify-content: center; margin: var(--sp-8) auto 0; max-width: 760px; } }
.blog-toc__list a.is-h3 { padding-inline-start: var(--sp-4); font-size: 12px; opacity: .85; }
/* search highlight */
.blog-item mark { background: var(--brand-tint); color: var(--brand-soft); border-radius: var(--r-xs); padding: 0 3px; font-weight: 700; }
.blog-tag.is-active { border-color: var(--brand); color: var(--brand-soft); background: var(--brand-tint); }