/*
 * ==========================================================
 * CSS (V11 - Híbrido: Layout 100vh + Média Desktop/Mobile)
 * Ficheiro: assets/css/frontend.css
 * ==========================================================
 */

/* * 1. O WRAPPER EXTERNO (V10)
 * Garante que o widget tem o tamanho da tela (graças ao Passo 0)
 */
.ezg-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Requer que a Secção Pai tenha Min-Height: 100vh */
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* * 2. A GRELHA (V10)
 * Força a grelha a ter 100vh e 100vw e divide-a
 * em 3 linhas de altura igual.
 */
.ezg-grid {
    position: relative;
    display: grid;
    z-index: 1;

    height: 100vh;
    width: 100vw;

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    
    /* 'gap' é controlado pelo Elementor */
}

/* * 3. A CÉLULA (V10)
 * Apenas um contentor relativo para o seu filho.
 */
.ezg-grid-item {
    position: relative;
    overflow: hidden;
}

/* * 4. O WRAPPER DE MÉDIA (V11)
 * Este é o 'div' que preenche 100% da célula da grelha.
 * Ele conterá a nossa lógica de background-image e vídeo.
 */
.ezg-grid-item-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Para o border-radius funcionar */
}

/* * 5. OS FILHOS DE MÉDIA (V11 - A TUA LÓGICA ORIGINAL)
 * As divs de desktop e mobile que preenchem o wrapper.
 */
.ezg-desktop-media,
.ezg-mobile-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Para o caso de 'Imagem' (background-image) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* * 6. VÍDEOS (V11)
 * O CSS 'object-fit' para os vídeos.
 */
.ezg-desktop-media video,
.ezg-mobile-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* * 7. O OVERLAY (V10)
 */
.ezg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* * 8. O "SWITCH" DE MEDIA QUERY (V11 - CRÍTICO)
 * Isto é o que faz o mobile funcionar.
 */
.ezg-mobile-media {
    display: none;
}
.ezg-desktop-media {
    display: block;
}

@media (max-width: 767px) {
    .ezg-mobile-media {
        display: block;
    }
    .ezg-desktop-media {
        display: none;
    }
}


/*
 * ==========================================================
 * CSS (V12 - Estilos do Texto Central)
 * ==========================================================
 */
.ezg-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Podes ajustar esta largura */
    width: 90%;
    max-width: 800px; 
    
    /* Fica em cima do grid (z-index: 1) e atrás do overlay (z-index: 10) */
    z-index: 15;
    
    /* Impede que o texto bloqueie o rato */
    pointer-events: none;
    
    /* O JS vai animar isto. Começa invisível. */
    opacity: 0;
}

/* Opcional: Garante que o conteúdo de texto é clicável na edição */
.elementor-editor-active .ezg-text-container {
    pointer-events: auto;
}
.ezG-text-content {
    display: inline-block; /* Necessário para o inline-editing */
    width: 100%;
}