/*
 * ==========================================================
 * CSS (V1.1) - Grid com Slideshow Hover
 * Ficheiro: assets/css/hover-grid.css
 * ==========================================================
 */

/* 1. O Wrapper Principal (o "Grid") */
.ezg-hover-grid-wrapper {
    display: flex;
    flex-wrap: nowrap; /* Impede que as colunas quebrem a linha no desktop */
    width: 100%;
}

/* 2. As Colunas */
.ezg-hover-grid-column {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Correção de bug do Flexbox */
    height: 100%; /* <-- ADICIONADO: Faz as colunas preencherem os 100vh */
}

/* No desktop, 50% de largura para cada */
.ezg-hover-grid-column.ezg-column-1,
.ezg-hover-grid-column.ezg-column-2 {
    flex: 1 1 50%;
}

/* 3. O Item Individual (Cada "Quarto") */
.ezg-grid-item {
    position: relative; /* Âncora para o conteúdo e fundo */
    overflow: hidden; /* O teu requisito: "continuar dentro do conteiner" */
    flex-grow: 1; /* Faz os itens preencherem a altura da coluna */
    display: flex; /* Garante que o item é um contentor flex */
}

/* 4. O Fundo (Imagens) */
.ezg-grid-item-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    /* Prepara o efeito "Grow" */
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* O "Grow" (JS vai adicionar a classe .is-hovered) */
.ezg-grid-item.is-hovered .ezg-grid-item-background {
    transform: scale(1.1); /* Efeito de Grow (10% de zoom) */
}

/* 5. O Slideshow (Imagens Individuais) */
.ezg-grid-item-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    
    /* Prepara o "Fade" (todas invisíveis por defeito) */
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

/* A primeira imagem (adicionada pelo PHP) ou a ativa (pelo JS) */
.ezg-grid-item-bg-slide.active {
    opacity: 1;
}

/* 6. O Overlay */
.ezg-grid-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: background 0.3s ease;
}


/* 7. O Conteúdo (Texto e Botão) */
.ezg-grid-item-content {
    position: relative;
    z-index: 2; /* Fica por cima do overlay */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o conteúdo em baixo */
    box-sizing: border-box;
}

.ezg-grid-item-title {
    margin: 0;
    line-height: 1.2;
}

.ezg-grid-item-description {
    font-size: 1em;
    margin-top: 15px;
    max-width: 450px;
}

.ezg-grid-button {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    max-width: 250px;
    margin-top: 25px;
    transition: all 0.3s ease;
}


/* 8. Layout Mobile (Empilhado) */
@media (max-width: 767px) {
    .ezg-hover-grid-wrapper {
        flex-direction: column; /* Empilha as colunas */
    }
    
    /* *** ESTA É A CORREÇÃO MÁGICA *** */
    /* Dizemos às colunas para "desaparecerem" no mobile */
    .ezg-hover-grid-column {
        display: contents; /* Os "netos" (.ezg-grid-item) tornam-se "filhos" diretos do wrapper */
    }
    
    /* REMOVIDO: O min-height não é mais necessário,
       o flex-grow: 1 (da regra de desktop) vai assumir e distribuir os itens */
    /* .ezg-grid-item { min-height: 50vh; } */
}