/* ---------- News list widget (Django: web/components/news_list.html) ----------
 * A panel of news only (no story, no dossier) with a freely chosen heading: icon, title, and
 * either a mono meta or a link ("Összes hír", "Előzmények"). The list adapts to its own width
 * (container query), so the same block works in the sidebar and in the wide column.
 * Every part of a row is optional and may differ row by row:
 *   - photo: a news without one, or whose photo fails to load, has no photo box at all;
 *   - signals (article-signals.css): the icons of the raised signals, nothing when there is none
 *     or no analysis;
 *   - read state: a check at the end of the row.
 * Every text is cut, never wrapped past its lines: titles in two lines (one in the titles and the
 * table variants), heading, source and time in one line with an ellipsis. */

.news-list-widget {
  container: news-list / inline-size;
  width: 100%;
  min-width: 0;
}

.panel-heading-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.panel-heading-link .icon { width: 14px; height: 14px; font-size: 14px; }
.panel-heading-link:hover { color: var(--cyan); }

.news-list {
  margin: 0;
  padding: 0 var(--space-4);
  list-style: none;
}

/* One news: [photo] title, source and time [signals] [read]; a missing part takes no room */
.news-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.news-list-item:last-child { border-bottom: 0; }

.news-list-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.news-list-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-list-title:hover { color: var(--cyan); }

/* Source and time in one line: the source name gives way first, with an ellipsis */
.news-list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
}

.news-list-meta > span,
.news-list-meta > time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.news-list-meta > time { flex: 0 0 auto; }
.news-list-meta .icon { width: 11px; height: 11px; font-size: 11px; }
.news-list-source { flex: 0 1 auto; min-width: 0; color: var(--text); }
.news-list-source > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* The photo box; a photo that fails to load (media-fit.js: is-missing) removes the whole box */
.news-list-thumb {
  position: relative;
  flex: 0 0 64px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-hover);
}

.news-list-thumb:has(.media-fit.is-missing) { display: none; }

/* Panel heading of the widget: the title gives way to the meta or the link, with an ellipsis */
.news-list-widget .panel-heading h2 { flex: 1 1 auto; }
.panel-heading-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.news-list-read {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--color-success);
}

.news-list-read .icon { width: 17px; height: 17px; font-size: 17px; }
.news-list-item.is-read .news-list-title { color: var(--muted); }
.news-list-item.is-read .news-list-title:hover { color: var(--cyan); }

/* Titles only: a marker and the title, nothing else (short news) */
.news-list--titles .news-list-item {
  gap: 10px;
  padding: 9px 0;
}

.news-list--titles .news-list-item::before {
  content: "";
  flex: 0 0 7px;
  height: 8px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.news-list--titles .news-list-title { -webkit-line-clamp: 1; }

/* Table: source, title, time and signals in columns, for the wide column */
.news-list--table .news-list-item {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 64px 78px;
  gap: 16px;
  padding: 10px 0;
}

.news-list--table .news-list-body { display: contents; }
.news-list--table .news-list-meta { display: contents; }
.news-list--table .news-list-source { order: -1; gap: 8px; font-family: var(--font-body); font-size: 12px; }
.news-list--table .news-list-meta > time { justify-content: flex-end; }
.news-list--table .news-list-title { -webkit-line-clamp: 1; }
.news-list--table .signal-row { grid-column: 4; }

/* In a narrow place the table becomes rows: source and time above the title, the signals below */
@container news-list (max-width: 600px) {
  .news-list--table .news-list-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 11px 0;
  }

  .news-list--table .news-list-source { grid-column: 1; }
  .news-list--table .news-list-meta > time { grid-column: 2; grid-row: 1; }
  .news-list--table .news-list-title { grid-column: 1 / -1; -webkit-line-clamp: 2; }
  .news-list--table .signal-row { grid-column: 1 / -1; justify-content: flex-start; width: auto; }
}

@container news-list (max-width: 340px) {
  .news-list-item { gap: 10px; }
  .news-list-thumb { flex-basis: 52px; }
}

/* An empty list: a short sentence instead of rows */
.news-list-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px var(--space-4);
  color: var(--muted);
  font-size: 12px;
}

.news-list-empty .icon { width: 16px; height: 16px; color: var(--accent); font-size: 16px; }

/* ---- Main category tabs above the list (the home page's latest news): links (GET), the
 * current one marked; they wrap, and scroll sideways in one row when narrow. In "Mind" each row names its main
 * category in its hue (styles.css --section-color). ---- */
.news-list-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 10px var(--space-4) 2px;
  list-style: none;
}

@container news-list (max-width: 480px) {
  .news-list-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}

.news-list-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}

.news-list-tabs a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--section-color, var(--accent)); }
.news-list-tabs a:hover { border-color: var(--color-primary); color: var(--text); }
.news-list-tabs a[aria-current="true"] { border-color: var(--section-color, var(--accent)); background: color-mix(in srgb, var(--section-color, var(--accent)) 10%, transparent); color: var(--text); }

.news-list-section {
  flex: 0 0 auto;
  color: var(--section-color, var(--muted));
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
}

.news-list-more {
  display: flex;
  justify-content: flex-end;
  padding: 10px var(--space-4) 12px;
  border-top: 1px solid var(--line);
}