/* Music hub */

.tm-family-music #tm-main {
    /* The dark hero region used to be a hard gradient stop across the whole
       viewport. It is now an inset rounded panel (masthead + billboard), so the
       page itself just carries the paper background. */
    background: var(--tm-refresh-bg);
}

.tm-music-page-head {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: end;
    gap: 48px;
    margin: 0;
    /* Full-bleed dark backdrop; the inner column still lands on the shared
       1280px content column so the headline aligns with everything below. */
    padding: 86px max(24px, calc((100% - 1280px) / 2)) 42px;
    border-radius: 0;
    background: #09090c;
    color: #fff;
}

.tm-music-page-kicker {
    grid-column: 1 / -1;
    margin-bottom: -28px;
    color: var(--tm-refresh-yellow);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.tm-music-page-head h1 {
    margin: 0;
    color: #fff;
    font-family: 'Graphik Headings', 'Graphik', system-ui, sans-serif;
    font-size: clamp(3.75rem, 9.4vw, 8.45rem);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .78;
}

.tm-music-page-head p {
    max-width: 460px;
    margin: 0 0 2px;
    color: #aaa7b0;
    font-size: 1rem;
    line-height: 1.55;
}

.tm-family-music .tm-billboard-hero {
    width: 100%;
    margin: 0;
    padding: 12px max(24px, calc((100% - 1280px) / 2)) 64px;
    border: 0;
    border-radius: 0;
    background: #09090c;
}

.tm-family-music .tm-billboard-inner {
    max-width: 1280px;
    grid-template-columns: 220px minmax(0, 1fr) 290px;
    gap: 16px;
    border: 0;
}

.tm-family-music .tm-bb-left,
.tm-family-music .tm-bb-center,
.tm-family-music .tm-bb-right {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--tm-radius-card) !important;
    background: #141419;
}

.tm-family-music .tm-bb-center {
    border-radius: var(--tm-radius-banner) !important;
}

.tm-family-music .tm-bb-left,
.tm-family-music .tm-bb-center {
    border-right-color: rgba(255, 255, 255, .1);
}

.tm-family-music .tm-bb-side-link,
.tm-family-music .tm-bb-trending-item {
    border-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.tm-family-music .tm-bb-side-link {
    padding: 14px;
}

.tm-family-music .tm-bb-side-img,
.tm-family-music .tm-bb-trending-img {
    border-radius: var(--tm-radius-control) !important;
    object-position: center 24%;
}

.tm-family-music .tm-bb-side-cat,
.tm-family-music .tm-bb-side-author,
.tm-family-music .tm-bb-trending-date {
    color: #8f8c95;
}

.tm-family-music .tm-bb-side-title,
.tm-family-music .tm-bb-trending-title {
    color: #f7f4ef;
}

.tm-family-music .tm-bb-center-img {
    aspect-ratio: 4 / 3;
    object-position: center 24%;
}

.tm-family-music .tm-bb-center-body {
    padding: 24px 26px 28px;
}

.tm-family-music .tm-bb-center-cat {
    border-radius: var(--tm-radius-pill) !important;
    background: var(--tm-refresh-red-dark);
}

.tm-family-music .tm-bb-center-title {
    color: #fff;
    font-size: clamp(1.55rem, 2.82vw, 2.63rem);
    letter-spacing: -.045em;
}

.tm-family-music .tm-bb-center-author {
    color: #96939c;
}

.tm-family-music .tm-bb-trending-hdr {
    border-color: rgba(255, 255, 255, .1);
    color: var(--tm-refresh-yellow);
}

.tm-family-music .tm-bb-trending-num {
    color: rgba(255, 255, 255, .15);
}

.tm-family-music .tm-music-genre-bar {
    position: sticky;
    top: 68px;
    margin-top: 20px;
    z-index: 55;
    border-color: rgba(255, 255, 255, .1);
    background: rgba(13, 13, 17, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tm-family-music .tm-music-genre-inner {
    max-width: 1328px;
    margin: 0 auto;
    gap: 4px;
    padding: 6px 24px;
}

.tm-family-music .tm-music-genre-btn {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid transparent !important;
    border-radius: var(--tm-radius-pill) !important;
    color: #97949d;
}

.tm-family-music .tm-music-genre-btn.active {
    border-color: rgba(255, 219, 1, .42) !important;
    background: rgba(255, 219, 1, .12);
    color: #fff;
}

.tm-family-music #tm-main > .max-w-7xl {
    max-width: 1328px !important;
    padding: 88px 24px 100px !important;
}

.tm-family-music .tm-music-content {
    position: relative;
    z-index: 0;
    background: var(--tm-refresh-bg);
    color: var(--tm-refresh-ink);
    isolation: isolate;
}

.tm-family-music .tm-music-content::before {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 50%;
    width: 100vw;
    background: var(--tm-refresh-bg);
    content: '';
    transform: translateX(-50%);
}

.tm-family-music .tm-music-shdr {
    min-height: 50px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-color: var(--tm-refresh-line);
}

.tm-family-music .tm-music-shdr-accent {
    width: 9px;
    height: 9px;
    border-radius: 50% !important;
    background: var(--tm-refresh-red-dark);
}

.tm-family-music .tm-music-shdr-title {
    margin: 0;
    color: var(--tm-refresh-ink);
    font-size: clamp(.73rem, 1.18vw, 1.08rem);
    font-weight: 700;
    /* Display tracking at display sizes only — halved, this now sets at ~17px. */
    letter-spacing: -.02em;
    line-height: 1.15;
    text-transform: none;
}

.tm-family-music .tm-music-shdr-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid var(--tm-refresh-line);
    border-radius: var(--tm-radius-control) !important;
    color: var(--tm-refresh-ink);
}

.tm-family-music .tm-music-shdr-link:hover {
    border-color: var(--tm-refresh-red-dark);
    background: var(--tm-refresh-red-dark);
    color: #fff;
    text-decoration: none;
}

.tm-family-music .tm-mv-grid {
    gap: 18px;
}

.tm-family-music .tm-mv-card {
    overflow: hidden;
    border-color: var(--tm-refresh-line);
    border-radius: var(--tm-radius-card) !important;
    background: var(--tm-refresh-paper);
    box-shadow: 0 12px 34px rgba(22, 20, 18, .055);
}

.tm-family-music .tm-mv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 54px rgba(22, 20, 18, .11);
}

.tm-family-music .tm-mv-card-play-circle {
    border-radius: 50% !important;
    background: var(--tm-refresh-yellow);
}

.tm-family-music .tm-mv-card-body {
    padding: 16px 17px 18px;
}

.tm-family-music .tm-mv-card-cat,
.tm-family-music .tm-mn-cat {
    color: var(--tm-refresh-red-dark);
}

.tm-family-music .tm-mv-card-title,
.tm-family-music .tm-mn-title {
    color: var(--tm-refresh-ink);
    font-size: .92rem;
    letter-spacing: -.02em;
}

.tm-family-music .tm-mn-item {
    gap: 18px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: var(--tm-radius-card) !important;
}

.tm-family-music .tm-mn-item:hover {
    border-color: var(--tm-refresh-line);
    background: var(--tm-refresh-paper);
}

.tm-family-music .tm-mn-thumb {
    width: 150px;
    height: 96px;
    border-radius: var(--tm-radius-control) !important;
    object-position: center 24%;
}

/* Spotlight and the "more" list are one surface, so the corner belongs to the
   wrapper that holds both. Rounding them separately pinched the seam where the
   two blocks meet; this keeps the radius on the outer edges only, and still
   works when the list is empty and hidden. */
.tm-family-music .tm-music-highlight {
    overflow: hidden;
    border-radius: var(--tm-radius-card) !important;
    background: #111115 !important;
}

.tm-family-music .tm-music-spotlight,
.tm-family-music .tm-music-more-list {
    border-radius: 0 !important;
    background: transparent !important;
}

.tm-family-music .tm-music-spotlight-label {
    display: inline-flex;
    margin: 16px 16px 0;
    border-radius: var(--tm-radius-pill) !important;
    background: var(--tm-refresh-yellow);
    color: #090909;
}

.tm-family-music .tm-music-spotlight-body {
    padding: 22px;
}

.tm-family-music .tm-music-spotlight-title {
    font-size: 1.2rem;
    letter-spacing: -.025em;
}

.tm-family-music .tm-music-more-item {
    border-color: rgba(255, 255, 255, .08);
}

.tm-family-music .tm-music-more-dot,
.tm-family-music .tm-chart-dot {
    border-radius: 50% !important;
}

.tm-family-music aside > [x-data="tmMusicCharts()"] {
    padding: 18px;
    border: 1px solid var(--tm-refresh-line);
    border-radius: var(--tm-radius-card) !important;
    background: var(--tm-refresh-paper);
}

.tm-family-music .tm-chart-entry {
    min-height: 56px;
    padding: 8px;
    border-color: var(--tm-refresh-line);
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-music .tm-chart-entry[role="button"]:hover {
    background: #efebe4;
}

.tm-family-music .tm-chart-rank,
.tm-family-music .tm-chart-thumb,
.tm-family-music .tm-chart-nav-btn {
    border-radius: var(--tm-radius-control) !important;
}

.tm-family-music .tm-chart-rank.top3 {
    background: var(--tm-refresh-yellow);
    color: #090909;
}

.tm-family-music .tm-chart-nav-btn {
    width: 34px;
    height: 34px;
}

.tm-family-music .tm-chart-dot {
    width: 8px;
    height: 8px;
}

.tm-family-music .tm-chart-dot.active {
    background: var(--tm-refresh-red-dark);
}

.tm-family-music [x-data^="tmAdSlot"] {
    overflow: hidden;
    border-radius: var(--tm-radius-banner) !important;
}

.tm-family-music [x-data^="tmAdSlot"] a,
.tm-family-music [x-data^="tmAdSlot"] img {
    overflow: hidden;
    border-radius: var(--tm-radius-banner) !important;
}

.tm-family-music .tm-load-more-btn {
    min-height: 44px;
    border-radius: var(--tm-radius-control) !important;
}

@media (max-width: 1024px) {
    .tm-family-music .tm-billboard-inner {
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr);
    }
}

@media (max-width: 900px) {
    .tm-music-page-head {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 74px;
    }

    .tm-music-page-kicker {
        margin-bottom: -10px;
    }

    .tm-family-music .tm-music-genre-bar {
        top: 62px;
    }
}

@media (max-width: 640px) {
    .tm-music-page-head,
    .tm-family-music .tm-billboard-hero {
        width: 100%;
    }

    .tm-music-page-head {
        padding: 66px 16px 34px;
    }

    .tm-music-page-head h1 {
        font-size: clamp(3.75rem, 23.5vw, 5.82rem);
    }

    .tm-family-music .tm-billboard-hero {
        padding: 8px 16px 48px;
    }

    .tm-family-music .tm-billboard-inner {
        grid-template-columns: 1fr;
    }

    .tm-family-music .tm-bb-center-img {
        aspect-ratio: 4 / 3;
    }

    .tm-family-music .tm-music-genre-inner {
        padding: 0 8px;
    }

    .tm-family-music #tm-main > .max-w-7xl {
        padding: 62px 16px 78px !important;
    }

    .tm-family-music .tm-mv-grid {
        grid-template-columns: 1fr;
    }

    .tm-family-music .tm-mn-thumb {
        width: 112px;
        height: 78px;
    }
}