/* web/css/news.css — barcha stillar .tersu_sdgnewsfilter ostida cheklangan */

.tersu_sdgnewsfilter{
  /* o'zgaruvchilar ham shu yerda — global :root ifloslanmaydi */
  --tsnf-ink:#1e293b;
  --tsnf-muted:#64748b;
  --tsnf-line:#e2e8f0;
  --tsnf-bg:#f8fafc;
  --tsnf-card:#ffffff;
  --tsnf-link:#1d4ed8;
  --tsnf-shadow:0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.06);

  max-width:1440px;margin:0 auto;padding:10px 20px 64px;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--tsnf-ink);
}
.tersu_sdgnewsfilter *{box-sizing:border-box}

/* ---------- Header ---------- */
.tersu_sdgnewsfilter .news-head{position:relative;text-align:center;margin-bottom:28px}
.tersu_sdgnewsfilter .news-head h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:.5px;margin:0}
.tersu_sdgnewsfilter .news-head p{
  color:#5b6b82;font-size:22px;line-height:1.6;
  animation:tsnfUp .5s .1s ease both}
.tersu_sdgnewsfilter .news-head .rule{width:48px;height:3px;background:var(--tsnf-link);border-radius:2px;margin:16px auto 0}
.tersu_sdgnewsfilter .sdg-logo{position:absolute;top:0;right:0;text-align:right;line-height:1.05;font-weight:800;font-size:18px;letter-spacing:.5px}
.tersu_sdgnewsfilter .sdg-logo span{display:block}
.tersu_sdgnewsfilter .sdg-logo .l1{color:#56C02B}
.tersu_sdgnewsfilter .sdg-logo .l2{color:#26BDE2}
.tersu_sdgnewsfilter .sdg-logo .l3{color:#FCC30B;font-size:26px;letter-spacing:1px}
@media(max-width:760px){.tersu_sdgnewsfilter .sdg-logo{position:static;text-align:center;margin-bottom:12px}}

/* ---------- Filter bar ---------- */
.tersu_sdgnewsfilter .sdg-filter{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;justify-content:center;
  background:var(--tsnf-card);border:1px solid var(--tsnf-line);border-radius:18px;padding:14px 16px;
  box-shadow:var(--tsnf-shadow);margin-bottom:36px}
/* <a> ga aylandi — link ko'rinishini tugma kabi qilamiz */
.tersu_sdgnewsfilter .sdg-btn{border:0;background:transparent;cursor:pointer;padding:4px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;
  text-decoration:none;color:inherit;
  transition:transform .12s ease, background .12s ease}
.tersu_sdgnewsfilter .sdg-btn:hover{transform:translateY(-2px);text-decoration:none}
.tersu_sdgnewsfilter .sdg-btn .chip{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:18px;box-shadow:0 1px 2px rgba(0,0,0,.2);overflow:hidden}
.tersu_sdgnewsfilter .sdg-btn .chip img{width:100%;height:100%;object-fit:contain;padding:4px}
.tersu_sdgnewsfilter .sdg-btn .lbl{font-size:11px;font-weight:600;color:var(--tsnf-muted)}
.tersu_sdgnewsfilter .sdg-btn.is-active{background:#eef2ff}
.tersu_sdgnewsfilter .sdg-btn.is-active .lbl{color:var(--tsnf-link)}
.tersu_sdgnewsfilter .sdg-btn.is-active .chip{}
.tersu_sdgnewsfilter .sdg-btn--all{width:auto;justify-content:center}
.tersu_sdgnewsfilter .sdg-btn--all .chip{width:auto;min-width:96px;height:44px;padding:0 16px;background:#0f172a;border-radius:10px;
  font-size:13px;letter-spacing:.5px}

/* ---------- Cards grid ---------- */
.tersu_sdgnewsfilter .news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1100px){.tersu_sdgnewsfilter .news-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.tersu_sdgnewsfilter .news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tersu_sdgnewsfilter .news-grid{grid-template-columns:1fr}}

.tersu_sdgnewsfilter .news-card{background:var(--tsnf-card);border:1px solid var(--tsnf-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--tsnf-shadow);
  transition:transform .15s ease, box-shadow .15s ease}
.tersu_sdgnewsfilter .news-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(15,23,42,.12)}
.tersu_sdgnewsfilter .news-card.is-hidden{display:none}
.tersu_sdgnewsfilter .news-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e2e8f0}
.tersu_sdgnewsfilter .news-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tersu_sdgnewsfilter .news-card .badge-new{position:absolute;top:0;left:0;background:#dc2626;color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.5px;padding:5px 14px;border-bottom-right-radius:10px}
.tersu_sdgnewsfilter .news-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.tersu_sdgnewsfilter .news-card .date{display:flex;align-items:center;gap:6px;color:var(--tsnf-muted);font-size:13px;margin-bottom:10px}
.tersu_sdgnewsfilter .news-card .date svg{width:14px;height:14px;opacity:.7}
.tersu_sdgnewsfilter .news-card h3{font-size:18px;line-height:1.3;margin:0 0 8px;font-weight:700}
.tersu_sdgnewsfilter .news-card p{margin:0 0 16px;color:var(--tsnf-muted);font-size:14px;line-height:1.55}
.tersu_sdgnewsfilter .news-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tersu_sdgnewsfilter .news-card .tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tersu_sdgnewsfilter .news-card .tags .chip{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:12px;overflow:hidden}
.tersu_sdgnewsfilter .news-card .tags .chip img{width:100%;height:100%;object-fit:contain;padding:2px}
.tersu_sdgnewsfilter .news-card .more{color:var(--tsnf-link);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.tersu_sdgnewsfilter .news-card .more:hover{text-decoration:underline}

/* ---------- Empty ---------- */
.tersu_sdgnewsfilter .news-empty{display:none;text-align:center;color:var(--tsnf-muted);padding:48px 0;font-size:16px}
.tersu_sdgnewsfilter .news-empty.is-shown{display:block}

/* ---------- Pagination (LinkPager) ---------- */
.tersu_sdgnewsfilter .news-foot{text-align:center;margin-top:40px}
.tersu_sdgnewsfilter .tsnf-pagination{display:inline-flex;gap:8px;padding:0;margin:0;list-style:none;flex-wrap:wrap;justify-content:center}
.tersu_sdgnewsfilter .tsnf-pagination .dnone{display:none !important}
.tersu_sdgnewsfilter .tsnf-pagination li a,
.tersu_sdgnewsfilter .tsnf-pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--tsnf-line);border-radius:50px;
  background:var(--tsnf-card);color:var(--tsnf-ink);
  font-weight:600;text-decoration:none;transition:.15s}
.tersu_sdgnewsfilter .tsnf-pagination li a:hover{border-color:var(--tsnf-link);color:var(--tsnf-link)}
.tersu_sdgnewsfilter .tsnf-pagination li.active a,
.tersu_sdgnewsfilter .tsnf-pagination li.active span{
  background:#0f172a;border-color:#0f172a;color:#fff}

@keyframes tsnfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}