@charset "UTF-8";
/* ==========================================================================
   وبلاگ — لیست مقالات، صفحه مقاله، ستون کناری و دیدگاه‌ها

   ⚠ این فایل بازنویسی شد: نسخه قبلی برای مارک‌آپ نسل قبل نوشته شده بود
   (.post-row / .blog-side / .side-box / .article-head) ولی ویوهای فعلی
   با قرارداد BEM می‌نویسند (.post-card / .blog-layout__side / .widget /
   .article__head). هیچ‌کدام از آن قوانین به هیچ عنصری نمی‌خورد.
   بعد از pages.css لود می‌شود؛ لایه مشترک (.page، .btn--*، .content) آنجاست.
   ========================================================================== */

/* ==========================================================================
   ۱. چیدمان دو ستونی
   ========================================================================== */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-6);align-items:start}
.blog-layout__main{min-width:0}
.blog-layout__side{
  min-width:0;display:grid;gap:16px;
  position:sticky;top:calc(var(--header-h) + 16px);
}
@media (max-width:1023px){
  .blog-layout{grid-template-columns:1fr;gap:var(--sp-5)}
  .blog-layout__side{position:static}
}

/* سربرگ لیست وبلاگ */
.blog-head{margin-bottom:var(--sp-5)}
.blog-head__lead{color:var(--c-ink-2);font-size:15px;line-height:2.05;max-width:74ch}

/* ==========================================================================
   ۲. کارت مقاله در گرید
   ========================================================================== */
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-4);
}
.post-grid--sm{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media (max-width:479px){
  .post-grid,.post-grid--sm{grid-template-columns:1fr}
}

.post-card{
  display:flex;flex-direction:column;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--t-slow),box-shadow var(--t-slow);
  /* کارت‌های پایین صفحه تا وقتی دیده نشوند رندر نمی‌شوند */
  content-visibility:auto;contain-intrinsic-size:320px;
}
@media (hover:hover){.post-card:hover{box-shadow:var(--sh-2);border-color:#D6DEEE}}
.post-card__thumb{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--c-line-2);flex:none;
}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
@media (hover:hover){.post-card:hover .post-card__thumb img{transform:scale(1.04)}}
.post-card__body{display:flex;flex-direction:column;gap:8px;padding:15px 16px 16px;flex:1 1 auto}
.post-card__cat{
  align-self:flex-start;
  padding:3px 10px;border-radius:var(--r-full);
  background:var(--c-primary-soft);color:var(--c-primary-dark);
  font-size:11.5px;font-weight:500;line-height:1.8;
  transition:background var(--t-fast);
}
.post-card__cat:hover{background:#E2EAFF}
.post-card__title{font-size:15.5px;font-weight:700;line-height:1.8}
.post-card__title a{color:var(--c-ink);transition:color var(--t-fast)}
.post-card__title a:hover{color:var(--c-primary)}
.post-card__excerpt{
  font-size:13.5px;color:var(--c-ink-3);line-height:1.95;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card__foot{
  margin-top:auto;padding-top:11px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--c-line-2);
  font-size:11.5px;color:var(--c-ink-3);
}
/* کارت مقاله مرتبط تاریخ را بدون نوار جدا نشان می‌دهد */
.post-grid--sm .post-card__body{padding:13px 14px 14px;gap:6px}
.post-grid--sm .post-card__title{font-size:14px}
.post-grid--sm .post-card__body time{font-size:11.5px;color:var(--c-ink-3)}

/* ==========================================================================
   ۳. ستون کناری — ویجت‌ها
   ========================================================================== */
.widget{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:18px;
}
.widget__title{
  font-size:14.5px;font-weight:700;color:var(--c-ink);
  margin-bottom:14px;padding-bottom:11px;
  border-bottom:1px solid var(--c-line-2);
}
.widget__list{list-style:none;margin:0;padding:0}
.widget__list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 0;font-size:13.5px;color:var(--c-ink-2);
  border-bottom:1px dashed var(--c-line-2);
  transition:color var(--t-fast);
}
.widget__list li:last-child a{border-bottom:0}
.widget__list a:hover{color:var(--c-primary)}
.widget__list a.is-active{color:var(--c-primary);font-weight:700}
.widget__count{
  flex:none;font-size:11.5px;color:var(--c-ink-3);
  background:var(--c-line-2);padding:1px 8px;border-radius:var(--r-full);
}
.widget__list a.is-active .widget__count{background:var(--c-primary-soft);color:var(--c-primary-dark)}
.widget__posts{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.widget__post a{display:flex;gap:11px;align-items:center}
.widget__post img{
  width:72px;height:54px;object-fit:cover;border-radius:var(--r-sm);
  flex:none;background:var(--c-line-2);
}
.widget__post span{
  font-size:13px;line-height:1.75;color:var(--c-ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t-fast);
}
.widget__post a:hover span{color:var(--c-primary)}
.widget--cta{background:var(--c-primary-soft);border-color:#D5E1FF}
.widget--cta .widget__title{border-bottom-color:#D5E1FF}
.widget--cta p{font-size:13.5px;color:var(--c-ink-2);line-height:1.95;margin-bottom:14px}
.widget--cta .btn{direction:ltr;font-variant-numeric:tabular-nums}

/* ==========================================================================
   ۴. صفحه مقاله
   ========================================================================== */
.article{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--sp-6);
  color:var(--c-ink-2);font-size:16px;line-height:2.2;
}
.article__head{margin-bottom:var(--sp-5)}
.article__cat{
  display:inline-flex;padding:4px 12px;border-radius:var(--r-full);
  background:var(--c-primary-soft);color:var(--c-primary-dark);
  font-size:12.5px;font-weight:500;margin-bottom:14px;
  transition:background var(--t-fast);
}
.article__cat:hover{background:#E2EAFF}
.article__title{
  font-size:clamp(21px,2.8vw,32px);font-weight:700;line-height:1.6;
  color:var(--c-ink);margin-bottom:14px;
}
.article__meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:14px;margin-top:16px;border-top:1px solid var(--c-line-2);
  font-size:12.5px;color:var(--c-ink-3);
}
.article__meta-sep{color:var(--c-line)}
.article__cover{margin:0 0 var(--sp-5);border-radius:var(--r-md);overflow:hidden;background:var(--c-line-2)}
.article__cover img{width:100%;height:auto;display:block}
.article__lead{
  font-size:16.5px;line-height:2.05;color:var(--c-ink);font-weight:500;
  padding:16px 18px;margin-bottom:var(--sp-5);
  background:var(--c-bg);border-radius:var(--r-md);
  border-inline-start:4px solid var(--c-primary);
}
@media (max-width:639px){
  .article{padding:var(--sp-4);border-radius:var(--r-md)}
  .article__lead{font-size:15px;padding:14px}
}

/* ---------- تایپوگرافی متن مقاله ---------- */
/* بعد از .content در pages.css می‌آید، پس در تداخل برنده است — عمدی است:
   متن مقاله باید از متن صفحات ثابت بازتر و خواناتر باشد. */
.article__body>*:first-child{margin-top:0}
.article__body>*:last-child{margin-bottom:0}
.article__body h2{
  font-size:22px;color:var(--c-ink);margin:1.8em 0 .7em;
  padding-inline-start:13px;border-inline-start:4px solid var(--c-primary);
  line-height:1.6;
}
.article__body h3{font-size:19px;color:var(--c-ink);margin:1.5em 0 .6em}
.article__body h4{font-size:17px;color:var(--c-ink);margin:1.3em 0 .5em}
.article__body p{margin:0 0 1.25em}
.article__body ul,.article__body ol{margin:0 0 1.4em;padding-inline-start:1.5em}
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body li{margin-bottom:.6em}
.article__body li::marker{color:var(--c-primary);font-weight:700}
.article__body a{color:var(--c-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.article__body a:hover{color:var(--c-primary-dark);text-decoration-thickness:2px}
.article__body strong{color:var(--c-ink)}
.article__body img{border-radius:var(--r-md);margin:1.8em auto;box-shadow:var(--sh-2);width:100%;height:auto}
.article__body figure{margin:1.8em 0}
.article__body figcaption{text-align:center;font-size:12.5px;color:var(--c-ink-3);margin-top:9px}
.article__body blockquote{
  margin:1.8em 0;padding:20px 22px;
  background:var(--c-primary-soft);border-radius:var(--r-md);
  border-inline-start:4px solid var(--c-primary);
  color:var(--c-primary-dark);font-size:16px;line-height:2.05;
}
.article__body blockquote p:last-child{margin-bottom:0}
.article__body blockquote cite{display:block;margin-top:10px;font-size:13px;color:var(--c-ink-3);font-style:normal}
.article__body hr{margin:2.2em 0;border:0;border-top:1px solid var(--c-line)}
.article__body code{background:var(--c-line-2);padding:2px 7px;border-radius:6px;font-size:.88em;direction:ltr;display:inline-block}
.article__body pre{
  background:var(--c-ink);color:#E6E9EF;padding:18px;border-radius:var(--r-md);
  overflow-x:auto;direction:ltr;text-align:left;font-size:13px;line-height:1.9;margin:1.6em 0;
}
.article__body pre code{background:none;padding:0;color:inherit}
.article__body table{margin:1.6em 0;font-size:14.5px;width:100%;border-collapse:collapse}
.article__body th,.article__body td{border:1px solid var(--c-line);padding:10px 12px;text-align:start}
.article__body thead th{background:var(--c-line-2);color:var(--c-ink);font-weight:700}

/* ---------- اشتراک‌گذاری ---------- */
.share{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px solid var(--c-line-2);
}
.share__label{font-size:13px;color:var(--c-ink-3);margin-inline-end:4px}
.share__btn{
  width:38px;height:38px;border-radius:var(--r-md);flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:var(--c-line-2);color:var(--c-ink-2);border:1px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.share__btn:hover{background:var(--c-primary);color:#fff}
.share__btn svg{width:18px;height:18px}
/* پس از کپی شدن لینک، app.js/inline کلاس is-copied می‌گذارد */
.share__btn.is-copied{background:var(--c-success);color:#fff;border-color:var(--c-success)}

/* ==========================================================================
   ۵. مقالات مرتبط
   ========================================================================== */
.related{margin-top:var(--sp-6)}
.related .section-title{margin-bottom:var(--sp-4)}

/* ==========================================================================
   ۶. دیدگاه‌ها
   ========================================================================== */
.comments{margin-top:var(--sp-6)}
.comments .section-title{margin-bottom:var(--sp-4)}
.section-title__count{font-size:14px;font-weight:500;color:var(--c-ink-3)}
.comments__empty{
  padding:20px;text-align:center;border-radius:var(--r-md);
  background:var(--c-bg);border:1px dashed var(--c-line);
  font-size:14px;color:var(--c-ink-3);
}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.comment-list--nested{margin-top:12px;gap:10px}
.comment{
  padding:16px;border:1px solid var(--c-line);border-radius:var(--r-md);
  background:var(--c-surface);
}
.comment--reply{
  margin-inline-start:28px;background:var(--c-bg);border-style:dashed;
  /* گوشه سمت والد صاف می‌ماند تا وابستگی بصری دیده شود */
  border-start-end-radius:var(--r-sm);
}
@media (max-width:639px){.comment--reply{margin-inline-start:14px}}
.comment__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.comment__name{font-size:13.5px;font-weight:700;color:var(--c-ink)}
.comment__date{font-size:11.5px;color:var(--c-ink-3)}
.comment__body{font-size:14px;color:var(--c-ink-2);line-height:2}
.comment__reply{margin-top:9px}

.comment-form{
  margin-top:var(--sp-5);padding:var(--sp-5);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4);
}
@media (max-width:639px){.comment-form{grid-template-columns:1fr;padding:var(--sp-4)}}
.comment-form__title{grid-column:1/-1;font-size:16px;font-weight:700;color:var(--c-ink);margin-bottom:6px}
.comment-form__hint{grid-column:1/-1;font-size:12.5px;color:var(--c-ink-3);margin-bottom:var(--sp-4)}

@media (prefers-reduced-motion:reduce){
  .post-card,.post-card__thumb img,.share__btn,.widget__post span{transition:none}
  .post-card:hover .post-card__thumb img{transform:none}
}