/* News feed cards.
 *
 * Shares the .glass/.glass-card surface and the two-tone navy/orange palette
 * with bid-card.css rather than introducing a second visual language — a news
 * card and a tender card should read as the same product. The difference is
 * density: news is text-first with no dates box, no progress bar and no save
 * action, so it stays lighter than a tender card by design.
 */

.news-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px var(--glass-shadow);
}

.news-card:active { transform: translateY(-1px) scale(0.995); }

@media (prefers-reduced-motion: reduce) {
  .news-card:hover, .news-card:active { transform: none; }
}

/* --- head row: tier badge, source, date ---------------------------------- */

.nc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.nc-tier {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}

/* A regulator's own directive is the highest-trust thing in the feed, so it
   gets the brand navy. Press is neutral, regional is muted — the colour is
   carrying the source-tier hierarchy, not just decoration. */
.nc-tier-reg {
  background: var(--fill-brand-from);
  color: #fff;
}
.nc-tier-press {
  background: var(--ebid-orange-soft);
  color: var(--ebid-orange-strong);
  border: 1px solid var(--ebid-orange-border);
}
.nc-tier-intl {
  background: var(--stage-0);
  color: var(--text-tertiary);
  border: 1px solid var(--stage-border);
}

.nc-source {
  font-weight: 650;
  color: var(--text-secondary);
}

.nc-date {
  color: var(--text-tertiary);
  margin-left: auto;
}

.nc-lang {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--ebid-primary-tint);
  color: var(--ebid-primary-dark);
}

/* --- body ---------------------------------------------------------------- */

.nc-title {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.42;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.nc-title svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--ebid-primary);
}

.nc-summary {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  /* Two lines is enough to judge relevance; the source page has the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- foot: topics + affordance ------------------------------------------- */

.nc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.nc-topics {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.nc-topic {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--stage-0);
  color: var(--text-secondary);
  border: 1px solid var(--stage-border);
}

/* Shown on an item the politics filter flagged but kept for market impact.
   Orange because it is the same "pay attention" register as an urgent
   deadline on a tender card. */
.nc-topic-flag {
  background: var(--ebid-orange-soft);
  color: var(--ebid-orange-strong);
  border-color: var(--ebid-orange-border);
}

.nc-open {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ebid-accent);
}

.nc-open svg { width: 14px; height: 14px; }

/* --- loading skeleton ----------------------------------------------------- */

.news-card.is-skeleton {
  cursor: default;
  pointer-events: none;
  gap: 12px;
}
.news-card.is-skeleton:hover { transform: none; box-shadow: none; }

.sk-line {
  height: 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--stage-0) 25%,
    var(--stage-border) 37%,
    var(--stage-0) 63%
  );
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
}
.sk-line.sk-sm { width: 34%; }
.sk-line.sk-lg { width: 88%; height: 15px; }

@keyframes sk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
}

/* --- filter bar ----------------------------------------------------------- */

.news-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
}

.news-toolbar .filter-field { flex: 1 1 150px; }

.news-political {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.news-political input { accent-color: var(--ebid-primary); }

.news-count {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 0 4px;
}

#news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}