/* =========================================================
   UI FIXES – additive Overrides
   Ziel:
   - feste Kartenhöhe
   - begrenzte Bildgröße
   - nahtloser Grau→Schwarz-Übergang
   - keine Layoutsprünge (Desktop + Mobile)
   ========================================================= */

/* -------------------------
   Karten-Grundlayout
   ------------------------- */

.card,
.item,
.entry {
  display: flex;
  align-items: stretch;
  height: 140px;              /* feste Höhe für ALLE Datensätze */
  overflow: hidden;
  background-color: #181818;  /* bestehender Grauton beibehalten */
}

/* Mobile: etwas kompakter */
@media (max-width: 600px) {
  .card,
  .item,
  .entry {
    height: 120px;
  }
}

/* -------------------------
   Bildbereich
   ------------------------- */

.card .media,
.card .image,
.item .media,
.item .image,
.entry .media,
.entry .image {
  position: relative;
  width: 110px;        /* feste Bildbreite */
  height: 100%;
  flex: 0 0 110px;
  overflow: hidden;
  background-color: #111;
}

/* Mobile: schmaleres Bild */
@media (max-width: 600px) {
  .card .media,
  .card .image,
  .item .media,
  .item .image,
  .entry .media,
  .entry .image {
    width: 90px;
    flex-basis: 90px;
  }
}

/* Bild selbst */
.card img,
.item img,
.entry img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* proportional, ggf. Cropping */
  display: block;
}

/* -------------------------
   Nahtloser Übergang Bild → Text
   ------------------------- */

/* dunkler Verlauf über dem rechten Bildrand */
.card .media::after,
.card .image::after,
.item .media::after,
.item .image::after,
.entry .media::after,
.entry .image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(24,24,24,0) 0%,
    rgba(24,24,24,0.6) 60%,
    rgba(24,24,24,1) 100%
  );
}

/* -------------------------
   Textbereich
   ------------------------- */

.card .content,
.item .content,
.entry .content {
  flex: 1 1 auto;
  padding: 10px 12px;
  overflow: hidden;
}

/* Titel: nicht umbrechen lassen */
.card .title,
.item .title,
.entry .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zusammenfassung begrenzen */
.card .summary,
.item .summary,
.entry .summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}