/* ===== صفحه‌ی هر مقاله (طرح «Article» در Claude Design) =====
   روی home.css سوار است (رنگ‌ها، هدر، فوتر)؛ فقط بخش‌های خاص مقاله اینجاست.
   قالب: scripts/blog/post.tpl.html — متن و فهرست مطالب را scripts/blog/build.py می‌سازد. */

.blob1 { top: -260px; right: -160px; height: 620px; width: 620px; background: radial-gradient(closest-side, rgba(48,111,87,.12), rgba(48,111,87,0)); }
.hdr-nav a.on { background: var(--mint2); color: var(--gd); }

/* نوار پیشرفت مطالعه بالای صفحه */
.aprog { position: fixed; top: 0; right: 0; left: 0; z-index: 60; height: 3px; pointer-events: none; }
.aprog > div { height: 100%; width: 0; background: linear-gradient(90deg, #00a79d, #306f57); transition: width .1s linear; }

/* ---------- هیرو ---------- */
.ahero { position: relative; margin: 0 auto; max-width: 820px; padding: 56px 24px 40px; text-align: center; }
.crumbs { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--soft); }
.crumbs a:hover { color: var(--gd); }
.crumbs .cur { color: var(--sub); }
.a-cat { margin-top: 20px; }
.a-cat span { border-radius: 999px; background: var(--mint2); padding: 5px 13px; font-size: 12.5px; font-weight: 800; color: var(--gd); }
.ahero h1 { margin: 18px 0 0; font-size: clamp(28px, 4.4vw, 48px); font-weight: 900; line-height: 1.45; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.a-ex { margin: 16px auto 0; max-width: 40rem; font-size: 17px; line-height: 2; color: var(--muted); text-wrap: balance; }
.a-meta { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 14px 22px; flex-wrap: wrap; }
.a-by { display: inline-flex; align-items: center; gap: 10px; }
.a-by > span { display: grid; height: 36px; width: 36px; place-items: center; border-radius: 11px; background: var(--grad); }
.a-by img { height: 18px; display: block; }
.a-by b { font-size: 14px; color: var(--ink); }
.a-date { white-space: nowrap; font-size: 13.5px; color: var(--soft); }
.a-share { display: flex; gap: 6px; }
.a-share a, .a-share button { display: grid; height: 38px; width: 38px; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: #ffffff; color: var(--muted); cursor: pointer; padding: 0; transition: all .2s; }
.a-share a:hover, .a-share button:hover { border-color: #a9cbb7; color: var(--gd); }
.a-share .ic-ok { display: none; }
.a-share button.copied { border-color: var(--g); background: var(--g); color: #ffffff; }
.a-share button.copied .ic-ok { display: block; }
.a-share button.copied .ic-link { display: none; }

/* ---------- کاور ---------- */
.acover-w { margin: 0 auto; max-width: 1040px; padding: 0 24px; }
.acover { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 28px; box-shadow: 0 40px 80px -50px rgba(16,48,36,.45); }
.acover > img, .bc-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.bc-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.bc-mark { position: absolute; bottom: -18%; left: -4%; height: 80%; opacity: .07; }
.bc-ic { position: relative; display: grid; place-items: center; height: 72px; width: 72px; border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: 0 18px 40px -22px rgba(16,48,36,.45); }
.acover .bc-ic { height: 112px; width: 112px; border-radius: 32px; }
.acover .bc-ic svg { height: 64px; width: 64px; }

/* ---------- متن + فهرست مطالب ---------- */
.abody { margin: 0 auto; max-width: 1040px; padding: 56px 24px 96px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.abody.no-toc { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.abody > article { min-width: 0; width: 100%; max-width: 720px; }

.a-text p { margin: 0 0 24px; font-size: 17.5px; line-height: 2.2; color: #2f3833; text-wrap: pretty; }
.a-text p.a-lead { margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid #e8eee9; font-size: 19.5px; font-weight: 500; line-height: 2.1; color: var(--ink); }
.a-text p.a-label { font-weight: 700; color: var(--ink); }
/* html در home.css خودش scroll-padding-top: 88px دارد؛ این دو جمع می‌شوند (۱۰۰ مثل طرح). */
.a-text h2 { scroll-margin-top: 12px; display: flex; align-items: flex-start; gap: 14px; margin: 56px 0 18px; font-size: 25px; font-weight: 900; line-height: 1.6; color: var(--ink); }
.a-text > h2:first-child { margin-top: 0; }
.a-hn { display: grid; flex-shrink: 0; height: 38px; min-width: 38px; margin-top: 2px; place-items: center; border-radius: 12px; background: var(--mint2); font-size: 14px; font-weight: 800; color: var(--g); }
.a-text h3 { margin: 34px 0 12px; font-size: 19px; font-weight: 800; line-height: 1.7; color: var(--gd); }
.a-text strong { font-weight: 800; color: var(--ink); background: linear-gradient(transparent 62%, #dcefe4 62%); }
.a-text code { border-radius: 6px; background: #f0f5f2; padding: 1px 6px; font-size: .92em; }
.a-text a { color: var(--gd); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #a9cbb7; }
.a-text ul, .a-text ol { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.a-text li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 2.05; color: #2f3833; }
.a-text li > span:last-child { min-width: 0; }
.a-dot { flex-shrink: 0; height: 8px; width: 8px; margin-top: 14px; border-radius: 999px; background: #5fa383; box-shadow: 0 0 0 4px #e8f3ed; }
.a-num { display: grid; flex-shrink: 0; height: 26px; min-width: 26px; margin-top: 5px; place-items: center; border-radius: 999px; background: var(--g); font-size: 12.5px; font-weight: 800; color: #ffffff; }
.a-text blockquote { margin: 4px 0 28px; display: flex; gap: 14px; border-radius: 18px; border: 1px solid #dcebe2; background: linear-gradient(135deg, #f3f9f5, #eaf4ef); padding: 18px 20px; font-size: 16.5px; line-height: 2.05; color: #1f2a25; }
.a-qm { display: grid; flex-shrink: 0; height: 32px; width: 32px; place-items: center; border-radius: 10px; background: var(--g); color: #ffffff; font-size: 20px; font-weight: 900; line-height: 1; }
.a-hr { margin: 40px 0; display: flex; justify-content: center; gap: 10px; }
.a-hr span { height: 5px; width: 5px; border-radius: 999px; background: #b9d3c4; }

.a-cta { position: relative; overflow: hidden; margin-top: 44px; border-radius: 24px; background: linear-gradient(135deg, #337a5e 0%, #27583f 55%, #1b4230 100%); padding: 28px 30px; box-shadow: 0 30px 60px -40px rgba(24,64,46,.7); }
.a-cta > img { pointer-events: none; position: absolute; bottom: -40px; left: -10px; height: 170px; opacity: .08; }
.a-cta-t { position: relative; font-size: 19px; font-weight: 900; line-height: 1.6; color: #ffffff; }
.a-cta p { position: relative; margin: 8px 0 0; max-width: 32rem; font-size: 14.5px; line-height: 1.95; color: rgba(255,255,255,.82); }
.a-cta-b { position: relative; margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.a-cta-b a { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 18px; font-size: 14px; }
.a-cta-b .w { background: #ffffff; font-weight: 800; color: var(--gd); }
.a-cta-b .w:hover { background: #f1f7f3; color: var(--gd); }
.a-cta-b .o { border: 1px solid rgba(255,255,255,.32); font-weight: 700; color: #ffffff; }
.a-cta-b .o:hover { background: rgba(255,255,255,.12); color: #ffffff; }

.a-note { margin-top: 20px; display: flex; gap: 14px; border-radius: 20px; border: 1px solid #e6ece8; background: #f7faf8; padding: 18px 20px; }
.a-note > span { display: grid; height: 36px; width: 36px; flex-shrink: 0; place-items: center; border-radius: 11px; background: #e9f2ec; color: var(--g); }
.a-note p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--muted); }

/* فهرست مطالب: ستون راست، چسبان */
.toc { order: -1; position: sticky; top: 104px; }
.toc-box { display: flex; flex-direction: column; max-height: calc(100vh - 128px); border-radius: 22px; border: 1px solid #e3ece6; background: linear-gradient(180deg, #f6faf7, #ffffff); padding: 18px 14px 16px; box-shadow: 0 1px 2px rgba(16,40,32,.04), 0 24px 50px -40px rgba(16,48,36,.35); }
.toc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 12px; }
.toc-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.toc-head > span:last-child { font-size: 12px; font-weight: 600; color: var(--faint); }
.toc-list { min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.toc-list a { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 8px; font-size: 13px; line-height: 1.75; font-weight: 500; color: var(--soft); transition: all .2s; }
.toc-list a:hover { background: #ffffff; color: var(--gd); }
.toc-list a > span:last-child { min-width: 0; }
.toc-n { display: grid; flex-shrink: 0; height: 22px; min-width: 22px; margin-top: 1px; place-items: center; border-radius: 7px; font-size: 11px; font-weight: 800; background: #edf3ef; color: #6b8a79; }
.toc-list a.on { background: #ffffff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16,40,32,.06), 0 6px 14px -10px rgba(16,40,32,.25); }
.toc-list a.on .toc-n { background: var(--g); color: #ffffff; }
.toc-prog { margin: 14px 6px 0; padding-top: 12px; border-top: 1px solid #eaf0ec; }
.toc-prog > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.toc-bar { margin-top: 8px; height: 5px; overflow: hidden; border-radius: 999px; background: #e8efea; }
.toc-bar > div { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #00a79d, #306f57); transition: width .15s linear; }

/* ---------- مقالات مرتبط ---------- */
.arel { background: var(--mint); border-top: 1px solid var(--line2); }
.arel-in { margin: 0 auto; max-width: 1200px; padding: 80px 24px 88px; }
.arel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.arel-head h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--ink); }
.arel-head a { font-size: 14px; font-weight: 700; color: var(--gd); }
.arel-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 20px; }
.rcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid #e6ece8; background: #ffffff; box-shadow: 0 1px 2px rgba(16,40,32,.03); transition: all .25s; }
.rcard:hover { transform: translateY(-3px); border-color: #d7e6dc; box-shadow: 0 24px 50px -30px rgba(16,48,36,.35); }
.rc-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.rc-cat { position: absolute; top: 14px; right: 14px; z-index: 1; border-radius: 999px; background: rgba(255,255,255,.92); padding: 4px 11px; font-size: 11.5px; font-weight: 800; color: var(--gd); }
.rc-body { display: flex; flex: 1; flex-direction: column; padding: 20px; text-align: right; }
.rc-body h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.7; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-body > span { margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--faint); }

/* ---------- تبلت و موبایل ---------- */
@media (max-width: 900px) {
  .ahero { padding: 36px 20px 28px; }
  .acover-w { padding: 0 16px; }
  .acover { aspect-ratio: 16 / 10; }
  .abody { padding: 36px 20px 64px; grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .a-cta { padding: 22px; }
  .arel-in { padding: 56px 20px 64px; }
}
@media (max-width: 720px) {
  .acover .bc-ic { height: 88px; width: 88px; border-radius: 26px; }
  .acover .bc-ic svg { height: 50px; width: 50px; }
}