/* ============ TELANGOR — گرید آرشیو ============ */
/* روی shell/parts/telangor.css سوار می‌شود (کارت‌ها را از آنجا می‌گیرد). */

/* پالت مشترکِ آرشیوها — زمینه‌ی رنگی روی خودِ کارت
   (در صفحه‌ی اصلی روی .tlg-panel بود). تلنگر، وبلاگ و اخبار از همین‌ها استفاده می‌کنند. */
.tcard.c-sec  ,.c-sec  {--cc:#E4572E;--cc-ink:#B23A18;--cc-wash:#FDEEEA}
.tcard.c-fin  ,.c-fin  {--cc:#024E75;--cc-ink:#023A58;--cc-wash:#E9F2F8}
.tcard.c-ai   ,.c-ai   {--cc:#7C5CDB;--cc-ink:#5B3FB0;--cc-wash:#F0ECFB}
.tcard.c-infra,.c-infra{--cc:#1596C4;--cc-ink:#0B6E92;--cc-wash:#EDF6FA}
.tcard.c-edu  ,.c-edu  {--cc:#0A6E9B;--cc-ink:#075775;--cc-wash:#E9F3F8}
.tcard.c-biz  ,.c-biz  {--cc:#66C2E6;--cc-ink:#0B6E92;--cc-wash:#F0F8FC}
.tcard.c-news ,.c-news {--cc:#1596C4;--cc-ink:#0B6E92;--cc-wash:#EDF6FA}
.tcard.c-prod ,.c-prod {--cc:#024E75;--cc-ink:#023A58;--cc-wash:#E9F2F8}
.tcard.c-coop ,.c-coop {--cc:#0A6E9B;--cc-ink:#075775;--cc-wash:#E9F3F8}
.tcard.c-grp  ,.c-grp  {--cc:#66C2E6;--cc-ink:#0B6E92;--cc-wash:#F0F8FC}

/* ---- تنظیم موضعی بنر تلنگر (بقیه از .has-art در پوسته می‌آید) ---- */
.tlg-hero .hart{object-position:22% center}
.tlg-hero .sub{max-width:44ch}

/* ---- نوار فیلتر (لینک واقعی؛ جاوااسکریپت فقط بهترش می‌کند) ---- */
.tfilter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.tfilter a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:10px 19px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  color:var(--muted);transition:all .2s}
.tfilter a .dotc{width:9px;height:9px;border-radius:50%;background:var(--cc,var(--muted-2));
  flex:0 0 9px;transition:transform .22s}
.tfilter a:hover{border-color:var(--cc,var(--cyan));color:var(--petrol-900);transform:translateY(-2px)}
.tfilter a[aria-current="page"]{background:var(--cc-wash,var(--cyan-50));border-color:var(--cc,var(--cyan));
  color:var(--cc-ink,var(--cyan-ink));font-weight:700}
.tfilter a[aria-current="page"] .dotc{transform:scale(1.3)}
.tfilter .count{margin-inline-start:auto;font-size:13px;color:var(--muted-2)}

/* ---- گرید ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tgrid .tcard{flex-direction:column;grid-row:auto;grid-column:auto;height:100%}
.tgrid .tcard .pic{aspect-ratio:16/10;width:100%;flex:none}
.tgrid .tcard .tbody{padding:22px;flex:1}
.tgrid .tcard h3{font-size:17px;line-height:1.58;margin-bottom:10px}
.tgrid .tcard .insight{display:block;font-size:13.5px}

/* لینک کشیده: کل کارت کلیک‌پذیر است ولی نشانه‌گذاری معنایی حفظ می‌شود */
.tcard .tl{color:inherit}
.tcard .tl::after{content:"";position:absolute;inset:0;z-index:4}
.tcard:focus-within{box-shadow:var(--sh)}

/* اولین کارت در صفحه‌ی نخست، عریض */
.tgrid .tcard.lead{grid-column:span 2}
.tgrid .tcard.lead .pic{aspect-ratio:21/9}
.tgrid .tcard.lead h3{font-size:22px;line-height:1.5}
.tgrid .tcard.lead .insight{font-size:15px}
.tgrid .tcard.lead .tbody{padding:28px}

/* ---- انیمیشن فیلتر و صفحه‌بندی (بدون بارگذاری مجدد) ---- */
.tgrid{transition:opacity .18s ease}
.tgrid.swapping{opacity:.35}
.tcard[hidden]{display:none!important}
@keyframes tcIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* تأخیر پلکانی را JS روی هر کارت می‌گذارد (--d) چون ترتیب DOM با فیلتر عوض می‌شود */
.tgrid.animate .tcard:not([hidden]){
  animation:tcIn .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--d,0s)}
.tempty{display:none;padding:56px 0;text-align:center;color:var(--muted)}
.tempty.on{display:block}
@media (prefers-reduced-motion:reduce){
  .tgrid.animate .tcard:not([hidden]){animation:none}
  .tgrid.swapping{opacity:1}
}

/* ---- صفحه‌بندی ---- */
.tpag{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:54px}
.tpag a,.tpag span{min-width:42px;height:42px;padding:0 13px;border-radius:12px;
  display:inline-grid;place-items:center;font-family:var(--font-en);font-size:14px;font-weight:600;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);transition:.2s}
.tpag a:hover{border-color:var(--cyan);color:var(--cyan-ink);transform:translateY(-2px)}
.tpag [aria-current="page"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.tpag .gap{border:0;background:none}
.tpag .nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round}

/* ---- مطالب مرتبط ---- */
.related{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.related h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:26px}
.related .tgrid{grid-template-columns:repeat(3,1fr)}
.related .tcard h3{font-size:15.5px}
.related .tcard .insight{display:none}

@media (max-width:1080px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .tgrid .tcard.lead{grid-column:span 2}
  .related .tgrid{grid-template-columns:repeat(2,1fr)}
  .related .tcard:nth-child(3){display:none}
}
@media (max-width:720px){
  .tgrid,.related .tgrid{grid-template-columns:1fr}
  .tgrid .tcard.lead{grid-column:auto}
  .tgrid .tcard.lead .pic{aspect-ratio:16/10}
  .tfilter{gap:8px}
  .tfilter a{font-size:13.5px;padding:9px 15px}
  .tfilter .count{width:100%;margin-inline-start:0;margin-top:4px}
}