/* ============================================================================
   Themensuche (templates/suche.html) — Ergänzungen zu viewer.css, das die
   Karten-, Trend- und Lade-/Leer-Zustandsformen schon mitbringt (.hh-card,
   .hh-trend*, .hh-pager, .hh-empty, .hh-loading, .hh-search, …). Hier nur, was
   für DIESE Seite neu ist: Grid statt Liste, Land-Badge je Karte,
   Themenvorschläge.
   ============================================================================ */

/* Diese Seite bekommt mehr Breite als die übrigen .hh-shell-Seiten (Reden-
   Liste, Abstimmungen): die stützen sich auf --shell-max=1100px, weil dort
   volltextlange Listenzeilen stehen (siehe Kommentar zu .hh-snippet in
   viewer.css); hier stehen zwei Karten nebeneinander, die von mehr Breite
   profitieren, ohne dass Fließtext-Zeilen unlesbar lang würden. Bewusst nur
   für DIESE Seite (.hh-shell-suche), nicht am globalen --shell-max gedreht —
   das würde Listenzeilen auf den anderen Seiten unnötig verbreitern. */
.hh-shell.hh-shell-suche { max-width: 1600px; }

/* Grid statt Liste — dieselbe Technik wie .grid auf der Landing-Seite
   (pages.css), hier unter der hh-Namensfamilie dieser Seite. Bewusst FEST auf
   maximal zwei Spalten (statt auto-fill/minmax mit so vielen Spalten wie
   passen) — bei drei Spalten wirkten die Karten auf Desktop-Breiten zu
   schmal. Unterhalb 720px (dieselbe Schwelle wie die schmale Kartenform,
   s. u.) eine Spalte. align-items:stretch statt start, damit beide Karten
   einer Zeile exakt gleich hoch werden — kombiniert mit .hh-expand
   (margin-top:auto) unten wandert der "Rede öffnen"-Knopf dadurch auf
   dieselbe Höhe, unabhängig davon, wie lang der (ohnehin auf vier Zeilen
   gekürzte) Ausschnitt einer einzelnen Karte ist. Ohne das wirkte das Grid
   trotz identischer Kartenbreite uneinheitlich, weil jede Karte nur so hoch
   wie ihr eigener Inhalt war. */
.hh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  align-items: stretch;
}
@media (min-width: 720px) {
  .hh-grid { grid-template-columns: repeat(2, 1fr); }
}
.hh-grid .hh-card { display: flex; flex-direction: column; height: 100%; }
.hh-grid .hh-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.hh-grid .hh-expand { margin-top: auto; }

/* ── Schmale Kartenform, UNBEDINGT (nicht an die Viewport-Breite gekoppelt) ──
   viewer.css schaltet .hh-ident erst unterhalb von 720px Viewport-Breite auf
   die schmale Spalten-Form um (siehe dort, @media max-width:720px). Eine
   Grid-Zelle ist aber schon bei 340px schmaler als eine volle Listenkarte,
   auch auf einem breiten Bildschirm, wo diese Umschaltung nicht greift — die
   Regeln werden hier deshalb ADDITIV dupliziert statt die bestehende, an
   anderer Stelle bereits funktionierende Media Query in eine Container Query
   umzubauen (das wäre ein eigener, unverwandter Umbau). */
.hh-grid .hh-card-top { flex-wrap: nowrap; align-items: center; }
.hh-grid .hh-ident {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  min-width: 0;
}
.hh-grid .hh-ident-name { flex-wrap: wrap; padding-right: 170px; }
.hh-grid .hh-ident-sub { row-gap: var(--space-3xs); }

/* Grid-Karten sollen sich in etwa auf Augenhöhe halten — eine einzelne, sehr
   lange Rede würde sonst ihre ganze Zeile überragen. Nur hier begrenzt, nicht
   generell in viewer.css: in der vollen Listenkarte ist das bewusst NICHT
   gekürzt (siehe dortiger Kommentar zu 60–75-Zeichen-Zeilen). */
.hh-grid .hh-card:not(.open) .hh-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Protokoll"/"Video ansehen" und der Teilen-Knopf: in der vollen Listenkarte
   sind beide float:right (die Reihenfolge im Markup sorgt dort dafür, dass sie
   nebeneinanderstehen — siehe viewer.js:card). Bei Grid-Kartenbreite reicht das
   nicht mehr zuverlässig (viewer.css gibt nur .hh-play, nicht .hh-share-top,
   eine schmale Sonderform — beide ankerten sonst nahe derselben Ecke). Deshalb
   hier eine robustere Lösung: beide Knöpfe stecken in einer flex-Gruppe
   (.hh-card-actions, siehe suche.js:card), die als Ganzes in die obere rechte
   Ecke gesetzt wird — Flexbox übernimmt das Nebeneinander unabhängig davon, ob
   der Protokoll-Knopf da ist und wie lang seine (je Land unterschiedliche)
   Beschriftung ist, statt es über feste Pixel-Versätze nachzubilden. */
.hh-card-actions {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.hh-card-actions .hh-play,
.hh-card-actions .hh-share-top {
  position: static;
  float: none;
  margin: 0;
}

/* ── Land-Badge ───────────────────────────────────────────────────────────── */
/* Im Grid nicht aus dem Kontext ersichtlich, welchem Parlament eine Rede
   entstammt (anders als auf der Ein-Parlament-Seite) — deshalb ein eigenes,
   neutral eingefärbtes Badge, erster Eintrag in derselben Zeile wie
   Fraktion/Rolle/Datum (.hh-ident-sub). Bewusst NICHT in der Fraktionsfarbe:
   das Land ist hier Herkunft, keine politische Aussage. */
.hh-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--ink-2);
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 2px var(--space-xs);
}
.hh-state-badge img { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; flex-shrink: 0; }

/* Tagesordnungspunkt ohne Klickbarkeit (nur Text) — Vokabular ist pro Land
   verschieden, ein Filter über Länder hinweg ergäbe keinen Sinn. Optisch nah an
   .hh-top (viewer.css), aber ohne dessen Interaktions-Signale (kein Cursor,
   kein Hover). */
.hh-context-static {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--structure);
  margin-bottom: var(--space-xs);
  line-height: var(--leading-snug);
}

/* ── Themenvorschläge ─────────────────────────────────────────────────────── */
.hh-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}
.hh-preset {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hh-preset:hover { border-color: var(--structure); color: var(--structure); }
.hh-preset.on { background: var(--structure); color: var(--on-structure); border-color: var(--structure); }

/* Startzustand/Leer-Text vor der ersten Suche — im Grid-Container selbst
   (nicht .hh-empty, das ist für "gesucht, aber 0 Treffer" reserviert). */
#results .hh-empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--ink-3);
  font-weight: var(--weight-semi);
  max-width: 46ch;
  margin: 0 auto;
}