{% load wagtailimages_tags %}
{% load wagtailcore_tags %}
{% if value.imagem_fundo %}
    {% image value.imagem_fundo original as bg_image %}
{% endif %}

<style>
    .secao-cards-container {
        max-width: 1142px;
        margin: 0 auto;
        padding: 60px 20px;
    }
    .secao-cards-titulo {
        text-align: center;
        padding: 0 0 40px 0;
        margin: 0;
    }
    .secao-cards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .secao-card-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
    }
    .secao-card-imagem {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .secao-card-img {
        width: 100%;
        height: 120px;
        object-fit: contain;
    }
    @media (max-width: 768px) {
        .secao-cards-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 480px) {
        .secao-cards-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<section class="secao-cards"
style="
{% if bg_image %}
background-image: url('{{ bg_image.url }}');
{% else %}
background-color: {{ value.cor_fundo }}; 
{% endif %}
{% if value.mostrar_linha %}
border-bottom: 16px solid {{ value.cor_linha }};
{% endif %}">
    <div class="secao-cards-container">

        {% if value.titulo %}
            <h2 class="secao-cards-titulo" style="color: {{ value.cor_titulo }};">
                {{ value.titulo }}
            </h2>
        {% endif %}

        {% if value.cards %}
            <div class="secao-cards-grid">
                {% for card_block in value.cards %}
                    {% if card_block.block_type == 'card' %}
                        {% with card=card_block.value %}
                            <div class="secao-card-item" style="background-color: {{ card.cor_fundo_card }};">
                                {% if card.imagem %}
                                    {% image card.imagem width-400 as card_img %}
                                    <div class="secao-card-imagem">
                                        <img src="{{ card_img.url }}" alt="{{ card.titulo_card }}" class="secao-card-img">
                                    </div>
                                {% endif %}

                                <div class="secao-card-corpo">
                                    {% if card.titulo_card %}
                                        <h3 class="secao-card-titulo" style="color: {{ card.cor_titulo_card }};">
                                            {{ card.titulo_card }}
                                        </h3>
                                    {% endif %}

                                    {% if card.texto %}
                                        <p class="secao-card-texto" style="color: {{ card.cor_texto }};">
                                            {{ card.texto }}
                                        </p>
                                    {% endif %}

                                    {% if card.link %}
                                        <a href="{{ card.link }}"
                                           class="secao-card-link"
                                           style="color: {{ card.cor_link }};"
                                           target="_blank">
                                            {{ card.texto_link|default:"Saiba mais" }}
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endwith %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

    </div>
</section>