/* ============================================ */
/*             MY MUSIC - style.css             */
/* ============================================ */

/* --- Base --- */
@import url('base/_reset.css');
@import url('base/_variables.css');
@import url('base/_typography.css');

/* --- Layout --- */
@import url('layout/_header.css');
@import url('layout/_footer.css');
@import url('layout/_sections.css'); /* Estilos gerais das seções e container */

/* --- Components --- */
@import url('components/_buttons.css');
@import url('components/_cards.css');   /* Para os selection cards */
@import url('components/_loader.css');
@import url('components/_embed.css');   /* Para o container do Spotify Embed */

/* --- Utilities (se houver) --- */
/* @import url('utils/_helpers.css'); */

/* --- Responsiveness --- */
/* Media queries podem ficar aqui ou em arquivos separados importados no final */
@media (max-width: 768px) {
    /* Ajustes gerais para tablets */
    :root {
        --spacing-unit: 7px;
    }
    .selection-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

@media (max-width: 480px) {
    /* Ajustes gerais para mobile */
    :root {
        --spacing-unit: 6px;
    }
    .selection-grid {
        grid-template-columns: repeat(2, 1fr); /* Força 2 colunas */
    }
    .button-group {
        justify-content: space-around;
    }
    .site-header__container, .site-footer__container {
       flex-direction: column;
       text-align: center;
       gap: calc(var(--spacing-unit) * 1.5);
    }
}