/*
 * News (docs/news.md): Übersicht unter /news mit Teaser-Karten und Meldungsseite /news/:slug.
 * Beide laufen wie das Wissen in zwei Hüllen (Layout „home“ für die Rolle `user`, Backend-Layout
 * für Interviewer und Admins) und nutzen dessen Container: `.home-content.wiki-page` (Luft für
 * den schwebenden Rückweg), `.wiki-body` (Markdown-Typografie), `.wiki-back` (Rückweg).
 * Hier steht nur, was News-eigen ist.
 */

/* --- Übersicht: Teaser-Karten ---------------------------------------------------------------- */

.news-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-3);
  list-style: none;
}

.news-list > li {
  min-width: 0; /* Grid-Item, siehe „Breite auf dem Handy“ in wiki.css */
}

/* Die ganze Karte ist die Trefferfläche, wie die Artikelzeilen im Wissen. */
.news-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}

.news-card:active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

@media (hover: hover) {
  .news-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
}

.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--space-2);
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.news-card__badge {
  padding: 1px var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.news-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.news-card__teaser {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- Meldungsseite -------------------------------------------------------------------------- */

.news-post,
.news-post > * {
  min-width: 0;
  max-width: 100%;
}

.news-post__teaser {
  max-width: 70ch;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 550;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Native Player, einer je Audio-Datei, in voller Breite. */
.news-audios {
  display: grid;
  gap: var(--space-3);
}

.news-audio {
  display: grid;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.news-audio__name {
  color: var(--ink-muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.news-audio__player {
  display: block;
  width: 100%;
}

/* Alle weiteren Dateien als Links unter dem Text. */
.news-downloads {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.news-downloads h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.news-downloads ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
  list-style: none;
}

.news-download {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  background: var(--surface);
}

.news-download__name {
  overflow-wrap: anywhere;
}

.news-download__size {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

@media (hover: hover) {
  .news-download:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}

/* --- Backend: Dateiliste im Editor ---------------------------------------------------------- */

.news-files-table code {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Die Vorschau im Backend stapelt Teaser, Player, Text und Downloads wie die Meldungsseite. */
.wiki-preview > .news-post__teaser,
.wiki-preview > .news-audios,
.wiki-preview > .news-downloads {
  margin-bottom: var(--space-4);
}