/* ==========================================================================
   news-elastic.css — «Elastic Gallery» (21st.dev) برایِ اخبارِ برگزیده‌یِ صفحه‌یِ اصلی
   منبع: https://21st.dev/@daiwiikharihar/components/elastic-gallery  (id 9859، نویسنده: daiwiikharihar)
   وفادار به کامپوننت: آکاردئونِ تصویری؛ کارتِ فعال flex:4 و بقیه flex:1 با easing
   cubic-bezier(.25,1,.5,1) در ۷۰۰ms؛ روشنایی ۱۰۰٪ / ۵۰٪ (hover ۷۵٪) — رویِ لایه‌یِ تصویر؛ زومِ تصویر (۱۰۰ vs ۱۱۰٪)؛
   گرادیانِ خوانایی؛ چیپِ دسته با blur؛ عنوانِ درشت + CTA؛ برچسبِ عمودیِ کارت‌هایِ بسته (دسکتاپ)؛
   در موبایل: چیدمانِ ستونی. تفاوت‌ها: rounded-2xl→۱۶px، گرادیان با تُنِ جنگلیِ سایت،
   عنوانِ فارسی بدونِ uppercase، شناسه‌یِ موبایل → عنوانِ کوتاه، فلشِ CTA برایِ RTL آینه شده.
   بازگشت: نسخه‌یِ قبلیِ home.html در /opt/ai-skills/backups/home.html.before-elastic
   ========================================================================== */

.news-elastic {
    display: flex; flex-direction: column; gap: 8px;
    height: auto; margin-bottom: 20px;
}
.ne-item.is-active { min-height: 340px; }   /* موبایل: چون کانتینر اکنون height:auto است، کارتِ باز اندازه‌ی خودش را از این می‌گیرد نه از flex-grow */
@media (min-width: 720px) {
    .news-elastic { flex-direction: row; gap: 14px; height: clamp(380px, 46vw, 480px); }
    .ne-item.is-active { min-height: 0; }   /* دسکتاپ: اندازه از flex-grow در یک کانتینرِ باارتفاعِ ثابت می‌آید */
}
/* کارت‌هایِ بسته حداقلِ اندازه دارند تا عنوانِ کامل (بدونِ سه‌نقطه) جا بشود */
.news-elastic { --ne-idle-size: 136px; }
.ne-item:not(.is-active) { min-height: var(--ne-idle-size); }
@media (min-width: 720px) { .ne-item:not(.is-active) { min-height: 0; min-width: 112px; } }

.ne-item {
    position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden;
    flex: 1 1 0%; border-radius: 16px; border: 1px solid var(--line); background: #0d1f17;
    color: #fff; text-decoration: none; cursor: pointer;
    transition: flex .7s cubic-bezier(.25, 1, .5, 1);
    -webkit-tap-highlight-color: transparent;
}
.ne-item.is-active { flex-grow: 4; }
/* کامپوننتِ اصلی brightness را رویِ کلِ کارت می‌گذارد؛ اینجا فقط رویِ تصویر تا برچسب‌هایِ کارت‌هایِ بسته خوانا بماند */
.ne-media { filter: brightness(.5); transition: filter .7s cubic-bezier(.25, 1, .5, 1); }
.ne-item.is-active .ne-media { filter: brightness(1); }
@media (hover: hover) { .ne-item:not(.is-active):hover .ne-media { filter: brightness(.75); } }
.ne-item:focus-visible { outline: 3px solid var(--gold, #E8A020); outline-offset: 2px; }

/* --- تصویر + سایه‌ی خوانایی --- */
.ne-media { position: absolute; inset: 0; display: block; }
.ne-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.1); transition: transform 1s ease;
}
.ne-item.is-active .ne-media img { transform: scale(1); }
.ne-shade {
    position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
    background: linear-gradient(to top, rgba(8, 26, 18, .88), rgba(8, 26, 18, .22) 52%, transparent);
}
.ne-item.is-active .ne-shade { opacity: 1; }

/* --- محتوا --- */
.ne-content {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px;
}
@media (min-width: 720px) { .ne-content { padding: 26px; } }

.ne-open {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    transform: translateY(48px); opacity: 0; pointer-events: none;
    transition: transform .5s ease, opacity .5s ease;
}
.ne-item.is-active .ne-open { transform: translateY(0); opacity: 1; transition-delay: .2s; pointer-events: auto; }

.ne-chip {
    display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ne-title {
    margin: 0; font-family: "Vazirmatn", sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(18px, 2.3vw, 27px); line-height: 1.55;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    /* بدونِ line-clamp: عنوانِ کارتِ باز هم کامل نمایش داده می‌شود */
}
.ne-meta { font-size: 12px; color: rgba(255, 255, 255, .78); }
.ne-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .88);
}
.ne-cta svg { transform: scaleX(-1); transition: transform .25s ease; }   /* ArrowUpRight → آینه برایِ RTL */
@media (hover: hover) { .ne-item.is-active:hover .ne-cta svg { transform: scaleX(-1) translate(2px, -2px); } }

/* --- کارتِ بسته: عنوانِ افقیِ دوخطی، هم در موبایل هم در دسکتاپ (خواناتر از چرخشِ عمودی) --- */
.ne-idle { position: absolute; transition: opacity .5s ease .5s, transform .5s ease .5s; }
.ne-item.is-active .ne-idle { opacity: 0; transform: scale(.5); transition-delay: 0s; }
.ne-idle { inset: 0; display: flex; align-items: flex-end; padding: 12px; }
.ne-idle-short {
    display: block;
    width: 100%; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7), 0 0 14px rgba(0, 0, 0, .35);
    /* بدونِ line-clamp/سه‌نقطه: عنوان کامل دیده می‌شود؛ کارتِ بسته با flex-basis:auto بلندتر می‌شود اگر لازم باشد */
}

@media (min-width: 720px) {
    .ne-idle { align-items: flex-end; padding: 14px 10px; }
    .ne-idle-short { font-size: 12px; text-align: center; }
}

/* موبایل: بکگراوندِ عکس/گرادیان absolute می‌ماند، اما عنوان در جریانِ عادیِ صفحه قرار می‌گیرد
   تا ارتفاعِ کارتِ بسته را خودش تعیین کند (نه min-height ثابت) و هیچ متنی بریده نشود */
@media (max-width: 719px) {
    .ne-item:not(.is-active) .ne-idle { position: static; padding: 12px; }
}

/* --- حالت‌هایِ دسترس‌پذیری --- */
html.a11y-contrast .ne-item { border-width: 2px; }
html.a11y-contrast .ne-item:not(.is-active) .ne-media { filter: brightness(.6); }
html.a11y-motion-off .ne-item, html.a11y-motion-off .ne-media, html.a11y-motion-off .ne-media img, html.a11y-motion-off .ne-shade,
html.a11y-motion-off .ne-open, html.a11y-motion-off .ne-idle, html.a11y-motion-off .ne-cta svg { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .ne-item, .ne-media, .ne-media img, .ne-shade, .ne-open, .ne-idle, .ne-cta svg { transition: none !important; }
}
@media print { .news-elastic { height: auto; flex-direction: column; } .ne-item { flex: none; height: 160px; } .ne-media { filter: none; } }