/*
    استایل‌های مخصوص بخش مقالات (/articles) — فقط روی این صفحات لود
    می‌شود، نه روی صفحات محصولات (نگاه کنید به services.css و شرط
    بارگذاری در layouts/app.blade.php). پایه‌ی مشترک (هدر/منو/دکمه/فرم
    پایه/رنگ‌ها) در app.css می‌ماند.
*/

/* pagination سمت مشتری — هم اینجا هم روی خودِ محصولات استفاده می‌شود، اما
   چون این اولین/اصلی‌ترین محل استفاده‌اش (لیست مقالات) است و فایل base
   هم به آن نیاز دارد، در app.css مشترک مانده — این کامنت فقط یادآوری است
   که اگر جایی «pagination در مقالات کار نمی‌کند» دیده شد، اول app.css را
   چک کنید، نه اینجا. */

/* تایپوگرافی متن مقاله (articles/show.blade.php, .article-body روی
   $article->content) — قالب یکدست برای همه‌ی مقاله‌های layout=standard. */
.article-body { font-size: 15.5px; line-height: 1.9; color: var(--ink); }
/* بدون این، اگر اولین چیز داخل بدنه یک h2 (margin-top:30px) یا figure باشد،
   با margin-bottom تصویر شاخص بالای مقاله جمع می‌شود و فاصله‌ی نامتناسب
   بزرگی می‌سازد — فاصله‌ی بعد از تصویر شاخص باید فقط همان یکی باشد. */
.article-body > *:first-child { margin-top: 0 !important; }
.article-body h2 { font-size: 20px; font-weight: 700; margin: 30px 0 12px; }
.article-body h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
/* بدون text-transform:uppercase — فارسی حروف بزرگ/کوچک ندارد، پس روی این
   محتوا بی‌اثر است؛ تمایز h4 فقط با رنگ کم‌رنگ‌تر و letter-spacing است. */
.article-body h4 {
    font-size: 12.5px; font-weight: 700; margin: 18px 0 6px; color: var(--ink-soft);
    letter-spacing: .02em;
}
.article-body p { margin: 0 0 14px; text-align: justify; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-inline-start: 20px; }
.article-body li { margin-bottom: 4px; text-align: justify; }
.article-body a { color: var(--action-blue); }
/* تصاویر داخل متن مقاله وسط‌چین — img به‌صورت پیش‌فرض inline است، بدون
   display:block خودِ margin:auto اثری ندارد. width:100% (نه max-width) عمدی
   است: بعضی تصاویر پایپ‌لاین با width="0" height="0" در HTML می‌آیند
   (placeholder برای lazy-load سمت خودشان)، max-width:100% روی آن هیچ اثری
   ندارد چون فقط یک محدودیت است نه یک مقدار قطعی؛ width:100% صریح این را
   override می‌کند. */
.article-body img { display: block; width: 100%; height: auto; margin: 4px auto 14px; border-radius: var(--radius-sm); }
/* <figure> مرورگر پیش‌فرض margin: 1em 40px دارد — همان ۴۰px حاشیه‌ی افقی
   باعث می‌شد تصویر داخل آن به‌جای هم‌عرض بقیه‌ی محتوا، دندانه‌دار/تورفته
   دیده شود. */
.article-body figure { margin: 0 0 14px; }
.article-body figure img { margin-bottom: 0; }
.article-body figcaption { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 6px; }
.article-body blockquote {
    margin: 0 0 14px; padding: 10px 14px; border-inline-start: 3px solid var(--brass);
    background: var(--paper-raised); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft);
}
.article-body pre {
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 12px; overflow-x: auto; font-size: 12.5px;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 7px 9px; text-align: right; }
.article-body th { background: var(--paper-raised); font-weight: 600; }

/* دکمه‌ی CTA درون‌متنی که پایپ‌لاین content-creation تولید می‌کند
   (<a class="btn btn-primary">) — باگ واقعی گزارش‌شده: .article-body a
   بالا (رنگ آبی برای لینک‌های معمولی) به‌خاطر specificity بالاتر
   (کلاس+تگ در برابر فقط یک کلاس در .btn) روی رنگ سفید متن خودِ .btn غالب
   می‌شد، یعنی متن دکمه دقیقاً هم‌رنگ پس‌زمینه‌ی آبی‌اش و کاملاً نامرئی
   می‌شد. اینجا فقط رنگ را برمی‌گردانیم؛ اندازه/پدینگ/گردی از همان .btn
   مشترک (app.css) می‌آید تا هم‌شکل دکمه‌های بقیه‌ی سرویس بماند. */
.article-body a.btn,
.article-body a.btn:hover {
    color: #fff;
    margin: 4px 0 18px;
}

/* فهرست مطالب — details/summary ای که پایپ‌لاین برای مقالات بلند تولید
   می‌کند (details.toc > summary + ul.toc-list). بدون این، details خام
   مرورگر فقط یک مثلث پیش‌فرض و یک لیست بی‌فاصله‌ی چسبیده‌به‌لبه نشان
   می‌داد — نه یک جعبه‌ی مجزا با دکمه‌ی باز/بسته‌ی روشن، هم‌الگوی
   .comment-form-toggle بالا برای حذف مارکر پیش‌فرض + یک فلش چرخشی
   دستی به‌جای آن. */
.article-body details.toc {
    margin: 0 0 20px; padding: 14px 16px;
    background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-body details.toc > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-weight: 700; font-size: 14px; color: var(--ink);
}
.article-body details.toc > summary::-webkit-details-marker { display: none; }
.article-body details.toc > summary::marker { content: ""; }
.article-body details.toc > summary::after {
    content: ""; flex-shrink: 0; width: 8px; height: 8px;
    border-inline-end: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg); transition: transform .2s;
}
.article-body details.toc[open] > summary { margin-bottom: 10px; }
.article-body details.toc[open] > summary::after { transform: rotate(-135deg); }
.article-body .toc-list { list-style: none; margin: 0; padding: 0; }
.article-body .toc-item { margin-bottom: 2px; text-align: right; }
.article-body .toc-item a {
    display: block; padding: 6px 8px; border-radius: var(--radius-sm);
    font-size: 13.5px; color: var(--action-blue); text-decoration: none;
}
.article-body .toc-item a:hover { background: var(--paper); text-decoration: underline; }
/* زیرسرفصل‌ها (h3) با یک تورفتگی و رنگ کم‌رنگ‌تر از سرفصل‌های اصلی (h2)
   جدا می‌شوند — دقیقاً همون سلسله‌مراتبی که خودِ متن مقاله با h2/h3 دارد. */
.article-body .toc-item--h3 { padding-inline-start: 14px; }
.article-body .toc-item--h3 a { font-size: 12.5px; color: var(--ink-soft); }

/* «مطالب مرتبط» انتهای مقاله‌های پایپ‌لاین (div.related-links) — بدون
   این، فقط یک پاراگراف معمولی و یک لیست خام بود، هیچ چیزی آن را از متن
   اصلی مقاله جدا نمی‌کرد. */
.article-body .related-links {
    margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
}
.article-body .related-links__title { font-weight: 700; font-size: 14px; color: var(--ink); margin: 0 0 10px; }
.article-body .related-links ul { margin: 0; padding: 0; list-style: none; }
.article-body .related-links li { margin-bottom: 6px; text-align: right; }
.article-body .related-links a { font-size: 13.5px; }

/* صفحات مقاله (show/index) بک‌گراند سفید خالص می‌گیرند نه --paper خاکستری‌ملایمِ
   پیش‌فرض بقیه‌ی صفحات — درخواست صریح برای خوانایی بهتر متن بلند. چون این
   یعنی --paper-raised دیگر پیش‌زمینه‌ی این صفحات را از خودِ کارت‌ها متمایز
   نمی‌کند، جعبه‌هایی که فقط با بک‌گراند (نه border) خودشان را جدا می‌کردند
   اینجا برعکس می‌شوند تا کنتراست‌شان از بین نرود. */
.shell-white { background: var(--paper-raised); }
.shell-white .article-body blockquote,
.shell-white .article-body pre,
.shell-white .article-body th { background: var(--paper); }

.breadcrumb-link { color: inherit; text-decoration: none; }
.breadcrumb-link:hover { text-decoration: underline; }

/* ریتم فاصله‌گذاری صفحه‌ی مقاله — هر بخش اصلی (تگ‌ها/نویسنده/امتیاز/
   مرتبط/نظرات) با یک فاصله‌ی یکسان و یک خط نازک بالای خودش از بخش قبلی جدا
   می‌شود؛ حالا که بک‌گراند صفحه یک‌دست سفید است (shell-white)، کارت‌های
   بدون‌بوردر دیگر خودشان را از پس‌زمینه جدا نمی‌کنند، این خط جای آن
   جداسازی بصری را می‌گیرد. */
.article-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.article-meta-row {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-bottom: 16px; color: var(--ink-soft); font-size: 12.5px;
}
.article-meta-item { display: flex; align-items: center; gap: 5px; }
.article-meta-item svg { flex-shrink: 0; color: var(--ink-soft); }

.comment-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--action-blue); color: #fff; font-size: 13px; font-weight: 600;
}

/* کاروسل «مطالب مرتبط» — اسکرول افقی بومی (لمس/تراک‌پد/اسکرول‌بار مرورگر)
   + درگ‌کردن با موس (نگاه کنید به اسکریپت پایین همین بخش در
   articles/show.blade.php). عرض هر کارت ۶۶٪ ظرف، پس همیشه یک کارت کامل +
   نیمی از کارت بعدی («۱.۵ محتوا») دیده می‌شود؛ بدون margin/padding منفی،
   پس اولین کارت دقیقاً هم‌تراز بقیه‌ی محتوای صفحه می‌ماند، نه چسبیده به
   لبه‌ی واقعی صفحه. */
.related-articles-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    cursor: grab;
    user-select: none;
}
.related-articles-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}
.related-articles-carousel .related-articles-card {
    -webkit-user-drag: none;
    flex: 0 0 66%;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    color: inherit;
    margin-top: 0;
}

/* دکمه‌ی باز/بسته‌کردن فرم ثبت نظر — details/summary به‌جای JS جدا، چون
   برخلاف منوی کشویی هدر (که به ترنزیشن transform نیاز دارد و رفتار بومی
   details آن را می‌شکند)، اینجا صرفاً نمایش/پنهانی ساده کافی است. */
.comment-form-toggle > summary { cursor: pointer; list-style: none; display: inline-block; }
.comment-form-toggle > summary::-webkit-details-marker { display: none; }
.comment-form-toggle > summary::marker { content: ""; }

/* کتابخونه‌ی کامپوننت‌های مقاله — کلاس‌های آماده برای بخش‌های سفارشی
   (کارت جزئیات، جدول مقایسه‌ای، باکس نکته) که هم من هم کارفرما در آینده
   دوباره ازشان استفاده می‌کنیم؛ همیشه HTML معمولی با یکی از این کلاس‌ها،
   نه یک بلوک مخفی/تولیدشده. */
.article-card {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
    margin: 0 0 14px; background: var(--paper-raised);
}
.article-card h3, .article-card h4 { margin-top: 0; }
.article-comparison-table th:first-child, .article-comparison-table td:first-child { background: var(--paper-raised); font-weight: 600; }
.article-callout {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px;
    background: #FEF6E7; border: 1px solid #F3DDA8; border-radius: var(--radius-sm); color: var(--brass-deep);
}