.home-genre-sections { width: min(100%,var(--yz-max)); margin: 3rem auto 4rem; padding-inline: clamp(16px,2.3vw,42px); }
.home-genre-section + .home-genre-section { margin-top: 42px; }
.home-genre-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.home-genre-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.home-genre-title-row h2 { position: relative; margin: 0; padding-left: 17px; color: #fff; font-size: clamp(1.1rem,1.5vw,1.4rem); letter-spacing: -.03em; }
.home-genre-title-row h2::before { position: absolute; inset: 2px auto 2px 0; width: 6px; border-radius: 8px; background: var(--yz-purple); content: ''; }
.home-genre-title-row > a { color: #b7b7c4; font-size: .82rem; text-decoration: none; }
.home-genre-title-row > a:hover { color: #fff; }
.home-genre-heading p { margin: 8px 0 0; color: var(--yz-muted); font-size: .9rem; }
.home-genre-controls { display: flex; flex: 0 0 auto; gap: 8px; }
.home-genre-controls button { width: 42px; height: 42px; border: 1px solid var(--yz-border); border-radius: 50%; background: #08080a; color: #ddd; font-size: 1.5rem; cursor: pointer; }
.home-genre-controls button:disabled { opacity: .35; cursor: default; }
.home-genre-rail { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-genre-rail::-webkit-scrollbar { display: none; }
.home-genre-card { position: relative; display: block; flex: 0 0 clamp(260px,26vw,480px); min-width: 0; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--yz-border); border-radius: 14px; background: #151519; color: #fff; scroll-snap-align: start; text-decoration: none; }
.home-genre-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s,filter .3s; }
.home-genre-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.18) 40%,rgba(0,0,0,.88)); }
.home-genre-brand { position: absolute; inset: 18% 12% 25%; display: grid; place-items: center; text-align: center; }
.home-genre-title-fallback { color: #fff; font-size: clamp(1.15rem,1.9vw,1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-shadow: 0 3px 15px #000; }
.home-genre-logo { display: block; width: 100%; height: 100%; max-height: 115px; object-fit: contain; opacity: 0; filter: drop-shadow(0 3px 9px #000); }
.home-genre-card.has-title-logo .home-genre-title-fallback { display: none; }
.home-genre-card.has-title-logo .home-genre-logo { opacity: 1; }
.home-genre-card h3 { position: absolute; right: 15px; bottom: 14px; left: 15px; overflow: hidden; margin: 0; color: #fff; font-size: .84rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.home-genre-hover-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #0a0a0b; transform: translate(-50%,-50%); opacity: 0; }
.home-genre-card:hover .home-genre-backdrop, .home-genre-card:focus-visible .home-genre-backdrop { transform: scale(1.04); filter: brightness(.75); }
.home-genre-card:hover .home-genre-brand, .home-genre-card:focus-visible .home-genre-brand { opacity: 0; }
.home-genre-card:hover .home-genre-hover-play, .home-genre-card:focus-visible .home-genre-hover-play { opacity: 1; }
.home-genre-sections :is(a,button):focus-visible { outline: 2px solid var(--yz-purple); outline-offset: 3px; }
@media (max-width: 600px) { .home-genre-sections { margin-block: 36px; } .home-genre-heading { gap: 10px; } .home-genre-title-row { gap: 9px; } .home-genre-title-row > a { font-size: .72rem; } .home-genre-heading p { max-width: 245px; font-size: .78rem; } .home-genre-controls { display: none; } .home-genre-card { flex-basis: min(82vw,330px); } }
@media (prefers-reduced-motion: reduce) { .home-genre-backdrop { transition: none; } }