/* CMS_NABUAUDIO – Layout allein über CSS; die Playlist-Umschaltung macht ein kleines
   Inline-Script an der <figure>. Alle Klassen mit Präfix "na" (BEM).
   Die <figure> trägt zusätzlich "picture pictureAlignFull" (Rahmen, Abstand, volle
   Spaltenbreite aus nabu2.css, wie beim Video). Farben als Variablen mit neutralen Startwerten. */

.na {
  --na-bg: #f2f2f2;
  --na-fg: #1a1a1a;
  --na-link: #1d5fa8;
  --na-active: #e3edf8;
  box-sizing: border-box;
}
.na__headline { font-weight: 700; padding: .5rem .5rem 0; }

.na__stage { padding: .5rem; }
.na .na__audio { display: block; width: 100%; }
.na .na__audio[hidden], .na .na__xc[hidden] { display: none; }

/* .na .na__xc-frame: höhere Spezifität als "article iframe" in nabu2.css
   (width:100%; height:auto; aspect-ratio:683/440). Xeno-Canto liefert 340 x 115. */
.na .na__xc-frame {
  display: block;
  width: 340px;
  max-width: 100%;
  height: 115px;
  aspect-ratio: auto;
  border: 0;
}

/* Zustand ohne Einwilligung */
.na__notice {
  background: var(--na-bg);
  color: var(--na-fg);
  padding: clamp(.75rem, 3vw, 1.5rem);
  text-align: left;
}
.na__notice p { margin: 0 0 .6em; }
.na__notice-icon { font-size: 1.75rem; line-height: 1; margin-bottom: .4rem; }
.na__notice-title { font-size: 1.15em; font-weight: 700; }
.na__notice a { color: var(--na-link); }

/* Playlist */
.na__list { list-style: none; margin: 0; padding: 0; }
.na__row { margin: 0; border-top: 1px solid rgba(0, 0, 0, .12); }
.na__item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem;
  color: inherit;
  text-decoration: none;
}
.na__item:hover { background: var(--na-bg); }
.na__row.is-active .na__item { background: var(--na-active); font-weight: 700; }
.na__item:focus-visible, .na__notice a:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.na__cat { flex: 0 0 auto; }
.na__name { flex: 1 1 auto; }
.na__meta { flex: 0 1 auto; font-size: .7rem; font-style: italic; font-weight: normal; text-align: right; }

/* ein einzelner Eintrag (keine Liste) */
.na__caption { margin: 0; font-size: .7rem; font-weight: bold; padding: .5rem; }
.na__caption .na__meta { display: block; text-align: right; padding-top: .25rem; }

@media print {
  .na .na__stage { display: none; }
}