/* ======================================================
   WORKSHOP — ALBUM PAGE
====================================================== */

.workshop-description{
max-width:640px;
margin:0 auto 2rem auto;
text-align:center;
}

.workshop-description p{
margin:0;
}

.workshop-title{
text-align:center;
margin-bottom:1rem;
}

/* ======================================================
   AUDIO LIST
====================================================== */

.workshop-audio-list{
max-width:720px;
margin:0 auto;
margin-top:2rem;
}

/* ======================================================
   COVER
====================================================== */

.music-cover{
margin:2rem auto 2.5rem auto;
text-align:center;
}

.music-cover img{
max-width:420px;
width:100%;
height:auto;
border-radius:6px;
display:block;
margin:0 auto;
transition:transform .25s ease,box-shadow .25s ease;
}

.music-cover img:hover{
transform:scale(1.02);
box-shadow:0 8px 22px rgba(0,0,0,.15);
}

/* ======================================================
   TRACK LIST
====================================================== */

.track-list{
max-width:420px;
margin:2.5rem auto;
}

.track-item{
margin-bottom:2rem;
text-align:center;
}

.track-title{
font-size:.95rem;
font-weight:500;
margin-bottom:.5rem;
}

.track-item audio{
width:100%;
display:block;
}

/* ======================================================
   MUSIC GRID
====================================================== */

.music-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:1.5rem;
max-width:720px;
margin:1.5rem auto 0 auto;
padding:0 1rem;
justify-items:center;
}

.music-thumb{
text-decoration:none;
display:block;
}

.music-thumb img{
width:100%;
height:auto;
border-radius:6px;
display:block;
transition:transform .2s ease;
}

.music-thumb:hover img{
transform:scale(1.04);
}

.music-caption{
display:block;
margin-top:.5rem;
font-size:.9rem;
text-align:center;
}

/* ======================================================
   COLLAPSIBLE HEADER
====================================================== */

.music-summary::-webkit-details-marker{display:none}
.music-summary::marker{display:none}

.music-summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
}

.music-summary-title{
position:relative;
font-size:1.5rem;
font-weight:600;
padding-left:2.4rem;
}

.music-summary-title::before{
content:"▶";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:1.45rem;
height:1.45rem;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #aaa;
border-radius:3px;
font-size:.8rem;
transition:transform .18s ease;
}

details[open] .music-summary-title::before{
transform:translateY(-50%) rotate(90deg);
}

/* ======================================================
   INTRO TEXT
====================================================== */

.workshop-group-music .workshop-group-intro{
max-width:640px;
margin:1.5rem auto;
text-align:center;
font-size:1.05rem;
line-height:1.6;
}

/* ======================================================
   BACK LINK
====================================================== */

.music-back-link{
max-width:720px;
margin:2rem auto 0 auto;
font-size:.9rem;
}

.music-back-link a{
opacity:.7;
text-decoration:none;
}

.music-back-link a:hover{
opacity:1;
}

.music-musicians{
text-align:center;
font-size:.95rem;
opacity:.8;
margin-bottom:1rem;
}

.music-musicians p{
margin:.2rem 0;
}

/* =========================================
MINI PLAYER
========================================= */

.mini-player{

position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);

background:#111;
color:white;

padding:.6rem 1.2rem;

display:flex;
align-items:center;
gap:1rem;

border-radius:6px 6px 0 0;

box-shadow:0 -4px 18px rgba(0,0,0,.25);

z-index:1000;

}

.mini-info{

display:flex;
flex-direction:column;
min-width:180px;

}

.mini-player-title{

font-size:.9rem;

}

.mini-time{

font-size:.75rem;
opacity:.7;

}

.mini-player button{

background:none;
border:none;
color:white;
font-size:1rem;
cursor:pointer;

}

.mini-player button:hover{

opacity:.7;

}