/* ==========================================================================
   Newsroom list pages on paper: categories, topics and the archive
   (/news/category/<slug>/, /news/tag/<slug>/, /news/archive/ + /en/ + /nl-be/, 2026-10-11)
   List layer on top of newsroom-paper.css (cards, category strip, end card and
   motion live there). Scope: body.news-page--list. Generated by
   news/src/render.mjs (renderCollection, renderArchive). Design: docs/design-newsroom-v27.md.
   ========================================================================== */

.news-page--list .nh-list-hero { padding-bottom: clamp(32px, 3.4vw, 52px); }

.nh .nh-list-hero__title {
  max-width: 18em;
  margin: 0;
  color: var(--nh-ink);
  font-family: var(--cb-display-font);
  font-size: var(--cb-title-hero);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.nh .nh-list-hero__title em {
  font-style: normal;
  background: var(--nh-accent-on-paper, var(--cb-accent-gradient));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nh-list-hero .nh-lead { max-width: 40em; }
.nh-list-hero .nh-topics { margin: clamp(28px, 3vw, 40px) 0 0; }

.news-page--list .nh-list { padding-top: 0; }

.nh-list__count {
  margin: 0 0 22px;
  color: var(--nh-muted);
  font-size: 14px;
  font-weight: 500;
}

.nh-list .nh-articles,
.nh-list .nh-films { margin-top: 0; }

/* Empty category: a paper card that leads back to all news. */
.nh-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 760px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 24px;
  background: radial-gradient(ellipse 60% 70% at 100% 0, rgba(86, 126, 255, .1), transparent 70%), var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.nh-empty p { margin: 0; color: var(--nh-ink-soft); font-size: 16px; line-height: 1.55; }
.nh-empty .nh-empty__title { color: var(--nh-ink); font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.nh-empty .nh-btn { margin-top: 12px; }

/* Archive: one band per year, the year in the display grammar. */
.news-page--list .news-archive {
  max-width: 1120px;
  gap: 18px;
  margin-top: 0;
}

.news-page--list .archive-year { border-top-color: var(--nh-line); }

.news-page--list .archive-year h2 {
  background: var(--nh-accent-on-paper, var(--cb-accent-gradient));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--cb-display-font);
  font-size: calc(var(--cb-title-section-side) * .9);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
}

.news-page--list .archive-year li { align-items: baseline; border-bottom-color: var(--nh-line); }
.news-page--list .archive-year time { color: var(--nh-muted); font-size: 14px; font-weight: 500; }

.news-page--list .archive-year a {
  color: var(--nh-ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
}

.news-page--list .archive-year a:hover { color: var(--nh-link); text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 760px) {
  .nh .nh-list-hero__title { font-size: calc(var(--cb-title-hero) * .86); }
  .news-page--list .archive-year { grid-template-columns: 1fr; gap: 10px; }
  .news-page--list .archive-year li { grid-template-columns: 1fr; gap: 4px; }
}

@media (forced-colors: active) {
  .nh .nh-list-hero__title em,
  .news-page--list .archive-year h2 {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}