/* =========================================================================
   EDIUSFA — ARTICLE (single post)  ·  page-layer v1.0
   لایهٔ اختصاصی صفحهٔ مقاله. توکن‌ها و اجزا از tokens.css و components.css
   و هدر از header.css ارث می‌رسد؛ اینجا فقط چیدمان صفحه.
   اولویت: خوانایی — ستون مطالعهٔ راحت، تایپوگرافی آرام، موبایل‌محور.
   ========================================================================= */

/* گارد حالت مخفی — درس صفحات قبلی (تعارض display اجزا با hidden) */
[hidden]{display:none!important}

/* ---- آهنگ عمودی صفحه ------------------------------------------------------ */
.article-main{min-height:60vh}
.art-head-wrap{padding-block:20px 0}
.art-crumbs{margin-bottom:18px;max-width:900px}
.art-crumbs [aria-current]{max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ========================================================================
   ۱) سرصفحهٔ مقاله: دسته + عنوان + چکیده + متا
   v1.20.0 — کارت سفید مثل تصویر شاخص (درخواست کاربر: «برای بخش نوشته‌ها
   کادری مشابه همینی که عکس داخلشه ساخته بشه و نوشته داخل قرار بگیره»):
   head + متن در همان سطحِ card نشسته‌اند، نه روی پس‌زمینهٔ کرم.
   ======================================================================== */
.art-head{max-width:min(900px,100%);width:100%;margin-inline:auto;margin-bottom:26px;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);padding:clamp(18px,2.8vw,32px)}
.art-meta-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* .b-cat از الگوی بلاگ — فقط فاصلهٔ این صفحه */
.art-meta-top .b-cat{font-size:var(--fs-xs);padding:4px 12px}
.art-comments-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle);
  transition:color var(--t-fast);
}
.art-comments-link:hover{color:var(--primary-ink)}
.art-comments-link .icon-sm{width:14px;height:14px}

.art-title{
  font-size:clamp(25px,1.2rem + 1.7vw,38px);
  font-weight:900;line-height:1.6;letter-spacing:var(--ls-tight);
  color:var(--text);margin-bottom:12px;
}
.art-deck{font-size:var(--fs-md);color:var(--text-muted);line-height:2.05;max-width:68ch}

/* ردیف نویسنده و تاریخ — امضای تحریریه */
.art-byline{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
}
.ab-author{display:inline-flex;align-items:center;gap:10px}
.ab-av{width:40px;height:40px;font-size:15px}
.ab-author-text{display:flex;flex-direction:column;line-height:1.6}
.ab-author-text b{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.ab-author-text > span{font-size:var(--fs-2xs);color:var(--text-subtle)}
.ab-sep{width:1px;height:26px;background:var(--border)}
.ab-item{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}
.ab-item .icon-sm{width:14px;height:14px;color:var(--text-subtle)}

/* ========================================================================
   ۲) تصویر شاخص
   ======================================================================== */
.art-hero{
  max-width:1120px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
.art-hero img{width:100%;aspect-ratio:16/9;max-height:min(56vw,520px);object-fit:cover;display:block}
.art-hero figcaption{
  padding:12px 20px;border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.9;
  background:var(--surface);
}

/* ========================================================================
   ۳) چیدمان مطالعه: فهرست مطالب (کنارِ شروع) + ستون متن
   DOM: فهرست اول است تا در موبایل بالای متن بیاید.
   IMPORTANT: default = single column. Two-column ONLY when .art-toc exists.
   Otherwise a lone .art-prose was trapped in the 280px track → huge empty
   desktop gap (mobile was fine because display:block ≤1023).
   ======================================================================== */
.art-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:36px;
  align-items:start;
  padding-block:34px 0;
}
.art-layout > *{min-width:0}

/* Desktop with TOC: sidebar + prose */
@media (min-width:1024px){
  .art-layout:has(> .art-toc){
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  }
  .art-layout:has(> .art-toc) > .art-toc{grid-column:1}
  .art-layout:has(> .art-toc) > .art-prose{grid-column:2;max-width:var(--prose-w,760px)}
  /* No TOC: prose uses full readable width, centered in the content shell */
  .art-layout:not(:has(> .art-toc)) > .art-prose{
    max-width:var(--prose-w,800px);
    width:100%;
    margin-inline:auto;
  }
  .art-layout:has(> .art-toc) > .art-prose{
    margin-inline:0;
  }
}

/* ---- فهرست مطالب ---- */
.art-toc{position:sticky;top:calc(var(--header-h,72px) + 16px);align-self:start}
.toc-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px 14px;box-shadow:var(--sh-xs);
}
/* Long TOC must scroll inside the sticky panel, not stretch the page */
.toc-desktop{
  max-height:calc(100vh - var(--header-h,72px) - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.toc-list li.is-active > a,
.toc-list a.is-active{
  background:var(--primary-soft);color:var(--primary-ink);font-weight:700;
}
.toc-list li.is-active > a::before,
.toc-list a.is-active::before{color:var(--primary)}

.toc-title,.toc-mobile summary{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-base);font-weight:800;color:var(--text);
  padding:0 8px;margin:0 0 10px;
}
.toc-title .icon-sm,.toc-mobile summary .icon-sm{width:15px;height:15px;color:var(--primary)}
.toc-list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-list a{
  counter-increment:toc;
  display:flex;align-items:baseline;gap:8px;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);line-height:1.8;
  padding:7px 9px;border-radius:var(--r-sm);
  transition:background var(--t-fast),color var(--t-fast);
}
.toc-list a::before{
  content:counter(toc,persian);
  font-size:var(--fs-2xs);font-weight:800;color:var(--text-subtle);
  min-width:14px;text-align:center;flex-shrink:0;
  transition:color var(--t-fast);
}
.toc-list a:hover{background:var(--surface-muted);color:var(--text)}
.toc-list a.is-active{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
.toc-list a.is-active::before{color:var(--primary)}

/* فهرست جمع‌شوندهٔ موبایل — پیش‌فرض مخفی */
.toc-mobile{display:none}
.toc-mobile summary{cursor:pointer;list-style:none;margin:0}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary .chev{width:16px;height:16px;margin-inline-start:auto;color:var(--text-subtle);transition:transform var(--t-med)}
.toc-mobile[open] summary .chev{transform:rotate(180deg)}
.toc-mobile .toc-list{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}

/* ========================================================================
   ۴) تایپوگرافی متن مقاله — قلب صفحه
   عرض مطالعهٔ راحت + ارتفاع خط سخاوتمند برای فارسی
   v1.20.0 — ستون متن هم داخل کارت سفید (هم‌زبان با کادر تصویر شاخص).
   ======================================================================== */
.art-prose{
  max-width:var(--prose-w,760px);
  font-size:var(--art-fs,17px);line-height:var(--art-lh,2.15);color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);padding:clamp(18px,2.8vw,34px);box-sizing:border-box;
}
.art-prose p{margin-block:0 18px}
.art-prose p:last-child{margin-bottom:0}
.art-lead{
  font-size:18.5px;line-height:2.15;color:var(--text);
}
.art-prose b,.art-prose strong{color:var(--text);font-weight:700}

/* لینک درون‌متنی */
.art-inline{
  color:var(--primary-ink);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(14,115,128,.35);
  text-underline-offset:4px;text-decoration-thickness:1.5px;
  transition:text-decoration-color var(--t-fast),color var(--t-fast);
}
.art-inline:hover{color:var(--primary-hover);text-decoration-color:currentColor}

/* عناوین — فاصلهٔ نفس + لنگر زیر هدر چسبان */
.art-prose h2{
  font-size:22px;font-weight:900;line-height:1.7;color:var(--text);
  margin:46px 0 16px;scroll-margin-top:calc(var(--header-h) + 24px);
}
.art-prose h2:first-child{margin-top:2px}
.art-prose h3{
  font-size:18px;font-weight:800;line-height:1.8;color:var(--text);
  margin:30px 0 10px;scroll-margin-top:calc(var(--header-h) + 24px);
}

/* فهرست‌ها */
.art-ul,.art-ol{margin:20px 0 22px;padding:0;list-style:none}
.art-ul li,.art-ol li{
  position:relative;padding-inline-start:30px;margin-bottom:10px;
  line-height:2.1;
}
.art-ul li:last-child,.art-ol li:last-child{margin-bottom:0}
.art-ul li::before{
  content:'';position:absolute;inset-inline-start:8px;top:.95em;
  width:7px;height:7px;border-radius:2px;
  background:var(--primary);opacity:.55;
}
.art-ol{counter-reset:art}
.art-ol li{counter-increment:art;padding-inline-start:36px}
.art-ol li::before{
  content:counter(art,persian);
  position:absolute;inset-inline-start:0;top:.72em;
  width:24px;height:24px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:800;
  color:var(--primary-ink);background:var(--primary-soft);
}

/* نقل‌قول تحریریه */
.art-quote{
  margin:28px 0;padding:20px 24px;
  background:var(--surface-muted);
  border-inline-start:3px solid var(--primary);
  border-radius:var(--r-sm);
  font-size:17px;line-height:2.15;color:var(--text);font-weight:600;
}
.art-quote cite{
  display:block;margin-top:10px;
  font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle);
}

/* تصاویر داخل متن */
.art-fig{
  margin:30px 0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);
}
.art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.art-fig figcaption{
  padding:11px 18px;border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.9;
}

/* جدول — با اسکرول افقی امن در موبایل */
.table-wrap{
  margin:26px 0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow-x:auto;box-shadow:var(--sh-xs);
}
.table-wrap table{width:100%;min-width:600px;border-collapse:collapse}
.table-wrap th{
  background:var(--surface-muted);text-align:start;
  font-size:var(--fs-xs);font-weight:800;color:var(--text);
  padding:12px 16px;white-space:nowrap;
}
.table-wrap td{
  padding:13px 16px;border-top:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9;vertical-align:top;
}
.table-wrap td b{color:var(--text)}
.table-wrap tbody tr:hover{background:#FCFBF8}

/* یادداشت داخل متن — همان اجزای alert سیستم، فقط فاصلهٔ صفحه */
.art-note{margin:24px 0}

/* ========================================================================
   ۵) اشتراک‌گذاری مقاله
   ======================================================================== */
.art-share{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--border);
}
.as-label{font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);margin-inline-end:4px}
.share-btn{
  width:42px;height:42px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.share-btn:hover{color:var(--primary-ink);border-color:var(--primary);background:var(--primary-soft)}
.share-btn .icon-sm{width:18px;height:18px}

/* ========================================================================
   ۶) کارت نویسنده — از components.css، فقط چیدمان این صفحه
   ======================================================================== */
.art-author{margin-top:34px;max-width:760px}
.art-author-body{min-width:0}

/* ========================================================================
   ۷) بخش‌های پایانی: محصولات مرتبط + مقالات مرتبط + دیدگاه‌ها
   ======================================================================== */
.art-section{margin-top:56px}
.art-sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:8px;
}
.art-sec-head h2{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-xl);font-weight:900;color:var(--text);margin:0;
}
.art-sec-head h2 .icon-sm{width:19px;height:19px;color:var(--primary)}
.art-sec-head .link-more{flex-shrink:0}
.art-sec-lede{font-size:var(--fs-sm);color:var(--text-muted);line-height:2;max-width:72ch;margin:0 0 18px}

/* شبکهٔ سه‌ستونی مشترک (p-card / b-card) */
.art-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art-grid-3 > *{min-width:0}

/* ---- کارت مقاله مرتبط — همان الگوی بلاگ (کپی صفحه‌لایه) ---- */
.b-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.b-card:hover{box-shadow:var(--sh-sm);border-color:var(--border-strong);transform:translateY(-2px)}
.b-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-muted)}
.b-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.b-card:hover .b-cover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .b-cover img,.b-card,.b-card:hover .b-cover img,.art-hero img{transition:none;transform:none}
}
.b-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.b-meta-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.b-cat{
  display:inline-flex;align-items:center;
  font-size:var(--fs-2xs);font-weight:800;color:var(--primary-ink);
  background:var(--primary-soft);padding:3px 10px;border-radius:var(--r-full);
  transition:background var(--t-fast);
}
.b-cat:hover{background:var(--secondary-soft);color:var(--secondary-strong)}
.b-read{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--text-subtle);white-space:nowrap}
.b-read .icon-sm{width:12px;height:12px}
.b-title{font-size:var(--fs-md);font-weight:800;line-height:1.75;margin:0}
.b-title a{color:var(--text)}
.b-title a:hover{color:var(--primary-ink)}
.b-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--border);width:100%;
}
.b-date{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--text-subtle)}
.b-date .icon-sm{width:12px;height:12px}
.b-foot .link-more{font-size:var(--fs-xs);gap:5px}

/* ========================================================================
   ۸) دیدگاه‌ها
   ======================================================================== */
.comments{max-width:900px}
.cmt-list{margin-top:14px}
.cmt{display:flex;gap:14px;padding-block:20px}
.cmt + .cmt,.cmt-replies + .cmt{border-top:1px solid var(--border)}
.cmt-av{width:44px;height:44px;font-size:16px;flex-shrink:0}
.cmt-body{min-width:0;flex:1}
.cmt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmt-name{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.cmt-date{font-size:var(--fs-2xs);color:var(--text-subtle)}
.cmt-text{font-size:var(--fs-sm);color:var(--text-muted);line-height:2.05;margin:8px 0 0}
.cmt-reply-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:700;color:var(--primary-ink);
  margin-top:10px;padding:3px 8px;border-radius:var(--r-xs);
  transition:background var(--t-fast),color var(--t-fast);
}
.cmt-reply-btn:hover{background:var(--primary-soft)}

/* پاسخ‌های تودرتو — تورفتگی با خط راهنما */
.cmt-replies{margin-inline-start:58px;margin-top:16px;padding-inline-start:18px;border-inline-start:2px solid var(--border)}
.cmt-replies .cmt{padding-block:14px}
.cmt-replies .cmt-av{width:38px;height:38px;font-size:14px}
.cmt.is-author .cmt-name{color:var(--primary-ink)}
.cmt.is-author{background:transparent}

/* فرم دیدگاه */
.cmt-form{
  margin-top:30px;padding:26px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
}
.cmt-form-title{font-size:var(--fs-lg);font-weight:900;color:var(--text);margin-bottom:6px}
.cmt-form-note{font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.9;margin-bottom:18px}
.cmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cmt-form .field{min-width:0}
.art-textarea{min-height:130px;resize:vertical;line-height:2}
.cmt-form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.cmt-form-hint{font-size:var(--fs-2xs);color:var(--text-subtle)}
.art-cmt-done{margin-top:22px;max-width:none}

/* ========================================================================
   ۹) فوتر — همان الگوی صفحهٔ اصلی (کپی صفحه‌لایهٔ بلاگ)
   ======================================================================== */
.site-footer{background:var(--surface-ink);color:#AEB4BF;margin-top:72px}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:36px;padding-block:56px 44px;
}
.f-brand .brand{display:inline-flex;align-items:center;gap:10px}
.f-brand .brand-mark{
  width:38px;height:38px;border-radius:11px;background:#fff;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
}
.f-brand .brand-name{color:#fff;font-size:18px;font-weight:800}
.f-about{font-size:var(--fs-sm);line-height:2;color:#8E95A3;margin-block:16px;max-width:34ch}
.f-social{display:flex;gap:8px}
.f-social a{
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--border-inverse);
  display:flex;align-items:center;justify-content:center;color:#B9BFC9;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.f-social a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.f-col h4{color:#fff;font-size:var(--fs-base);font-weight:800;margin-bottom:16px}
.f-col ul{display:flex;flex-direction:column;gap:9px}
.f-col a{font-size:var(--fs-sm);color:#9AA1AD;transition:color var(--t-fast)}
.f-col a:hover{color:#fff}
.f-bottom{
  border-top:1px solid var(--border-inverse);
  padding-block:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:var(--fs-xs);color:#7E8593;flex-wrap:wrap;
}

/* ========================================================================
   ۱۰) لپ‌تاپ ۱۰۲۴–۱۲۷۹ — فهرست باریک‌تر، شبکهٔ ۲ ستونی
   ======================================================================== */
@media (min-width:1024px) and (max-width:1279px){
  .art-layout:has(> .art-toc){grid-template-columns:minmax(200px,252px) minmax(0,1fr);gap:26px}
  .art-layout:has(> .art-toc) > .art-prose{max-width:none}
  .art-grid-3{grid-template-columns:repeat(2,1fr)}
}

/* ========================================================================
   ۱۱) تبلت ≤۱۰۲۳ — فهرست جمع‌شونده بالای متن، تک‌ستون
   ======================================================================== */
@media (max-width:1023px){
  .art-layout{display:block}
  .art-toc{position:static;margin-bottom:26px}
  .toc-desktop{display:none}
  .toc-mobile{display:block}
  .art-prose{max-width:none}
  .art-grid-3{grid-template-columns:repeat(2,1fr)}
  .comments{max-width:none}
  .art-author{max-width:none}
}

/* ========================================================================
   ۱۲) موبایل ≤۶۳۹ — تایپوگرافی فشرده‌تر و آرام‌تر برای خواندن
   ======================================================================== */
@media (max-width:639px){
  .container{padding-inline:16px}
  .art-head-wrap{padding-block:14px 0}
  .art-crumbs{margin-bottom:14px}
  .art-head{margin-bottom:20px}
  .art-meta-top{gap:10px;margin-bottom:12px;flex-wrap:wrap}
  .art-title{font-size:clamp(22px,1.15rem + 1vw,26px);line-height:1.65}
  .art-deck{font-size:var(--fs-base)}
  .art-byline{gap:10px 12px;margin-top:16px;padding-top:14px}
  .ab-sep{display:none}
  .ab-item{font-size:var(--fs-2xs)}

  .art-hero{border-radius:var(--r-md);box-shadow:var(--sh-xs)}
  .art-hero figcaption{padding:10px 14px;font-size:11.5px}
  .art-layout{padding-block:24px 0;gap:0}

  /* متن مقاله — اندازهٔ موبایل */
  .art-prose{font-size:16px;line-height:2.1}
  .art-lead{font-size:17px}
  .art-prose p{margin-bottom:16px}
  .art-prose h2{font-size:19.5px;margin:36px 0 12px}
  .art-prose h3{font-size:17px}
  .art-ul li,.art-ol li{margin-bottom:8px}
  .art-quote{padding:16px 18px;font-size:16px;margin:24px 0}
  .art-fig{margin:24px 0}
  .art-fig figcaption{padding:10px 14px}
  .table-wrap{margin:22px 0}
  .table-wrap th,.table-wrap td{padding:10px 12px}

  .art-share{margin-top:30px;padding-top:18px}
  .as-label{width:100%;margin-inline-end:0}

  .art-section{margin-top:44px}
  .art-sec-head{flex-wrap:wrap;row-gap:6px}
  .art-sec-head h2{font-size:var(--fs-lg)}
  .art-grid-3{grid-template-columns:1fr;gap:14px}
  .b-body{padding:13px 14px 14px;gap:7px}
  .b-title{font-size:var(--fs-base);line-height:1.8}
  .b-foot .link-more span{display:none}
  .b-foot .link-more .icon-sm{width:15px;height:15px}

  .cmt{gap:10px;padding-block:16px}
  .cmt-av{width:38px;height:38px;font-size:14px}
  .cmt-replies{margin-inline-start:30px;padding-inline-start:12px}
  .cmt-form{padding:20px 16px;margin-top:24px}
  .cmt-grid{grid-template-columns:1fr;gap:12px}
  .cmt-form-foot .btn{width:100%}
  .cmt-form-hint{width:100%;text-align:center}

  .footer-top{grid-template-columns:1fr 1fr;gap:28px;padding-block:44px 34px}
  .f-bottom{flex-direction:column;align-items:flex-start}
  .site-footer{margin-top:52px}
}

/* ========================================================================
   DYNAMIC CONTENT MAPPING (additive — WP-rendered prose)
   The source page classes hand-authored elements (.art-ol, .art-quote…).
   WordPress emits plain elements inside .art-prose — map them onto the
   same atoms so real post content renders identically.
   ======================================================================== */
.art-prose ul,.art-prose ol{margin:20px 0 22px;padding:0;list-style:none}
.art-prose li{position:relative;padding-inline-start:30px;margin-bottom:10px;line-height:2.1}
.art-prose li:last-child{margin-bottom:0}
.art-prose li::before{
  content:'';position:absolute;inset-inline-start:8px;top:.95em;
  width:7px;height:7px;border-radius:2px;
  background:var(--primary);opacity:.55;
}
.art-prose ol{counter-reset:art-el}
.art-prose ol li{counter-increment:art-el;padding-inline-start:36px}
.art-prose ol li::before{
  content:counter(art-el,persian);
  position:absolute;inset-inline-start:0;top:.72em;
  width:24px;height:24px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:800;
  color:var(--primary-ink);background:var(--primary-soft);
}
.art-prose blockquote{
  margin:28px 0;padding:20px 24px;
  background:var(--surface-muted);
  border-inline-start:3px solid var(--primary);
  border-radius:var(--r-sm);
  font-size:17px;line-height:2.15;color:var(--text);font-weight:600;
}
.art-prose blockquote p:last-child{margin-bottom:0}
.art-prose blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle)}
.art-prose figure{margin:30px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);max-width:100%}
.art-prose figure img{width:100%;max-height:min(70vh,720px);height:auto;object-fit:contain;display:block;margin-inline:auto;background:var(--surface-muted, #f3f1ec)}
.art-prose figcaption{padding:10px 16px;font-size:var(--fs-xs);color:var(--text-subtle);border-top:1px solid var(--border)}
.art-prose a{color:var(--primary-ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(14,115,128,.35);text-underline-offset:4px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--t-fast),color var(--t-fast)}
.art-prose a:hover{color:var(--primary)}
.art-prose table{width:100%;border-collapse:collapse}
.art-prose .table-wrap,.art-prose table{margin:26px 0}
.art-prose table{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow-x:auto;box-shadow:var(--sh-xs);display:block}
.art-prose table th,.art-prose table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:start;font-size:var(--fs-sm)}
.art-prose table th{font-weight:800;background:var(--surface-muted)}
.art-prose img,
.art-prose video,
.art-prose iframe,
.art-prose embed,
.art-prose object{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:var(--r-md);
}
.art-prose img{
  width:auto;
  max-width:100%;
  max-height:min(70vh,720px);
  margin-inline:auto;
  object-fit:contain;
}
.art-prose video,
.art-prose iframe{
  width:100%;
  max-height:min(70vh,720px);
  aspect-ratio:16/9;
  object-fit:contain;
  background:#0b0d10;
}
.art-prose audio,
.art-prose .wp-audio-shortcode,
.art-prose .mejs-container{
  width:100% !important;
  max-width:100%;
  margin:16px 0;
  display:block;
}
.art-prose .wp-block-image,
.art-prose .wp-block-video,
.art-prose .wp-block-embed{
  max-width:100%;
  margin:24px 0;
}
.art-prose .wp-block-image img{width:100%;height:auto;max-height:min(70vh,720px);object-fit:contain}
.art-prose hr{margin:30px 0;border:0;border-top:1px dashed var(--border-strong)}

/* reply links: Woo default class → design .cmt-reply-btn atom */
.cmt-list .comment-reply-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:var(--fs-xs);font-weight:700;color:var(--primary-ink);
  background:var(--primary-soft);border-radius:var(--r-full);
  padding:6px 12px;transition:background var(--t-fast);
}
.cmt-list .comment-reply-link:hover{background:var(--primary-soft-hover,var(--primary-soft))}
.cmt-list .children{list-style:none;padding:0;margin:0}

/* logged-in footer note under the comment form */
.cmt-form .logged-in-as,.cmt-form .comment-notes{font-size:var(--fs-xs);color:var(--text-subtle)}

/* ========================================================================
   v1.13.0 — تبلیغات هوشمند داخل مقاله + جایگاه‌های تبلیغاتی
   ======================================================================== */
.art-smart{
  margin:26px 0;padding:16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
  /* Isolate from .art-prose list counters / bullets */
  list-style:none;
  counter-reset:none;
}
.art-prose .art-smart li::before,
.art-prose .art-smart::before{display:none !important;content:none !important}
.art-smart .price-wrap{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.art-smart .price-old{text-decoration:line-through;opacity:.65;font-weight:600}
.art-smart .price,
.art-smart .price-free{font-weight:800;color:var(--primary-ink)}

.art-smart-head{
  display:flex;align-items:center;gap:7px;margin:0 0 12px;
  font-size:var(--fs-sm);font-weight:800;color:var(--text);
}
.art-smart-head .icon-sm{color:var(--primary)}
.art-smart-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
}
.art-smart-item{
  display:flex;align-items:center;gap:10px;padding:8px;
  background:var(--surface-muted);border:1px solid var(--border);
  border-radius:var(--r-md);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.art-smart-item:hover{border-color:var(--primary);box-shadow:var(--sh-xs)}
.art-smart-thumb{flex:0 0 84px;overflow:hidden;border-radius:var(--r-sm)}
.art-smart-thumb img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}
.art-smart-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.art-smart-body b{font-size:var(--fs-xs);color:var(--text);line-height:1.8}
.art-smart-price{font-size:var(--fs-2xs,var(--fs-xs));font-weight:800;color:var(--primary-ink)}

/* جایگاه‌های تبلیغ دستی (کد HTML آزاد اپراتور) */
.art-ad{margin:26px 0;text-align:center}
.art-ad img{max-width:100%;height:auto;border-radius:var(--r-lg)}


/* ---- About / Contact (Core-driven static pages) ---- */
.page-about .art-lede,
.page-contact .art-lede {
        margin-block-start: .75rem;
        font-size: 1.05rem;
        line-height: 1.8;
        color: var(--muted, #5a5a5a);
        max-width: 42rem;
}
.about-mission {
        margin-block: 2rem 1.5rem;
        padding: 1.25rem 1.5rem;
        border-radius: var(--radius-lg, 12px);
        background: var(--surface-2, #f3f1ec);
}
.about-mission h2 {
        margin: 0 0 .5rem;
        font-size: 1.15rem;
}
.about-values {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 1rem;
        margin-block-start: 1.75rem;
}
.about-value h3 {
        margin: 0 0 .35rem;
        font-size: 1rem;
}
.about-value p {
        margin: 0;
        font-size: .92rem;
        color: var(--muted, #5a5a5a);
        line-height: 1.7;
}
.contact-channels {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 1rem;
        margin-block: 1.75rem;
}
.contact-channel {
        display: flex;
        gap: .85rem;
        align-items: flex-start;
}
.contact-channel-icon {
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: color-mix(in srgb, var(--brand, #0E7380) 12%, transparent);
        color: var(--brand, #0E7380);
}
.contact-channel-label {
        display: block;
        font-size: .78rem;
        color: var(--muted, #5a5a5a);
        margin-bottom: .15rem;
}
.contact-channel-value {
        font-weight: 600;
        color: inherit;
        text-decoration: none;
}
a.contact-channel-value:hover {
        color: var(--brand, #0E7380);
}
.contact-form-note {
        margin-block: 1rem .75rem;
        font-size: .92rem;
        color: var(--muted, #5a5a5a);
}
.contact-form-slot {
        margin-block-start: 1.25rem;
}

/* ---- Smart rails: size + card styles (v1.13.15) ---- */
.art-smart--sm .art-smart-thumb{flex:0 0 64px}
.art-smart--sm .art-smart-body b{font-size:11px}
.art-smart--lg .art-smart-thumb{flex:0 0 110px}
.art-smart--lg .art-smart-body b{font-size:var(--fs-sm)}

.art-smart--grid .art-smart-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.art-smart--grid .art-smart-item{flex-direction:column;align-items:stretch;text-align:center}
.art-smart--grid .art-smart-thumb{flex:none;width:100%}
.art-smart--grid .art-smart-thumb img{aspect-ratio:1/1}

.art-smart--minimal .art-smart-thumb{display:none}
.art-smart--minimal .art-smart-item{padding:12px 14px}
.art-smart--minimal .art-smart-body b{font-size:var(--fs-sm)}

.art-smart--poster .art-smart-row{grid-template-columns:1fr}
.art-smart--poster .art-smart-item{flex-direction:column;padding:0;overflow:hidden}
.art-smart--poster .art-smart-thumb{flex:none;width:100%}
.art-smart--poster .art-smart-thumb img{aspect-ratio:16/9;object-fit:cover}
.art-smart--poster .art-smart-body{padding:12px 14px}

/* Comment pagination */
.cmt-pagination{margin:20px 0 8px;display:flex;justify-content:center}
.cmt-pagination .page-numbers{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.cmt-pagination .page-numbers li{margin:0}
.cmt-pagination a,
.cmt-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:700;color:var(--text-muted);text-decoration:none;
}
.cmt-pagination a:hover{border-color:var(--primary);color:var(--primary-ink)}
.cmt-pagination .current{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}

/* ========== Comments redesign (v1.13.17) ========== */
.comments{
  max-width:min(720px,100%);
  margin-inline:auto;
  width:100%;
}
.cmt-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.cmt{margin:0;padding:0;border:0!important}
.cmt-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:16px 18px;
  box-shadow:var(--sh-xs);
}
.cmt-card .cmt-av,
.cmt-card .r-av{flex-shrink:0}
.cmt-body{min-width:0;flex:1}
.cmt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.cmt-name{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.cmt-date{font-size:var(--fs-2xs);color:var(--text-subtle);margin-inline-start:auto}
.cmt-stars{color:#f5a524;font-size:13px;letter-spacing:1px;margin:4px 0 6px;direction:ltr}
.cmt-text{font-size:var(--fs-sm);color:var(--text-muted);line-height:2;margin:0}
.cmt-text p{margin:0 0 .6em}
.cmt-text p:last-child{margin:0}
.cmt-actions{margin-top:10px}
.cmt-replies{margin-inline-start:24px;margin-top:10px;padding:0;border:0}
.cmt-replies .cmt-card{background:var(--surface-muted);box-shadow:none}

.cmt-respond,.comment-respond{
  margin-top:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px 20px;
  box-shadow:var(--sh-xs);
  max-width:100%;
}
.cmt-form-title,.comment-reply-title{
  font-size:var(--fs-md)!important;font-weight:900!important;margin:0 0 8px!important;
}
.cmt-form-note{font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.9;margin:0 0 16px}
.cmt-form .field,.cmt-respond .field{margin-bottom:14px}
.cmt-form .input,.cmt-form textarea.input,.cmt-form .art-textarea{
  width:100%;box-sizing:border-box;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:11px 14px;background:var(--surface-muted,#faf9f6);
  font:inherit;line-height:1.7;
}
.cmt-form textarea{min-height:120px;resize:vertical}
.cmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.cmt-form-foot{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.cmt-form-foot .btn,.cmt-form-foot input[type=submit]{
  min-width:140px;
}

/* Star rating picker (posts) */
.cmt-rate{display:inline-flex;flex-direction:row-reverse;gap:2px;direction:ltr}
.cmt-rate-input{position:absolute;opacity:0;pointer-events:none}
.cmt-rate-star{
  font-size:28px;line-height:1;color:#d5d0c6;cursor:pointer;
  transition:color .12s,transform .12s;user-select:none;
}
.cmt-rate-star:hover,
.cmt-rate-star:hover ~ .cmt-rate-star,
.cmt-rate-input:checked ~ .cmt-rate-star{color:#f5a524}
.cmt-rate-star:hover{transform:scale(1.08)}

@media (max-width:639px){
  .cmt-grid{grid-template-columns:1fr}
  .cmt-card{padding:14px}
  .cmt-respond{padding:16px}
  .cmt-form-foot .btn,.cmt-form-foot input[type=submit]{width:100%}
}

/* ========== Related sections — tighter width & smaller cards ========== */
.art-section{
  max-width:min(960px,100%);
  margin-inline:auto;
}
.art-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.art-grid-3 .p-card,
.art-grid-3 .b-card{
  font-size:13px;
}
.art-grid-3 .p-card .p-title,
.art-grid-3 .b-card .b-title{
  font-size:13.5px;line-height:1.7;
}
.art-grid-3 .p-card .p-thumb,
.art-grid-3 .b-card .b-cover{
  aspect-ratio:16/10;
}
.art-grid-3 .price-wrap,
.art-grid-3 .p-foot{font-size:12px}

@media (max-width:1023px){
  .art-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:639px){
  .art-grid-3{grid-template-columns:1fr;gap:12px}
  .art-section{max-width:100%}
}

/* ========== Comments layout fix (v1.13.18) ========== */
/* Fill article column — no half-empty side, no page-wide stretch */
.art-head-wrap .comments,
main .comments{
  max-width:100%!important;
  width:100%!important;
  margin-inline:0!important;
  box-sizing:border-box;
}
.cmt-list,
.cmt-list .cmt,
.cmt-list .cmt-card{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.cmt-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--sh-xs);
}
.cmt-respond,
.comment-respond,
#respond{
  width:100%!important;
  max-width:100%!important;
  margin-top:20px;
  margin-inline:0!important;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:var(--sh-xs);
}
.cmt-form textarea,
.cmt-form .art-textarea{
  min-height:88px!important;
  max-height:180px;
}
.cmt-form-foot .form-submit{margin:0}

/* Kill horizontal page scroll from article rails */
.art-head-wrap,
.art-layout,
.art-prose,
.art-section,
main.site-main{
  max-width:100%;
  overflow-x:clip;
}
.art-grid-3{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.art-grid-3 > *{
  min-width:0;
  max-width:100%;
}


/* ========== Article shell alignment (v1.13.19) — RTL safe ========== */
.art-head-wrap{
  max-width:100%;
  overflow-x:clip;
}
.art-share,
.author-box,
.art-author,
.comments,
.art-section{
  max-width:min(900px,100%);
  width:100%;
  margin-inline:auto;
  box-sizing:border-box;
}
.art-layout{
  max-width:min(1100px,100%);
  margin-inline:auto;
  width:100%;
}
/* With TOC: layout can be wider; prose stays readable */
@media (min-width:1024px){
  .art-layout:has(> .art-toc){
    max-width:min(1100px,100%);
  }
}
.cmt-list .cmt,
.cmt-list .cmt-card,
.cmt-respond,
#respond,
.comment-respond{
  width:100%!important;
  max-width:100%!important;
  margin-inline:0!important;
  box-sizing:border-box;
}
.art-grid-3{
  max-width:100%;
}

/* ========== Comment DOM + layout lock (v1.13.20) ========== */
/* Broken article/div mismatch made comments + related sit in one row. */
.comments,
section.comments,
.art-section.comments{
  display:block!important;
  width:100%!important;
  max-width:min(900px,100%)!important;
  margin-inline:auto!important;
  float:none!important;
  clear:both!important;
}
.cmt-list{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:12px!important;
  width:100%!important;
  margin:16px 0 0!important;
  padding:0!important;
  float:none!important;
}
.cmt-list > .cmt,
.cmt-list > .comment,
.cmt-list > article,
.cmt-list > div.cmt,
.cmt-list > .cmt-card{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  flex:none!important;
  float:none!important;
  clear:both!important;
  box-sizing:border-box;
}
.cmt-list .children,
.cmt-list .cmt-replies{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  margin:10px 0 0 0!important;
  padding:0 0 0 20px!important;
  list-style:none!important;
  border:0!important;
}
.cmt-card{
  display:flex!important;
  flex-direction:row!important;
  gap:14px;
  width:100%;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--sh-xs);
}
.cmt-respond,
#respond,
.comment-respond{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  clear:both!important;
  float:none!important;
  margin-top:22px!important;
}
/* Related / practice sections always below, full width of shell */
.art-head-wrap > .art-section,
.art-head-wrap > .comments{
  display:block!important;
  width:100%!important;
  max-width:min(900px,100%)!important;
  margin-inline:auto!important;
  clear:both!important;
  float:none!important;
}
.art-grid-3{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
}
@media (max-width:1023px){
  .art-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:639px){
  .art-grid-3{grid-template-columns:1fr!important}
}

/* ========== Overflow safety WITHOUT stretching header/footer (v1.13.22) ========== */
/* NEVER set max-width:100% on .container — that kills --container and stretches header/footer. */
html{overflow-x:clip}
body.ediusfa{overflow-x:clip}
body.single-post main,
body.single-post .art-head-wrap,
body.single-post .art-layout,
body.single-post .art-prose,
body.single-post .comments,
body.single-post .art-section{
  overflow-x:clip;
  box-sizing:border-box;
}
body.single-post .alignfull,
body.single-post .alignwide,
body.single-post .wp-block-group.alignfull,
body.single-post .wp-block-cover.alignfull,
body.single-post .wp-block-image.alignfull{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-inline:0!important;
  left:auto!important;
  right:auto!important;
  position:relative!important;
}
body.single-post .art-smart,
body.single-post .art-smart-row{
  max-width:100%;
  box-sizing:border-box;
}
body.single-post .art-smart-row{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
body.single-post .table-wrap{max-width:100%;overflow-x:auto}
body.single-post .art-prose img,
body.single-post .art-prose figure,
body.single-post .art-prose iframe,
body.single-post .art-prose video{
  max-width:100%;
  height:auto;
}