/* ==========================================================================
   article-card.css — «Article Card» (21st.dev) برایِ گریدِ صفحه‌یِ اخبار (/news/)
   منبع: https://21st.dev/@ravikatiyar162/components/card-23  (id 7755، نویسنده ravikatiyar162)
   وفادار به کامپوننت: هدرِ بالا (چیپِ دسته + نشانِ دوتکه‌ایِ تاریخ)، عنوان+خلاصه، سپس عکس با
   گرادیانِ خوانایی و برچسبِ پایین‌چپ (در نسخه‌ی اصلی مکان/location؛ اینجا «ادامه‌ی خبر»)؛
   hover: بالا‌آمدنِ ظریف + سایه + زومِ عکس (framer-motion در اصل، اینجا CSS transition ساده).
   تفاوت‌ها: رنگِ روشنِ خودِ سایت (نه dark)، تاریخِ شمسی (ماه/روزِ فارسی به‌جایِ JAN/25)،
   برچسبِ location → «ادامه‌ی خبر» با آیکونِ فلش (آینه‌شده برایِ RTL)، فونتِ Vazirmatn.
   بازگشت: نسخه‌یِ قبلیِ news_list.html در /opt/ai-skills/backups/news_list.html.before-articlecard
   ========================================================================== */

.news-grid-article {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.article-card {
    display: flex; flex-direction: column;
    background: var(--paper-card); border: 1px solid var(--line); border-radius: 18px;
    overflow: hidden; text-decoration: none; color: var(--ink);
    box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
}
@media (hover: hover) {
    .article-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(28, 25, 23, .28); border-color: rgba(181, 132, 46, .4); }
    .article-card:hover .article-card-media img { transform: scale(1.08); }
    .article-card:hover .article-card-more { opacity: 1; transform: translateY(0); }
}
.article-card:focus-visible { outline: 3px solid var(--gold, #E8A020); outline-offset: 2px; }

.article-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 0; }
.article-card-tag {
    display: inline-flex; align-items: center; height: 22px; padding: 0 11px; border-radius: 999px;
    background: rgba(76, 154, 106, .12); color: var(--leaf-700, #2f6b45); font-size: 11px; font-weight: 700;
}
.article-card-date { display: inline-flex; font-size: 11px; font-weight: 700; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.article-card-date-m { padding: 4px 7px; background: var(--forest-900, #12291E); color: #fff; letter-spacing: .01em; }
.article-card-date-d { padding: 4px 8px; background: var(--gold, #E8A020); color: #2b1a02; font-size: 12px; }

.article-card-body { padding: 12px 16px 14px; flex: 1; }
.article-card-body h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.55; font-weight: 800; color: var(--forest-900); }
.article-card-body p {
    margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.article-card-media { position: relative; margin-top: auto; aspect-ratio: 16 / 10; overflow: hidden; }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; background: #eef1ec; transition: transform .5s ease; }
.article-card-shade {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11, 23, 16, .75), rgba(11, 23, 16, .05) 55%, transparent);
}
.article-card-more {
    position: absolute; inset-inline-start: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.article-card-more svg { transform: scaleX(-1); }   /* ArrowUpRight → آینه برایِ RTL */
@media (hover: none) { .article-card-more { opacity: 1; transform: none; } }   /* لمسی: همیشه دیده شود */

/* --- دسترس‌پذیری --- */
html.a11y-contrast .article-card { border-width: 2px; box-shadow: none; }
html.a11y-motion-off .article-card, html.a11y-motion-off .article-card-media img, html.a11y-motion-off .article-card-more { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .article-card, .article-card-media img, .article-card-more { transition: none !important; } }