/* ==========================================================================
   BeatLatin — QHD / pantallas grandes
   Fase 1: ancho fluido del contenido (.bl-page-content + módulos alineados)
   Fase 2: escala de tablas (carátulas, tipografía, alto de fila)
   Fuente de verdad: --bl-content-max / --bl-art-size / --bl-table-* (style.css)
   ========================================================================== */

/*
 * Full HD (1920×1080) y laptops: valores base — sin cambio.
 * QHD (2560×1440) y superiores: las tablas escalan y el gutter crece.
 * Ancho SIEMPRE fluido (2026-07-16): el contenido llena la pantalla
 * en 2K/4K con gutters de respiro, igual que Apple Music.
 */

@media (min-width: 2560px) {
    :root {
        /* --- Fase 1: gutter (base 12px; QHD un poco más de aire) --- */
        --bl-content-gutter: 20px;

        /* --- Fase 2: carátulas + tipografía de tablas --- */
        --bl-art-size: 58px;

        --bl-table-title-size: 14px;
        --bl-table-title-lh: 20px;
        --bl-table-artist-size: 14px;
        --bl-table-artist-lh: 18px;
        --bl-table-cell-size: 14px;
        --bl-table-cell-lh: 20px;
        --bl-table-th-size: 12px;
        --bl-table-th-lh: 15px;
    }

    /* ---------- Audio / Video — alto de fila + padding ---------- */
    .remix-grid-wrapper .remix-table th {
        height: 54px !important;
        padding: 0 14px !important;
    }

    .remix-grid-wrapper .remix-table td {
        height: 88px !important;
        padding: 18px 14px !important;
    }

    /* ---------- Catálogo DJ ---------- */
    .dj-container #dj-remix-table th {
        height: 56px !important;
        padding: 17px 14px !important;
    }

    .dj-container #dj-remix-table td {
        height: 84px !important;
        padding: 21px 14px !important;
    }

    /* ---------- Single remix — versiones relacionadas ---------- */
    .Related-version-table #dj-remix-table th {
        padding: 17px 14px !important;
    }

    .Related-version-table #dj-remix-table td {
        padding: 21px 14px !important;
    }
}

@media (min-width: 3440px) {
    :root {
        /* --- Fase 1: ancho fluido — gutter más amplio en ultrawide --- */
        --bl-content-gutter: 24px;

        /* --- Fase 2: carátulas + tipografía de tablas --- */
        --bl-art-size: 64px;

        --bl-table-title-size: 15px;
        --bl-table-title-lh: 21px;
        --bl-table-artist-size: 15px;
        --bl-table-artist-lh: 19px;
        --bl-table-cell-size: 15px;
        --bl-table-cell-lh: 21px;
        --bl-table-th-size: 13px;
        --bl-table-th-lh: 16px;
    }

    .remix-grid-wrapper .remix-table th {
        height: 58px !important;
        padding: 0 16px !important;
    }

    .remix-grid-wrapper .remix-table td {
        height: 94px !important;
        padding: 20px 16px !important;
    }

    .dj-container #dj-remix-table th {
        height: 60px !important;
        padding: 19px 16px !important;
    }

    .dj-container #dj-remix-table td {
        height: 90px !important;
        padding: 23px 16px !important;
    }

    .Related-version-table #dj-remix-table th {
        padding: 19px 16px !important;
    }

    .Related-version-table #dj-remix-table td {
        padding: 23px 16px !important;
    }
}