/**
 * Mansul Two Column Section - Estilos CORRIGIDOS COM CONTROLES RESPONSIVOS
 * Responsivo: Desktop > Tablet > Mobile
 * Fonte: Nunito Sans
 * LINHA DECORATIVA COM EXTENSÕES FUNCIONANDO
 * NOVO: Compatível com controles responsivos de largura da imagem
 */

/* ============================================
   ESTILOS BASE
   ============================================ */

/* Prevenir overflow horizontal */
body .elementor-widget-mansul_two_column {
    overflow-x: hidden !important;
}

/* Garantir que nada ultrapasse a viewport no mobile */
@media (max-width: 768px) {
    body .elementor-widget-mansul_two_column {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    body .elementor-widget-mansul_two_column * {
        max-width: 100% !important;
    }
}

.mansul-two-column-section {
    width: 100%;
    padding: 80px 20px;
    background-color: #f5f5f5;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: hidden;
}

.mansul-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.mansul-row {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* ============================================
   POSIÇÃO DA IMAGEM - INVERSÃO DE COLUNAS
   Funciona apenas em Desktop e Tablet Landscape
   ============================================ */

/* Padrão: Imagem à direita */
.image-position-right .mansul-row {
    flex-direction: row;
}

/* Imagem à esquerda: Inverte as colunas */
.image-position-left .mansul-row {
    flex-direction: row-reverse;
}

/* Desktop e Tablet Landscape: Posição responsiva ATIVA */
@media (min-width: 769px) {
    .image-position-right .mansul-row {
        flex-direction: row !important;
    }

    .image-position-left .mansul-row {
        flex-direction: row-reverse !important;
    }
}

/* ============================================
   COLUNA ESQUERDA - TEXTO
   ============================================ */

.mansul-col-left {
    flex: 1;
    min-width: 300px;
}

.mansul-enunciado {
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.mansul-titulo {
    font-size: 72px;
    font-weight: 800;
    color: #005BAA;
    line-height: 1.1;
    margin: 0 0 30px 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mansul-descricao {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.mansul-botao {
    display: inline-block;
    padding: 15px 40px;
    background-color: #00a8e8;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mansul-botao:hover {
    background-color: #005BAA;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 91, 170, 0.3);
}

/* ============================================
   COLUNA DIREITA - IMAGEM (ATUALIZADO PARA RESPONSIVO)
   ============================================ */

.mansul-col-right {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* IMPORTANTE: Wrapper da imagem agora é controlado pelo Elementor */
.mansul-imagem-wrapper {
    /* max-width é controlado pelos controles responsivos do Elementor */
    /* NÃO definir max-width aqui - deixar o Elementor controlar */
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 100%; /* Permite que o controle do Elementor funcione */
}

/* Imagem - preparada para controles responsivos do Elementor */
.mansul-imagem-wrapper img {
    /* width e max-width são controlados pelo Elementor */
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    /* border-radius é controlado pelo Elementor */
}

.mansul-imagem-wrapper img:hover {
    transform: scale(1.02);
}

/* ============================================
   LINHA DECORATIVA - ESTRUTURA BASE
   ============================================ */

.mansul-col-left {
    position: relative;
    overflow: visible;
}

.mansul-botao-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.mansul-botao-line {
    display: block;
    height: 2px;
    background-color: #cccccc;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
    transition: all 0.3s ease;
}

/* Quando a imagem está à ESQUERDA, espelha a linha para ir para a esquerda */
.image-position-left .mansul-botao-line {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 20px;
}

/* Oculta a linha quando largura for 0 */
.mansul-botao-line[style*="width: 0px"],
.mansul-botao-line[style*="width: 0vw"],
.mansul-botao-line[style*="width: 0%"],
.mansul-botao-line[style*="width:0px"],
.mansul-botao-line[style*="width:0vw"],
.mansul-botao-line[style*="width:0%"] {
    display: none !important;
}

/* ============================================
   LINHA DECORATIVA - OPÇÕES DE EXTENSÃO
   ESTAS CLASSES SÃO APLICADAS AUTOMATICAMENTE
   ============================================ */

/* Opção: Custom (largura personalizada) */
.mansul-line-extend-custom .mansul-botao-line {
    /* A largura será controlada por inline style ou selector do Elementor */
    /* Aceita px, %, vw */
}

/* Opção: Até o fim da coluna - para dentro da coluna de texto */
.mansul-line-extend-column .mansul-botao-line {
    width: 400px !important;
}

/* Opção: Até o fim da seção - alcança o final da imagem */
.mansul-line-extend-section .mansul-botao-line {
    width: 1200px !important;
}

/* Opção: Até o fim da página - vai até a borda da viewport */
.mansul-line-extend-page .mansul-botao-line {
    width: 100vw !important;
}

/* ============================================
   DESKTOP GRANDE (acima de 1200px)
   ============================================ */

@media (min-width: 1200px) {
    .mansul-two-column-section {
        padding: 100px 40px;
    }
    
    .mansul-row {
        gap: 80px;
    }
    
    .mansul-enunciado {
        font-size: 26px;
    }
    
    .mansul-titulo {
        font-size: 76px;
    }
    
    .mansul-descricao {
        font-size: 19px;
    }

    /* Linha estende mais em telas grandes */
    .mansul-line-extend-column .mansul-botao-line {
        width: 450px !important;
    }
    
    .mansul-line-extend-section .mansul-botao-line {
        width: 1400px !important;
    }
    
    .mansul-line-extend-page .mansul-botao-line {
        width: 100vw !important;
    }
}

/* ============================================
   TABLET LANDSCAPE - Mantém posição responsiva
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .mansul-two-column-section {
        padding: 60px 30px;
    }
    
    .mansul-row {
        gap: 40px;
    }
    
    .mansul-enunciado {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .mansul-titulo {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .mansul-descricao {
        font-size: 16px;
        margin-bottom: 25px;
    }
    
    .mansul-botao {
        padding: 12px 30px;
        font-size: 14px;
    }

    /* Ajuste das linhas no tablet landscape */
    .mansul-line-extend-column .mansul-botao-line {
        width: 350px !important;
    }

    .mansul-line-extend-section .mansul-botao-line {
        width: 900px !important;
    }

    .mansul-line-extend-page .mansul-botao-line {
        width: 100vw !important;
    }
}

/* ============================================
   TABLET PORTRAIT - Força ordem fixa (coluna)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .mansul-two-column-section {
        padding: 60px 30px;
    }
    
    /* IMPORTANTE: No portrait, sempre usar ordem em coluna */
    .mansul-row {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .mansul-col-left,
    .mansul-col-right {
        width: 100% !important;
        min-width: 100% !important;
        text-align: center;
    }
    
    .mansul-enunciado {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .mansul-titulo {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .mansul-descricao {
        font-size: 16px;
        margin-bottom: 25px;
    }
    
    .mansul-botao {
        padding: 12px 30px;
        font-size: 14px;
    }

    /* Imagem centralizada no portrait */
    .mansul-imagem-wrapper {
        display: flex;
        justify-content: center;
    }

    /* Ajuste das linhas no tablet portrait */
    .mansul-line-extend-column .mansul-botao-line,
    .mansul-line-extend-section .mansul-botao-line,
    .mansul-line-extend-page .mansul-botao-line,
    .mansul-line-extend-custom .mansul-botao-line {
        width: 100% !important;
    }

    /* Linha abaixo do botão no portrait */
    .mansul-botao-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .mansul-botao-line {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ocultar linha no tablet portrait quando switch ativo */
    .hide-line-tablet .mansul-botao-line {
        display: none !important;
    }
}

/* ============================================
   MOBILE (até 768px)
   ORDEM FIXA: Texto em cima, imagem embaixo
   ============================================ */

@media (max-width: 768px) {
    /* Forçar box-sizing em tudo */
    .mansul-two-column-section,
    .mansul-two-column-section *,
    .mansul-container,
    .mansul-container * {
        box-sizing: border-box !important;
    }
    
    .mansul-two-column-section {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .mansul-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    
    /* IMPORTANTE: No mobile, sempre usar ordem em coluna, ignorando image_position */
    .mansul-row {
        flex-direction: column !important;
        gap: 30px;
        overflow-x: hidden !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mansul-col-left,
    .mansul-col-right {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        overflow-x: hidden !important;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mansul-enunciado {
        font-size: 18px;
        margin-bottom: 10px;
        width: 100%;
    }
    
    .mansul-titulo {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .mansul-descricao {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .mansul-botao {
        padding: 12px 25px;
        font-size: 14px;
        display: inline-block;
        width: auto;
        max-width: 90%;
    }
    
    /* Controle de imagens no mobile - ATUALIZADO */
    .mansul-imagem-wrapper {
        /* No mobile, o Elementor já controla a largura através dos controles responsivos */
        /* Apenas garantimos que não quebre o layout */
        overflow: hidden !important;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .mansul-imagem-wrapper img {
        /* Deixar o Elementor controlar largura/altura através dos controles responsivos */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Mobile: Linha abaixo do botão */
    .mansul-botao-wrapper {
        flex-direction: column;
        align-items: center;
        width: 100%;
        display: inline-flex;
    }
    
    .mansul-botao-line {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        margin-top: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Todas as linhas ocupam 100% no mobile */
    .mansul-line-extend-column .mansul-botao-line,
    .mansul-line-extend-section .mansul-botao-line,
    .mansul-line-extend-page .mansul-botao-line,
    .mansul-line-extend-custom .mansul-botao-line {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ocultar linha no mobile quando switch ativo */
    .hide-line-mobile .mansul-botao-line {
        display: none !important;
    }
}

/* ============================================
   MOBILE EXTRA PEQUENO (até 480px)
   ============================================ */

@media (max-width: 480px) {
    .mansul-two-column-section {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .mansul-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    
    .mansul-row {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mansul-col-left,
    .mansul-col-right {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mansul-enunciado {
        font-size: 16px;
    }
    
    .mansul-titulo {
        font-size: 28px;
        line-height: 1.2;
    }
    
    .mansul-descricao {
        font-size: 14px;
    }
    
    .mansul-botao {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ============================================
   ANIMAÇÕES OPCIONAIS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mansul-two-column-section.animate .mansul-col-left,
.mansul-two-column-section.animate .mansul-col-right {
    animation: fadeInUp 0.8s ease-out;
}

/* ============================================
   VARIAÇÕES DE COR (Opcionais)
   ============================================ */

.mansul-two-column-section.bg-white {
    background-color: #ffffff;
}

.mansul-two-column-section.bg-blue {
    background-color: #f0f7ff;
}

.mansul-two-column-section.bg-gray {
    background-color: #f5f5f5;
}

/* ============================================
   CONTROLE DE LARGURA DO CONTAINER
   ============================================ */

/* Layout Full Width */
.mansul-layout-full .mansul-container {
    max-width: 100% !important;
    padding: 0 40px;
}

.mansul-layout-full .mansul-col-right {
    flex: 1.2;
}

/* ============================================
   COMPATIBILIDADE COM CONTROLES DO ELEMENTOR
   IMPORTANTE: NÃO sobrescrever max-width aqui
   ============================================ */

/* Remover regras antigas que forçavam tamanhos */
.elementor-widget-mansul_two_column .mansul-imagem-wrapper {
    /* NÃO definir max-width - deixar o Elementor controlar */
    width: 100%;
}

.elementor-widget-mansul_two_column .mansul-col-right {
    flex: 1;
    /* NÃO definir min-width fixo - deixar responsivo */
}

/* ============================================
   AJUSTES PARA IMPRESSÃO
   ============================================ */

@media print {
    .mansul-two-column-section {
        padding: 20px;
        background-color: white;
    }
    
    .mansul-botao {
        display: none;
    }

    .mansul-botao-line {
        display: none;
    }
    
    .mansul-imagem-wrapper img {
        box-shadow: none;
    }
}

/* ============================================
   AJUSTES FINAIS E SUPORTE A VARIAÇÕES
   ============================================ */

/* Garantir que o wrapper não quebre o layout */
.mansul-botao-wrapper {
    overflow: visible;
}

/* Ajuste para garantir que a linha apareça corretamente */
.mansul-col-left {
    overflow: visible;
    position: relative;
}

/* Prevenir problemas de z-index */
.mansul-botao-line {
    z-index: 1;
}

.mansul-botao {
    position: relative;
    z-index: 2;
}

/* Modo escuro (opcional) */
@media (prefers-color-scheme: dark) {
    .mansul-two-column-section {
        background-color: #1a1a1a;
    }

    .mansul-enunciado {
        color: #e0e0e0;
    }

    .mansul-descricao {
        color: #cccccc;
    }
}

/* ============================================
   SUPORTE A OBJECT-FIT PARA ALTURAS DEFINIDAS
   ============================================ */

/* Quando uma altura específica é definida via controles do Elementor */
.mansul-imagem-wrapper img[style*="height"] {
    object-fit: cover;
    object-position: center;
}

/* ============================================
   GARANTIR RESPONSIVIDADE EM TODOS OS CASOS
   ============================================ */

/* Garantir que imagens sempre se adaptem ao container */
.mansul-imagem-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.mansul-imagem-wrapper img {
    max-width: 100%;
    height: auto;
}