/* ============================================================================
 * tc-wirtsliste — Die Wirte des Untergrunds als Liste (18.09.2026, #732)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/wirtsliste.js (TC.Wirtsliste.html)
 * Daten:    js/ui/untergrund-haeuser.js (untergrundNachbarschaften)
 * Demonstriert in: library-community.html#wirtsliste
 *
 * Gesicht, Haus, was man dort tut, was es kostet, was gerade los ist — eine
 * Zeile je Wirt, gruppiert nach den drei Nachbarschaften (Tim am 17.09.2026:
 * „drei mal drei"). Jede Zeile ist ein Link in das Haus.
 *
 * ⚠️ HERAUSGEHOBEN AUS ZWEI NACHBAUTEN. Dieselbe Liste stand zweimal im
 * Projekt, mit verschiedenem Inhalt: `dash-untergrund__haus*` im Dashboard
 * (Name, Wirt, Tun, Lage) und in js/ui/untergrund-teaser.js fuer die vier
 * Hubs (Name, Wirt, Lage — ohne Tun). Beide lasen dieselbe Kartei und
 * zeichneten sie verschieden. Jetzt gibt es einen Renderer fuer Dashboard,
 * Hubs und die Gasse am Handy.
 *
 * ⚠️ DIE BREITE ENTSCHEIDET DER CONTAINER, NICHT DAS FENSTER. Dieselbe Liste
 * steht auf dem Dashboard neben „Mein Fortschritt" (470 bis 760 px), in den
 * Hubs in voller Spalte und in der Gasse ueber die ganze Seite. Eine Media
 * Query wuesste davon nichts. `.tc-wirtsliste` ist der Container, das Raster
 * darin fragt ihn ab — ein Container kann sich nicht selbst abfragen (§10).
 *
 *   unter 440 px    Nachbarschaften untereinander, eine Spalte
 *   ab 440 px       die drei Nachbarschaften nebeneinander, je eine Spalte
 *
 * ⚠️ DREI SCHMALE SPALTEN SIND AUF DEM DASHBOARD SCHON DIE REGEL. Die
 * Kachel neben „Mein Fortschritt" zeigt die Wirte seit dem 14.08.2026 ab
 * 470 px Kachelbreite in drei Spalten, damit sie nicht hoeher wird als ihre
 * Nachbarin (gemessen ueber sechs Breiten, Zeilen 48 bis 89 px hoch). Die
 * erste Fassung dieses Bausteins stapelte die Nachbarschaften bis 600 px und
 * machte die Kachel damit 192 px hoeher als vorher.
 *
 * `--mit-tueren` (die Gasse): Die Nachbarschaften bleiben untereinander, von
 * 440 bis 599 px mit je zwei Spalten, und ab 600 px stehen statt der Zeilen
 * die Portraittueren (`tc-door-wand`).
 * Beides steht im Markup, CSS schaltet um; die Bilder der verborgenen
 * Fassung laden nicht (`loading="lazy"` unter `display: none`).
 *
 * Struktur:
 *   <div class="tc-wirtsliste [tc-wirtsliste--mit-tueren]">
 *     <div class="tc-wirtsliste__raster">
 *       <section class="tc-wirtsliste__nachbarschaft">
 *         <h2|h3 class="tc-wirtsliste__gruppe">Spielen &amp; Wetten</h2|h3>
 *         <ul class="tc-wirtsliste__liste">
 *           <li><a class="tc-wirtsliste__zeile" href>
 *             <img class="tc-wirtsliste__gesicht">
 *             <span class="tc-wirtsliste__text">
 *               <span class="tc-wirtsliste__haus">
 *               <span class="tc-wirtsliste__tun">
 *                 <span class="tc-wirtsliste__tut"> <span class="tc-wirtsliste__preis[--frei]">
 *               <span class="tc-wirtsliste__lage">          (nur wenn etwas los ist)
 *             <span class="tc-wirtsliste__pfeil">
 *         [<div class="tc-door-wand tc-door-wand--portrait tc-wirtsliste__tueren">]
 *
 * ⚠️ `--tc-accent` FAERBT HIER NUR FLAECHEN UND RAENDER, nie Text (§9).
 * Text nimmt `--tc-highlight`, `--tc-deco-warm-text` und `--tc-text-muted`.
 * ========================================================================== */

.tc-wirtsliste {
  container: wirtsliste / inline-size;
  min-width: 0;
}

.tc-wirtsliste__raster {
  display: grid;
  gap: var(--tc-space-4);
  min-width: 0;
}

.tc-wirtsliste__nachbarschaft { min-width: 0; }

/* Die Ueberschrift einer Nachbarschaft. Sie ist ein <h2>/<h3>, und die
   Seiten-Stilblaetter geben Ueberschriften Groesse, Rand und Schatten mit —
   deshalb setzt die Regel alles selbst, was sie braucht. */
.tc-wirtsliste__gruppe {
  margin: 0 0 var(--tc-space-2);
  padding: 0 0 var(--tc-space-1);
  border-bottom: 1px solid var(--tc-deco-ornament-border);
  font-family: var(--tc-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--tc-deco-warm-text);
}

.tc-wirtsliste__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tc-space-1) var(--tc-space-4);
  min-width: 0;
}

.tc-wirtsliste__liste > li { min-width: 0; }

/* Die Zeile ist der Link. 52 px Hoehe, damit drei Zeilen Text nicht
   gestaucht werden und der Daumen genug Flaeche hat (Heuristik 5). Der
   negative Rand laesst die Hover-Flaeche ueber den Text hinausragen, ohne
   dass die Gesichter von der Ueberschrift abruecken. */
.tc-wirtsliste__zeile {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-width: 0;
  min-height: 52px;
  padding: 6px var(--tc-space-2);
  margin: 0 calc(-1 * var(--tc-space-2));
  border-radius: var(--tc-radius-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--tc-motion-normal),
              transform var(--tc-motion-normal);
}

.tc-wirtsliste__zeile:hover,
.tc-wirtsliste__zeile:focus-visible {
  background: rgba(var(--tc-accent-rgb), 0.14);
  transform: translateX(3px);
  outline: none;
}

.tc-wirtsliste__zeile:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--tc-accent-rgb), 0.55);
}

/* Das Gesicht des Wirts ist der Zug der Liste: acht Gesichter sind Leute,
   bei denen man vorbeischauen will, acht Zeichen waeren eine Liste.
   Die 128-px-Avatare, nicht die Portraits — zusammen 38 KB statt 4,3 MB.
   Das Gesicht sitzt auf allen Bildern im oberen Drittel. */
.tc-wirtsliste__gesicht {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid rgba(var(--tc-accent-rgb), 0.55);
  box-shadow: 0 0 12px rgba(var(--tc-accent-rgb), 0.2);
  background: var(--tc-bg-base);
  transition: box-shadow var(--tc-motion-normal),
              border-color var(--tc-motion-normal);
}

.tc-wirtsliste__zeile:hover .tc-wirtsliste__gesicht,
.tc-wirtsliste__zeile:focus-visible .tc-wirtsliste__gesicht {
  border-color: rgba(var(--tc-accent-rgb), 0.9);
  box-shadow: 0 0 18px rgba(var(--tc-accent-rgb), 0.45);
}

.tc-wirtsliste__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

/* Der Hausname bricht um statt abzuschneiden: „Zum Gezinkten Würfel" ist
   in einer schmalen Spalte laenger als die Zeile, und ein gekuerzter Name
   ist schlechter als eine zweite Zeile (gemessen am Dashboard, 14.08.2026). */
.tc-wirtsliste__haus {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tc-highlight);
  overflow-wrap: anywhere;
}

/* Was man dort tut und was es kostet, in einer Zeile: „Fehde erklären ·
   100 SG". Wird die Spalte zu schmal, bricht das TUN um, und der Preis
   haengt am letzten Wort („Termine und / Zusagen · kostenlos") — die
   Trennpunkte sind geschuetzte Leerzeichen. Gekuerzt wird nichts: In zwei
   Spalten stand zuerst „Termine und Zusa…", und ein halber Satz erklaert
   weniger als ein umbrochener. */
.tc-wirtsliste__tun {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  color: var(--tc-text-muted);
}

.tc-wirtsliste__preis { white-space: nowrap; }

.tc-wirtsliste__tut + .tc-wirtsliste__preis::before {
  content: '\00A0\00B7\00A0';
}

/* „kostenlos" ist die Entwarnung, nicht die Nachricht — gruen wie am
   Preisschild der Tuer, aber nicht lauter. */
.tc-wirtsliste__preis--frei { color: var(--tc-success); opacity: 0.85; }
.tc-wirtsliste__tut + .tc-wirtsliste__preis--frei::before { color: var(--tc-text-muted); }

/* Was gerade los ist (#728). Die Neuigkeit der Zeile, deshalb kraeftiger
   als das Tun darueber, aber nicht groesser. Steht nur da, wenn der Server
   etwas meldet. */
.tc-wirtsliste__lage {
  margin-top: 1px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tc-deco-warm-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Pfeil sagt, dass die Zeile ein Link ist — gedaempft sichtbar, beim
   Zeigen kraeftiger. Am Handy gibt es kein Hover, dort steht er fest. */
.tc-wirtsliste__pfeil {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--tc-deco-warm-text);
  opacity: 0.45;
  transition: opacity var(--tc-motion-normal),
              transform var(--tc-motion-normal);
}

.tc-wirtsliste__zeile:hover .tc-wirtsliste__pfeil,
.tc-wirtsliste__zeile:focus-visible .tc-wirtsliste__pfeil {
  opacity: 1;
  transform: translateX(3px);
}

@media (hover: none) {
  .tc-wirtsliste__pfeil { opacity: 0.6; }
}

/* ── Breiten ─────────────────────────────────────────────────────────────── */

/* Die drei Nachbarschaften nebeneinander. In einer Spalte von 136 bis
   250 px weicht zuerst der Pfeil (die ganze Zeile ist ohnehin ein Link),
   dann schrumpft das Gesicht — lieber ein lesbarer Name als ein Pfeil
   daneben. Die Namen brechen um, die Zeilen werden dafuer hoeher. */
@container wirtsliste (min-width: 440px) {
  .tc-wirtsliste:not(.tc-wirtsliste--mit-tueren) .tc-wirtsliste__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tc-space-3) var(--tc-space-4);
  }
  .tc-wirtsliste:not(.tc-wirtsliste--mit-tueren) .tc-wirtsliste__pfeil { display: none; }
}

@container wirtsliste (min-width: 440px) and (max-width: 799.98px) {
  .tc-wirtsliste:not(.tc-wirtsliste--mit-tueren) .tc-wirtsliste__gesicht {
    width: 34px;
    height: 34px;
  }
  .tc-wirtsliste:not(.tc-wirtsliste--mit-tueren) .tc-wirtsliste__zeile { gap: var(--tc-space-2); }
}

@container wirtsliste (min-width: 440px) and (max-width: 599.98px) {
  .tc-wirtsliste--mit-tueren .tc-wirtsliste__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Die Gasse: Liste am Handy, Portraittueren ab 600 px ─────────────────── */

.tc-wirtsliste--mit-tueren .tc-wirtsliste__raster { gap: var(--tc-space-5); }

.tc-wirtsliste--mit-tueren .tc-wirtsliste__gruppe {
  margin-bottom: var(--tc-space-3);
  font-size: 0.84rem;
}

@container wirtsliste (max-width: 599.98px) {
  .tc-wirtsliste .tc-wirtsliste__tueren { display: none; }
}

@container wirtsliste (min-width: 600px) {
  .tc-wirtsliste--mit-tueren .tc-wirtsliste__liste { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-wirtsliste__zeile,
  .tc-wirtsliste__gesicht,
  .tc-wirtsliste__pfeil { transition: none; }
  .tc-wirtsliste__zeile:hover,
  .tc-wirtsliste__zeile:focus-visible,
  .tc-wirtsliste__zeile:hover .tc-wirtsliste__pfeil,
  .tc-wirtsliste__zeile:focus-visible .tc-wirtsliste__pfeil { transform: none; }
}