/* ============================================================================
 * tc-lampe — Der Platz unter der Lampe (01.09.2026)
 * ----------------------------------------------------------------------------
 * Taskwerk #523 · Renderer: js/ui/lampe.js (TC.Lampe.html)
 * Demonstriert in: library-community.html
 *
 * Einmal im Monat legt Old Krenk ein fremdes Stueck unter seine Lampe. Der
 * Abschnitt zeigt, welches — und was es dorthin gebracht hat.
 *
 * ⚠️ DAS LICHT IST HIER EINE DATENFARBE, KEINE STIMMUNG (CLAUDE.md §9):
 * Das warme Gelb sagt „das lag unter der Lampe", nicht „hier ist der
 * Akzent des Systems". Deshalb echtes Lampenlicht statt --tc-highlight —
 * es muss in allen sieben Themes dasselbe bedeuten, so wie das
 * Medaillengold des Pokals.
 * ========================================================================== */

.tc-lampe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  padding: var(--tc-space-4) var(--tc-space-3) var(--tc-space-3);
  margin-bottom: var(--tc-space-4);
  border: 1px solid rgba(240, 200, 110, 0.22);
  border-radius: var(--tc-radius-lg, 14px);
  /* Der Lichtkegel faellt von oben auf die Karte — dieselbe Richtung wie
     eine Arbeitslampe. Zwei Verlaeufe, damit der Rand ins Dunkle laeuft. */
  background:
    radial-gradient(520px 200px at 50% -10%, rgba(240, 200, 110, 0.13), transparent 70%),
    var(--tc-bg-surface-1);
  overflow: hidden;
}

.tc-lampe__kopf {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
}

.tc-lampe__icon {
  font-size: 1.7rem;
  line-height: 1;
  flex: none;
  /* Ein sehr leiser Schein — die Lampe brennt, sie blinkt nicht. */
  filter: drop-shadow(0 0 10px rgba(240, 200, 110, 0.45));
}

.tc-lampe__titel {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1.15rem;
  color: #f0c86e;
  margin: 0;
}

.tc-lampe__monat {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  margin: 2px 0 0;
}

.tc-lampe__rede {
  font-family: var(--tc-font-body, Lato, 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);
}

/* ---- Das Werk ----------------------------------------------------------- */

.tc-lampe__werk {
  display: flex;
  gap: var(--tc-space-3);
  align-items: flex-start;
}

.tc-lampe__bild {
  flex: none;
  display: block;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border-radius: var(--tc-radius-sm);
  border: 1px solid rgba(240, 200, 110, 0.4);
  box-shadow: 0 0 22px rgba(240, 200, 110, 0.16);
  background: var(--tc-bg-surface-2);
}
.tc-lampe__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-lampe__bild:focus-visible { outline: 2px solid #f0c86e; outline-offset: 2px; }

.tc-lampe__wer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* ⚠️ Ohne min-width sprengt eine lange Notiz die Zeile: Flex-Elemente
     haben min-width: auto, und der Inhalt gewinnt gegen den Container. */
  min-width: 0;
}

.tc-lampe__person {
  font-family: var(--tc-font-display, Cinzel, serif);
  font-size: 1.05rem;
  color: var(--tc-text-strong);
}
.tc-lampe__du { font-family: var(--tc-font-body, Lato, sans-serif); font-size: 0.8rem; color: #f0c86e; }

.tc-lampe__notiz {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  /* Zwei Zeilen reichen — der ganze Text steht am Foto. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tc-lampe__zahlen {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Die Vorgänger ------------------------------------------------------ */

.tc-lampe__frueher {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tc-space-2);
  padding-top: var(--tc-space-2);
  border-top: 1px solid var(--tc-border-default);
}

.tc-lampe__frueher-titel {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

.tc-lampe__alt {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  text-decoration: none;
  padding: 4px 10px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-full);
  transition: border-color var(--tc-motion-fast), color var(--tc-motion-fast);
}
.tc-lampe__alt:hover,
.tc-lampe__alt:focus-visible { border-color: rgba(240, 200, 110, 0.5); color: #f0c86e; }

/* ---- Das Abzeichen am Werk in der Galerie -------------------------------- */

/* ⚠️ OBEN LINKS UNTER DER MARKIERUNGS-MARKE. Die drei anderen Ecken sind
   belegt: Markierung oben links, Stapel oben rechts, Pokal unten rechts.
   Ein Foto kann alle vier tragen. */
.social-card__lampe {
  position: absolute;
  bottom: 8px; left: 8px;
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(240, 200, 110, 0.6);
  border-radius: var(--tc-radius-sm);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 12px rgba(240, 200, 110, 0.3);
}

/* ---- Die Feier ---------------------------------------------------------- */

.tc-lampe-feier { text-align: center; padding: var(--tc-space-2) 0; }

.tc-lampe-feier__licht {
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: var(--tc-space-3);
  filter: drop-shadow(0 0 26px rgba(240, 200, 110, 0.6));
  animation: tc-lampe-an 900ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}

/* Die Lampe geht an — einmal, beim Öffnen. Kein Dauerflackern: Sie brennt
   seit Stunden, sie ist kein Blinklicht. */
@keyframes tc-lampe-an {
  0%   { opacity: 0; transform: scale(0.7); filter: drop-shadow(0 0 0 rgba(240,200,110,0)); }
  45%  { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 40px rgba(240,200,110,0.85)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 26px rgba(240,200,110,0.6)); }
}

.tc-lampe-feier__rede {
  font-family: var(--tc-font-body, Lato, sans-serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--tc-deco-warm-text);
  margin: 0 auto var(--tc-space-3);
  max-width: 46ch;
}

.tc-lampe-feier__werk {
  font-family: var(--tc-font-display, Cinzel, serif);
  color: var(--tc-text-strong);
  margin: 0 0 4px;
}

.tc-lampe-feier__zahlen {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  margin: 0 0 var(--tc-space-3);
  font-variant-numeric: tabular-nums;
}

.tc-lampe-feier__fuss {
  font-size: var(--tc-text-sm);
  color: #f0c86e;
  margin: 0;
}

/* ⚠️ NICHT `animation: none` (CLAUDE.md §9): Dabei fiele der Endzustand
   weg, und die Lampe bliebe unsichtbar — sie startet bei opacity 0. */
@media (prefers-reduced-motion: reduce) {
  .tc-lampe-feier__licht {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
  .tc-lampe__alt { transition: none; }
}

@media (max-width: 480px) {
  .tc-lampe__werk { flex-direction: column; }
  .tc-lampe__bild { width: 100%; height: 160px; }
}