/* --- Estilos do Link de Abertura (Opcional) --- */

/* --- Estilos do Modal (Fundo) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    
    /* CRÍTICO: Use vh e vw para garantir que cubra 100% da viewport */
    width: 100vw; 
    height: auto;
    
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Estilos do Conteúdo do Modal (Vídeo Container) --- */
.modal-content {
    /* Por padrão (desktop), ocupará 80% da largura da tela */
    width: 80%;
    /* Altura automática para manter a proporção do vídeo */
    height: auto;
    background-color: transparent; /* Remove qualquer fundo dentro do container do vídeo */
    position: relative;
    border-radius: 10px;
    
}

/* Garante que o vídeo preencha 100% do seu container (.modal-content) */
.video-player {
    width: 100%;
    height: auto;
    display: block;
    /* Isso ajuda a garantir que o player nativo também respeite as bordas. */
    border-radius: 9px; 
    
    /* Opcional: Garante que o vídeo em si ocupe a maior parte e não tenha gaps */
    /* object-fit: cover; ou contain; podem ser usados dependendo de como quer que o vídeo se redimensione */
    /* Para manter a proporção e preencher, 'contain' é geralmente seguro. */
    object-fit: contain; 
}

/* --- Botão de Fechar (Visível no Mobile e Opcional no Desktop) --- */
.close-btn {
    display: none; /* Esconde por padrão no desktop */
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000; /* Garante que fique acima do vídeo */
    opacity: 0.8;
}

.close-btn:hover,
.close-btn:focus {
    opacity: 1;
}


/* ------------------------------------------- */
/* --- MEDIA QUERY para Versão MOBILE (e.g., Telas com até 768px) --- */
/* ------------------------------------------- */
@media screen and (max-width: 768px) {
    
     .modal-content {
        /* Garante que o container ocupe 100% do modal (que agora usa vh/vw) */
        width: 100%; 
        height: auto; 
        
        margin: 0;
        padding: 0;
        
        border-radius: 0; 
        overflow: hidden;
    }
    
    .video-player {
        /* CRÍTICO: Garante que o vídeo preencha 100% da largura/altura do container mobile */
        width: 100%;
        height: 100%; 
        
        /* Garante que o vídeo use todo o espaço, cortando as bordas se necessário */
        object-fit: cover; 
        border-radius: 0;
    }

    /* Exibe o botão de fechar no mobile */
    .close-btn {
        top: 10px;
        right: 15px;
    }
}