/* ================= BLOG — وبلاگ و مقالات (پوستهٔ دیتاشیت) ================= */

/* --- سربرگ آرشیو --- */
.bl-hero{background:linear-gradient(180deg,var(--slate),#1A1F29);color:#EEF2F8;position:relative;overflow:hidden}
.bl-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to left,rgba(152,165,187,.07) 0 1px,transparent 1px 64px),repeating-linear-gradient(to bottom,rgba(152,165,187,.07) 0 1px,transparent 1px 64px)}
.bl-hero .wrap{position:relative;padding-top:32px;padding-bottom:28px}
.bl-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#FF8B5E;direction:ltr;text-align:right;display:block}
.bl-hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(24px,3.6vw,36px);line-height:1.5;margin:6px 0 4px}
.bl-hero p{color:#AEB9C9;font-size:13px;max-width:640px;line-height:2.1;margin:0}
.bl-main{padding:26px 0 40px}

/* --- کارت‌های مقاله --- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bl-card{background:#fff;border:1.5px solid var(--ink);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
.bl-card:hover{box-shadow:0 10px 30px rgba(21,24,29,.12);transform:translateY(-2px)}
.bl-card .th{aspect-ratio:16/10;overflow:hidden;border-bottom:1.5px solid var(--ink);background:var(--panel)}
.bl-card .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.bl-card:hover .th img{transform:scale(1.04)}
.bl-card .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-card .meta{display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--ink-3)}
.bl-card .meta .cat{color:var(--safety-txt);font-weight:800}
.bl-card .meta .dt{font-weight:700}
.bl-card h2{font-family:var(--disp);font-weight:900;font-size:15.5px;line-height:1.9;margin:0}
.bl-card p{font-size:12px;color:var(--ink-2);line-height:2.1;margin:0}
.bl-card .more{margin-top:auto;font-size:12px;font-weight:800;color:var(--safety-txt);display:inline-flex;align-items:center;gap:6px}

/* --- صفحه‌بندی --- */
.bl-pag{margin-top:26px}
.bl-pag .nav-links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.bl-pag .page-numbers{border:1.5px solid var(--line-2);background:#fff;color:var(--ink);min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none;padding:0 10px}
.bl-pag .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-pag .page-numbers:hover:not(.current){border-color:var(--safety);color:var(--safety-txt)}

/* ===== مقالهٔ تکی — سربرگ نقشه‌ای + بدنهٔ دیتاشیت ===== */

/* نوار پیشرفت مطالعه (خط‌کش) */
.bl-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:repeating-linear-gradient(to left,rgba(21,24,29,.14) 0 1px,transparent 1px 8px)}
.bl-prog i{display:block;height:100%;width:0;background:var(--safety);box-shadow:0 0 0 1px var(--safety-deep) inset;transition:width .08s linear}

/* بردکرامب مقاله */
.bl-crumbs{background:#fff;border-bottom:1px solid var(--line)}
.bl-crumbs .wrap{display:flex;align-items:center;gap:8px;padding-top:9px;padding-bottom:9px;font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
.bl-crumbs a{color:var(--ink-2);text-decoration:none}
.bl-crumbs a:hover{color:var(--safety)}
.bl-crumbs .sep{color:var(--line-2)}
.bl-crumbs .cur{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,540px)}
.bl-crumbs .sheetno{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-inline-start:auto;direction:ltr;flex:none}

/* سربرگ نقشه‌ای مقاله (اسلیت + شبکه) + بلوک عنوان */
.bl-hero--post .wrap{padding-top:30px;padding-bottom:26px}
.bl-hero--post h1{max-width:22ch;margin-bottom:16px}
.bl-tb{display:grid;grid-template-columns:repeat(4,auto);gap:0;border:1px solid var(--bp-line);width:max-content;max-width:100%}
.bl-tb .f{display:flex;flex-direction:column;gap:3px;padding:9px 18px;border-inline-start:1px solid var(--bp-line)}
.bl-tb .f:first-child{border-inline-start:0}
.bl-tb .f i{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.14em;color:#8390A6;direction:ltr;text-align:right}
.bl-tb .f b{font-size:12.5px;font-weight:800;color:#EAEFF6;white-space:nowrap}
.bl-tb .f.mono b{font-family:var(--mono);direction:ltr;font-weight:700;font-size:11.5px;color:#FF8B5E}

/* بدنهٔ مقاله */
.bl-art{background:#fff;border:1.5px solid var(--ink)}
.bl-cover{margin:0;position:relative;border-bottom:1.5px solid var(--ink);background:var(--panel)}
.bl-cover img{width:100%;max-height:440px;object-fit:cover;display:block}
.bl-cover figcaption{position:absolute;bottom:0;inset-inline-start:0;background:var(--ink);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:4px 10px;direction:ltr;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- تایپوگرافی متن مقاله (doc-sheet) --- */
.bl-doc{padding:20px 28px 30px;font-size:14.5px;line-height:2.4;color:var(--ink-2);overflow-wrap:break-word}
.bl-doc>p:first-child,.bl-doc>h2:first-child,.bl-doc>h3:first-child{margin-top:4px}
.bl-doc p{margin:14px 0}
.bl-doc p:empty{display:none}
/* لیدِ نخستین پاراگراف — کاغذی با لبهٔ نارنجی */
.bl-doc>p:first-of-type{font-size:15.5px;color:var(--ink);line-height:2.3;background:var(--paper);border-inline-start:3px solid var(--safety);padding:14px 18px;margin:0 0 20px}
/* سرتیترهای بخش (h2 و h3 هر دو تیترِ بخش‌اند) — پلاک دیتاشیت با خط تیرهٔ نارنجی */
.bl-doc h2,.bl-doc h3{font-family:var(--disp);font-weight:900;color:var(--ink);display:flex;align-items:flex-start;gap:11px;padding-bottom:9px;border-bottom:1px solid var(--line);scroll-margin-top:120px;line-height:1.7}
.bl-doc h2{font-size:20px;margin:34px 0 12px}
.bl-doc h3{font-size:17px;margin:28px 0 10px}
.bl-doc h2::before,.bl-doc h3::before{content:'';width:16px;height:3px;background:var(--safety);flex:none;margin-top:.62em}
.bl-doc h4{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink);margin:20px 0 6px}
/* درون نوار محصولات، تیترها نباید پلاکِ بخش بگیرند */
.bl-prods h2,.bl-prods h3{all:unset}
.bl-doc a{color:var(--safety-txt);font-weight:700;text-decoration:none}
.bl-doc a:hover{text-decoration:underline}
.bl-doc b,.bl-doc strong{color:var(--ink)}
.bl-doc ul,.bl-doc ol{padding-inline-start:22px;margin:12px 0}
.bl-doc li{margin:4px 0}
.bl-doc ul li::marker{color:var(--safety)}
.bl-doc img{max-width:100%;height:auto;border:1px solid var(--line);display:block;margin:16px auto}
.bl-doc figure{margin:16px 0}
.bl-doc figcaption{font-size:11px;color:var(--ink-3);text-align:center}
.bl-doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:12.5px}
.bl-doc table th{background:var(--ink);color:#fff;font-size:11px;font-weight:800;padding:9px 12px;border:1px solid var(--ink)}
.bl-doc table td{border:1px solid var(--line);padding:9px 12px}
.bl-doc table tr:nth-child(even) td{background:var(--paper)}
.bl-doc blockquote{border-inline-start:4px solid var(--safety);background:var(--paper);padding:12px 18px;margin:16px 0;font-size:13px}
.bl-doc .bl-video{position:relative;aspect-ratio:16/9;margin:18px 0;border:1.5px solid var(--ink);background:#0d0f13}
.bl-doc .bl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- ناوبری قبلی/بعدی + مرتبط --- */
.bl-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.bl-nav a{background:#fff;border:1.5px solid var(--line-2);padding:12px 16px;text-decoration:none;color:var(--ink);transition:border-color .12s;min-width:0}
.bl-nav a:hover{border-color:var(--safety)}
.bl-nav a span{font-size:10px;color:var(--ink-3);font-weight:800;display:block}
.bl-nav a b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-nav a.nx{text-align:left}
.bl-rel{margin-top:30px}

@media(max-width:920px){
  .bl-grid{grid-template-columns:1fr}
  .bl-doc{padding:16px 15px 22px;font-size:14px}
  .bl-doc>p:first-of-type{padding:12px 14px}
  .bl-nav{grid-template-columns:1fr}
}

/* --- تک‌مقاله: تمام‌عرض دسکتاپ + ریل کناری --- */
@media(min-width:1121px){
  .bl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
  .bl-rail{position:sticky;top:118px;display:flex;flex-direction:column;gap:16px}
}
.bl-toc{background:#fff;border:1.5px solid var(--ink)}
.bl-toc .th{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:9px 14px}
.bl-toc .th b{font-size:12px;font-weight:800}
.bl-toc .th i{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.16em;color:#98A5BB;direction:ltr}
.bl-toc ol{list-style:none;margin:0;padding:6px 0;counter-reset:toc;max-height:52vh;overflow:auto}
.bl-toc li{counter-increment:toc}
.bl-toc a{display:flex;gap:9px;align-items:baseline;padding:8px 14px;font-size:12px;font-weight:700;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);line-height:1.9;transition:.12s}
.bl-toc li:last-child a{border-bottom:0}
.bl-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:9.5px;color:var(--ink-3);direction:ltr;flex:none}
.bl-toc a:hover{color:var(--ink);background:var(--paper)}
.bl-toc a.on{color:var(--safety-txt);box-shadow:inset -3px 0 0 var(--safety)}
.bl-toc a.on::before{color:var(--safety-txt)}
.bl-cta{background:var(--ink);color:#fff;padding:18px;display:flex;flex-direction:column;gap:8px}
.bl-cta .t{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#98A5BB;direction:ltr;text-align:right}
.bl-cta b{font-family:var(--disp);font-size:16px;font-weight:900}
.bl-cta p{font-size:11.5px;color:#CBD5E3;line-height:2;margin:0}
.bl-cta .call{font-family:var(--mono);direction:ltr;text-align:center;font-size:20px;font-weight:700;color:#fff;text-decoration:none;border:1.5px dashed #37415A;padding:10px 0;transition:.12s}
.bl-cta .call:hover{border-color:var(--safety);color:#FF8B5E}
.bl-cta .go{background:var(--safety);color:#fff;text-align:center;font-weight:800;font-size:12.5px;padding:11px;text-decoration:none;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.bl-cta .go:hover{background:var(--safety-deep)}
/* سطح‌بندی فهرست (h3 تورفته) */
.bl-toc li.lv-h3 a{padding-inline-start:26px;font-weight:600;font-size:11.5px;color:var(--ink-3)}
.bl-toc li.lv-h3 a::before{content:'›';font-family:inherit;font-size:12px}

/* ===== نوار محصولاتِ زندهٔ درون مقاله (بازسازیِ ویجت قدیم با دادهٔ واقعی) ===== */
.bl-prods{border:1.5px solid var(--ink);background:var(--paper);margin:28px 0}
.bl-prodhead{display:flex;flex-direction:column;gap:2px;background:var(--ink);color:#fff;padding:12px 16px}
.bl-prodhead .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:#98A5BB;direction:ltr}
.bl-prodhead b{font-family:var(--disp);font-size:16px;font-weight:900}
.bl-prodgrid{margin:0;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.bl-pc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s,transform .12s}
.bl-pc:hover{border-color:var(--safety);box-shadow:0 8px 20px rgba(21,24,29,.09);transform:translateY(-2px)}
.bl-pc .im{display:block;background:#fff;border-bottom:1px solid var(--line)}
.bl-pc .im img{width:100%;height:150px;object-fit:contain;padding:10px;display:block}
.bl-pc .bd{padding:11px 12px 12px;display:flex;flex-direction:column;gap:9px;flex:1}
.bl-pc .nm{font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.85;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.bl-pc .nm:hover{color:var(--safety-txt)}
.bl-pc .pr{margin-top:auto;font-size:11px;color:var(--ink-3);display:flex;align-items:baseline;gap:5px}
.bl-pc .pr b{font-family:var(--mono);direction:ltr;font-size:15px;font-weight:700;color:var(--ink)}
.bl-pc .pr b.ask{font-family:var(--body);font-size:12.5px;color:var(--safety-txt)}
.bl-pc-buy{display:block;text-align:center;font-size:11.5px;font-weight:800;padding:9px;text-decoration:none;cursor:pointer;background:var(--ink);color:#fff;border:0;transition:.12s;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bl-pc-buy.addb{background:var(--safety)}
.bl-pc-buy.addb:hover{background:var(--safety-deep)}
.bl-pc-buy:hover{background:var(--slate-2)}
.bl-pc-buy.oos{background:var(--panel);color:var(--ink-3)}

/* ===== پابرگ مقاله — برچسب‌ها + اشتراک ===== */
.bl-foot{border-top:1.5px solid var(--ink);padding:14px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.bl-tags,.bl-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.bl-tags .tk,.bl-share .tk{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-3);direction:ltr}
.bl-tags a{font-size:11.5px;font-weight:700;color:var(--safety-txt);text-decoration:none;background:var(--safety-tint);padding:3px 10px}
.bl-tags a:hover{background:var(--safety);color:#fff}
.bl-share a,.bl-share .cp{font-size:11px;font-weight:700;color:var(--ink-2);text-decoration:none;border:1px solid var(--line-2);background:#fff;padding:5px 12px;cursor:pointer;transition:.12s}
.bl-share a:hover,.bl-share .cp:hover{border-color:var(--safety);color:var(--safety-txt)}
.bl-share .cp.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-tint)}

/* کارت مرتبطِ بدون تصویر */
.bl-card .th--none{display:flex;align-items:center;justify-content:center;background:var(--slate);color:#3A4459}
.bl-card .th--none i{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:.12em;opacity:.5}

.bl-cover img{max-height:420px}
@media(max-width:1120px){
  .bl-rail{margin-top:16px;display:grid;grid-template-columns:1fr;gap:14px}
  .bl-toc ol{max-height:none}
}
@media(max-width:680px){
  .bl-hero--post .wrap{padding-top:22px;padding-bottom:20px}
  .bl-tb{grid-template-columns:1fr 1fr;width:100%}
  .bl-tb .f{padding:8px 12px}
  .bl-tb .f:nth-child(2n+1){border-inline-start:0}
  .bl-tb .f:nth-child(n+3){border-top:1px solid var(--bp-line)}
  .bl-foot{padding:12px 15px}
  .bl-prodgrid{grid-template-columns:1fr 1fr;padding:10px;gap:10px}
  .bl-cover figcaption{max-width:88%}
}