/**
 * TurboJet - Estilos para Parallax Section
 */

/* Contêiner principal da seção parallax */
.tj-parallax-container {
    position: relative; /* Necessário para o posicionamento absoluto do overlay e do conteúdo */
    /* background-image, background-size, background-position são controlados pelo JavaScript
       para o efeito parallax, usando os atributos data-tj-image-src, etc. */
    /* A altura e largura são definidas inline pelo shortcode */
    overflow: hidden; /* Evita que conteúdo transborde de forma inesperada */
}

/* Camada de overlay para cor sólida ou degradê */
.tj-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Overlay fica acima da imagem de fundo, mas abaixo do conteúdo */
    /* A propriedade 'background' (cor sólida ou degradê) é aplicada inline pelo PHP */
    pointer-events: none; /* Permite cliques através do overlay no conteúdo abaixo, se houver */
}

/* Wrapper do conteúdo, usado para alinhamento flex */
.tj-parallax-content-wrapper {
    /* display: flex, align-items, justify-content, height, width, position, z-index
       são definidos inline pelo PHP para máximo controle via shortcode.
       Exemplo de como seria se fosse fixo no CSS:
        display: flex;
        align-items: center;  // Padrão vertical
        justify-content: center; // Padrão horizontal
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 2; // Conteúdo acima do overlay
    */
    color: #fff; /* Cor padrão do texto, pode ser sobrescrita pelo shortcode ('cor_texto') */
}

/* Bloco de conteúdo interno */
.tj-parallax-content {
    max-width: 1200px; /* Largura máxima para o conteúdo, ajuste conforme necessário */
    /* margin: 0 auto;  // A centralização horizontal do bloco é feita pelo justify-content do wrapper se o texto não preencher */
                       /* Se o text-align for left/right, e o bloco de conteúdo for menor que o wrapper,
                          aqui poderia ter um margin para alinhar o bloco em si, ex: margin-left: auto; margin-right: auto;
                          Mas o justify-content no wrapper é mais direto para o bloco. */
    width: fit-content; /* Para que o bloco de conteúdo não ocupe 100% da largura se o texto for curto e alinhado à esquerda/direita */
    min-width: 10%; /* Garante uma largura mínima para visibilidade */
    /* padding é definido inline pelo shortcode */
    /* text-align é definido inline pelo shortcode */
    /* cor_texto é definida inline pelo shortcode */
    box-sizing: border-box;
}

/* Estilos para o conteúdo dentro do parallax, se necessário (Exemplos) */
.tj-parallax-content h1,
.tj-parallax-content h2,
.tj-parallax-content h3,
.tj-parallax-content p {
    /* Exemplo: adicionar sombra ao texto para melhor legibilidade sobre fundos variados,
       especialmente se o usuário não definir uma cor de texto ou overlay. */
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.4); */
}