/* ============================================================
   EMBEDS — media inside an opened row: Spotify player or YouTube video.
   Both are third-party content (GDPR): a same-size consent box stands
   in until the visitor clicks it (js/spotify-embed.js, js/youtube-embed.js).
   ============================================================ */

/* ---- Spotify: 80px compact player (cover fills the height).
   Spotify has only two layouts: 80 compact, or ≥152 with an empty band
   under the cover that can't be styled. ---- */
.spotify-embed { --embed-h: 80px; min-width: 0; }
.spotify-embed iframe {
  display: block;
  width: 100%;
  height: var(--embed-h);
  border: 0;
  border-radius: 12px;         /* Spotify's own corner radius */
}

/* ---- YouTube: 16:9 video, same width as the Spotify players ---- */
.youtube-embed { min-width: 0; aspect-ratio: 16 / 9; }
.youtube-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Consent box (shared): fills the space the media will take ---- */
.embed-consent {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: var(--embed-h, 80px);
  padding: 0 1.25rem;
  border: var(--line-thin);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.spotify-embed .embed-consent { height: var(--embed-h); }
.embed-consent:hover { background: var(--embed-hover, #f4f4f5); }
.embed-consent:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.embed-consent__title { display: flex; align-items: center; gap: 9px; font-size: var(--fs-small); }
.embed-consent__icon { width: 13px; height: 13px; fill: currentColor; flex: none; }
.embed-consent__note { font-size: 0.75rem; color: var(--color-muted); }