/* ============================================================================
 * tc-wirt — Der Gastgeber eines Ortes (01.09.2026)
 * ----------------------------------------------------------------------------
 * Konzept: readmes/WERKSTATT-KONZEPT.md §5/Baustein A · Taskwerk #505
 * Renderer: js/ui/wirt.js (TC.Wirt.html / TC.Wirt.gross)
 * Demonstriert in: library-community.html
 *
 * Portrait, Name, Rolle und ein Satz — die Figur, die einen Ort empfängt.
 * Bis zum 01.09.2026 hiessen diese Klassen `ug-wirt*` und standen in
 * css/untergrund.css. Sie sind hier UNVERAENDERT uebernommen (ueber die
 * CSSOM ausgelesen, nicht aus den Zeilennummern geraten — die drei
 * Media-Query-Zuordnungen waeren dabei falsch geworden: `__lupe` steht
 * unter `hover: none`, nicht unter einer Breite).
 *
 * ⚠️ DER UMZUG WAR NOETIG, WEIL DIE FIGUR JETZT AN ZWEI ORTEN STEHT.
 * Old Krenk empfaengt seit heute auch die Werkstatt auf social.html — und
 * dort die ganze css/untergrund.css zu laden hiesse, deren Layoutregeln
 * ueber eine fremde Seite zu legen. Ein zweiter Wirt-Renderer waere die
 * Alternative gewesen: eine zweite Wahrheit ueber dieselbe Figur.
 *
 * Struktur:
 *   <div class="tc-wirt">
 *     <button class="tc-wirt__portrait [tc-kerze]">
 *       <img|video> <span class="tc-wirt__lupe">
 *     </button>
 *     <div><h2 class="tc-wirt__name"> <p class="tc-wirt__rolle">
 *          <p class="tc-wirt__rede"></div>
 *   </div>
 *
 * Die Grossansicht (tc-wirt-gross) lebt in einem tc-modal.
 * ========================================================================== */

.tc-wirt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--tc-deco-ornament-border);
  border-radius: var(--tc-radius-lg, 14px);
  background:
    radial-gradient(420px 220px at 12% 0%, rgba(192, 120, 46, 0.10), transparent 68%),
    var(--tc-bg-surface-2);
}

.tc-wirt__portrait {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 108px;
  height: 108px;
  justify-self: center;
  border: 2px solid var(--tc-accent);
  box-shadow: 0 0 26px var(--tc-accent-glow);
}

.tc-wirt__portrait img,
.tc-wirt__portrait video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nicht 50% 50%: Die Portraits sind 2048x2048 und zeigen die Figur mit
     Kopf im oberen Drittel — mittig beschnitten faellt das Gesicht heraus. */
  object-position: 50% 20%;
}

/* Das Portrait ist ein <button>, damit es mit der Tastatur erreichbar ist
   und ein Screenreader es als Bedienelement ansagt. Es traegt keine eigene
   Gestaltung — es uebernimmt die des Rahmens. */
button.tc-wirt__portrait {
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

button.tc-wirt__portrait:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 3px;
}

.tc-wirt__lupe {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--tc-highlight);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity var(--tc-motion-normal, 200ms) ease;
  pointer-events: none;
}

button.tc-wirt__portrait:hover .tc-wirt__lupe,
button.tc-wirt__portrait:focus-visible .tc-wirt__lupe { opacity: 1; }

.tc-wirt__name {
  font-family: Cinzel, serif;
  font-size: 1.3rem;
  color: var(--tc-highlight);
  margin: 0 0 2px;
}

.tc-wirt__rolle {
  font-size: 0.85rem;
  color: var(--tc-text-muted);
  margin: 0 0 10px;
}

.tc-wirt__rede {
  font-family: Lato, 'Segoe UI', system-ui, sans-serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tc-deco-warm-text);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--tc-deco-warm-border);
}

/* ---- Der Wirt als Absender einer Sektion (--kompakt) --------------------- *
 *
 * Tim, 01.09.2026 (Taskwerk #530): „Ist Old Krenk das Zentrum der
 * Aktivitaeten? Wenn ich nicht in seinen Keller muss, sollte er zumindest der
 * Absender und Patron der Vorhaben sein."
 *
 * ⚠️ EIN MODIFIER, KEINE ZWEITE KOMPONENTE (Heuristik 3). Auf dem Dashboard
 * steht die Werkbank in einer schmalen Spalte zwischen anderen Abschnitten;
 * das volle 108px-Portrait mit Rahmen und Verlauf waere dort ein zweiter
 * Kasten im Kasten. Der kompakte Wirt hat deshalb keinen eigenen Rahmen — er
 * sitzt IN der `dash-section`, die ihn schon hat — und traegt nur Gesicht,
 * Name und einen Satz.
 *
 * Die Rolle faellt weg: Wer auf dem Dashboard „An der Werkbank" liest, weiss,
 * dass Krenk der Meister am Basteltisch ist. Sie steht weiterhin in der
 * Grossansicht, einen Klick entfernt.
 */

.tc-wirt--kompakt {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
}

.tc-wirt--kompakt .tc-wirt__portrait {
  width: 56px;
  height: 56px;
  justify-self: start;
  border-width: 1px;
  /* Der Schein bleibt, aber leiser: Er soll den Blick anziehen, nicht die
     Ueberschrift daneben ueberstrahlen. */
  box-shadow: 0 0 14px var(--tc-accent-glow);
}

/* ⚠️ Die Lupe ist bei 56px groesser als ein Viertel des Bildes und verdeckt
   die Schulter. Sie faellt weg — das Portrait bleibt anklickbar, und der
   `title` sagt weiterhin, was passiert. */
.tc-wirt--kompakt .tc-wirt__lupe { display: none; }

.tc-wirt--kompakt .tc-wirt__name {
  font-size: 1rem;
  margin: 0 0 1px;
}

.tc-wirt--kompakt .tc-wirt__rede {
  font-size: 0.88rem;
  line-height: 1.5;
  padding-left: 10px;
  /* Zwei Zeilen: Krenks Saetze sind lang, und der Abschnitt darunter ist die
     eigentliche Ware. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Die Grossansicht (im Modal) ---------------------------------------- */

.tc-wirt-gross { text-align: center; }

.tc-wirt-gross__bild {
  position: relative;
  margin: 0 auto 16px;
  max-width: 520px;
  border-radius: var(--tc-radius-lg, 14px);
  overflow: hidden;
  border: 1px solid var(--tc-deco-ornament-border);
  box-shadow: 0 0 40px var(--tc-accent-glow);
}

.tc-wirt-gross__medium {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--tc-bg-surface-3);
}

.tc-wirt-gross__spruch {
  font-family: Lato, 'Segoe UI', system-ui, sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tc-deco-warm-text);
  margin: 0 auto 10px;
  max-width: 46ch;
}

.tc-wirt-gross__rolle {
  font-size: 0.85rem;
  color: var(--tc-text-muted);
  margin: 0;
}

/* ---- Breiten und Zeiger ------------------------------------------------- */

@media (min-width: 640px) {
  .tc-wirt { grid-template-columns: 160px 1fr; align-items: center; }
  .tc-wirt__portrait { width: 150px; height: 150px; justify-self: start; }
}

/* ⚠️ `hover: none`, NICHT eine Breite. Auf dem Tablet gibt es keinen
   Hover-Zustand, an dem die Lupe erscheinen koennte — dort steht sie
   dauerhaft halbtransparent. (Beim Umzug ueber die CSSOM ausgelesen; die
   Zeilennummern haetten hier `min-width: 700px` nahegelegt.) */
@media (hover: none) {
  .tc-wirt__lupe { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-wirt__lupe { transition: none; }
}