/* /de/live/ - wer gerade Ragnarok Zero streamt.
 *
 * Eigene Datei statt eines <style> in markt/live.php: Dieselbe Wahl wie
 * bei marktwache.css. Der Browser holt sie einmal und behaelt sie, und
 * die PHP-Datei bleibt lesbar.
 *
 * KEINE FESTEN FARBEN - alles aus den Palettenblocken in grund.css,
 * sonst bricht das dunkle Design. npm run build prueft das.
 */

.lv-vor, .lv-leer {
  color: var(--schrift-2);
  margin: 0 0 1.2rem;
}

.lv-liste {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  /* auto-fill statt auto-fit: Bei einem einzigen Stream soll die Karte
     ihre Groesse behalten und nicht ueber die ganze Breite laufen - ein
     440 Pixel breites Vorschaubild auf 1200 Pixel gezogen sieht nach
     Fehler aus. */
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.lv-karte {
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: hidden;
  background: var(--flaeche);
  transition: border-color .15s;
}
.lv-karte:hover { border-color: var(--warn) }

.lv-karte a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.lv-bild {
  display: block;
  width: 100%;
  height: auto;
  /* Das Bild kommt von einem fremden Rechner und kann fehlen. Ein
     Hintergrund sorgt dafuer, dass dann kein weisses Loch klafft. */
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--rand);
}

.lv-name {
  display: block;
  padding: .6rem .7rem 0;
  font-weight: 600;
  color: var(--schrift);
}

.lv-titel {
  display: block;
  padding: .2rem .7rem 0;
  font-size: .82rem;
  color: var(--schrift-2);
  /* Zwei Zeilen, dann Schluss. Stream-Titel sind oft lang und voller
     Schlagwoerter; ungekuerzt zerreissen sie das Raster. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lv-zahl {
  display: block;
  padding: .45rem .7rem .7rem;
  font-size: .75rem;
  color: var(--warn);
  font-weight: 600;
}

.lv-eigen, .lv-quelle {
  color: var(--schrift-2);
  font-size: .85rem;
}
.lv-quelle { font-size: .78rem; color: var(--schrift-3) }