/* ════════════════════════════════════════════════════════
   ANDER — Musica
   ════════════════════════════════════════════════════════ */

.disco { padding: 104px 0 0; }

.disco-list { border-top: 1px solid var(--color-border); }

.disco-row {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 190px 150px 96px 28px;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-mid);
    transition: color 240ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.disco-row:hover,
.disco-row:focus-visible {
    color: var(--color-text-hi);
    transform: translateX(10px);
}

.disco-row__cover {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: var(--color-surface);
}

.disco-row__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter 480ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.disco-row:hover .disco-row__cover img,
.disco-row:focus-visible .disco-row__cover img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.06);
}

.disco-row__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1;
    color: var(--color-text-hi);
    letter-spacing: 0.01em;
}

.disco-row__label,
.disco-row__cat,
.disco-row__bpm {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.disco-row__label { color: var(--color-text-mid); }
.disco-row__cat,
.disco-row__bpm { color: var(--color-text-lo); }

.disco-row__go {
    display: inline-flex;
    color: var(--color-text-lo);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 260ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.disco-row:hover .disco-row__go,
.disco-row:focus-visible .disco-row__go {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--color-accent);
}


/* ── In studio ─────────────────────────────────────────── */

.producer { padding: 120px 0 0; }

.producer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 72px;
}

.labels {
    border-top: 1px solid var(--color-border);
    padding-top: 22px;
}

.labels__label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-lo);
    margin-bottom: 18px;
}

.labels__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.labels__list li {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    color: var(--color-text-hi);
    letter-spacing: 0.04em;
}


/* ── Dove ascoltare ────────────────────────────────────── */

.listen { padding: 120px 0 112px; }

.listen-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}

.listen-link {
    background: var(--color-bg);
    padding: 40px 28px 34px;
    display: block;
    transition: background 260ms ease;
}

.listen-link:hover { background: var(--color-surface); }

.listen-link__name {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 36px);
    color: var(--color-text-hi);
    line-height: 1;
}

.listen-link__meta {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-lo);
    margin-top: 14px;
}


/* ── Mobile ────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .disco-row {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "cover title go"
            "cover meta  go";
        row-gap: 8px;
        column-gap: 18px;
        align-items: center;
    }

    .disco-row__cover { grid-area: cover; width: 56px; height: 56px; }
    .disco-row__title { grid-area: title; align-self: end; }
    .disco-row__label { grid-area: meta; align-self: start; }
    .disco-row__go { grid-area: go; opacity: 1; transform: none; }
    .disco-row__cat,
    .disco-row__bpm { display: none; }

    .disco-row:hover { transform: none; }

    .producer__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .listen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .disco { padding-top: 64px; }
    .producer { padding-top: 80px; }
    .listen { padding: 80px 0 72px; }
    .listen-link { padding: 28px 20px 24px; }
}