/* ============================================================================
   WRETCHED RHYTHMS — releases page styles (v1.0.1)
   Requires main.css to be loaded first for CSS variables and base styles.
   ============================================================================ */

/* ── layout ────────────────────────────────────────────────────────────────── */
.releases-body{ background:var(--void); }
.releases-body header{ position:relative; }

#releases-main{
  max-width:960px; margin:0 auto;
  padding:6rem 1.5rem 4rem;
}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.rel-hero{ margin-bottom:3rem; }
.rel-title{
  font-family:"Anton",sans-serif; font-size:clamp(2rem,6vw,3.5rem);
  color:var(--ash); margin:.25rem 0 .5rem; line-height:1;
}
.rel-sub{ color:var(--ash-dim); font-family:"Space Mono",monospace; font-size:.8rem; }

/* ── filter bar ───────────────────────────────────────────────────────────── */
.rel-filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.5rem; border-bottom:1px solid #2a2c22;
  padding-bottom:1rem;
}
.rel-filter{
  background:none; border:1px solid #2a2c22;
  color:var(--ash-dim); font-family:"Space Mono",monospace; font-size:.7rem;
  letter-spacing:.08em; padding:.35rem .8rem; cursor:pointer;
  transition:all .15s;
}
.rel-filter:hover{ color:var(--ash); border-color:var(--ash); }
.rel-filter.active{ background:var(--rot); color:#000; border-color:var(--rot); }

/* ── album card ───────────────────────────────────────────────────────────── */
.rel-album{
  border:1px solid #2a2c22; margin-bottom:2rem;
  background:var(--void-2); overflow:hidden;
}

.rel-album-head{
  display:flex; gap:1.5rem; padding:1.5rem;
  border-bottom:1px solid #2a2c22;
}
.rel-cover{
  width:120px; height:120px; object-fit:cover;
  flex-shrink:0; border:1px solid #2a2c22;
}
.rel-cover-placeholder{
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--ash-dim); background:var(--void);
}

.rel-album-meta{ display:flex; flex-direction:column; gap:.25rem; justify-content:center; }
.rel-artist-name{ font-family:"Space Mono",monospace; font-size:.7rem; color:var(--rot); text-transform:uppercase; letter-spacing:.1em; margin:0; }
.rel-album-title{ font-family:"Anton",sans-serif; font-size:1.4rem; color:var(--ash); margin:0; line-height:1.1; }
.rel-year{ font-family:"Space Mono",monospace; font-size:.7rem; color:var(--ash-dim); margin:0; }
.rel-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.25rem; }
.rel-forthcoming-note{ font-family:"Space Mono",monospace; font-size:.7rem; color:var(--ash-dim); margin:.5rem 0 0; letter-spacing:.05em; }

/* ── tracklist ─────────────────────────────────────────────────────────────── */
.rel-tracklist{ list-style:none; margin:0; padding:0; }
.rel-track{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.5rem; border-bottom:1px solid #2a2c22;
  flex-wrap:wrap;
}
.rel-track:last-child{ border-bottom:none; }
.rel-track-fc{ opacity:.45; }
.rel-track:not(.rel-track-fc):hover{ background:rgba(159,212,0,.04); }

.rel-track-num{ font-family:"Space Mono",monospace; font-size:.65rem; color:var(--ash-dim); width:1.6rem; flex-shrink:0; }
.rel-track-info{ display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0; }
.rel-track-title{ font-family:"Space Mono",monospace; font-size:.85rem; color:var(--ash); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rel-track-meta{ font-family:"Space Mono",monospace; font-size:.65rem; color:var(--ash-dim); }

.rel-play-count{ font-family:"Space Mono",monospace; font-size:.6rem; color:var(--rot); opacity:.7; white-space:nowrap; }

/* ── track CTAs ────────────────────────────────────────────────────────────── */
.rel-track-actions{
  display:flex; gap:.4rem; align-items:center;
  flex-wrap:wrap; margin-left:auto;
}
.rel-btn{
  font-family:"Space Mono",monospace; font-size:.65rem; letter-spacing:.06em;
  padding:.3rem .65rem; border:1px solid #2a2c22;
  text-decoration:none; cursor:pointer; transition:all .15s;
  background:none; white-space:nowrap;
}
.rel-btn-listen{ color:var(--rot); border-color:var(--rot); }
.rel-btn-listen:hover{ background:var(--rot); color:#000; }
.rel-btn-dl{ color:var(--ash); }
.rel-btn-dl:hover{ background:var(--ash); color:var(--void); }
.rel-btn-buy{ color:var(--blood-text); border-color:var(--blood-text); }
.rel-btn-buy:hover:not(.disabled){ background:var(--blood-text); color:#000; }
.rel-btn-buy.disabled{ opacity:.35; cursor:not-allowed; }

/* ── share (releases page) ────────────────────────────────────────────────── */
.rel-share-wrap{ position:relative; }
.rel-share-toggle{
  background:none; border:1px solid #2a2c22; cursor:pointer;
  color:var(--ash-dim); font-family:"Space Mono",monospace; font-size:.65rem;
  padding:.3rem .55rem; transition:color .15s;
}
.rel-share-toggle:hover{ color:var(--rot); border-color:var(--rot); }
.rel-share-menu{
  display:none; position:absolute; right:0; bottom:calc(100% + 4px);
  background:var(--void-2); border:1px solid #2a2c22;
  padding:.3rem .4rem; gap:.3rem; flex-direction:row;
  z-index:20; white-space:nowrap;
}
.rel-share-menu.open{ display:flex; }
.rel-share-btn{
  background:none; border:none; cursor:pointer; text-decoration:none;
  color:var(--ash-dim); font-family:"Space Mono",monospace; font-size:.7rem;
  padding:.2rem .35rem; transition:color .15s;
}
.rel-share-btn:hover{ color:var(--rot); }

/* ── misc ──────────────────────────────────────────────────────────────────── */
.rel-loading, .rel-empty{
  font-family:"Space Mono",monospace; font-size:.8rem; color:var(--ash-dim);
  padding:3rem; text-align:center;
}

/* ── footer ────────────────────────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid #2a2c22; padding:2rem 1.5rem;
  text-align:center; font-family:"Space Mono",monospace; font-size:.7rem;
  color:var(--ash-dim); max-width:960px; margin:0 auto;
}
.site-footer a{ color:var(--rot); text-decoration:none; }

/* ── responsive ────────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .rel-album-head{ flex-direction:column; }
  .rel-cover{ width:100%; height:auto; max-height:220px; }
  .rel-track{ padding:.7rem 1rem; }
  .rel-track-actions{ width:100%; margin-left:0; }
  .rel-btn{ font-size:.6rem; padding:.25rem .5rem; }
}