{% load wagtailcore_tags wagtailimages_tags %}

{% if value.tipo_fundo == 'imagem' and value.imagem_fundo %}
    {% image value.imagem_fundo original as bg_img %}
    <div class="estatisticas-section" style="background-image: url('{{ bg_img.url }}'); background-size: cover; background-position: center; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_line }};{% endif %} padding: 60px 0; width: 100%;">
{% else %}
    <div class="estatisticas-section" style="background-color: {{ value.cor_fundo }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_line }};{% endif %} padding: 60px 0; width: 100%;">
{% endif %}
    <div class="container">
        
        <div class="estatisticas-container">
            {% for estatistica in value.estatisticas %}
                <div class="estatistica-item text-center" style="flex: 1; min-width: 150px; margin: 20px;">
                    <div class="numero" style="color: {{ value.cor_titulo }}; font-size: 3rem; font-weight: 700; line-height: 1.2;">
                        {{ estatistica.value.numero }}
                    </div>
                    <div class="descricao" style="color: {{ value.cor_titulo }}; font-size: 1.2rem; margin-top: 10px;">
                        {{ estatistica.value.descricao }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

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

    @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;
    }
</style>