/*
 * ==========================================================
 * CSS (V1.0) - Secção de Quartos
 * Ficheiro: assets/css/rooms-showcase.css
 * ==========================================================
 */

/* 1. Wrapper Principal (Secção) */
.ezg-rooms-section {
    position: relative;
    width: 100%;
    /* A altura (ex: 100vh) é controlada pelo Slider do Elementor */
    overflow: hidden;
    display: flex; /* Usamos flex para o layout principal */
}

/* 2. Fundos (Slideshow) */
.ezg-rooms-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Fica no fundo */
}

.ezg-room-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.8s ease; /* Fade na troca de galeria */
}

.ezg-room-gallery.active {
    opacity: 1; /* O JS vai ativar isto */
}

/* O JS vai criar as 'divs' da galeria aqui */
.ezg-room-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0; /* Começa invisível para o fade do slideshow */
}

/* 3. Overlays */
.ezg-rooms-overlay-1-desktop,
.ezg-rooms-overlay-1-mobile,
.ezg-rooms-overlay-2-desktop,
.ezg-rooms-overlay-2-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Deixa clicar através */
}

/* Overlay 1 (Superior) */
.ezg-rooms-overlay-1-desktop,
.ezg-rooms-overlay-1-mobile {
    z-index: 2; /* Fica em cima do Overlay 2 */
}

/* Overlay 2 (Inferior) */
.ezg-rooms-overlay-2-desktop,
.ezg-rooms-overlay-2-mobile {
    z-index: 1; /* Fica em cima do Fundo (z-index 0) */
}

/* Esconde os overlays de mobile no desktop */
.ezg-rooms-overlay-1-mobile,
.ezg-rooms-overlay-2-mobile {
    display: none;
}

/* 4. Wrapper de Conteúdo (Posiciona a coluna da esquerda) */
.ezg-rooms-content-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%; /* Faz o wrapper preencher a secção */
    display: flex;
    padding: 5% 7%;
    box-sizing: border-box;
    
    /* Os 2 novos controlos de Alinhamento vão controlar isto: */
    justify-content: flex-start; /* Default: Esquerda */
    align-items: center;       /* Default: Centro */
}

/* 5. A NOVA Coluna da Esquerda (Wrapper da Lista e Descrição) */
.ezg-rooms-left-column {
    display: flex;
    flex-direction: column;
    position: relative; /* Para o z-index funcionar no mobile */
}

/* 6. A Lista (Dentro da coluna) */
.ezg-rooms-list-container {
    /* A largura é controlada pelo Slider */
    /* A regra 'flex-shrink: 0' foi removida pois não é mais necessária */
}

.ezg-rooms-list-title {
    /* Tipografia, Cor e Padding vêm dos controlos */
}

.ezg-rooms-list-wrapper {
    display: flex;
    flex-direction: column;
    /* O 'gap' é controlado pelo Slider */
}

.ezg-room-item {
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: left center;
    /* Tipografia, Cor e Opacidade vêm dos controlos (Ativo vs. Inativo) */
}

/* O 'grow' (scale) ao passar o rato é controlado pelo Slider */

/* 6. Coluna da Direita (Detalhes) */
.ezg-rooms-details-container {
    /* A largura é controlada pelo Slider */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o botão à esquerda por defeito */
}

.ezg-room-details {
    display: none; /* Esconde todas as descrições */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ezg-room-details.active {
    display: block; /* Mostra apenas a ativa */
    opacity: 1;
}

.ezg-room-details-description {
    /* Cor e Tipografia vêm dos controlos */
}

.ezg-room-button-wrapper {
    margin-top: 30px;
}

.ezg-room-button {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    /* Todos os estilos (padding, cor, hover) vêm dos controlos */
}


/* 7. Layout Mobile (Baseado no teu Figma) */
@media (max-width: 767px) {
    /* Esconde os overlays de desktop e mostra os de mobile */
    .ezg-rooms-overlay-1-desktop,
    .ezg-rooms-overlay-2-desktop {
        display: none;
    }
    .ezg-rooms-overlay-1-mobile,
    .ezg-rooms-overlay-2-mobile {
        display: block;
    }

    /* Muda a direção do flex e o alinhamento */
    .ezg-rooms-content-wrapper {
        flex-direction: column;
        justify-content: space-between; /* Empurra a lista para baixo */
        align-items: center; /* Centra horizontalmente */
        padding: 10% 7%; /* Mais padding vertical */
        height: 100%; /* Ocupa a altura da secção */
    }
    
    /* A Descrição (vem primeiro no mobile) */
    .ezg-rooms-details-container {
        /* O 'order: 1' é o default, fica em cima */
        width: 100%; /* Ocupa a largura toda (controlável) */
        text-align: center;
        align-items: center; /* Centra o botão */
    }

    /* A Lista (vem em segundo no mobile) */
    .ezg-rooms-list-container {
        order: 2; /* Joga a lista para baixo */
        width: 100%; /* Ocupa a largura toda (controlável) */
        text-align: center;
    }
    
    .ezg-rooms-list-wrapper {
        align-items: center;
    }
    
    .ezg-room-item {
        transform-origin: center center; /* O 'grow' no mobile é a partir do centro */
    }
}