/* «Di cosa si parla» (S05, 24/10): le tendenze in schede con «Cosa si dice», gli eventi
   di oggi in righe compatte. Colori e font solo dai token --brand-*, testo a 16 px o più. */
.trends,
.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.trend {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--soft);
  border-radius: 0;
}
.trend h3 {
  margin: 0;
  font-size: var(--s22);
}
.levels {
  margin: 0;
  font-family: var(--brand-font-mono);
  font-size: var(--s16);
  overflow-wrap: anywhere;
}
.said {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--brand-mark);
  padding: 6px 12px;
}
.said p {
  margin: 0;
}
.sayings {
  margin: 0;
  padding-left: 18px;
  color: var(--brand-muted);
  overflow-wrap: anywhere;
}
.sensitive-note {
  color: var(--brand-muted);
}
.talk-empty {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--brand-line);
  border-radius: 0;
}
.talk-events {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.talk-events h3,
.talk-events .hint {
  margin: 0;
}
.event-list {
  gap: 0;
}
.event {
  font-size: var(--s16);
  padding: 6px 0;
  border-bottom: 1px solid var(--soft);
  overflow-wrap: anywhere;
}
.event.sensitive,
.event.sensitive strong {
  color: var(--brand-muted);
}
.why-trend {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 0;
  background: color-mix(in srgb, var(--brand-bg) 55%, transparent);
}
.why-trend p {
  margin: 0;
}
/* Il pannello prende tutta la riga: sul desktop le tendenze in due colonne, gli eventi pure. */
@media (min-width: 900px) {
  .trends {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    align-items: start;
  }
  .event-list {
    display: block;
    columns: 2 340px;
    column-gap: 32px;
  }
  .event {
    break-inside: avoid;
  }
}