/**
 * TurboJet - Estilos para Caixa de Foto e Texto
 */
.tj-caixa-foto-texto-container {
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative; /* Necessário para z-index e posicionamento de filhos */
    z-index: 1;      /* Define um z-index baixo para o container principal */
    /* A direção do flex é definida por classes específicas de layout */
}

/* Layouts Horizontais */
.tj-caixa-foto-texto-container.layout-esquerda,
.tj-caixa-foto-texto-container.layout-direita {
    flex-direction: row;
}

.tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-imagem,
.tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-texto-conteudo,
.tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-imagem,
.tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-texto-conteudo {
    flex: 1 1 50%; /* Ocupam 50% da largura e podem crescer/encolher */
    box-sizing: border-box;
}

/* Layouts Verticais */
.tj-caixa-foto-texto-container.layout-topo,
.tj-caixa-foto-texto-container.layout-baixo {
    flex-direction: column;
}

.tj-caixa-foto-texto-container.layout-topo .tj-caixa-foto-imagem,
.tj-caixa-foto-texto-container.layout-topo .tj-caixa-foto-texto-conteudo,
.tj-caixa-foto-texto-container.layout-baixo .tj-caixa-foto-imagem,
.tj-caixa-foto-texto-container.layout-baixo .tj-caixa-foto-texto-conteudo {
    flex: initial; /* Reseta para: flex-grow: 0, flex-shrink: 1, flex-basis: auto */
    width: 100%;   /* Ocupa toda a largura do container pai (que está em coluna) */
    box-sizing: border-box;
}


.tj-caixa-foto-imagem {
    background-size: cover;
    background-position: center center;
    position: relative; /* Contexto para o overlay e para z-index dentro do container */
    z-index: 1;         /* Coloca a imagem (e seu overlay) na camada base dentro do container */
    min-height: 300px; /* Altura mínima padrão para a imagem */
}

.tj-caixa-foto-imagem-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Relativo ao .tj-caixa-foto-imagem, fica sobre o background-image */
}

.tj-caixa-foto-texto-conteudo {
    display: flex;
    flex-direction: column;
    position: relative; /* Necessário para este z-index ter efeito dentro do container */
    z-index: 2;         /* Coloca o conteúdo de texto acima da imagem dentro do container */
    /* justify-content é definido inline via shortcode para alinhamento vertical do conteúdo interno */
    /* padding, background-color, color são definidos inline via shortcode */
}

/* Ordem para layout com imagem à direita ou abaixo */
/* Se o container for .layout-direita (flex-direction: row), a imagem vai para a direita. */
.tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-imagem {
    order: 2;
}
.tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-texto-conteudo {
    order: 1;
}

/* Se o container for .layout-baixo (flex-direction: column), a imagem vai para baixo. */
.tj-caixa-foto-texto-container.layout-baixo .tj-caixa-foto-imagem {
    order: 2;
}
.tj-caixa-foto-texto-container.layout-baixo .tj-caixa-foto-texto-conteudo {
    order: 1;
}


/* Responsividade: Em telas menores, layouts horizontais se tornam verticais (imagem no topo por padrão) */
@media (max-width: 768px) {
    .tj-caixa-foto-texto-container.layout-esquerda,
    .tj-caixa-foto-texto-container.layout-direita {
        flex-direction: column; /* Força coluna em mobile para layouts originalmente horizontais */
    }

    /* Para os filhos de layouts que eram horizontais e agora são colunas no mobile */
    .tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-imagem,
    .tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-texto-conteudo,
    .tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-imagem,
    .tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-texto-conteudo {
        flex: initial; /* Reseta o flex: 1 1 50% */
        width: 100%;
        /* flex-basis: auto; já está em flex:initial */
    }

    /* Garante que a imagem venha primeiro no mobile para layouts originalmente horizontais */
    .tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-imagem,
    .tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-imagem {
        order: 1;
    }
    .tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-texto-conteudo,
    .tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-texto-conteudo {
        order: 2;
    }

    /* Se o layout já for 'baixo' (imagem abaixo do texto) no desktop, manter essa ordem no mobile */
    /* As regras de 'order' para .layout-baixo já definidas acima (fora da media query) devem ser suficientes,
       pois .layout-baixo já é flex-direction: column. */
    /* Se o layout for 'topo' no desktop, a ordem HTML (imagem, depois texto) já está correta para mobile. */


    .tj-caixa-foto-imagem {
        min-height: 250px; /* Altura ajustada para mobile */
    }

    /* Ajuste da direção do gradiente para mobile quando empilhado (ex: imagem sempre acima do texto) */
    /* Esta parte ainda é uma simplificação. Para um controle perfeito, seria necessário
       mais lógica no PHP ou classes CSS específicas. */
    .tj-caixa-foto-texto-container.layout-esquerda .tj-caixa-foto-imagem-overlay,
    .tj-caixa-foto-texto-container.layout-direita .tj-caixa-foto-imagem-overlay {
        /* Exemplo: se o texto sempre vem abaixo da imagem no mobile, o gradiente na imagem deve ser 'to bottom' */
        /* background: linear-gradient(to bottom, var(--cor-gradiente-solida) 0%, var(--cor-gradiente-transparente) var(--extensao-grad-css)) !important; */
        /* Para isso funcionar, precisaríamos passar as cores como variáveis CSS ou ter classes específicas. */
    }
}