/* ==========================================================================
   post-detail-premium.css — بازطراحیِ حرفه‌ایِ صفحه‌ی هر خبر (news_detail.html)
   شاملِ چند ایده از 21st.dev (با اقتباس، نه کدِ عین‌به‌عین):
   - نوارِ پیشرفتِ مطالعه: الگوی رایجِ نشریاتِ حرفه‌ای (NYT/گاردین)، پیاده‌سازیِ خودمان.
   - پیل‌هایِ متا و کارتِ واکنش: بسط‌دادنِ زبانِ بصریِ خودِ سایت (article-card، price-bar-live).
   بدونِ تغییر در منطقِ فرم‌ها/کامنت‌ها/واکنش‌ها/اشتراک‌گذاری — فقط لایه‌ی ظاهری.
   بازگشت: حذفِ <link> این فایل + <link article-card.css> از news_detail.html،
   و نسخه‌ی قبلیِ قالب در /opt/ai-skills/backups/news_detail.html.before-premium
   ========================================================================== */

/* --- نوارِ پیشرفتِ مطالعه --- */
.post-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 400; background: transparent; }
.post-progress-fill {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(to left, var(--gold, #E8A020), var(--forest-700, #1F4D3A));
    transition: width .12s linear;
}
@media print { .post-progress { display: none; } }

/* --- بردکرامب: کمی فاصله‌گذاریِ بهتر --- */
.post-breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- سربرگ: تایپوگرافیِ درشت‌تر و باکیفیت‌تر --- */
.post-head { margin-bottom: 4px; }
.post-head h1 { font-size: 30px; line-height: 1.6; letter-spacing: -.005em; }
@media (min-width: 720px) { .post-head h1 { font-size: 34px; } }
.post-head .eyebrow { position: relative; padding-inline-start: 14px; }
.post-head .eyebrow::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep, #B5842E);
}

/* --- پیل‌هایِ متا (تاریخ/بازدید/زمانِ مطالعه/نویسنده) --- */
.post-meta { gap: 8px; flex-wrap: wrap; }
.post-meta-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: #f3f1e9; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.post-meta-pill i { color: var(--gold-deep, #B5842E); font-size: 11px; }
.post-meta-pill-link { text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.post-meta-pill-link:hover { background: rgba(31, 77, 58, .08); border-color: rgba(31, 77, 58, .25); color: var(--forest-900); }

/* --- عکسِ کاور: قابِ حرفه‌ای‌تر --- */
.post-cover {
    border: 1px solid var(--line); box-shadow: 0 14px 34px -18px rgba(15, 40, 25, .35);
}

/* --- بدنه‌ی متن: تایپوگرافیِ خواناتر --- */
.post-body { font-size: 16px; line-height: 2; color: var(--ink); }
.post-body p { margin: 0 0 16px; }
.post-body h2, .post-body h3 { color: var(--forest-900); font-weight: 800; margin: 28px 0 12px; }

/* --- گالری: دکمه‌هایِ ناوبریِ ظریف‌تر --- */
.gallery-nav { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: transform .18s ease, background-color .18s ease; }
.gallery-nav:hover { transform: translateY(-50%) scale(1.08); }

/* --- برچسب‌ها: کمی عمق --- */
.post-tag { box-shadow: 0 1px 2px rgba(28, 25, 23, .05); transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .15s ease; }
.post-tag:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(28, 25, 23, .12); }

/* --- نوارِ اشتراک‌گذاری: دکِ ظریف --- */
.post-share-box {
    background: var(--paper-card); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px 16px;
}
.share-btn, .print-btn { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
@media (hover: hover) { .share-btn:hover, .print-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 16px rgba(0, 0, 0, .2); } }
.print-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
    background: #f3f1e9; border: 1px solid var(--line); color: var(--forest-900); font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; box-shadow: none;
}

/* --- واکنش‌ها (مفید بود/نبود) --- */
.post-reactions { display: flex; gap: 10px; }
.reaction-btn:hover { border-color: var(--gold-deep, #B5842E); box-shadow: 0 4px 12px rgba(181, 132, 46, .18); }
.reaction-btn.active-like { background: rgba(31, 77, 58, .08); border-color: var(--forest-700); color: var(--forest-900); }
.reaction-btn.active-dislike { background: rgba(180, 60, 50, .08); border-color: #b43c32; color: #8a2f27; }

/* --- کامنت‌ها: کارتِ ظریف به‌جایِ فقط خط‌جداکننده --- */
.comment-list { display: flex; flex-direction: column; gap: 2px; }
.comment-item { border-bottom: none; border-radius: 14px; padding: 14px; transition: background-color .2s ease; }
.comment-item:nth-child(odd) { background: rgba(76, 154, 106, .05); }
.comment-item::before { box-shadow: 0 2px 6px rgba(18, 41, 30, .2); }
.comment-replies { margin-top: 10px; border-inline-start: 2px solid var(--line); padding-inline-start: 14px; }
.comment-form { background: var(--paper-card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }

/* --- فهرستِ مطالب (TOC) --- */
.post-toc {
    background: var(--paper-card); border: 1px solid var(--line); border-radius: 16px;
    padding: 14px 18px; margin-bottom: 4px;
}
.post-toc-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--forest-900); margin-bottom: 8px; }
.post-toc-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.post-toc-list a { font-size: 13.5px; line-height: 1.7; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.post-toc-list a:hover, .post-toc-list a:focus-visible { color: var(--gold, #E8A020); }
.post-toc-list li.post-toc-sub { list-style: circle; margin-inline-start: 14px; }
.post-toc-list li.post-toc-sub a { font-size: 12.5px; }

/* --- دکمه‌ی بازگشت به بالا --- */
.post-back-top {
    position: fixed; inset-inline-end: 18px; bottom: 22px; z-index: 350;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--forest-900, #12291E); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(18, 41, 30, .5);
    transition: transform .25s ease, opacity .25s ease, background-color .2s ease;
}
.post-back-top:hover { background: var(--gold, #E8A020); color: #2b1a02; transform: translateY(-3px); }
.post-back-top[hidden] { display: none; }
@media (max-width: 640px) { .post-back-top { inset-inline-end: 14px; bottom: 78px; width: 40px; height: 40px; } }

/* --- دسترس‌پذیری --- */
html.a11y-motion-off .share-btn, html.a11y-motion-off .gallery-nav, html.a11y-motion-off .post-tag, html.a11y-motion-off .post-back-top { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .share-btn, .gallery-nav, .post-tag, .post-back-top { transition: none !important; } }
html.a11y-contrast .post-meta-pill, html.a11y-contrast .post-share-box, html.a11y-contrast .comment-form, html.a11y-contrast .post-toc { box-shadow: none; border-width: 1.5px; }

/* --- نوارِ اشتراک‌گذاری: دکِ جمع‌شونده (اقتباس از «Social Share Button»، 21st.dev) --- */
/* منبع: https://21st.dev/@Shatlyk1011/components/social-button (id 10388) — فقط تکنیکِ
   گریدِ ۰fr→۱fr برایِ باز/بسته‌شدنِ نرم گرفته شد (به‌جایِ framer-motion/width:auto)؛
   آیکون‌ها همانِ ۸ پلتفرمِ موجودِ سایت‌اند، نه سه‌تایِ نسخه‌ی اصلی. */
.post-share-box { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.share-dock-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--paper-card);
    color: var(--forest-900); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .06);
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.share-dock-toggle:hover { box-shadow: 0 4px 12px rgba(28, 25, 23, .12); }
.share-dock-toggle[aria-expanded="true"] { background: rgba(31, 77, 58, .08); border-color: var(--forest-700); color: var(--forest-900); }
/* دکِ آیکون‌ها: به‌جای تریکِ شکنندهی grid-template-columns fr (که رویِ موبایل
   به‌درستی جمع/باز نمی‌شد و آیکون‌ها را عمودی و شکسته نشان می‌داد)، از
   max-height + flex-basis:100% استفاده می‌شود — همیشه در یک ردیفِ افقیِ
   تمام‌عرض باز می‌شود، رفتارش در همه‌ی مرورگرها یکسان و قابل‌اطمینان است. */
.share-dock-icons {
    flex-basis: 100%; width: 100%; max-width: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
}
.share-dock-icons.is-open { max-height: 240px; }
.share-dock-icons-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 10px 2px; }
html.a11y-motion-off .share-dock-icons, html.a11y-motion-off .share-dock-toggle { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .share-dock-icons, .share-dock-toggle { transition: none !important; } }

/* --- کامنت‌ها: آواتارِ رنگیِ گرادیانی بر اساسِ نامِ کاربر (اقتباس از «Comment Thread»، 21st.dev) --- */
/* منبع: https://21st.dev/@rmahammad/components/comment-thread (id 26900) — تکنیکِ hue بر
   اساسِ هشِ نام (hueFromString) برایِ آواتارهایِ بدونِ عکس. اسکریپت: post-detail-premium.js */
.comment-item::before {
    background: var(--avatar-grad, linear-gradient(140deg, var(--forest-700), var(--forest-900)));
}
.comment-replies { border-inline-start-color: rgba(181, 132, 46, .35); }
@media (max-width: 480px) { .comment-replies { padding-inline-start: 12px; } }