/* ===========================================================
   Minnesota Vikings fan site — news index (/news/)
   Extends style.css. Adds no new tokens beyond two soft shades.
   =========================================================== */

/* ---------- page head ---------- */
.page-news .page-hd{
  background:var(--purple);color:var(--on-dark);
  padding:22px 0 34px;border-bottom:4px solid var(--gold);
}
.page-news .crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--display);font-weight:500;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-muted);margin:0;padding:0;list-style:none;
}
.page-news .crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.page-news .crumbs a{color:var(--gold);transition:color var(--t-fast)}
.page-news .crumbs a:hover{color:#fff}
.page-news .crumbs [aria-current="page"]{color:rgba(255,255,255,.8)}

.page-news .page-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,6vw,62px);line-height:1;letter-spacing:.02em;
  color:#fff;margin:16px 0 0;
}
.page-news .page-title::after{
  content:"";display:block;width:56px;height:4px;background:var(--gold);margin-top:14px;
}
.page-news .page-sub{
  margin-top:16px;max-width:640px;font-size:15.5px;line-height:1.6;
  color:rgba(255,255,255,.82);
}
.page-news .page-facts{
  display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
}
.page-news .page-facts li{min-width:0}
.page-news .page-facts b{
  display:block;font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.04em;color:var(--gold);line-height:1.2;
}
.page-news .page-facts span{
  display:block;font-family:var(--display);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px;
}

/* ---------- lead story ---------- */
.page-news .lead-sect{padding:var(--space-5) 0 var(--space-4)}
.page-news .lead-story{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 3px rgba(20,15,40,.09);
  transition:box-shadow var(--t);
}
.page-news .lead-story:hover{box-shadow:0 12px 30px rgba(20,15,40,.16)}
.page-news .lead-media{display:block;min-width:0;overflow:hidden;background:#ded9e6}
.page-news .lead-media img{
  width:100%;height:100%;min-height:300px;object-fit:cover;object-position:center 30%;
  transition:transform 400ms ease;
}
.page-news .lead-story:hover .lead-media img{transform:scale(1.03)}
.page-news .lead-body{
  min-width:0;padding:28px 32px 30px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.page-news .lead-body h3{
  font-size:clamp(22px,2.6vw,31px);font-weight:700;line-height:1.18;
  letter-spacing:-.01em;margin-bottom:12px;
}
.page-news .lead-body h3 a{transition:color var(--t-fast)}
.page-news .lead-body h3 a:hover{color:var(--purple)}
.page-news .lead-body>p{font-size:15px;line-height:1.62;color:var(--text-muted)}
.page-news .lead-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:18px 0 22px;padding-top:16px;border-top:1px solid var(--line);
  width:100%;font-size:12px;color:var(--text-faint);letter-spacing:.02em;
}
.page-news .lead-meta li+li::before{content:"•";margin-right:10px;opacity:.6}

/* ---------- filters ---------- */
.page-news .index-sect{padding:0 0 var(--space-6)}
.page-news .filters{display:flex;flex-wrap:wrap;gap:10px}
.page-news .chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.page-news .chip:hover{border-color:var(--purple);color:var(--purple)}
.page-news .chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
.page-news .filter-status{
  margin:16px 0 18px;font-size:12.5px;color:var(--text-muted);
}

/* ---------- article grid ---------- */
.page-news .news-index-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  gap:14px;
}
.page-news .news-card{min-width:0}
.page-news .news-card .card-media{height:176px;flex:none}
.page-news .news-card h3{font-size:16.5px;line-height:1.3}
.page-news .news-card h3 a{transition:color var(--t-fast)}
.page-news .news-card h3 a:hover{color:var(--purple)}
.page-news .news-card.is-hidden{display:none}

/* ---------- load more ---------- */
.page-news .more-row{
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;
}
.page-news .load-more{min-width:230px}
.page-news .end-note{font-size:13px;color:var(--text-muted)}
.page-news .load-more[hidden],.page-news .end-note[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page-news .lead-story{grid-template-columns:minmax(0,1fr)}
  .page-news .lead-media img{min-height:0;height:270px}
  .page-news .lead-body{padding:22px 22px 26px}
}
@media (max-width:640px){
  .page-news .page-hd{padding:18px 0 28px}
  .page-news .page-facts{gap:14px 26px}
  .page-news .lead-media img{height:210px}
  .page-news .filters{gap:8px}
  .page-news .chip{padding:0 14px;font-size:11.5px}
  .page-news .load-more{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .page-news .lead-story:hover .lead-media img{transform:none}
}