{% load wagtailcore_tags %}

<div class="estatisticas-section" style="background-color: {{ value.cor_fundo }}; border-bottom: 16px solid {{ value.cor_line }}; padding: 60px 0; width: 100%;">
    <div class="container">
        <h2 class="secao-cabecalho text-center font-bold mb-8"
            style="color: {{ value.cor_titulo }};">
            {{ value.titulo }}
        </h2>
        
        <div class="estatisticas-container {{ value.tipo_grid_numeros|default:'numeros-grid-4' }}">
            {% for lista_numeros in value.lista_numeros %}
                <div class="estatistica-item text-center" style="flex: 1; min-width: 150px; margin: 8px; background-color:{{ lista_numeros.cor_card }};">
                    <div class="numero" style="color: {{ lista_numeros.cor_numero }}; font-size: 40px; font-weight: 500; line-height: 1.2;">
                        {{ lista_numeros.numero }}
                    </div>
                    <div class="descricao" style="color: {{ lista_numeros.cor_descricao }}; font-size: 16px; font-weight: 600; margin-top: 30px;">
                        {{ lista_numeros.descricao }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Adicionar estilos específicos para responsividade -->
<style>
    .estatisticas-container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        margin-top: 70px;
    }

    @media (max-width: 768px) {
        .estatisticas-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .estatistica-item {
            margin: 30px 0;
        }
        
        .estatistica-divisor {
            display: none !important;
        }
        
        .numero {
            font-size: 3.5rem !important;
        }
        
        .descricao {
            font-size: 1.25rem !important;
        }
    }
    
    @media (min-width: 769px) and (max-width: 992px) {
        .estatistica-item {
            min-width: 200px;
            margin: 15px;
        }
        
        .numero {
            font-size: 3rem !important;
        }
    }
    
    .estatistica-item {
        position: relative;
        border-radius: 16px;
        padding: 56px 32px;
    }
</style>