/**
 * Ajustes de Responsividade
 * Mobile First approach (Overrides para telas menores quando base não for mobile-first)
 * ou Desktop-down adjustments.
 * [cite: 162, 886-892]
 */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .gma-container {
        padding: 0 20px;
    }
    
    /* Grid de 3 colunas vira 2 */
    .gma-grid--3, .gma-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Tipografia */
    :root {
        --gma-font-size-4xl: 2rem;
        --gma-font-size-3xl: 1.75rem;
    }

    /* Layout */
    .gma-grid,
    .gma-stats-grid,
    .gma-grid--2, 
    .gma-grid--3, 
    .gma-grid--4 {
        grid-template-columns: 1fr; /* Stack vertical */
        gap: var(--gma-space-md);
    }

    /* Welcome Banner */
    .gma-welcome-banner {
        flex-direction: column;
        text-align: center;
        gap: var(--gma-space-md);
    }

    /* Lesson View */
    .gma-lesson-header {
        text-align: center;
    }
    
    .gma-lesson-meta {
        justify-content: center;
    }

    /* Ferramentas */
    .gma-tuner-gauge {
        width: 100%;
        max-width: 280px;
    }

    /* Chat */
    .gma-chat-interface {
        height: 500px;
    }
    
    /* Botões Mobile */
    .gma-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Flex Helpers */
    .gma-flex--between {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .gma-stat-widget {
        padding: var(--gma-space-md);
    }
    
    .gma-stat-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .gma-stat-value {
        font-size: 1.5rem;
    }
}