/* Hide decorative ::before icon while media is loading, decoding, or displayed */
.media-container.is-media-loading::before,
.media-container.cover-image--loading::before,
.media-container.has-active-preview::before,
.media-container.audio-preview::before,
.media-container:has(.media-slider [data-index]:not(.hidden))::before,
.media-container:has(.media-slider [id^="soundcloud-"]:not(.hidden))::before,
.media-container:has(.media-slider [id^="spotify-"]:not(.hidden))::before,
.media-container:has(.media-slider [id^="player-"]:not(.hidden))::before,
.media-container:has(.profile-img:not(.hidden))::before,
.media-container:has(.profile-video:not(.hidden))::before,
.media-container:has(.profile-audio:not(.hidden))::before {
    content: none !important;
    display: none !important;
}

/* Spotify: quadratische Cover-Shell in 1:1-Medienfeld */
.media-container.is-spotify,
.artist-media-container.is-spotify,
.media-container.active.is-spotify {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.media-container.is-spotify .profile-audio.is-spotify,
.media-container.is-spotify [id^="spotify-"],
.media-container.is-spotify [id^="sp-player-"],
.artist-media-container.is-spotify [id^="sp-player-"],
.artist-media-container.is-spotify .sample-media,
.media-slider [id^="spotify-"],
.media-slider [id^="soundcloud-"] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.spotify-embed-wrap {
    aspect-ratio: 1 / 1;
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.spotify-cover-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    z-index: 0;
    pointer-events: none;
}

.spotify-cover-art--fallback {
    background: linear-gradient(135deg, #1db954 0%, #191414 100%);
}

.spotify-embed-wrap iframe,
.spotify-embed-wrap iframe.spotify-embed--square {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    display: block;
    z-index: 1;
}

.spotify-embed-wrap:not(.is-playing) iframe {
    opacity: 0;
    pointer-events: none;
}

.spotify-embed-wrap.is-playing {
    cursor: default;
}

.spotify-embed-wrap.is-playing iframe {
    opacity: 1;
    pointer-events: auto;
}

.spotify-embed-wrap.is-playing .spotify-cover-art {
    opacity: 0.15;
}

/* Suche / Karten: Spotify aktiv — Profilbild ausblenden, Player sichtbar */
.media-container.active.is-spotify .profile-img,
.artist-media-container.active.is-spotify .profile-img,
.artist-media-container.playing.is-spotify .profile-img {
    transform: translateX(100%);
    opacity: 0;
}

.media-container.active.is-spotify .profile-audio,
.artist-media-container.active.is-spotify .sample-media,
.artist-media-container.playing.is-spotify .sample-media {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    z-index: 2;
}

.media-container.active.is-spotify::after,
.artist-media-container.active.is-spotify::after,
.artist-media-container.playing.is-spotify::after {
    opacity: 0;
}

.media-container.is-spotify:not(:has(.spotify-embed-wrap.is-playing))::after,
.artist-media-container.is-spotify:not(:has(.spotify-embed-wrap.is-playing))::after {
    opacity: 1;
}