/* ============================================================
   AUDIO.CSS — Canon Minimal Overrides (works with B2 player.css)
   ============================================================ */

/* 1. Make audio card smaller than video */
.custom-player[data-type="audio"] {
  width: min(90vw, 480px);
  margin: 3rem auto 4rem;
  border-radius: 22px;
  overflow: visible;
}

/* 2. Square artwork with perfect clipping */
.custom-player[data-type="audio"] .media-element {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #000;
}

.custom-player[data-type="audio"] .audio-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* 3. Controls pill must overlay artwork, but using B2 styles */
.custom-player[data-type="audio"] .controls.unified {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 46px; /* same perfect height on iOS + desktop */
  max-width: calc(100% - 72px);
  width: calc(100% - 72px);
}

/* 4. Remove frosted title overlay if included by template */
.custom-player[data-type="audio"] .title-bar,
.custom-player[data-type="audio"] .title-overlay {
  display: none !important;
}

/* 5. Hide fullscreen button */
.custom-player[data-type="audio"] .control-button.fullscreen {
  display: none !important;
}

/* 6. Correct HDR badge placement (outside clipped poster) */
.custom-player[data-type="audio"] .hdr-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 12px;
  z-index: 40;
}