/* Переиспользуемая плиточная карточка бита (как в каталоге /beats/).
   Намеренно неймспейс .bc-* чтобы не конфликтовать со стилями страниц.
   Цвета берёт из :root страницы (--card,--line,--gold,--gold2,--mut). */
.bc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.bc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.bc-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px)}
.bc-card.playing{border-color:rgba(255,255,255,.32);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.bc-cover{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.bc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5))}
.bc-pr{position:absolute;top:9px;right:9px;z-index:2;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}
.bc-pr.free{background:#37c978;color:#04240f;border:0}
.bc-play{position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.96);color:#0d0d10;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.bc-play:hover{transform:scale(1.08)}
.bc-play::before{content:"▶";padding-left:3px;font-size:17px}
.bc-play.playing::before{content:"❚❚";padding-left:0;font-weight:800;font-size:15px}
.bc-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1;gap:9px}
.bc-title{font-size:14.5px;font-weight:700;color:#fff;line-height:1.25;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-title:hover{color:var(--gold)}
.bc-meta{display:flex;flex-wrap:wrap;gap:5px}
.bc-meta span{background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:10.5px;font-weight:600;color:#ddd9d3;padding:2px 7px;border-radius:6px}
.bc-row{display:flex;gap:7px;margin-top:auto;align-items:center}
.bc-act{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0;flex-shrink:0}
.bc-act:hover{color:var(--gold);border-color:var(--gold);background:rgba(225,22,43,.06)}
.bc-act svg{width:15px;height:15px;display:block}
.bc-heart.on{color:var(--gold);border-color:var(--gold)}
.bc-heart.on svg path:first-of-type{fill:currentColor}
/* «Скачать» — главное действие карточки, поэтому оно последнее в ряду и залито красным.
   Акцент и место достались ему от кнопки-корзины, убранной 20.08. margin-left:auto тут
   НЕ нужен: с корзиной кнопок было три и её отжимали вправо, теперь оставшиеся две
   держим группой у левого края — как заголовок и мета выше, иначе в плитке дыра. */
.bc-dl{color:#fff;border-color:var(--gold);background:linear-gradient(180deg,var(--gold2),var(--gold))}
.bc-dl:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(225,22,43,.3);color:#fff}
.bc-fade{opacity:0;transform:scale(.92);transition:.3s ease}

/* ── вид списком (тоггл .list на .bc-grid) ── */
.bc-grid.list{display:flex;flex-direction:column;gap:10px}
.bc-grid.list .bc-card{flex-direction:row;align-items:center}
.bc-grid.list .bc-cover{width:72px;min-width:72px;height:72px;aspect-ratio:auto;border-radius:14px 0 0 14px}
.bc-grid.list .bc-cover::after{display:none}
.bc-grid.list .bc-pr{display:none}
.bc-grid.list .bc-play{width:32px;height:32px}
.bc-grid.list .bc-play::before{font-size:12px}
.bc-grid.list .bc-body{flex-direction:row;align-items:center;gap:12px;padding:8px 14px 8px 12px;min-width:0}
.bc-grid.list .bc-title{flex:1 1 auto;min-width:0}
.bc-grid.list .bc-meta{flex:0 0 auto}
.bc-grid.list .bc-row{margin-top:0;margin-left:auto;flex-shrink:0}
@media(max-width:560px){
  .bc-grid.list .bc-meta{display:none}
  .bc-grid.list .bc-cover{width:58px;min-width:58px;height:58px}
  .bc-grid.list .bc-act{width:32px;height:32px}
  .bc-grid.list .bc-act svg{width:14px;height:14px}
  .bc-grid.list .bc-row{gap:5px}
  .bc-grid.list .bc-body{gap:8px;padding:8px 10px}
}