/* media.innoform.eu — "Passende Inhalte"
   Bewusst KEINE Karten-Optik: Event-Karten (search) sind groß, mit Datum und
   Buchen-Button. Inhalte sind flache Zeilen mit Icon - so ist auf einen Blick
   klar, dass hier Wissen steht und keine buchbare Veranstaltung. */

.inno-media {
  --im-navy: #001c46;
  --im-orange: #ff6b00;
  --im-ts: #0d9488;
  --im-ink: #16203a;
  --im-muted: #626e87;
  --im-line: #e5e9f1;
  --im-hover: #f5f8fd;
  font-family: inherit;
  color: var(--im-ink);
  margin: 24px 0;
}

/* ---------- Kopf / Aufklapper ---------- */
.inno-media__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px 0;
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  color: var(--im-navy);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.inno-media__toggle:hover { border-bottom-color: var(--im-navy); }
.inno-media__toggle:focus-visible { outline: 2px solid var(--im-orange); outline-offset: 3px; }
.inno-media__chev { transition: transform .18s ease; }
.inno-media[data-open="1"] .inno-media__chev { transform: rotate(90deg); }
.inno-media__count {
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--im-navy);
  border-radius: 999px; padding: 1px 7px;
}

.inno-media__title {
  font-size: 1.02rem; font-weight: 700; color: var(--im-navy); margin: 0 0 2px;
}
.inno-media__sub { font-size: .8rem; color: var(--im-muted); }
.inno-media__head { margin-bottom: 10px; }

/* ---------- Liste ---------- */
.inno-media__body[hidden] { display: none; }
.inno-media__list { display: flex !important; flex-direction: column; min-width: 0; margin: 6px 0 0; }

/* display/min-width mit !important, weil das Widget auf fremden Domains läuft:
   generische Host-Regeln (z. B. `.widget a { display:block }`) dürfen das
   Flex-Layout der Zeile nicht kippen - sonst wächst sie auf min-content und
   überläuft den Container. */
.inno-media__row {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 11px 10px;
  border-top: 1px solid var(--im-line);
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: background .15s ease;
}
.inno-media__row:last-child { border-bottom: 1px solid var(--im-line); }
.inno-media__row:hover { background: var(--im-hover); }
.inno-media__row:focus-visible { outline: 2px solid var(--im-orange); outline-offset: -2px; }

.inno-media__icon {
  flex: 0 0 34px; height: 34px; width: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #eef2f9;
  color: var(--im-navy);
}
.inno-media__row[data-icon="podcast"] .inno-media__icon { background: #fff1e6; color: var(--im-orange); }
.inno-media__row[data-icon="lab"]     .inno-media__icon { background: #e6f6f4; color: var(--im-ts); }
.inno-media__icon svg { width: 18px; height: 18px; display: block; }

.inno-media__text { display: block !important; min-width: 0; max-width: 100%; flex: 1 1 auto; }
.inno-media__kicker {
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--im-muted); display: block !important; margin-bottom: 2px;
}
.inno-media__row[data-icon="lab"] .inno-media__kicker { color: var(--im-ts); }
.inno-media__row[data-icon="podcast"] .inno-media__kicker { color: var(--im-orange); }
.inno-media__name {
  font-size: .93rem; font-weight: 600; line-height: 1.35; color: var(--im-navy);
  display: block !important; overflow-wrap: anywhere; word-break: break-word;
}
.inno-media__row:hover .inno-media__name { text-decoration: underline; }
.inno-media__why {
  display: block; font-size: .74rem; color: var(--im-muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inno-media__go { flex: 0 0 auto; align-self: center; color: var(--im-muted); transition: transform .15s ease; }
.inno-media__row:hover .inno-media__go { transform: translateX(3px); color: var(--im-navy); }

/* ---------- Aufzeichnung derselben Reihe (abgesetzt, kein gleichwertiger Treffer) ---------- */
.inno-media__rec {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 9px 12px;
  background: #f2f6fd; border: 1px dashed #c4d2e8; border-radius: 9px;
  font-size: .82rem; color: var(--im-navy); text-decoration: none;
}
.inno-media__rec:hover { border-style: solid; }
.inno-media__recicon { flex: 0 0 auto; display: inline-flex; color: var(--im-navy); }
.inno-media__recicon svg { display: block; width: 17px; height: 17px; }
.inno-media__rec strong { font-weight: 650; }

.inno-media__empty { font-size: .86rem; color: var(--im-muted); }

@media (prefers-color-scheme: dark) {
  .inno-media {
    --im-ink: #e6ebf5; --im-muted: #9aa6bf; --im-line: #26314a;
    --im-hover: #182136; --im-navy: #9dbaff;
  }
  .inno-media__icon { background: #1d2740; }
  .inno-media__rec { background: #16203a; border-color: #2c3a58; }
  .inno-media__count { color: #0c111d; }
}
@media (prefers-reduced-motion: reduce) {
  .inno-media__chev, .inno-media__go, .inno-media__row { transition: none; }
}