/* ===================================================================
   مقاله‌ها: فهرستِ /articles و صفحه‌ی هر مقاله (lib/articles.js)
   روی css/base.css، css/site.css و css/pages.css سوار می‌شه؛ متنِ مقاله همون ظاهرِ .doc رو داره
=================================================================== */

/* .page-top-links توی css/pages.css‌ه. گوشیِ باریک: «همه‌ی مقاله‌ها» توی مسیرِ صفحه (بالای مقاله) هم هست */
@media (max-width: 420px){ .page-top-links .btn:not(:last-child){ display:none; } }

/* ---------- فهرست ---------- */
.articles-head{ max-width:780px; margin:0 auto clamp(22px, 4vw, 34px); text-align:center; }
.articles-head h1{ font-size:clamp(26px, 3.8vw, 40px); font-weight:900; line-height:1.4; margin-bottom:12px; text-wrap:balance; }
.articles-head .lead{ font-size:15.5px; line-height:2.1; color:var(--text-dim); text-wrap:pretty; }
.articles-empty{ text-align:center; }
.articles-empty h1{ font-size:clamp(22px, 3vw, 30px); font-weight:900; margin-bottom:10px; }
.articles-empty p + p{ margin-top:6px; }

.article-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:16px; }
/* دسکتاپ: همیشه سه‌تا در هر ردیف. توی فهرستِ /articles (تیترش وسط‌چینه) یک یا دو کارت همون پهنا رو دارن و
   وسط می‌مونن؛ «مقاله‌های دیگه»ی پایینِ هر مقاله تیترش راست‌چینه، پس کارت‌هاش هم از راست شروع می‌شن */
@media (min-width: 960px){
  .article-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); justify-content:center; }
  .articles-head ~ .article-grid:has(> :last-child:nth-child(1)){ grid-template-columns:minmax(0, calc((100% - 32px) / 3)); }
  .articles-head ~ .article-grid:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(2, minmax(0, calc((100% - 32px) / 3))); }
}
.article-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--line); color:inherit;
  transition:background-color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
@media (hover: hover){ .article-card:hover{ box-shadow:0 22px 48px -30px rgba(10,10,12,0.5); } }
.ac-cover{
  position:relative; aspect-ratio:16 / 9; display:grid; place-items:center; color:var(--accent);
  background:var(--fill);
  border-bottom:1px solid var(--line);
}
.ac-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* خلاصه کامل نشون داده می‌شه (نه بریده با «…» وسطِ جمله)؛ تاریخِ کارت‌های یه ردیف هم‌تراز، پایینِ کارت */
.ac-body{ flex:1; display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; }
.ac-title{ font-size:16.5px; font-weight:800; line-height:1.7; color:var(--text); text-wrap:balance; }
.ac-summary{ font-size:13.5px; line-height:1.95; color:var(--text-dim); }
.ac-meta{ font-size:12px; color:var(--text-dimmer); margin-top:auto; padding-top:4px; }

.pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.pager-info{ font-size:13px; color:var(--text-dimmer); }

/* ---------- صفحه‌ی مقاله ---------- */
.crumbs{ max-width:780px; margin:0 auto 12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--text-dimmer); }
.crumbs a{ color:var(--text-dim); }
.crumbs a:hover{ color:var(--accent); }
/* عنوانِ مقاله کمی کوچک‌تر از بقیه‌ی صفحه‌ها، تا عنوانِ کوتاه روی گوشی هم توی یه خط جا بشه */
.article h1{ font-size:clamp(22px, 5.6vw, 36px); margin-bottom:8px; }
/* .article جلوش لازمه، وگرنه «.doc p» (۱۵ پیکسل) برنده می‌شه */
.article .article-meta{ font-size:13px; color:var(--text-dimmer); margin-bottom:20px; }
/* هر تکه (نویسنده، تاریخ، زمانِ مطالعه) یه‌جا می‌مونه؛ خط فقط بینِ تکه‌ها می‌شکنه، نه وسطِ «۳ دقیقه مطالعه» */
.article-meta > span{ white-space:nowrap; }
.article-cover{
  display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; margin-bottom:20px;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--fill);
}
.article .lead{ margin-bottom:6px; }
.article-body{ overflow-wrap:break-word; }
.article-body h2:first-child{ margin-top:18px; }

/* پیشنهادِ پلن‌ها تهِ مقاله‌ها و فهرستشون؛ مثلِ بقیه‌ی کارت‌ها سفید و وقتی روشی مشکی (site.css → «کارت‌ها») */
.article-cta{ margin-top:36px; padding:clamp(18px, 3vw, 24px); border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line); color:var(--text); }

.article-cta .article-cta-title{ font-size:17px; font-weight:800; line-height:1.7; color:var(--text); margin-bottom:4px; }
.article-cta p{ font-size:14.5px; line-height:2; color:var(--text-dim); }
.article-cta .btn{ margin-top:14px; text-decoration:none; }

.related{ margin-top:clamp(36px, 6vw, 56px); }
.related h2{ font-size:clamp(19px, 2.4vw, 22px); font-weight:800; margin-bottom:16px; }

/* پیش‌نمایشِ پنل مدیریت */
.preview-bar{
  max-width:780px; margin:0 auto 14px; padding:10px 14px; border-radius:var(--r-md); text-align:center;
  font-size:13.5px; font-weight:700; color:var(--warn); background:var(--warn-soft); border:1px solid var(--warn-line);
}

@media (prefers-reduced-motion: reduce){ .article-card{ transition:none; } }