/* MUSIC FOLDER — sections | исходник: 3667..3706 */

/* ═══ секции ═══ */
.section{padding:72px 0 0}
.shead{margin-bottom:30px}
.shead h2{font-family:var(--fd);font-weight:700;font-size:clamp(24px,3.6vw,36px);margin-top:12px}
.shead .sub{color:var(--muted);margin-top:8px;max-width:600px}
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px;min-width:0}
.rcard,.top-card,.stat-card,.svc-card,.tg-card{
position:relative;overflow:hidden;
background:linear-gradient(180deg,rgba(19,24,44,.68),rgba(8,11,22,.62));
border:1px solid var(--line);
backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 60px -24px rgba(0,0,0,.85);
transition:border-color .3s,box-shadow .3s,transform .3s;
}
/* Spotlight-обводка при наведении */
.rcard::after,.top-card::after,.stat-card::after,.svc-card::after,.tg-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c2) 90%,transparent),transparent 70%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .35s;
}
.rcard:hover::after,.top-card:hover::after,.stat-card:hover::after,.svc-card:hover::after,.tg-card:hover::after{opacity:1;}
.rcard:hover,.top-card:hover,.stat-card:hover{border-color:color-mix(in srgb,var(--c2) 40%,transparent);transform:translateY(-2px);}
.rcard{display:flex;align-items:center;gap:14px;padding:13px 16px;min-width:0;overflow:hidden;cursor:pointer}
.rcard:hover{border-color:color-mix(in srgb,var(--c1) 45%,transparent);transform:translateY(-2px)}
.rthumb{flex:none;position:relative;width:50px;height:50px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 30%,transparent),color-mix(in srgb,var(--c2) 30%,transparent));
font-size:20px;color:#fff}
.rthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* play-оверлей на карточках истории */
.rplay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(5,6,15,.5);opacity:0;transition:opacity .25s}
.rplay svg{width:18px;height:18px;fill:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.rcard:hover .rplay{opacity:1}
/* ── активный трек в on-demand плеере: яркая подсветка карточки ── */
.rcard.od-current{border-color:color-mix(in srgb,var(--c2) 70%,transparent);
box-shadow:0 0 0 1px color-mix(in srgb,var(--c2) 45%,transparent),0 10px 30px -8px color-mix(in srgb,var(--c2) 42%,transparent)}
.rcard.od-current .rplay{opacity:1;background:color-mix(in srgb,var(--c2) 30%,rgba(5,6,15,.5))}
.rmeta{min-width:0;flex:1}
.rmeta b{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ── SEO: rcard/top-card — настоящие ссылки на /track/<token> (без подчёркивания и чужих цветов) ── */
a.rcard,a.top-card{text-decoration:none;color:inherit}
a.rcard:focus-visible,a.top-card:focus-visible{outline:2px solid var(--c1);outline-offset:3px}