{% load wagtailimages_tags %}
{% block stylecss %} 
{% endblock %}
<style>
    .apresentacao-titulo p{
        color: {{ value.cor_titulo }};
    }
    
    .apresentacao-conteudo p{
        color: {{ value.cor_titulo }};
    }
    </style>
<section class="secao-apresentacao" style="background-color: {{ value.cor_fundo }};">
    <div class="secao-apresentacao-container">
        <div class="secao-apresentacao-grid {% if value.posicao_imagem == 'esquerda' %}grid-imagem-esquerda{% endif %}">
            <!-- Conteúdo de Texto -->
            <div class="secao-apresentacao-content">
                {% if value.titulo %}
                    <h1 class="apresentacao-titulo" style="color: {{ value.cor_titulo }};">
                        {{ value.titulo }}
                    </h1>
                {% endif %}
                
                {% if value.subtitulo %}
                    <h2 class="apresentacao-subtitulo" style="color: {{ value.cor_subtitulo }};">
                        {{ value.subtitulo }}
                    </h2>
                {% endif %}
                
            </div>
            
            <!-- Imagem Circular -->
            <div class="secao-apresentacao-imagem">
                {% if value.imagem_circular %}
                    {% image value.imagem_circular width-400 as circular_img %}
                    <div class="imagem-circular-container">
                        <img src="{{ circular_img.url }}" 
                             alt="{{ value.alt_imagem }}"
                             class="imagem-circular">
                    </div>
                {% endif %}
            </div>
        </div>

        {% if value.conteudo %}
                    <div class="apresentacao-conteudo" style="color: {{ value.cor_texto }};">
                        {{ value.conteudo }}
                    </div>
                {% endif %}
    </div>
</section>