/***** Songs Minimal (2) — base layout, spacing, and native audio polish *****/
/* Scope tightly to the view so nothing bleeds elsewhere */
.view-songs-minimal-two,
.view-id-songs_minimal_two {
  --song-gap: 1rem;
  --song-gap-sm: 0.75rem;
  --row-bg: rgba(255,255,255,0.02);
  --row-bg-hover: rgba(255,255,255,0.06);
  --row-border: rgba(0,0,0,0.12);
  --title-color: inherit;
  --title-hover: var(--bs-link-hover-color, #28336c);
}

/* Rows */
.view-songs-minimal-two .views-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--song-gap);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--row-border);
  background: var(--row-bg);
  border-radius: 0.4rem;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.view-songs-minimal-two .views-row:hover {
  background: var(--row-bg-hover);
}

/* Title link */
.view-songs-minimal-two .views-field-title a {
  color: var(--title-color);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.25;
}
.view-songs-minimal-two .views-field-title a:hover,
.view-songs-minimal-two .views-field-title a:focus {
  color: var(--title-hover);
  text-decoration: underline;
  outline: none;
}

/* Space between title and player */
.view-songs-minimal-two .views-field-field-song,
.view-songs-minimal-two .field--name-field-media-audio-file {
  margin-top: -0.25rem; /* pull audio a bit closer to title */
}

/* Native audio element */
.view-songs-minimal-two .field--name-field-media-audio-file audio {
  width: 100%;
  display: block;
  outline: none;
  border-radius: 0.35rem;
  margin-top: var(--song-gap-sm);
}

/* Optional tiny trim for long source URLs in some browsers (no visual change if not shown) */
.view-songs-minimal-two .field--name-field-media-audio-file audio source {
  max-width: 100%;
}

/* Compact the visual height slightly without hurting usability */
@media (min-width: 576px) {
  .view-songs-minimal-two .views-row {
    grid-template-columns: 1.3fr minmax(280px, 1fr);
    align-items: center;
  }
  .view-songs-minimal-two .views-field-title {
    margin-right: 0.75rem;
  }
}

/* Very small screens */
@media (max-width: 575.98px) {
  .view-songs-minimal-two .views-row {
    gap: var(--song-gap-sm);
    padding: 0.7rem 0.75rem;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .view-songs-minimal-two .views-row {
    transition: none;
  }
}

/* --- Sticky player bar (when your JS creates it) ------------------------- */
/* These styles do nothing unless an element with #active-song-bar exists. */
#active-song-bar.player-bar.sticky,
.active-song-fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;               /* sticks to viewport bottom */
  z-index: 1050;           /* above content, below admin toolbar dropdowns */
  padding: 0.6rem 0.9rem;
  backdrop-filter: saturate(120%) blur(8px);
  background: rgba(20, 20, 28, 0.72);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.28);
}

/* Optional: push page content up a bit when sticky bar is present */
body.has-sticky-player {
  padding-bottom: 84px; /* roughly the bar height */
}

/* Inside the sticky bar */
#active-song-bar .now-title {
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}
#active-song-bar audio {
  width: 100%;
  display: block;
}

/* Keep native controls tidy on WebKit; harmless elsewhere */
#active-song-bar audio::-webkit-media-controls-panel {
  border-radius: 0.3rem;
}