/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/entity.css
   Version: 0.1.0 · Build: 2026-09-17 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   Die Entitätszeile: EIN Eintrag einer Liste, der einen Vorgang vertritt —
   Termin, Beitrag, Gruppe, Ticket, Thread. Marke links, Titel mit Abzeichen,
   Metazeile, optional eine Beschreibung, optional ein Zusatz, optional
   Aktionen rechts.

   ENTSTANDEN AUS DREI NAMEN FÜR EINE SACHE. Im ersten Projekt gab es
   .event-card__*, .post-card__* und .group-row__* nebeneinander. Vier
   Regelpaare waren WORTGLEICH, nur anders benannt:

     .group-row__title  / .post-card__title   font-size: var(--bh-text-md)
     .group-row__text   / .post-card__text    margin: var(--bh-space-3) 0 0
     .event-body        / .post-card__body    flex: 1; min-width: 0
     .post-card__row    / .group-row__main    display:flex; align-items:
                                              flex-start; gap: space-3

   Und alle drei benutzten bereits dieselbe Metazeile — unter dem Namen
   .event-meta, der den Terminen gehörte. Die Zusammenlegung war damit halb
   passiert, nur ohne gemeinsamen Namen (DESIGN.md §0).

   DIE ZEILE IST KEINE KARTE. Sie ist der INHALT einer Karte: .bh-card ist
   der Behälter, .bh-entity steht darin. Vorher brachte .event-card Fläche,
   Rahmen, Radius, Schatten und Polsterung selbst mit, Beiträge nahmen
   .bh-card--interactive und Gruppen gar nichts — dieselbe Frage an drei
   Stellen verschieden beantwortet.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-entity {
  display: flex;
  align-items: flex-start;
  gap: var(--bh-space-3);
  min-width: 0;
}

/* Marke links: Symbolfeld, Datumsblock, Avatar. Wächst nie mit. */
.bh-entity__mark { flex: none; }

.bh-entity__body { flex: 1; min-width: 0; }

/* Titel und Abzeichen auf einer Zeile.
   align-items: center, nicht baseline: Ein Abzeichen neben einem Titel sitzt
   mittig. Bricht der Titel auf zwei Zeilen, rutschte es mit baseline auf die
   UNTERE Zeile und stünde dann neben dem Zeilenende statt neben dem Titel. */
.bh-entity__title-row {
  display: flex;
  align-items: center;
  gap: var(--bh-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.bh-entity__title {
  margin: 0;
  min-width: 0;
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
  line-height: var(--bh-leading-normal);
}
/* Der Titel ist fast immer ein Link — er erbt die Farbe und bekommt sie
   erst beim Zeigen, damit eine Liste aus zwanzig Zeilen nicht flimmert. */
.bh-entity__title a { color: inherit; }
.bh-entity__title a:hover { color: var(--bh-color-accent); }
.bh-entity__title a:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
  border-radius: var(--bh-radius-sm);
}

/* Metazeile: Zeit, Ort, Urheber, Zähler, Zugehörigkeit. Die Einträge stehen
   nebeneinander und brechen um; jeder trägt sein Symbol inline. */
.bh-entity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-1) var(--bh-space-4);
  margin-top: var(--bh-space-1);
  font-size: var(--bh-text-xs);
  color: var(--bh-text-tertiary);
}
.bh-entity__meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-1);
}
/* Symbole in der Metazeile sind Beiwerk, nicht Aussage: eine Stufe kleiner
   als die Bedienelemente und leicht zurückgenommen. */
.bh-entity__meta svg {
  width: 14px; height: 14px;   /* roh: Beiwerk-Symbol, kleiner als --bh-icon-size */
  flex: none;
  opacity: .8;
}

/* Beschreibungszeile: gekürzter Fließtext unter der Metazeile. */
.bh-entity__text {
  margin: var(--bh-space-3) 0 0;
  color: var(--bh-text-muted);
}

/* Zusatz: alles, was unter den Text gehört und kein Text ist — ein
   Fortschrittsbalken mit Zählung, eine Knopfreihe, eine Restzeit. */
.bh-entity__extra {
  display: flex;
  align-items: center;
  gap: var(--bh-space-3);
  flex-wrap: wrap;
  margin-top: var(--bh-space-3);
}
.bh-entity__extra-bar { flex: 1; min-width: 120px; }

/* Aktionen rechts, auf Höhe der Titelzeile. */
.bh-entity__actions {
  display: flex;
  align-items: center;
  gap: var(--bh-space-2);
  flex: none;
}

@media (max-width: 767px) {
  /* Aktionen rutschen unter den Körper, statt ihn zu quetschen. */
  .bh-entity { flex-wrap: wrap; }
  .bh-entity__actions { width: 100%; justify-content: flex-end; }
}