/*
 * Archivo: custom-discography.css
 * Este CSS está diseñado para optimizar la sección de Discografía.
 * DEBE CARGARSE DESPUÉS DE TODOS LOS DEMÁS ARCHIVOS CSS.
 */

/* --- RESET GLOBAL PARA EVITAR SCROLL HORIZONTAL (ABSOLUTAMENTE CRÍTICO) --- */
html, body {
    overflow-x: hidden !important; /* ¡FUERZA la eliminación del scroll horizontal! */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --- Estilos base para la sección de discografía --- */
#discography.section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Asegura que el contenido no se desborde */
    padding-bottom: 80px !important; /* Un poco de padding abajo por si acaso */
}

.discography-links-container {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center !important; /* Centra los enlaces horizontalmente */
    align-items: center !important; /* Centra los enlaces verticalmente */
    width: 98% !important; /* Un poco de margen para prevenir scroll */
    max-width: 1800px !important; /* Aumentamos el max-width aún más para evitar encogimiento en grandes pantallas */
    margin: 0 auto !important;
    padding: 20px 10px !important; /* Padding horizontal del contenedor */
    box-sizing: border-box !important;
    gap: 20px 30px !important; /* Espacio predeterminado, se afina en media queries */
}

.discography-links-container a {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    min-width: 200px !important; /* ¡Aumento MUY SIGNIFICATIVO del min-width base para asegurar el texto! */
    padding: 12px 20px !important; /* Un padding interno más generoso */
    box-sizing: border-box !important;
    /* Aseguramos que el contenido del 'a' también evite el desbordamiento si el H1 falla */
    white-space: nowrap !important; /* Doble seguridad para que el 'a' no se rompa */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.discography-links-container h1 {
    font-size: 2.5vw !important; /* Un poco más grande el VW base, pero se limitará */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important; /* ¡FUERZA que el texto NO se rompa en varias líneas! */
    overflow: hidden !important; /* Oculta cualquier texto que se desborde */
    text-overflow: ellipsis !important; /* Añade puntos suspensivos si el texto se corta */
    text-align: center !important;
    /* Aquí irían tus estilos de tipografía específicos si no se heredan: */
    /* font-family: 'Tu Fuente', sans-serif !important; */
    /* font-weight: bold !important; */
    /* color: #FFFFFF !important; */
}

/* --- Media Queries para ajuste de fuente y layout --- */

/* 2560px - OK (el max-width del contenedor y el vw del h1 lo manejan) */

/* --- AJUSTES PARA 1440px (ELIMINAR SCROLL, LETRAS MÁS PEQUEÑAS, ESPACIO COMPACTO) --- */
@media only screen and (max-width: 1440px) {
    .discography-links-container {
        max-width: 1000px !important; /* Reducimos el max-width del contenedor drásticamente! */
        gap: 8px 15px !important; /* ¡Espacio vertical y horizontal MÁS COMPACTO! */
        padding: 10px 5px !important; /* Reducimos el padding del contenedor */
    }
    .discography-links-container a {
        min-width: 180px !important; /* Mantenemos min-width amplio para que el texto quepa */
        padding: 10px 15px !important;
    }
    .discography-links-container h1 {
        font-size: 22px !important; /* Fuente fija y más pequeña */
    }
}

/* --- AJUSTES PARA 1024px (ELIMINAR SCROLL, LETRAS MÁS PEQUEÑAS, ESPACIO MUY COMPACTO) --- */
@media only screen and (max-width: 1024px) {
    .discography-links-container {
        width: 100% !important;
        /* ¡Gap vertical y horizontal MUY COMPACTO para eliminar scroll! */
        gap: 5px 8px !important; /* <-- AJUSTE CRÍTICO AQUÍ */
        padding: 8px 0px !important; /* Eliminamos el padding horizontal del contenedor */
    }
    .discography-links-container a {
        min-width: 160px !important; /* ¡Mantenemos min-width amplio para asegurar el texto! */
        padding: 8px 12px !important;
    }
    .discography-links-container h1 {
        font-size: 18px !important; /* Fuente fija más pequeña */
    }
}


/* --- AJUSTES PARA 768px (CORRECCIÓN: TEXTO NO SE CORTA, ESPACIO ADECUADO) --- */
@media only screen and (max-width: 768px) {
    .discography-links-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 10px 0px !important;
        gap: 25px 5px !important;
        justify-content: center !important;
    }
    .discography-links-container a {
        flex: 1 1 auto !important;
        /* ¡AUMENTADO AÚN MÁS el min-width para "Amazon Music" y otros textos largos! */
        min-width: 150px !important; /* <-- AJUSTE CLAVE AQUÍ */
        max-width: 49% !important; /* Permite 2 por fila */
        padding: 8px 5px !important;
        margin: 2px !important;
    }
    .discography-links-container h1 {
        font-size: 16px !important; /* Tamaño fijo, legible y que quepa */
        line-height: 1 !important;
    }
}

/* --- AJUSTES PARA 425px (CORRECCIÓN: TEXTO NO SE CORTA, ESPACIO ADECUADO) --- */
@media only screen and (max-width: 425px) {
    .discography-links-container {
        padding: 5px 0px !important;
        gap: 20px 3px !important;
    }
    .discography-links-container a {
        /* ¡AUMENTADO para asegurar que "Amazon Music" y "Apple Music" quepan! */
        min-width: 130px !important; /* <-- AJUSTE CLAVE AQUÍ */
        max-width: 48% !important;
        padding: 6px 3px !important;
        margin: 1px !important;
    }
    .discography-links-container h1 {
        font-size: 14px !important; /* Tamaño fijo y legible */
    }
}

/* --- AJUSTES PARA 375px (CORRECCIÓN: TEXTO NO SE CORTA, ESPACIO ADECUADO) --- */
@media only screen and (max-width: 375px) {
    .discography-links-container {
        padding: 5px 0px !important;
        gap: 15px 2px !important;
    }
    .discography-links-container a {
        /* ¡AUMENTADO para asegurar que los textos largos quepan! */
        min-width: 120px !important; /* <-- AJUSTE CLAVE AQUÍ */
        max-width: 47% !important;
        padding: 5px 2px !important;
        margin: 1px !important;
    }
    .discography-links-container h1 {
        font-size: 13px !important; /* Tamaño fijo y legible */
    }
}

/* --- AJUSTES PARA 320px (CORRECCIÓN: TEXTO NO SE CORTA, ESPACIO ADECUADO) --- */
@media only screen and (max-width: 320px) {
    .discography-links-container {
        padding: 2px 0px !important;
        gap: 10px 2px !important;
    }
    .discography-links-container a {
        /* ¡AUMENTADO para asegurar que los textos quepan incluso aquí! */
        min-width: 110px !important; /* <-- AJUSTE CLAVE AQUÍ */
        max-width: 46% !important;
        padding: 4px 1px !important;
        margin: 0px !important;
    }
    .discography-links-container h1 {
        font-size: 12px !important; /* Tamaño fijo, legible incluso aquí */
    }
}