wagtail-enap-designsystem 1.2.1.173__tar.gz → 1.2.1.175__tar.gz

{wagtail_enap_designsystem-1.2.1.173/wagtail_enap_designsystem.egg-info → wagtail_enap_designsystem-1.2.1.175}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: wagtail-enap-designsystem
-Version: 1.2.1.173
+Version: 1.2.1.175
 Summary: Módulo de componentes utilizado nos portais ENAP, desenvolvido com Wagtail + CodeRedCMS
 Author: Renan Campos
 Author-email: renan.oliveira@enap.gov.br

{wagtail_enap_designsystem-1.2.1.173 → wagtail_enap_designsystem-1.2.1.175}/enap_designsystem/blocks/html_blocks.py

@@ -732,6 +732,16 @@ class APISuapCourseBlock(StructBlock):
         label="Posição do Título",
         required=False
     )
+    estilo_cards = blocks.ChoiceBlock(
+        choices=[
+            ('eventos', 'Eventos'),
+            ('cursos', 'Cursos'),
+        ],
+        default='eventos',
+        help_text="Escolha o tipo dos cards",
+        label="Tipo dos cards",
+        required=True
+    )
     description = CharBlock(required=False, label="Descrição")
     cor_description = CharBlock(required=False, label="Cor da Descrição em HEX (opcional)")
     button = CharBlock(required=False, label="Titulo do Botão")
@@ -741,7 +751,7 @@ class APISuapCourseBlock(StructBlock):
         label="URL da API",
         help_text="URL da API para buscar os cursos/eventos"
     )
-    num_items = blocks.IntegerBlock(default=3, label=_("Máximo de cursos apresentados"))
+    num_items = blocks.IntegerBlock(default=3, label=_("Máximo de cards apresentados"))
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context)
@@ -3972,9 +3982,9 @@ class TextoImagemBlock(blocks.StructBlock):
     
     estilo_botao = blocks.ChoiceBlock(
         choices=[
-            ('primary', 'Primário (destaque)'),
-            ('secondary', 'Secundário'),
-            ('terciary', 'Terciário'),
+            ('primary', 'Tipo primário'),
+            ('secondary', 'Tipo secundário'),
+            ('terciary', 'Tipo terciário'),
         ],
         default='primario',
         required=False,
@@ -3982,6 +3992,18 @@ class TextoImagemBlock(blocks.StructBlock):
         verbose_name="Estilo do botão"
     )
     
+    tamanho_botao = blocks.ChoiceBlock(
+		choices=[
+			('small', 'Pequeno'),
+			('medium', 'Médio'),
+			('large', 'Grande'),
+			('extra-large', 'Extra grande'),
+		],
+		default='large',
+		help_text="Escolha o tamanho do botão",
+		label="Tamanho"
+	)
+    
     # Coluna de imagem
     imagem = ImageChooserBlock(
         required=True,

{wagtail_enap_designsystem-1.2.1.173 → wagtail_enap_designsystem-1.2.1.175}/enap_designsystem/models.py

@@ -2957,6 +2957,7 @@ class Template001(Page):
 
 class HolofotePage(Page):
 	"""Template Holofote"""
+	subpage_types = ['HolofotePage']
 
 	template = "enap_designsystem/pages/template_holofote.html"
 

{wagtail_enap_designsystem-1.2.1.173 → wagtail_enap_designsystem-1.2.1.175}/enap_designsystem/static/enap_designsystem/blocks/btn.css

@@ -12,10 +12,9 @@ a{
     justify-content: center;
     gap: 8px;
     text-decoration: none;
+    margin: 20px 0;
 }
 
-
-
 .content-richtext a {
     display: inline-flex;
     align-items: center;
@@ -41,30 +40,32 @@ a{
     color: white;
 }
 
-
-
-
 .small{
-    height: 32px;
+    height: 32px !important;
     border-radius: 32px;
 }
 
 .medium{
-    height: 40px;
+    height: 40px !important;
     border-radius: 32px;
 }
 
 .large{
-    height: 48px;
+    height: 48px !important;
     border-radius: 32px;
 }
 
-.small:disabled, .medium:disabled, .large:disabled{
+.extra-large{
+    height: 60px !important;
+    border-radius: 32px;
+}
+
+.small:disabled, .medium:disabled, .large:disabled, .extra-large:disabled{
     background-color: #C8D1E0;
 }
 
 .primary{
-    padding: 8px 14px;
+    padding: 0 16px;
     background-color: #007D7A;
     border: none;
     color: white;
@@ -84,10 +85,6 @@ a{
     color: white;
 }
 
-.btn:hover{
-    
-}
-
 .btn:active{
     color: #025257;
 }
@@ -98,7 +95,7 @@ a{
 }
 
 .secondary{
-    padding: 8px 14px;
+    padding: 12px 16px;
     border: 1px solid #007D7A;
     background: white;
     color: #007D7A; 
@@ -118,7 +115,7 @@ a{
     border: none;
     background: transparent;
     color: #007D7A;
-    padding: 0 10px;
+    padding: 12px 16px;
 }
 
 .terciary:hover {
@@ -128,6 +125,6 @@ a{
   }
 
 .terciary:active {
-color: #025257;
-background-color: transparent;
+    color: #025257;
+    background-color: transparent;
 }

{wagtail_enap_designsystem-1.2.1.173 → wagtail_enap_designsystem-1.2.1.175}/enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html

@@ -1,8 +1,8 @@
 <!-- enap_designsystem/blocks/suap/suap_courses_block.html -->
 {% load wagtailcore_tags wagtailimages_tags %}
 {% load static %}
-
-<section class="container suap-courses-section">
+<div style="width:100%;display: flex;justify-content: center;">
+<section style="width: fit-content" class="section-curso-cards-suap">
     <div class="suap-wrapper-texts">
         {% if bloco_suap.title %}
             <h2 style="color: {{value.cor_title}}" class="suap-h2-title">{{ bloco_suap.title }}</h2>
@@ -14,7 +14,8 @@
     </div>
     
     {% if cursos_suap %}
-        <div class="suap-wrapper">
+        {% if value.estilo_cards == "eventos" %}
+        <div class="container suap-courses-section">
             <div class="suap-courses-carousel-container" id="suap-courses-carousel-container">
                 <div class="suap-courses-carousel-items" id="suap-courses-carousel-items">
                     {% for curso in cursos_suap %}
@@ -84,7 +85,7 @@
                                         <h3 class="suap-courses-title">{{ curso.descricao }}</h3>
                                     {% endif %}
                                     {% if curso.breve_descricao %}
-                                        <p class="card-text">{{ curso.breve_descricao|truncatewords:10 }}</p>
+                                        <p class="suap-card-text">{{ curso.breve_descricao|truncatewords:10 }}</p>
                                     {% endif %}
                                     
                                     <!-- Status de inscrições -->
@@ -113,14 +114,54 @@
                     </div>
                     {% endfor %}
                 </div>
-                <button class="suap-courses-carousel-control suap-courses-carousel-control-prev">
-                    <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconleft.svg' %}" alt="Passar pro lado esquerdo">
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-prev" style="left: 0px;">
+                    <span class="visually-hidden">Rolar para esquerda</span>
+                    <span class="material-symbols-outlined setas seta-esquerda">chevron_left</span>
+                </button>
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-next" style="right: 0px;">
+                    <span class="visually-hidden">Rolar para direita</span>
+                    <span class="material-symbols-outlined setas seta-direita">chevron_right</span>
+                </button>
+            </div>
+        </div>
+        {% elif value.estilo_cards == "cursos" %}
+        <div class="wrapper-carousel-container01">
+            <div class="carousel-container01">
+                <div class="carousel-items01" id="cursos-suap-carousel">
+                    {% for curso in cursos_suap %}
+                    <a href="{{curso.url}}" class="btn1">
+                    <div class="carousel-item-wrapper-suap">
+                        <div class="carousel-item-curso-suap">
+                            <div class="image-curso">
+                                    <h3 title="{{ curso.titulo }}">
+                                            <img class="img-fluid" src="{% static 'enap_designsystem/blocks/suap/default_2.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" width="236" height="140" loading="lazy">
+                                    </h3>
+                            </div>
+                            <div class="content-curso">    
+                                <div class="card-body">
+                                <div class="tag">Curso</div>
+                                <h3 class="h3-card" style=" display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ">{{ curso.descricao }}</h3>
+                                <p class="card-text-text" style=" display: -webkit-box; color: #434A54; font-size: 16px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ">{{ curso.breve_descricao }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </a>
+                    {% endfor %}
+                </div>
+                
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-prev">
+                    <span class="visually-hidden">Rolar para esquerda</span>
+                    <span class="material-symbols-outlined setas seta-esquerda">chevron_left</span>
                 </button>
-                <button class="suap-courses-carousel-control suap-courses-carousel-control-next">
-                    <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconrig.svg' %}" alt="Passar pro lado direito">
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-next">
+                    <span class="visually-hidden">Rolar para direita</span>
+                    <span class="material-symbols-outlined setas seta-direita">chevron_right</span>
                 </button>
+                
             </div>
         </div>
+        {% endif %}
         {% if bloco_suap.url_button %}
         <a class="suap-btn-todos" href="{{ bloco_suap.url_button }}">{{ bloco_suap.button }}</a>
         {% endif %}
@@ -133,8 +174,11 @@
         {% endif %}
     {% endif %}
 </section>
-
+</div>
 <style>
+    .carousel-item-curso-suap{
+        background-color: #FFFFFF;
+    }
     .suap-course-inscricoes {
         margin: 8px 0;
         font-size: 14px;
@@ -378,6 +422,10 @@
         font-style: italic;
     }
     
+    .carousel-control-curso-suap {
+        display: block;
+    }
+    
     /* Estilos responsivos */
     @media (max-width: 992px) {
         .suap-courses-section {
@@ -468,215 +516,171 @@
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
-        // Selecionar elementos do DOM
-        const container = document.getElementById('suap-courses-carousel-container');
-        const carouselItems = document.getElementById('suap-courses-carousel-items');
-        const prevBtn = document.querySelector('.suap-courses-carousel-control-prev');
-        const nextBtn = document.querySelector('.suap-courses-carousel-control-next');
-        const items = carouselItems.querySelectorAll('.suap-courses-carousel-item');
-        
-        // Variáveis de controle
-        let currentIndex = 0;
-        let startX, moveX, initialPosition;
-        let isDragging = false;
-        
-        // Dimensões fixas dos itens - IMPORTANTE para alinhamento correto
-        const itemWidth = 364; // Largura do item
-        const itemGap = 25;    // Espaçamento entre itens
-        const itemTotalWidth = itemWidth + itemGap; // Largura total de cada item + gap
-        
-        // Adicionar padding ao contêiner para garantir alinhamento correto dos cards
-        container.style.paddingLeft = '0px';
-        container.style.paddingRight = '0px';
-        
-        // Verifica se é dispositivo móvel
-        function isMobile() {
-            return window.innerWidth <= 768;
-        }
-        
-        // Determina quantos itens são visíveis na viewport atual
-        function getVisibleItems() {
-            const containerWidth = container.offsetWidth;
-            return Math.max(1, Math.floor(containerWidth / itemTotalWidth));
-        }
-        
-        // Calcula o índice máximo possível
-        function getMaxIndex() {
-            return Math.max(0, items.length - getVisibleItems());
-        }
-        
-        // Define quantos itens devem ser rolados de cada vez
-        function getScrollAmount() {
-            return isMobile() ? 1 : 3; // 1 no mobile, 3 no desktop
-        }
-        
-        // Exibe o slide no índice especificado com alinhamento perfeito
-        function showSlide(index) {
-            // Garante que o índice esteja dentro dos limites válidos
-            const maxIndex = getMaxIndex();
-            currentIndex = Math.max(0, Math.min(index, maxIndex));
-            
-            // Calcula o offset preciso baseado no índice atual
-            const offset = Math.round(currentIndex * itemTotalWidth);
-            
-            // Aplica a transformação com valor inteiro para evitar problemas de subpixel
-            carouselItems.style.transform = `translateX(-${offset}px)`;
-            
-            // Atualiza a visibilidade dos botões de navegação
-            updateButtons(maxIndex);
-        }
-        
-        // Atualiza a visibilidade dos botões de navegação
-        function updateButtons(maxIndex) {
-            // Primeiro slide: esconde botão anterior
-            if (currentIndex <= 0) {
-                prevBtn.style.display = 'none';
-                nextBtn.style.display = items.length > getVisibleItems() ? 'block' : 'none';
-            } 
-            // Último slide: esconde botão próximo
-            else if (currentIndex >= maxIndex) {
-                prevBtn.style.display = 'block';
-                nextBtn.style.display = 'none';
-            } 
-            // Slides intermediários: mostra ambos os botões
-            else {
-                prevBtn.style.display = 'block';
-                nextBtn.style.display = 'block';
+        // Função genérica para inicializar um carrossel
+        function initCarousel({
+            containerSelector,
+            itemsSelector,
+            prevBtnSelector,
+            nextBtnSelector,
+            itemWidth,
+            itemGap,
+            useItemsAsContainer = false // NOVO: permite usar o próprio items como container
+        }) {
+            const container = document.querySelector(containerSelector);
+            const carouselItems = container ? container.querySelector(itemsSelector) : null;
+            const prevBtn = container ? container.querySelector(prevBtnSelector) : null;
+            const nextBtn = container ? container.querySelector(nextBtnSelector) : null;
+            if (!container || !carouselItems || !prevBtn || !nextBtn) return;
+            const items = carouselItems.querySelectorAll(':scope > *');
+            let currentIndex = 0;
+            let startX, moveX, initialPosition;
+            let isDragging = false;
+            const itemTotalWidth = itemWidth + itemGap;
+
+            function isMobile() {
+                return window.innerWidth <= 768;
             }
-        }
-        
-        // Configurar eventos de botões de navegação
-        prevBtn.addEventListener('click', () => {
-            // Número de itens a retroceder depende do dispositivo
-            const amount = getScrollAmount();
-            const step = Math.min(amount, currentIndex);
-            showSlide(currentIndex - step);
-        });
-        
-        nextBtn.addEventListener('click', () => {
-            // Número de itens a avançar depende do dispositivo
-            const amount = getScrollAmount();
-            const maxIndex = getMaxIndex();
-            const step = Math.min(amount, maxIndex - currentIndex);
-            showSlide(currentIndex + step);
-        });
-        
-        // Eventos de toque para mobile
-        carouselItems.addEventListener('touchstart', handleStart, { passive: true });
-        carouselItems.addEventListener('touchmove', handleMove, { passive: false });
-        carouselItems.addEventListener('touchend', handleEnd, { passive: true });
-        
-        // Eventos de mouse para desktop
-        carouselItems.addEventListener('mousedown', handleStart);
-        carouselItems.addEventListener('mousemove', handleMove);
-        carouselItems.addEventListener('mouseup', handleEnd);
-        carouselItems.addEventListener('mouseleave', handleEnd);
-        
-        // Inicia o arrasto do carousel
-        function handleStart(e) {
-            isDragging = true;
-            startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
-            initialPosition = currentIndex * itemTotalWidth;
-            
-            // Remove transição para resposta imediata
-            carouselItems.style.transition = 'none';
-        }
-        
-        // Processa o movimento durante o arrasto
-        function handleMove(e) {
-            if (!isDragging) return;
-            
-            moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-            const diff = moveX - startX;
-            
-            // Aplica o movimento com efeito elástico nos limites
-            const maxIndex = getMaxIndex();
-            
-            if (currentIndex === 0 && diff > 50) {
-                // Limite inicial com efeito elástico
-                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
-            } else if (currentIndex >= maxIndex && diff < -50) {
-                // Limite final com efeito elástico
-                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
-            } else {
-                // Movimento normal
-                carouselItems.style.transform = `translateX(${diff - initialPosition}px)`;
+            function getVisibleItems() {
+                // Use o próprio items como container se necessário
+                const base = useItemsAsContainer ? carouselItems : container;
+                const containerWidth = base.offsetWidth;
+                return Math.max(1, Math.floor(containerWidth / itemTotalWidth));
             }
-            
-            // Previne o scroll da página durante o arrasto horizontal
-            if (Math.abs(diff) > 10 && e.type === 'touchmove') {
-                e.preventDefault();
+            function getMaxIndex() {
+                return Math.max(0, items.length - getVisibleItems());
             }
-        }
-        
-        // Finaliza o arrasto do carousel
-        function handleEnd() {
-            if (!isDragging) return;
-            isDragging = false;
-            
-            // Restaura a transição suave
-            carouselItems.style.transition = 'transform 0.3s ease-in-out';
-            
-            // Determina se o movimento foi significativo para mudar o slide
-            const diff = moveX - startX;
-            const threshold = itemWidth / 4; // 25% da largura do item
-            
-            if (diff > threshold) {
-                // Swipe para direita (voltar)
+            function getScrollAmount() {
+                return isMobile() ? 1 : 3;
+            }
+            function showSlide(index) {
+                const maxIndex = getMaxIndex();
+                currentIndex = Math.max(0, Math.min(index, maxIndex));
+                const offset = Math.round(currentIndex * itemTotalWidth);
+                carouselItems.style.transform = `translateX(-${offset}px)`;
+                updateButtons(maxIndex);
+            }
+            function updateButtons(maxIndex) {
+                if (currentIndex <= 0) {
+                    prevBtn.style.display = 'none';
+                    nextBtn.style.display = items.length > getVisibleItems() ? 'block' : 'none';
+                } else if (currentIndex >= maxIndex) {
+                    prevBtn.style.display = 'block';
+                    nextBtn.style.display = 'none';
+                } else {
+                    prevBtn.style.display = 'block';
+                    nextBtn.style.display = 'block';
+                }
+            }
+            prevBtn.addEventListener('click', () => {
                 const amount = getScrollAmount();
                 const step = Math.min(amount, currentIndex);
                 showSlide(currentIndex - step);
-            } else if (diff < -threshold) {
-                // Swipe para esquerda (avançar)
+            });
+            nextBtn.addEventListener('click', () => {
                 const amount = getScrollAmount();
                 const maxIndex = getMaxIndex();
                 const step = Math.min(amount, maxIndex - currentIndex);
                 showSlide(currentIndex + step);
-            } else {
-                // Movimento pequeno, volta à posição atual
-                showSlide(currentIndex);
-            }
-        }
-        
-        // Previne cliques em links durante arrasto
-        const links = carouselItems.querySelectorAll('a');
-        links.forEach(link => {
-            link.addEventListener('click', function(e) {
-                if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
-                    e.preventDefault();
-                }
             });
-        });
-        
-        // Adapta o carousel quando a janela é redimensionada
-        window.addEventListener('resize', function() {
-            // Força uma pausa antes de recalcular para garantir medidas corretas
-            setTimeout(function() {
-                // Recalcula índices e posição
+            carouselItems.addEventListener('touchstart', handleStart, { passive: true });
+            carouselItems.addEventListener('touchmove', handleMove, { passive: false });
+            carouselItems.addEventListener('touchend', handleEnd, { passive: true });
+            carouselItems.addEventListener('mousedown', handleStart);
+            carouselItems.addEventListener('mousemove', handleMove);
+            carouselItems.addEventListener('mouseup', handleEnd);
+            carouselItems.addEventListener('mouseleave', handleEnd);
+
+            function handleStart(e) {
+                isDragging = true;
+                startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+                initialPosition = currentIndex * itemTotalWidth;
+                carouselItems.style.transition = 'none';
+            }
+            function handleMove(e) {
+                if (!isDragging) return;
+                moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+                const diff = moveX - startX;
                 const maxIndex = getMaxIndex();
-                if (currentIndex > maxIndex) {
-                    currentIndex = maxIndex;
+                if (currentIndex === 0 && diff > 50) {
+                    carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
+                } else if (currentIndex >= maxIndex && diff < -50) {
+                    carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
+                } else {
+                    carouselItems.style.transform = `translateX(${diff - initialPosition}px)`;
                 }
-                
-                // Restaura transição para animação suave
-                carouselItems.style.transition = 'transform 0.3s ease-in-out';
-                
-                // Atualiza a exibição
-                showSlide(currentIndex);
-            }, 100);
-        });
-        
-        // Aguardar que todas as imagens carreguem para inicializar corretamente
-        window.addEventListener('load', function() {
-            // Inicializa com um pequeno delay para garantir medidas corretas
-            setTimeout(function() {
-                // Certificar que os estilos estão aplicados antes de inicializar
+                if (Math.abs(diff) > 10 && e.type === 'touchmove') {
+                    e.preventDefault();
+                }
+            }
+            function handleEnd() {
+                if (!isDragging) return;
+                isDragging = false;
                 carouselItems.style.transition = 'transform 0.3s ease-in-out';
-                showSlide(0);
-            }, 100);
-        });
-        
-        // Inicializa o carousel (também será inicializado no evento load)
-        showSlide(0);
+                const diff = moveX - startX;
+                const threshold = itemWidth / 4;
+                if (diff > threshold) {
+                    const amount = getScrollAmount();
+                    const step = Math.min(amount, currentIndex);
+                    showSlide(currentIndex - step);
+                } else if (diff < -threshold) {
+                    const amount = getScrollAmount();
+                    const maxIndex = getMaxIndex();
+                    const step = Math.min(amount, maxIndex - currentIndex);
+                    showSlide(currentIndex + step);
+                } else {
+                    showSlide(currentIndex);
+                }
+            }
+            const links = carouselItems.querySelectorAll('a');
+            links.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
+                        e.preventDefault();
+                    }
+                });
+            });
+            window.addEventListener('resize', function() {
+                setTimeout(function() {
+                    const maxIndex = getMaxIndex();
+                    if (currentIndex > maxIndex) {
+                        currentIndex = maxIndex;
+                    }
+                    carouselItems.style.transition = 'transform 0.3s ease-in-out';
+                    showSlide(currentIndex);
+                }, 100);
+            });
+            window.addEventListener('load', function() {
+                setTimeout(function() {
+                    carouselItems.style.transition = 'transform 0.3s ease-in-out';
+                    showSlide(0);
+                }, 100);
+            });
+            showSlide(0);
+        }
+
+        // Inicializa carrossel de eventos (cards grandes)
+        if (document.getElementById('suap-courses-carousel-container')) {
+            initCarousel({
+                containerSelector: '#suap-courses-carousel-container',
+                itemsSelector: '#suap-courses-carousel-items',
+                prevBtnSelector: '.carousel-control-curso-suap-prev',
+                nextBtnSelector: '.carousel-control-curso-suap-next',
+                itemWidth: 364,
+                itemGap: 25
+            });
+        }
+
+        // Inicializa carrossel de cursos (cards pequenos) - usa items como container base
+        if (document.querySelector('.carousel-container01')) {
+            initCarousel({
+                containerSelector: '.carousel-container01',
+                itemsSelector: '.carousel-items01',
+                prevBtnSelector: '.carousel-control-curso-suap-prev',
+                nextBtnSelector: '.carousel-control-curso-suap-next',
+                itemWidth: 268,
+                itemGap: 25,
+                useItemsAsContainer: true // NOVO: corrige cálculo de largura
+            });
+        }
     });
 </script>

{wagtail_enap_designsystem-1.2.1.173 → wagtail_enap_designsystem-1.2.1.175}/enap_designsystem/templates/enap_designsystem/blocks/texto_imagem.html

@@ -13,7 +13,7 @@
             {% if value.incluir_botao and value.texto_botao %}
                 <div class="texto-imagem-block__botao-container">
                     <a href="{{ value.link_botao|default:'#' }}" 
-                       class="btn {% if value.estilo_botao == 'primary' %} primary {% elif value.estilo_botao == 'secondary' %}secondary {% elif value.estilo_botao == 'terciary' %}terciary {% endif %}"
+                       class="btn {{ value.estilo_botao }} {{ value.tamanho_botao }}"
                        {% if value.link_botao and value.link_botao|slice:':4' == 'http' %}
                            target="_blank" rel="noopener noreferrer"
                        {% endif %}>