{% load css_tags %}{% block_css 'enap_designsystem/blocks/sobre_linhas.css' %}
{% load static %}
{% block content %}
<style>
    :root {
        --primary: {{ value.cor_primaria }};
        {% if value.cor_secundaria %}--accent: {{ value.cor_secundaria }};{% else %}--accent: #ff5a5f;{% endif %}
        --primary-light: color-mix(in srgb, var(--primary) 70%, white);
        --primary-dark: color-mix(in srgb, var(--primary) 70%, black);
        --text: #192342;
        --text-light: #666a82;
        --bg: #f8f9ff;
        --white: #ffffff;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e1;
        --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.02);
        --shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.05);
        --radius-sm: 8px;
        --radius: 12px;
        --radius-lg: 20px;
        --radius-full: 9999px;
        --transition: all 0.3s ease;
    }

    .page-header {
        background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    }

    .page-title span {
        background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    }

    .page-subtitle {
        font-size: 1.2rem;
        color: var(--text-light);
        max-width: 800px;
        margin: 0 auto;
    }

    .section-icon {
        background-color: var(--primary);
        border-radius: var(--radius-sm);
        color: var(--white);
    }

    .section-title_title_sobre {
        color: var(--primary);
    }
    
    .content-card {
        background-color: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }
    
    .content-card p {
        color: var(--text);
        line-height: 1.6;
    }
    
    .content-card a {
        color: var(--primary);
        transition: var(--transition);
    }
    
    .content-card a:hover {
        color: var(--primary-dark);
    }
    
    .btn_sobre {
        background-color: var(--primary);
        color: var(--white);
        padding: 0.75rem 2rem;
        border-radius: var(--radius-full);
        font-weight: 500;
        transition: var(--transition);
    }
    
    btn_sobre:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
        text-decoration: none;
    }
</style>
<div class="page-header">
    <div class="container">
        <h1 class="page-title">{{ value.titulo }}</h1>
        <p class="page-subtitle">{{ value.subtitulo }}</p>
    </div>
</div>

<div class="container">    
    {% for secao in value.secoes %}
        <section>
            <div class="section-header_sobre">
                <div class="section-icon">
                    <i class="fa fa-{{ secao.icone_fa }}"></i>
                </div>
                <h2 class="section-title_title_sobre">{{ secao.titulo_secao }}</h2>
            </div>
            <div class="content-card">
                {{ secao.conteudo|safe }}
            </div>
        </section>
    {% empty %}
        <p>Nenhuma seção encontrada.</p>
    {% endfor %}

    {% if value.mostrar_botao_acao %}
    <div class="action-section">
        <a href="{{ value.link_botao }}" class="btn_sobre btn-large">
            {{ value.texto_botao }}
            <i class="fa-solid fa-circle-chevron-right"></i>
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}