/* ===========================================
   MANSUL BUDGET CTA
   =========================================== */

.mansul-budget-cta {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.mansul-budget-cta__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* ===========================================
   TÍTULO
   =========================================== */

.mansul-budget-cta__title-wrapper {
    order: 2; /* Desktop: fica no meio */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mansul-budget-cta__title {
    margin: 0;
}

/* ===========================================
   IMAGEM PRINCIPAL (HOMENS)
   =========================================== */

.mansul-budget-cta__main-image {
    flex: 0 0 auto; /* Não cresce nem encolhe automaticamente */
    order: 1; /* Desktop: primeira (esquerda) */
    position: relative;
}

/* Imagem Desktop: Visível em landscape e desktop */
.mansul-budget-cta__main-image--desktop {
    display: block;
}

/* Imagem Mobile: Oculta por padrão */
.mansul-budget-cta__main-image--mobile {
    display: none;
}

.mansul-budget-cta__main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Efeitos de Fade */
.mansul-budget-cta__main-image.fade-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--fade-width, 30%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--section-bg, rgba(0, 61, 130, 1)) 100%);
    pointer-events: none;
    z-index: 1;
}

.mansul-budget-cta__main-image.fade-left::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fade-width, 30%);
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, var(--section-bg, rgba(0, 61, 130, 1)) 100%);
    pointer-events: none;
    z-index: 1;
}

.mansul-budget-cta__main-image.fade-both::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, var(--section-bg, rgba(0, 61, 130, 1)) 0%, rgba(0, 0, 0, 0) var(--fade-width, 30%)),
        linear-gradient(to left, var(--section-bg, rgba(0, 61, 130, 1)) 0%, rgba(0, 0, 0, 0) var(--fade-width, 30%));
    pointer-events: none;
    z-index: 1;
}

/* ===========================================
   TEXTO E BOTÃO
   =========================================== */

.mansul-budget-cta__text-content {
    flex: 0 0 auto; /* Não cresce nem encolhe automaticamente */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    order: 3; /* Desktop: terceiro (direita) */
    position: relative; /* Necessário para z-index funcionar */
    z-index: 100; /* Fica acima da mangueira (z-index: 10) */
}

.mansul-budget-cta__description {
    margin: 0;
}

.mansul-budget-cta__description br {
    display: block;
    content: "";
    margin-top: 0.5em;
}

/* ===========================================
   BOTÃO
   =========================================== */

.mansul-budget-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    z-index: 999 !important; /* MÁXIMO - Garante que hover funcione SEMPRE */
    pointer-events: auto !important; /* Garante clicabilidade */
}

.mansul-budget-cta__button:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

/* ===========================================
   IMAGEM SOBREPOSTA (MANGUEIRA)
   =========================================== */

.mansul-budget-cta__overlay-image {
    position: absolute;
    z-index: 10;
}

.mansul-budget-cta__overlay-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================================
   RESPONSIVO - TABLET
   =========================================== */

@media (max-width: 1024px) {
    .mansul-budget-cta__content {
        gap: 30px;
    }
    
    /* Mangueira - largura controlável via Elementor */
}

/* ===========================================
   RESPONSIVO - MOBILE E TABLET PORTRAIT
   Ordem: Imagem Mobile > Título > Texto > Botão > Mangueira
   =========================================== */

@media (max-width: 768px) and (orientation: portrait), 
       (max-width: 1024px) and (orientation: portrait) {
    /* Troca de Imagens */
    .mansul-budget-cta__main-image--desktop {
        display: none !important; /* Oculta imagem desktop */
    }
    
    .mansul-budget-cta__main-image--mobile {
        display: block !important; /* Mostra imagem mobile */
    }
}

@media (max-width: 768px) {
    .mansul-budget-cta__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }
    
    /* Ordem 1: Imagem Principal (Mobile) */
    .mansul-budget-cta__main-image {
        order: 1;
    }
    
    /* Ordem 2: Título */
    .mansul-budget-cta__title-wrapper {
        order: 2;
        margin-left: 0 !important; /* Remove margem negativa no mobile */
    }
    
    /* Ordem 3: Texto e Botão */
    .mansul-budget-cta__text-content {
        order: 3;
        align-items: center;
    }
    
    /* Ordem 4: Mangueira */
    .mansul-budget-cta__overlay-image {
        order: 4;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto;
        z-index: 1; /* Abaixo do botão */
    }
    
    /* Botão: Garantir hover funcional */
    .mansul-budget-cta__button {
        position: relative;
        z-index: 999 !important; /* MÁXIMO - Bem acima de tudo para hover funcionar */
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .mansul-budget-cta__description,
    .mansul-budget-cta__button {
        position: relative;
        z-index: 999;
    }
}

/* Tablet Portrait específico */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .mansul-budget-cta__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    
    .mansul-budget-cta__main-image {
        order: 1;
    }
    
    .mansul-budget-cta__title-wrapper {
        order: 2;
        margin-left: 0 !important; /* Remove margem negativa no tablet portrait */
    }
    
    .mansul-budget-cta__text-content {
        order: 3;
        align-items: center;
    }
    
    .mansul-budget-cta__overlay-image {
        order: 4;
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto;
        z-index: 1;
    }
    
    .mansul-budget-cta__button {
        position: relative;
        z-index: 999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* ===========================================
   RESPONSIVO - MOBILE PEQUENO
   =========================================== */

@media (max-width: 480px) {
    .mansul-budget-cta__content {
        gap: 20px;
    }
    
    /* Larguras removidas - controladas via Elementor */
    
    .mansul-budget-cta__button {
        z-index: 999 !important;
        cursor: pointer !important;
    }
}