/* ============================================================
   News listing page — search, category filters, article grid
   ============================================================ */

.news-page{padding-top:56px;padding-bottom:96px}

/* ── Toolbar: search + category pills ────────────────────────── */
.news-toolbar{display:flex;flex-direction:column;gap:18px;margin-bottom:28px}

.news-search{position:relative;display:flex;align-items:center;max-width:520px}
.news-search i.fa-search{position:absolute;left:18px;color:var(--g600);font-size:0.9rem;pointer-events:none}
.news-search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 42px;color:var(--white);font-size:0.94rem;font-family:var(--font-b);transition:var(--tr)}
.news-search input::placeholder{color:var(--g600)}
.news-search input:focus{outline:none;border-color:var(--border-h);background:var(--elevated)}
.news-search-clear{position:absolute;right:8px;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--g600);cursor:pointer;display:none;align-items:center;justify-content:center;transition:var(--tr)}
.news-search-clear:hover{color:var(--white);background:var(--elevated)}
.news-search-clear.visible{display:flex}

.category-pills{display:flex;flex-wrap:wrap;gap:8px}
.category-pills .pill{padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--g500);font-size:0.82rem;font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap}
.category-pills .pill:hover{border-color:var(--border-h);color:var(--white)}
.category-pills .pill.active{background:var(--gold);border-color:var(--gold);color:var(--base)}

.news-result-count{font-size:0.82rem;color:var(--g600);margin-bottom:22px}

/* ── Grid ─────────────────────────────────────────────────────── */
.news-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:640px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.news-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Card ─────────────────────────────────────────────────────── */
.news-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:var(--tr)}
.news-card:hover{transform:translateY(-4px);border-color:var(--border-h);box-shadow:0 20px 40px -20px rgba(0,0,0,0.5)}

.news-card-media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--elevated),var(--card));overflow:hidden}
.news-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1)}
.news-card:hover .news-card-media img{transform:scale(1.06)}
.news-card-media.no-image{display:grid;place-items:center}
.news-card-media.no-image i{font-size:2.2rem;color:var(--gold);opacity:0.28}
.news-card-badge{position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:999px;background:rgba(11,17,32,0.72);backdrop-filter:blur(8px);color:var(--gold-bright);font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}

.news-card-body{display:flex;flex-direction:column;flex:1;padding:22px}
.news-card-meta{display:flex;align-items:center;gap:8px;font-size:0.74rem;color:var(--g600);margin-bottom:10px}
.news-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--g700)}
.news-card-body h3{font-family:var(--font-d);font-size:1.12rem;line-height:1.35;font-weight:700;color:var(--white);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-body p{font-size:0.88rem;line-height:1.65;color:var(--g500);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card-footer{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);font-size:0.8rem;font-weight:700;color:var(--gold);transition:var(--tr)}
.news-card-footer i{font-size:0.72rem;transition:transform 0.2s ease}
.news-card:hover .news-card-footer i{transform:translateX(4px)}

/* ── Skeleton loading ─────────────────────────────────────────── */
.news-skeleton{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.news-skeleton .sk-media{aspect-ratio:16/9}
.news-skeleton .sk-line{height:12px;margin:22px 22px 0}
.news-skeleton .sk-line.w60{width:60%}
.news-skeleton .sk-line.w90{width:90%;height:18px}
.news-skeleton .sk-line.w40{width:40%;margin-bottom:22px}
.news-skeleton .sk-media,.news-skeleton .sk-line{background:linear-gradient(90deg,var(--elevated) 25%,var(--card) 37%,var(--elevated) 63%);background-size:400% 100%;animation:sk-shimmer 1.4s ease infinite;border-radius:6px}
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── Empty / error states ────────────────────────────────────── */
.news-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;border:1px dashed var(--border);border-radius:14px}
.news-state i{font-size:1.8rem;color:var(--g700);margin-bottom:16px}
.news-state p{font-size:0.95rem;color:var(--g500)}
.news-state.is-error i{color:var(--negative)}

/* ── Pagination ───────────────────────────────────────────────── */
.news-pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:56px;flex-wrap:wrap}
.news-pager button{min-width:40px;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--g300);font-size:0.86rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.news-pager button:hover:not(:disabled):not(.active){border-color:var(--border-h);color:var(--white)}
.news-pager button.active{background:var(--gold);border-color:var(--gold);color:var(--base)}
.news-pager button:disabled{opacity:0.35;cursor:not-allowed}