/* ── MIXES PAGE ── */
.mixes-page { background:#080808; min-height:100vh; padding-bottom:90px; }

.mixes-hero { padding:7rem 3rem 3rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.mixes-eyebrow {
  font-size:0.6rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(255,255,255,0.3); display:flex; align-items:center; gap:1rem; margin-bottom:0.8rem;
}
.mixes-eyebrow::before { content:''; width:22px; height:2px; background:#fff; display:block; }
.mixes-title { font-size:clamp(2.5rem,5vw,4rem); font-weight:700; letter-spacing:-0.03em; line-height:1; }

/* ── ROW ── */
.mixes-list { display:flex; flex-direction:column; }
.mix-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 3rem; border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer; transition:background 0.15s; position:relative; gap:2rem;
}
.mix-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:#fff; transform:scaleY(0); transform-origin:center; transition:transform 0.25s;
}
.mix-row:hover { background:rgba(255,255,255,0.03); }
.mix-row.is-active { background:rgba(255,255,255,0.04); }
.mix-row.is-active::before { transform:scaleY(1); }
.mix-row-left  { display:flex; align-items:center; gap:1.4rem; flex:1; min-width:0; }
.mix-row-right { flex-shrink:0; }

.mix-index {
  font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  color:rgba(255,255,255,0.2); min-width:22px; text-align:right; flex-shrink:0;
}
.mix-row.is-active .mix-index { color:#fff; }

.mix-thumb {
  width:52px; height:52px; flex-shrink:0; position:relative; overflow:hidden; background:#1a1a1a;
}
.mix-thumb img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.8); transition:filter 0.25s; }
.mix-row:hover .mix-thumb img,
.mix-row.is-active .mix-thumb img { filter:brightness(0.5); }
.mix-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.mix-thumb-placeholder svg { width:32px; height:32px; }

.mix-play-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.25); border:none; cursor:pointer; opacity:0; transition:opacity 0.15s;
}
.mix-row:hover .mix-play-overlay,
.mix-row.is-active .mix-play-overlay { opacity:1; }
.mix-play-overlay svg { width:16px; height:16px; color:#fff; }

.mix-meta { min-width:0; }
.mix-name {
  font-size:0.95rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.3rem; line-height:1.2;
}
.mix-tags { display:flex; align-items:center; gap:0.6rem; }
.mix-tag {
  font-size:0.56rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.1); padding:0.12rem 0.45rem;
}
.mix-dur { font-size:0.58rem; color:rgba(255,255,255,0.25); letter-spacing:0.06em; }

.mix-time-row {
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:0.6rem; color:rgba(255,255,255,0.28); letter-spacing:0.06em; white-space:nowrap;
}
.mix-time-cur { color:rgba(255,255,255,0.5); }

/* ── PLAYER BAR — DESKTOP ── */
.mix-player {
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  background:#0e0e0e;
  border-top:1px solid rgba(255,255,255,0.1);
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(.25,.46,.45,.94);
}
.mix-player.visible { transform:translateY(0); }

/* Single row on desktop */
.mp-bottom-row {
  display:grid;
  grid-template-columns: 72px 220px auto 1fr 140px;
  align-items:center;
  gap:1.5rem;
  height:72px;
  padding:0 2rem 0 0;
}

/* Progress bar — hidden on desktop, shown via the bottom row on mobile */
.mp-progress-wrap { display:none; }

.mp-artwork {
  width:72px; height:72px; flex-shrink:0;
  background:#1a1a1a; background-size:cover; background-position:center;
  border-right:1px solid rgba(255,255,255,0.06);
}
.mp-info { display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden; }
.mp-title { font-size:0.85rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-sub { font-size:0.6rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mp-controls { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.mp-btn {
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.45);
  padding:6px; display:flex; align-items:center; justify-content:center; transition:color 0.15s;
}
.mp-btn:hover { color:#fff; }
.mp-btn svg { width:16px; height:16px; }
.mp-playpause {
  width:38px; height:38px; border-radius:50%;
  background:#fff !important; color:#080808 !important; transition:background 0.2s !important;
}
.mp-playpause svg { width:13px; height:13px; }
.mp-playpause:hover { background:#d4d4d4 !important; }

/* Desktop progress bar — lives inside mp-bottom-row grid */
.mp-progress-wrap-inner {
  display:flex; flex-direction:column; gap:5px; min-width:0;
}
.mp-progress-track {
  width:100%; height:4px; background:rgba(255,255,255,0.12);
  border-radius:2px; cursor:pointer; position:relative;
}
.mp-progress-track:hover { height:6px; }
.mp-progress-bar {
  height:100%; width:0%; background:#fff; border-radius:2px;
  transition:width 0.25s linear; pointer-events:none;
}
.mp-times {
  display:flex; justify-content:space-between;
  font-size:0.55rem; color:rgba(255,255,255,0.3); letter-spacing:0.06em;
}

.mp-vol { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.mp-vol-icon { width:14px; height:14px; color:rgba(255,255,255,0.35); flex-shrink:0; }
#mp-vol {
  -webkit-appearance:none; width:80px; height:3px;
  background:rgba(255,255,255,0.15); border-radius:2px; outline:none; cursor:pointer;
}
#mp-vol::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; background:#fff; border-radius:50%; }
#mp-vol::-moz-range-thumb { width:12px; height:12px; background:#fff; border:none; border-radius:50%; }

.mixes-empty { padding:6rem 3rem; color:rgba(255,255,255,0.35); font-size:0.95rem; font-weight:300; }
.mixes-empty strong { color:rgba(255,255,255,0.6); }

/* ── MOBILE ── */
@media (max-width:768px) {
  .mixes-hero { padding:6rem 1.5rem 2rem; }
  .mix-row { padding:1.2rem 1.5rem; }
  .mixes-page { padding-bottom:120px; }

  /* Stack into 2 rows */
  .mp-bottom-row {
    grid-template-columns: 56px 1fr auto;
    height:60px;
    gap:0.75rem;
    padding:0 1rem 0 0;
  }
  .mp-artwork { width:56px !important; height:56px !important; }
  .mp-vol { display:none; }

  /* Hide desktop progress wrapper */
  .mp-progress-wrap-inner { display:none; }

  /* Show mobile scrub row above the controls row */
  .mp-progress-wrap {
    display:flex;
    flex-direction:column;
    width:100%;
    padding:10px 0 8px;
    background:#0e0e0e;
    border-bottom:1px solid rgba(255,255,255,0.07);
    order:-1; /* sits above mp-bottom-row */
  }
  .mp-progress-track {
    width:100%;
    height:6px;
    margin:0;
    padding:10px 0;     /* tall invisible hit zone */
    box-sizing:content-box;
    border-radius:3px;
  }
  .mp-progress-bar { border-radius:3px; }
  .mp-times { padding:0 16px; margin-top:4px; font-size:0.6rem; }
}