/*
========================================
File: lyrics-library-responsive.css (Versão Completa)
========================================
*/

/* --- Page Header com Busca Integrada --- */
.page-header--library {
    padding: var(--spacing-10) 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-8);
}

.page-header--library .page-header__title {
    font-size: var(--fs-4xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.page-header--library .page-header__subtitle {
    max-width: 500px;
    margin: 0 auto var(--spacing-6);
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .page-header--library .page-header__title {
        font-size: var(--fs-5xl);
    }
}

/* O componente .search-form é reutilizado do CSS principal */


/* --- Barra de Filtros --- */
.library-filters {
    display: flex;
    justify-content: flex-end;
    /* Alinha à direita */
    margin-bottom: var(--spacing-6);
}

/* O componente .actions-bar__sort-select é reutilizado do CSS principal */


/* --- Container da Lista (com lógica de transformação) --- */
.lyrics-library-list {
    display: flex;
    /* Padrão: Lista Vertical (Mobile First) */
    flex-direction: column;
    gap: var(--spacing-4);
}


/* --- Item da Lista/Card (Estilo Base e Mobile) --- */
.song-card-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Capa, Info, Ações */
    gap: var(--spacing-4);
    align-items: center;
    background-color: var(--color-bg-content);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-lg);
    border: 1px solid transparent;
    transition: var(--transition-fast);
}

.song-card-list-item:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg-elevated);
    transform: translateY(-2px);
}

.song-card-list-item__artwork {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.song-card-list-item__info {
    overflow: hidden;
}

.song-card-list-item__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-list-item__meta {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-list-item__actions {
    display: flex;
    align-items: center;
}

.song-card-list-item__action-btn {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    transition: var(--transition-fast);
}

.song-card-list-item__action-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
}


/* --- Lógica de Transformação para Desktop --- */
@media (min-width: 768px) {
    /* md e acima */

    .lyrics-library-list {
        display: grid;
        /* Mudar para Grid */
        grid-template-columns: repeat(3, 1fr);
        /* Ex: 3 colunas */
        gap: var(--spacing-4);
    }

    .song-card-list-item {
        /* Resetar o estilo de lista e aplicar estilo de card vertical */
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        /* Resetar grid interno */
        align-items: flex-start;
        /* Alinhar texto à esquerda */
        text-align: left;
        padding: var(--spacing-4);
        width: 11.3rem;
    }

    .song-card-list-item:hover {
        /* Manter o hover, mas o transform pode ser ajustado se necessário */
        transform: translateY(-4px);
    }

    .song-card-list-item__artwork {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        /* Imagem quadrada */
        margin-bottom: var(--spacing-3);
    }

    .song-card-list-item__title {
        font-size: var(--fs-sm);
        width: 9.3rem;
        /* Ajustar tamanho da fonte para card */
    }

    .song-card-list-item__meta {
        font-size: var(--fs-sm);
    }

    .song-card-list-item__actions {
        /* Esconder o botão de ação no card para um visual mais limpo,
           a ação pode ser implícita no clique do card inteiro */
        display: none;
    }
}

@media (min-width: 1024px) {

    /* lg */
    .lyrics-library-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1280px) {

    /* xl */
    .lyrics-library-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* --- Paginação (Reutilizado) --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-12);
}

.pagination__btn,
.pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-bg-content);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}

.pagination__btn:hover,
.pagination__page:hover:not(.active) {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.pagination__page.active {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
    border-color: var(--color-primary);
}

.pagination__ellipsis {
    color: var(--color-text-tertiary);
}