/* =========================================================
   ADZO — Blog (magazine + article) design system
   رنگ/فونت از main.css برند ارث می‌برد. نسخه 1.0.0
   .blog-mag = صفحه‌ی لیست | .blog-article = صفحه‌ی مقاله
   ========================================================= */

.blog-mag, .blog-article {
    --b-primary: var(--primary-color-3, rgb(115,103,240));
    --b-dark: var(--primary-color-1, rgb(47,51,73));
    --b-ink: var(--primary-color-5, rgba(47,43,61,.9));
    --b-muted: #6b6f80;
    --b-line: #ecedf3;
    --b-soft: #f6f5ff;
    --b-grad: linear-gradient(120deg, rgb(115,103,240) 0%, #5f57be 100%);
    color: var(--b-ink);
    overflow-x: hidden;
}
.blog-mag .b-container, .blog-article .b-container { max-width: 1180px; margin-inline: auto; padding-inline: 22px; }
.blog-mag .b-narrow { max-width: 820px; margin-inline: auto; }

/* ---------------- HERO ---------------- */
.blog-hero { background: radial-gradient(1200px 360px at 50% -60px, var(--b-soft) 0%, #fff 72%);
    border-bottom: 1px solid var(--b-line); padding: 60px 0 30px; text-align: center; }
.blog-hero .eyebrow { display:inline-block; font-size:13px; font-weight:700; color:var(--b-primary);
    background:rgba(115,103,240,.10); padding:6px 14px; border-radius:30px; margin-bottom:14px; }
.blog-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; color: var(--b-dark); margin: 0 0 12px; }
.blog-hero h1 .hl { color: var(--b-primary); }
.blog-hero p { color: var(--b-muted); font-size: 1.05rem; margin: 0 auto; max-width: 620px; }
.blog-hero .b-search { margin: 24px auto 6px; max-width: 520px; display:flex; gap:8px; }
.blog-hero .b-search input { flex:1; border:1px solid var(--b-line); border-radius:14px; padding:0 18px; height:50px; font:inherit; background:#fff; outline:none; }
.blog-hero .b-search input:focus { border-color:var(--b-primary); box-shadow:0 0 0 3px rgba(115,103,240,.12); }
.blog-hero .b-search button { border:none; background:var(--b-grad); color:#fff; border-radius:14px; padding:0 24px; font-weight:700; cursor:pointer; }

/* ---------------- CATEGORY CHIPS ---------------- */
.b-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px 0 6px; }
.b-chips a { display:inline-block; padding:9px 18px; border-radius:30px; border:1px solid var(--b-line);
    background:#fff; color:var(--b-ink); font-size:.92rem; font-weight:600; transition:.2s; }
.b-chips a:hover { border-color:var(--b-primary); color:var(--b-primary); }
.b-chips a.active { background:var(--b-grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(115,103,240,.28); }

/* ---------------- FEATURED POST ---------------- */
.b-featured { display:grid; grid-template-columns: 1.15fr 1fr; gap:30px; align-items:center;
    background:#fff; border:1px solid var(--b-line); border-radius:24px; overflow:hidden; margin:30px 0 40px; }
.b-featured .f-thumb { aspect-ratio:16/10; overflow:hidden; background:var(--b-soft); height:100%; }
.b-featured .f-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.b-featured .f-body { padding: 34px 34px 34px 10px; }
.b-featured .f-cat { color:var(--b-primary); font-weight:700; font-size:.9rem; }
.b-featured .f-body h2 { font-size: clamp(1.4rem,2.4vw,2rem); font-weight:800; color:var(--b-dark); margin:10px 0 12px; line-height:1.5; }
.b-featured .f-body p { color:var(--b-muted); line-height:2; margin:0 0 18px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.b-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--b-muted); font-size:.86rem; align-items:center; }
.b-meta .dot { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
.b-featured .f-more { display:inline-block; margin-top:18px; background:var(--b-grad); color:#fff;
    padding:11px 26px; border-radius:12px; font-weight:700; box-shadow:0 8px 22px rgba(115,103,240,.26); }

/* ---------------- POST GRID ---------------- */
.b-sec-title { font-size:1.4rem; font-weight:800; color:var(--b-dark); margin:0 0 6px; }
.b-sec-sub { color:var(--b-muted); margin:0 0 24px; }
.b-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px; }
.b-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--b-line);
    border-radius:20px; overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s; height:100%; }
.b-card:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(47,51,73,.12); border-color:transparent; }
.b-card .c-thumb { aspect-ratio:16/10; overflow:hidden; background:var(--b-soft); position:relative; }
.b-card .c-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.b-card:hover .c-thumb img { transform:scale(1.05); }
.b-card .c-cat { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:var(--b-primary);
    font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:20px; backdrop-filter:blur(4px); }
.b-card .c-body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.b-card .c-body h3 { font-size:1.08rem; font-weight:800; color:var(--b-dark); line-height:1.7; margin:0 0 10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.b-card .c-body p { color:var(--b-muted); font-size:.92rem; line-height:1.9; margin:0 0 16px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.b-card .c-meta { margin-top:auto; }
.b-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:var(--b-grad); color:#fff; font-weight:800; font-size:1.1rem; text-align:center; padding:16px; }

/* ---------------- PAGINATION ---------------- */
.b-pager { display:flex; justify-content:center; align-items:center; gap:8px; margin:44px 0 10px; flex-wrap:wrap; }
.b-pager a, .b-pager span { min-width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    padding:0 12px; border-radius:12px; border:1px solid var(--b-line); background:#fff; font-weight:700; color:var(--b-ink); }
.b-pager a:hover { border-color:var(--b-primary); color:var(--b-primary); }
.b-pager .active { background:var(--b-grad); color:#fff; border-color:transparent; }
.b-pager .disabled { opacity:.4; pointer-events:none; }

.b-empty { text-align:center; color:var(--b-muted); padding:60px 0; }

/* =================================================================
   ARTICLE PAGE
   ================================================================= */
.blog-article .a-head { background: radial-gradient(1000px 320px at 50% -40px, var(--b-soft) 0%, #fff 74%);
    border-bottom:1px solid var(--b-line); padding:34px 0 30px; }
.a-breadcrumb { font-size:.86rem; color:var(--b-muted); margin-bottom:18px; }
.a-breadcrumb a { color:var(--b-muted); }
.a-breadcrumb a:hover { color:var(--b-primary); }
.a-breadcrumb .sep { margin:0 6px; opacity:.6; }
.a-cat { display:inline-block; background:rgba(115,103,240,.10); color:var(--b-primary);
    font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:20px; margin-bottom:14px; }
.blog-article h1.a-title { font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; color:var(--b-dark); line-height:1.5; margin:0 0 18px; }
.a-metabar { display:flex; flex-wrap:wrap; gap:16px; align-items:center; color:var(--b-muted); font-size:.9rem; }
.a-metabar .who { display:flex; align-items:center; gap:10px; }
.a-metabar .avatar { width:38px; height:38px; border-radius:50%; background:var(--b-grad); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; }
.a-metabar .m-item { display:flex; align-items:center; gap:6px; }
.a-metabar svg { width:16px; height:16px; opacity:.7; }

.a-cover { max-width:1000px; margin:26px auto 0; padding-inline:22px; }
.a-cover img { width:100%; border-radius:22px; display:block; box-shadow:0 22px 50px rgba(47,51,73,.14); }

/* article body typography */
.article-body { max-width:800px; margin:34px auto 0; padding-inline:22px; font-size:1.075rem; line-height:2.1; }
.article-body p { margin:0 0 18px; color:var(--b-ink); }
.article-body h2 { font-size:clamp(1.4rem,2.2vw,1.8rem); font-weight:800; color:var(--b-dark); margin:38px 0 12px;
    scroll-margin-top:90px; }
.article-body h3 { font-size:1.25rem; font-weight:700; color:var(--b-dark); margin:26px 0 10px; scroll-margin-top:90px; }
.article-body ul, .article-body ol { margin:0 0 20px; padding-right:26px; }
.article-body li { margin-bottom:10px; }
.article-body a { color:var(--b-primary); font-weight:600; border-bottom:1px solid rgba(115,103,240,.35); }
.article-body a:hover { border-bottom-color:var(--b-primary); }
.article-body img { border-radius:14px; margin:16px 0; max-width:100%; height:auto; }
.article-body blockquote { border-right:4px solid var(--b-primary); background:var(--b-soft);
    margin:20px 0; padding:16px 22px; border-radius:0 14px 14px 0; color:var(--b-dark); }
.article-body strong { color:var(--b-dark); }
.article-body .table-scroll, .article-body table { display:block; overflow-x:auto; }
.article-body table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.98rem; min-width:420px; }
.article-body th, .article-body td { border:1px solid var(--b-line); padding:12px 14px; text-align:right; }
.article-body thead th { background:var(--b-soft); color:var(--b-dark); font-weight:800; }
.article-body tbody tr:nth-child(even) { background:#fbfbfe; }

/* injected TOC (.blog-nav from controller) */
.article-body .blog-nav { background:var(--b-soft); border:1px solid rgba(115,103,240,.15);
    padding:20px 26px; border-radius:16px; margin:0 0 26px; }
.article-body .blog-nav > div:first-child p { font-weight:800; color:var(--b-dark); margin:0 0 8px; }
.article-body .blog-nav ul { list-style:none; margin:0; padding-right:6px; }
.article-body .blog-nav nav > ul > li { margin-bottom:6px; }
.article-body .blog-nav a { border:none; color:var(--b-ink); }
.article-body .blog-nav a:hover { color:var(--b-primary); }

/* generic article section wrapper */
.a-wrap { max-width:840px; margin-inline:auto; padding-inline:22px; }

/* tags */
.a-tags { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; }
.a-tags a { background:var(--b-soft); color:var(--b-ink); border-radius:20px; padding:6px 14px; font-size:.85rem; }
.a-tags a:hover { color:var(--b-primary); }

/* share */
.a-share { display:flex; align-items:center; gap:10px; margin:26px 0; padding:18px 0; border-top:1px solid var(--b-line); border-bottom:1px solid var(--b-line); }
.a-share .lbl { font-weight:700; color:var(--b-dark); }
.a-share a, .a-share button { width:42px; height:42px; border-radius:12px; border:1px solid var(--b-line);
    background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--b-ink); transition:.2s; }
.a-share a:hover, .a-share button:hover { border-color:var(--b-primary); color:var(--b-primary); }
.a-share svg { width:20px; height:20px; }

/* author box */
.a-author { display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--b-line);
    border-radius:18px; padding:22px; margin:26px 0; }
.a-author .av { width:60px; height:60px; border-radius:50%; background:var(--b-grad); color:#fff; flex:0 0 60px;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.4rem; }
.a-author .name { font-weight:800; color:var(--b-dark); }
.a-author .role { color:var(--b-muted); font-size:.9rem; }

/* FAQ */
.a-faq { margin:30px 0; }
.a-faq h2 { font-size:1.5rem; font-weight:800; color:var(--b-dark); margin:0 0 16px; }
.a-faq details { border:1px solid var(--b-line); border-radius:14px; margin-bottom:12px; background:#fff; }
.a-faq details[open] { border-color:rgba(115,103,240,.35); box-shadow:0 8px 24px rgba(115,103,240,.08); }
.a-faq summary { list-style:none; cursor:pointer; padding:16px 20px; font-weight:700; color:var(--b-dark);
    display:flex; justify-content:space-between; gap:12px; }
.a-faq summary::-webkit-details-marker { display:none; }
.a-faq summary::after { content:"+"; font-size:1.4rem; color:var(--b-primary); }
.a-faq details[open] summary::after { content:"−"; }
.a-faq .fa { padding:0 20px 18px; color:var(--b-muted); line-height:2; }

/* CTA */
.a-cta { background:var(--b-grad); border-radius:22px; padding:38px 28px; text-align:center; color:#fff; margin:34px 0; }
.a-cta h3 { color:#fff; font-weight:800; font-size:1.4rem; margin:0 0 8px; }
.a-cta p { color:rgba(255,255,255,.9); margin:0 0 18px; }
.a-cta a { display:inline-block; background:#fff; color:var(--b-dark); font-weight:700; padding:12px 30px; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.16); }

/* related */
.a-related { padding:44px 0; background:var(--b-soft); border-top:1px solid var(--b-line); margin-top:44px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .b-featured { grid-template-columns:1fr; }
    .b-featured .f-thumb { aspect-ratio:16/9; }
    .b-featured .f-body { padding:24px; }
}
@media (max-width: 560px) {
    .blog-hero { padding:44px 0 22px; }
    .article-body { font-size:1.02rem; line-height:2; }
    .a-cover { padding-inline:16px; }
}