/*
 * Music page. The player is WordPress's own audio playlist (.wp-playlist, MediaElement), which ships light-coloured
 * styling, so these rules are specific and use !important on colours only.
 */

.pbbp-player{padding-top:clamp(40px,6vw,80px)}
.pbbp-player .pbbp-wrap{max-width:860px}
.pbbp-player .pbbp-kicker{margin-bottom:18px}
.pbbp-player__note{margin-top:18px;font-size:14px;text-align:center}

.pbbp-player__box{background:var(--pbbp-panel);border:1px solid var(--pbbp-line);border-radius:10px;overflow:hidden}
.pbbp-player .wp-playlist{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--pbbp-text)!important}

/* now playing */
.pbbp-player .wp-playlist-current-item{display:flex;align-items:center;gap:20px;height:auto!important;margin:0!important;padding:28px 30px 8px}
.pbbp-player .wp-playlist-current-item img{width:72px!important;height:72px!important;max-width:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--pbbp-accent-rgb),.6);flex:none;margin:0!important}
.pbbp-player .wp-playlist-caption,.pbbp-player .wp-playlist-current-item .wp-playlist-caption{display:block;margin:0!important;padding:0!important}
.pbbp-player .wp-playlist-current-item .wp-playlist-item-title{font:600 clamp(22px,3vw,30px)/1.2 var(--pbbp-serif)!important;color:var(--pbbp-heading)!important}
.pbbp-player .wp-playlist-current-item .wp-playlist-item-meta{display:block;color:var(--pbbp-heading)!important}

/* the player bar */
.pbbp-player .mejs-container{width:100%!important;background:none!important;margin:0!important;height:auto!important}
.pbbp-player .mejs-controls{position:relative!important;background:none!important}
.pbbp-player .mejs-time{color:var(--pbbp-text)!important;font:600 13px/1 var(--pbbp-sans)!important}
.pbbp-player .mejs-time-total{background:rgba(255,255,255,.14)!important;border-radius:3px}
.pbbp-player .mejs-time-loaded{background:rgba(255,255,255,.14)!important}
.pbbp-player .mejs-time-current{background:linear-gradient(90deg,var(--pbbp-accent2),var(--pbbp-accent))!important;border-radius:3px}
.pbbp-player .mejs-time-handle-content{border-color:var(--pbbp-accent-hi)!important;background:var(--pbbp-accent-hi)!important}
.pbbp-player .mejs-controls button{filter:invert(1) brightness(.9)}
.pbbp-player .mejs-poster{display:none!important}

/* track list */
.pbbp-player .wp-playlist-tracks{margin:0!important;padding:8px 0 12px;border-top:1px solid var(--pbbp-line);margin-top:10px!important}
.pbbp-player .wp-playlist-item{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0!important;padding:0 30px!important;border:0!important;border-bottom:1px solid var(--pbbp-line)!important;transition:background .2s}
.pbbp-player .wp-playlist-item:last-child{border-bottom:0!important}
.pbbp-player .wp-playlist-item:hover{background:rgba(var(--pbbp-accent-rgb),.08)}
.pbbp-player .wp-playlist-item a.wp-playlist-caption{flex:1;display:block;padding:14px 0!important;color:var(--pbbp-text)!important;font:600 16px/1.4 var(--pbbp-sans);text-decoration:none;border:0!important;cursor:pointer}
.pbbp-player .wp-playlist-item-title{color:var(--pbbp-heading)!important;margin-left:6px}
.pbbp-player .wp-playlist-item-length{color:var(--pbbp-text)!important;font:600 13px var(--pbbp-sans);letter-spacing:.06em}
.pbbp-player .wp-playlist-item.wp-playlist-playing{background:rgba(var(--pbbp-accent-rgb),.12)!important;box-shadow:inset 4px 0 0 var(--pbbp-accent);font-weight:800}
.pbbp-player .wp-playlist-playing .wp-playlist-item-title{color:var(--pbbp-accent-hi)!important}
.pbbp-player .wp-playlist-next,.pbbp-player .wp-playlist-prev{display:none!important}

/* player bar layout: play button, time, rail, duration in one row */
.pbbp-player .wp-playlist-item-length{position:static!important;float:none!important;top:auto!important;right:auto!important;line-height:1.4;padding:14px 0;align-self:center}
.pbbp-player .wp-playlist-item{position:relative}
.pbbp-player .mejs-container{padding:0 30px}
.pbbp-player .mejs-controls{display:flex!important;align-items:center;gap:12px;height:52px!important;padding:0!important}
.pbbp-player .mejs-controls>div{position:static!important;float:none!important;height:auto!important;margin:0!important}
.pbbp-player .mejs-time-rail{flex:1;width:auto!important;padding-top:0!important}
.pbbp-player .mejs-time{padding:0!important;display:block!important;overflow:visible!important}
.pbbp-player .mejs-time-total{margin:0!important;position:relative!important;width:100%!important}
.pbbp-player .mejs-playpause-button button{width:36px!important;height:36px!important;border-radius:50%;background-color:var(--pbbp-accent)!important;filter:none!important}
.pbbp-player .mejs-volume-button,.pbbp-player .mejs-horizontal-volume-slider{display:none!important}

/* album / showreel / YouTube tiles (tile styling itself is in the shared core) */
.pbbp-moretiles{margin-top:64px}
.pbbp .pbbp-moretiles .pbbp-minor,.pbbp .pbbp-elsewhere .pbbp-minor{font:800 12px/1.4 var(--pbbp-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--pbbp-accent);margin:0 0 20px;padding-top:0;text-align:center}
.pbbp-moretiles .pbbp-tiles{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pbbp-moretiles .pbbp-tile{min-height:230px}

/* listen elsewhere */
.pbbp-elsewhere{margin-top:56px;text-align:center}
.pbbp .pbbp-elsewhere .pbbp-minor{font:800 12px/1.4 var(--pbbp-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--pbbp-accent);margin:0 0 20px;padding-top:0}

@media (max-width:600px){
  .pbbp-player .wp-playlist-current-item{padding:22px 20px 6px;gap:14px}
  .pbbp-player .wp-playlist-current-item img{width:56px!important;height:56px!important}
  .pbbp-player .wp-playlist-item{padding:0 20px!important}
}