/* ══════════════════════════════════════════════════════════════════════════════
   Wolf IPTV — wolf-blog.css
   ──────────────────────────────────────────────────────────────────────────────
   Blog pages styles:
     - blog.php (archive)
     - blog-post.php (single post)
     - blog-category.php
     - blog-tag.php
     - blog-search.php

   Loaded after wolf-core.css and wolf.css for proper cascade.

   Structure:
   1. Blog archive (.blog-archive, .blog-a-*, .blog-cat-tabs, search form)
   2. Blog post (.bp-*, .toc-*, share, related, tags)
   3. Backend renderer outputs (.blog-warning, .table-responsive)
   4. Responsive

   Generated from wolf.css Section 11 (M6 — 2026-04-29)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   11. BLOG — أرشيف + مقال فردي + تصنيف + وسم + بحث
   ══════════════════════════════════════════════════════════════════════════════ */
.blog-archive { max-width:1100px; margin:0 auto; padding:100px 24px 60px; }
.blog-archive-header { text-align:center; margin-bottom:40px; }
.blog-archive-title { font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:900; margin-bottom:10px; }
.blog-archive-desc { font-size:15px; color:var(--wolf-sub); }
.blog-cat-tabs { display:flex; justify-content:center; gap:8px; margin-bottom:36px; flex-wrap:wrap; }
.blog-cat-tab { padding:8px 18px; border-radius:50px; font-size:13px; font-weight:700; color:var(--wolf-sub); background:var(--wolf-surface); border:1px solid var(--wolf-border2); text-decoration:none; transition:all 0.2s; }
.blog-cat-tab:hover { color:var(--wolf-text); border-color:var(--wolf-primary); }
.blog-cat-tab.active { background:var(--wolf-primary); color:#fff; border-color:var(--wolf-primary); }
.blog-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-a-card { background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius); overflow:hidden; text-decoration:none; color:inherit; transition:all 0.3s; display:flex; flex-direction:column; }
.blog-a-card:hover { border-color:var(--wolf-primary); transform:translateY(-4px); box-shadow:0 12px 30px rgba(124,77,255,0.08); color:inherit; }
.blog-a-thumb { aspect-ratio:16/9; background:var(--wolf-surface2); overflow:hidden; }
.blog-a-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.blog-a-card:hover .blog-a-thumb img { transform:scale(1.05); }
.blog-a-thumb-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--wolf-muted); font-size:32px; }
.blog-a-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.blog-a-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--wolf-muted); margin-bottom:10px; flex-wrap:wrap; }
.blog-a-cat { background:var(--wolf-primary-glow); color:var(--wolf-primary-light); padding:2px 10px; border-radius:4px; font-weight:700; }
.blog-a-title { font-size:17px; font-weight:900; margin-bottom:8px; line-height:1.5; }
.blog-a-excerpt { font-size:13px; color:var(--wolf-sub); line-height:1.8; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-a-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--wolf-border2); font-size:12px; color:var(--wolf-muted); }
.blog-empty { text-align:center; padding:80px 20px; color:var(--wolf-muted); }
.blog-empty i { font-size:48px; display:block; margin-bottom:16px; color:var(--wolf-primary); opacity:0.4; }
.blog-pagination { display:flex; justify-content:center; gap:6px; margin-top:40px; }
.blog-page-btn { width:40px; height:40px; border-radius:10px; background:var(--wolf-surface); border:1px solid var(--wolf-border2); color:var(--wolf-sub); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all 0.2s; }
.blog-page-btn.active { background:var(--wolf-primary); color:#fff; border-color:var(--wolf-primary); }
.blog-page-btn:hover:not(.active) { color:var(--wolf-text); border-color:var(--wolf-primary); }
.bp-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:24px; flex-wrap:wrap; }
.bp-breadcrumb a { color:var(--wolf-sub); text-decoration:none; transition:color 0.2s; }
.bp-breadcrumb a:hover { color:var(--wolf-primary); }
.bp-breadcrumb-sep { color:var(--wolf-muted); font-size:11px; }
.bp-breadcrumb-current { color:var(--wolf-muted); }
.tag-cloud { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:36px; }
.tag-cloud-item { padding:6px 16px; border-radius:50px; font-size:13px; font-weight:700; text-decoration:none; transition:all 0.2s; }
.tag-cloud-item.active { background:var(--wolf-primary); color:#fff; }
.tag-cloud-item:not(.active) { background:var(--wolf-surface); border:1px solid var(--wolf-border2); color:var(--wolf-sub); }
.tag-cloud-item:not(.active):hover { border-color:var(--wolf-primary); color:var(--wolf-primary-light); }
.blog-search-form { max-width:560px; margin:0 auto 36px; position:relative; }
.blog-search-input { width:100%; padding:16px 52px 16px 20px; background:var(--wolf-surface); border:2px solid var(--wolf-border2); border-radius:16px; color:var(--wolf-text); font-family:'Tajawal',sans-serif; font-size:16px; font-weight:700; outline:none; transition:border-color 0.3s; }
.blog-search-input:focus { border-color:var(--wolf-primary); }
.blog-search-input::placeholder { color:var(--wolf-muted); }
.blog-search-icon { position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--wolf-muted); font-size:18px; pointer-events:none; }
.blog-search-btn { position:absolute; left:6px; top:50%; transform:translateY(-50%); background:var(--wolf-primary); color:#fff; border:none; width:42px; height:42px; border-radius:12px; cursor:pointer; font-size:16px; transition:opacity 0.2s; display:flex; align-items:center; justify-content:center; }
.blog-search-btn:hover { opacity:0.85; }
.blog-a-title mark, .blog-a-excerpt mark { background:rgba(124,77,255,0.25); color:var(--wolf-primary-light); border-radius:2px; padding:0 2px; }
.blog-post-page { max-width:820px; margin:0 auto; padding:100px 24px 60px; }
.bp-header { margin-bottom:32px; }
.bp-meta { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--wolf-muted); margin-bottom:16px; flex-wrap:wrap; }
.bp-cat { background:var(--wolf-primary-glow); color:var(--wolf-primary-light); padding:3px 12px; border-radius:6px; font-weight:700; font-size:12px; text-decoration:none; transition:opacity 0.2s; }
.bp-cat:hover { opacity:0.8; color:var(--wolf-primary-light); }
.bp-title { font-size:clamp(1.6rem, 4vw, 2.4rem); font-weight:900; line-height:1.4; margin-bottom:16px; }
.bp-excerpt { font-size:16px; color:var(--wolf-sub); line-height:1.8; padding-bottom:24px; border-bottom:1px solid var(--wolf-border2); }
.bp-featured { margin-bottom:32px; border-radius:var(--wolf-radius); overflow:hidden; }
.bp-featured img { width:100%; display:block; }
.bp-toc { background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius-sm); padding:20px 24px; margin-bottom:32px; }
.bp-toc-title { font-size:14px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.bp-toc-title i { color:var(--wolf-primary); }
.bp-toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.bp-toc-list a { color:var(--wolf-sub); text-decoration:none; font-size:14px; font-weight:700; transition:color 0.2s; display:block; padding:4px 0; }
.bp-toc-list a:hover { color:var(--wolf-primary); }
.bp-toc-list .toc-h3 { padding-right:20px; font-weight:400; font-size:13px; }
.bp-content { line-height:2; font-size:16px; color:var(--wolf-text); }
.bp-content h2 { font-size:22px; font-weight:900; margin:36px 0 16px; padding-top:20px; border-top:1px solid var(--wolf-border2); }
.bp-content h3 { font-size:18px; font-weight:900; margin:28px 0 12px; }
.bp-content h4 { font-size:16px; font-weight:700; margin:20px 0 8px; }
.bp-content p { margin-bottom:16px; color:var(--wolf-sub); }
.bp-content ul, .bp-content ol { margin:0 0 16px 24px; color:var(--wolf-sub); }
.bp-content li { margin-bottom:6px; }
.bp-content a { color:var(--wolf-primary-light); text-decoration:underline; }
.bp-content a:hover { color:var(--wolf-primary); }
.bp-content img { max-width:100%; border-radius:var(--wolf-radius-sm); margin:20px 0; }
.bp-content figure { margin:24px 0; }
.bp-content figcaption { font-size:13px; color:var(--wolf-muted); text-align:center; margin-top:8px; }
.bp-content blockquote { border-right:4px solid var(--wolf-primary); padding:16px 20px; margin:20px 0; background:var(--wolf-surface); border-radius:0 var(--wolf-radius-sm) var(--wolf-radius-sm) 0; }
.bp-content blockquote p { color:var(--wolf-text); margin:0; }
.bp-content blockquote cite { display:block; font-size:13px; color:var(--wolf-muted); margin-top:8px; }
.bp-content pre { background:var(--wolf-bg); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius-sm); padding:16px; overflow-x:auto; direction:ltr; text-align:left; margin:20px 0; }
.bp-content code { font-family:monospace; font-size:14px; }
.bp-content hr { border:none; height:1px; background:var(--wolf-border2); margin:36px 0; }
.bp-content .blog-warning { background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.2); border-radius:var(--wolf-radius-sm); padding:16px 20px; margin:20px 0; }
.bp-content .blog-warning strong { color:#f59e0b; }
.bp-content .table-responsive { overflow-x:auto; margin:20px 0; }
.bp-content table { width:100%; border-collapse:collapse; min-width:400px; }
.bp-content th, .bp-content td { padding:10px 14px; border:1px solid var(--wolf-border2); font-size:14px; }
.bp-content th { background:var(--wolf-surface); font-weight:700; }
.bp-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; padding-top:24px; border-top:1px solid var(--wolf-border2); }
.bp-tag { background:var(--wolf-surface); border:1px solid var(--wolf-border2); color:var(--wolf-sub); padding:5px 14px; border-radius:50px; font-size:12px; font-weight:700; text-decoration:none; transition:all 0.2s; }
.bp-tag:hover { border-color:var(--wolf-primary); color:var(--wolf-primary-light); }
.bp-author { display:flex; align-items:center; gap:16px; margin-top:32px; padding:24px; background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius); }
.bp-author-avatar { width:56px; height:56px; border-radius:50%; background:var(--wolf-primary-glow); border:2px solid var(--wolf-primary); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:var(--wolf-primary-light); flex-shrink:0; }
.bp-author-name { font-size:15px; font-weight:900; }
.bp-author-role { font-size:12px; color:var(--wolf-muted); }
.bp-related { margin-top:48px; }
.bp-related-title { font-size:18px; font-weight:900; margin-bottom:20px; }
.bp-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bp-related-card { background:var(--wolf-surface); border:1px solid var(--wolf-border2); border-radius:var(--wolf-radius-sm); padding:16px; text-decoration:none; color:inherit; transition:all 0.2s; }
.bp-related-card:hover { border-color:var(--wolf-primary); transform:translateY(-2px); color:inherit; }
.bp-related-card h4 { font-size:14px; font-weight:900; margin-bottom:6px; line-height:1.5; }
.bp-related-card p { font-size:12px; color:var(--wolf-muted); }
.bp-share-btn { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; text-decoration:none; transition:transform 0.2s, opacity 0.2s; border:none; cursor:pointer; }
.bp-share-btn:hover { transform:scale(1.1); opacity:0.9; color:#fff; }

@media (max-width:1024px) { .blog-archive-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
    .blog-archive-grid { grid-template-columns:1fr; }
    .blog-archive { padding:80px 16px 40px; }
    .blog-post-page { padding:80px 16px 40px; }
    .bp-related-grid { grid-template-columns:1fr; }
    .bp-content h2 { font-size:18px; }
    .bp-share { position:static !important; transform:none !important; flex-direction:row !important; justify-content:center; margin-top:24px; padding:16px 0; border-top:1px solid var(--wolf-border2); }
    .bp-share-btn { width:44px; height:44px; }
}