/* Fasada odtwarzacza Spotify (S322, 20.10.2026): wygląd odtwarzacza od razu, prawdziwy embed po kliknięciu.
   Wysokość slotu = wysokość embedu Spotify (352 px), więc podmiana niczego nie przesuwa. */
.artist-listening .sf-slot,
.page-artist .artist-listening [data-spotify-player].spotify-slot.sf-slot{position:relative;height:352px;border-radius:12px;overflow:hidden;background:#151a26}
.artist-listening .sf-slot iframe{position:absolute;inset:0;display:block;width:100%;height:352px;border:0;border-radius:12px;background:#151a26}
.artist-listening .sf-slot .sf-host{position:absolute;inset:0}

.artist-listening .sf{--sf-ink:#f3f5fa;--sf-muted:#c3cad8;--sf-green:#1ed760;
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;width:100%;height:100%;margin:0;padding:20px;
  border:0;border-radius:12px;background:#181d2b;color:var(--sf-ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;isolation:isolate}
.artist-listening .sf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0d1018a6 0%,#0d1018d9 46%,#0d1018f2 100%)}
.artist-listening .sf-bg{position:absolute;inset:-40px;z-index:-2;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(36px) saturate(1.35);opacity:.85;transform:scale(1.05)}

.artist-listening .sf-top{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:end;gap:18px}
.artist-listening .sf-cover{display:block;width:112px;height:112px;border-radius:8px;object-fit:cover;box-shadow:0 10px 30px #0009}
.artist-listening .sf-cover-fb{display:grid;place-items:center;background:linear-gradient(135deg,#7950de,#3a2a7a);font:600 40px/1 var(--font-display,inherit);color:#fff}
.artist-listening .sf-meta{display:flex;flex-direction:column;gap:6px;min-width:0;padding-bottom:4px}
.artist-listening .sf-brand{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--font-sans,inherit);color:var(--sf-ink)}
.artist-listening .sf-name{font:600 34px/1.05 var(--font-display,inherit);letter-spacing:-.01em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-listening .sf-sub{font-size:13px;line-height:1.3;color:var(--sf-muted)}
.artist-listening .sf-play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sf-green);color:#08130c;box-shadow:0 8px 24px #1ed76040;transition:transform .15s ease,background-color .15s ease}
.artist-listening .sf-play svg{margin-left:3px}
.artist-listening .sf:hover .sf-play{transform:scale(1.06);background:#3be477}
.artist-listening .sf:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.artist-listening .sf:focus-visible .sf-play{background:#3be477}
.artist-listening .sf-hint{align-self:flex-end;font-size:12px;line-height:1.3;color:var(--sf-muted)}

.artist-listening .sf-rows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.artist-listening .sf-row{display:grid;grid-template-columns:22px minmax(0,1fr) 36px;align-items:center;gap:12px;flex:0 0 34px;padding:0 6px;border-radius:6px}
.artist-listening .sf-n{font-size:13px;color:#ffffff73;font-variant-numeric:tabular-nums;text-align:right}
.artist-listening .sf-bar{display:block;height:9px;border-radius:5px;background:#ffffff24}
.artist-listening .sf-dur{display:block;height:7px;border-radius:4px;background:#ffffff17}
.artist-listening .sf-row:nth-child(n+5){display:none}

.artist-listening .sf-slot.is-loading .sf{cursor:progress}
.artist-listening .sf-slot.is-loading .sf-play{animation:sf-pulse 1.1s ease-in-out infinite}
@keyframes sf-pulse{50%{transform:scale(.92);opacity:.8}}
.artist-listening .sf-noscript{position:absolute;right:20px;bottom:20px;z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#1ed760;color:#07120b;font-weight:700;text-decoration:none}

@media (max-width:640px){
  .artist-listening .sf{padding:16px;gap:12px}
  .artist-listening .sf-top{grid-template-columns:84px minmax(0,1fr) auto;gap:12px}
  .artist-listening .sf-cover{width:84px;height:84px}
  .artist-listening .sf-name{font-size:24px}
  .artist-listening .sf-play{width:56px;height:56px}
  .artist-listening .sf-row:nth-child(5){display:grid}
}
@media (prefers-reduced-motion:reduce){
  .artist-listening .sf-play{transition:none}
  .artist-listening .sf-slot.is-loading .sf-play{animation:none}
}