/* Band pages: Music / Videos sections, playable song lists and the video grid. Colours follow the active theme. */

.band-article{--band-edge:color-mix(in srgb,var(--as-text) 12%,transparent);--band-fill:color-mix(in srgb,var(--as-text) 5%,transparent)}
.band-article > .prose + .prose,.band-section > .prose{margin-top:1rem}

.band-section{margin-top:clamp(2.25rem,5vw,3.5rem);padding-top:clamp(1.25rem,3vw,1.75rem);position:relative}
.band-section::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--as-accent),color-mix(in srgb,var(--as-accent) 25%,transparent) 55%,transparent);
}
.band-section__head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.band-section__icon{
  flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:color-mix(in srgb,var(--as-accent) 16%,transparent);color:var(--as-accent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--as-accent) 55%,transparent);
}
.band-section__icon svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.band-section__title{
  margin:0;font-family:var(--as-font-display);font-weight:var(--as-display-weight);letter-spacing:var(--as-display-tracking);
  text-transform:var(--as-display-case);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.05;
}
.band-section .prose h3{margin-top:1.75rem}
.band-section .prose h4{font-size:1rem;opacity:.85}

/* Songs */
.band-tracks{list-style:none;margin:1rem 0 1.5rem;padding:0;display:grid;gap:.45rem;counter-reset:none}
.band-track{display:flex;align-items:stretch;gap:.4rem;margin:0}
.band-track__play{
  flex:1;min-width:0;display:grid;grid-template-columns:2.2rem 2.2rem 1fr;align-items:center;gap:.65rem;
  padding:.6rem .9rem .6rem .7rem;border-radius:12px;border:1px solid var(--band-edge);background:var(--band-fill);
  color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.band-track__play:hover,.band-track__play:focus-visible{
  background:color-mix(in srgb,var(--as-accent) 12%,transparent);border-color:color-mix(in srgb,var(--as-accent) 55%,transparent);
  transform:translateX(3px);box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.band-track__play:focus-visible{outline:2px solid var(--as-accent);outline-offset:2px}
.band-track__num{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem;opacity:.6;text-align:right}
.band-track__icon{
  display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--as-accent);color:var(--as-bg);box-shadow:0 2px 8px color-mix(in srgb,var(--as-accent) 35%,transparent);
  transition:transform .2s;
}
.band-track__icon svg{width:1rem;height:1rem;fill:currentColor}
.band-track__i-play{margin-left:2px}
.band-track__i-eq{display:none}
.band-track__play:hover .band-track__icon{transform:scale(1.08)}
.band-track__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.band-track__name{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.band-track__note{font-size:.88rem;line-height:1.45;opacity:.72}
.band-track__path{font-size:.75rem;font-family:ui-monospace,Menlo,monospace;opacity:.55;overflow-wrap:anywhere}
.band-track__path.is-missing{color:#d9534f;opacity:.9}

.band-track__play.is-playing{
  background:color-mix(in srgb,var(--as-accent) 18%,transparent);border-color:var(--as-accent);
}
.band-track__play.is-playing .band-track__i-play{display:none}
.band-track__play.is-playing .band-track__i-eq{display:block}
.band-track__play.is-playing .band-track__i-eq rect{animation:band-eq .9s ease-in-out infinite alternate;transform-origin:50% 100%;transform-box:fill-box}
.band-track__play.is-playing .band-track__i-eq rect:nth-child(2){animation-delay:-.3s}
.band-track__play.is-playing .band-track__i-eq rect:nth-child(3){animation-delay:-.6s}
@keyframes band-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .band-track__play,.band-track__icon{transition:none}
  .band-track__play:hover,.band-track__play:focus-visible{transform:none}
  .band-track__play.is-playing .band-track__i-eq rect{animation:none}
}
@media (max-width:520px){
  .band-track__play{grid-template-columns:auto 2rem 1fr;gap:.5rem;padding:.55rem .7rem}
  .band-track__num{min-width:1.1rem}
  .band-track__icon{width:2rem;height:2rem}
}

/* Videos: side by side, wrapping to new rows and stacking on narrow screens */
.band-videos{
  list-style:none;margin:1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(1rem,2.5vw,1.5rem);
}
.band-video{margin:0;display:flex;flex-direction:column;gap:.6rem;position:relative}
.band-video__thumb{
  position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--as-text) 10%,#000);box-shadow:0 12px 30px rgba(0,0,0,.25);
  outline-offset:3px;
}
.band-video__thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.band-video__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45))}
.band-video__play{
  position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--as-accent);color:var(--as-bg);
  box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 0 6px color-mix(in srgb,var(--as-accent) 30%,transparent);transition:transform .25s;
}
.band-video__play svg{width:1.4rem;height:1.4rem;fill:currentColor;margin-left:3px}
.band-video__thumb:hover img,.band-video__thumb:focus-visible img{transform:scale(1.05);filter:brightness(1.08)}
.band-video__thumb:hover .band-video__play,.band-video__thumb:focus-visible .band-video__play{transform:translate(-50%,-50%) scale(1.1)}
.band-video__caption{margin:0;display:flex;flex-direction:column;gap:.15rem;line-height:1.4}
.band-video__title{font-weight:650}
.band-video__meta{font-size:.88rem;opacity:.72}
@media (prefers-reduced-motion:reduce){.band-video__thumb img,.band-video__play{transition:none}}

/* Band photos */
.band-figure{margin:1.5rem 0;position:relative}
.band-figure img{box-shadow:0 16px 40px rgba(0,0,0,.28)}

/* Admin */
.band-card-edit{
  position:relative;z-index:3;align-self:flex-start;margin-top:.75rem;padding:.4rem .75rem;border-radius:999px;cursor:pointer;
  border:1px dashed color-mix(in srgb,var(--as-accent) 70%,transparent);background:transparent;color:var(--as-accent);font:inherit;font-size:.85rem;font-weight:600;
}
.band-card-edit:hover,.band-card-edit:focus-visible{background:color-mix(in srgb,var(--as-accent) 14%,transparent)}
.admin-mode .highlight__media[data-band-card]{position:relative;z-index:3;cursor:pointer}
.admin-mode .highlight__media[data-band-card]::after{
  content:"✎ Vaihda kuva";position:absolute;top:.6rem;right:.6rem;padding:.3rem .65rem;border-radius:999px;
  background:rgba(0,0,0,.72);color:#fff;font-size:.8rem;font-weight:600;pointer-events:none;
  opacity:.85;transition:opacity .2s;
}
.admin-mode .highlight__media[data-band-card]:hover::after,.admin-mode .highlight__media[data-band-card]:focus-visible::after{opacity:1}
.admin-mode .highlight__media[data-band-card]:hover,.admin-mode .highlight__media[data-band-card]:focus-visible{outline:2px dashed var(--as-accent);outline-offset:-4px}
.admin-mode .band-figure[data-band-edit]{cursor:pointer;width:fit-content;max-width:100%;margin-inline:auto}
.admin-mode .band-figure[data-band-edit]::after{
  content:"✎ Vaihda kuva";position:absolute;top:.6rem;right:.6rem;padding:.3rem .65rem;border-radius:999px;
  background:rgba(0,0,0,.72);color:#fff;font-size:.8rem;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;
}
.admin-mode .band-figure[data-band-edit]:hover::after,.admin-mode .band-figure[data-band-edit]:focus-visible::after{opacity:1}
.admin-mode .band-figure[data-band-edit]:hover img,.admin-mode .band-figure[data-band-edit]:focus-visible img{outline:2px dashed var(--as-accent);outline-offset:4px}
.admin-mode .band-figure[data-band-edit]:focus-visible{outline:none}
.band-edit-btn{
  flex:none;align-self:center;min-width:2.3rem;height:2.3rem;padding:0 .6rem;border-radius:10px;cursor:pointer;
  border:1px dashed color-mix(in srgb,var(--as-accent) 70%,transparent);background:transparent;color:var(--as-accent);font:inherit;font-size:.9rem;
}
.band-edit-btn:hover,.band-edit-btn:focus-visible{background:color-mix(in srgb,var(--as-accent) 14%,transparent)}
.band-edit-btn--video{align-self:flex-start}
.band-video--add{min-height:10rem}
.band-video__add{
  flex:1;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:14px;cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--as-accent) 60%,transparent);background:var(--band-fill);color:var(--as-accent);
  font:inherit;font-weight:600;
}
.band-video__add span{font-size:1.8rem;line-height:1}
.band-video__add:hover,.band-video__add:focus-visible{background:color-mix(in srgb,var(--as-accent) 12%,transparent)}