/* --- ESTILO DO POPUP APP-LIKE / MINIMALISTA (modal.css) --- */

:root {
    /* Cores de base */
    --color-highlight: orange; 
    --modal-bg: #121212; /* Fundo mais escuro, quase preto, para parecer nativo */
    --text-primary: #EDEDED; 
    --text-secondary: #999999; /* Cor discreta para metadados */
    --divider-color: rgba(255, 255, 255, 0.1); 
}

/* 1. Overlay (Fundo) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo opaco */
    
    /* Remove desfoque e vidro */
    backdrop-filter: none; 
    -webkit-backdrop-filter: none; 
    
    display: none; 
    justify-content: center; 
    align-items: flex-start; 
    z-index: 9999; 
    overflow-y: auto; 
    padding: 0; /* Remove padding na borda */
    box-sizing: border-box;
}

.modal-overlay.ativo {
    display: flex;
}

/* 2. Conteúdo Principal (Design Fino e Limpo) */
.modal-content {
    background-color: var(--modal-bg); 
    color: var(--text-primary);
    max-width: 700px; /* Largura focada para leitura */
    width: 100%; /* Ocupa a largura total no mobile */
    border-radius: 0; /* Remove arredondamento no mobile e topo do desktop */
    box-shadow: none; /* Remove a sombra */
    border: none; /* Remove a borda */
    
    position: relative;
    padding: 0; /* O padding será inserido no modal-body */
    
    /* Animação de Slide-Up, típica de aplicativos */
    transform: translateY(100%); 
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    margin-top: 0; 
}

.modal-overlay.ativo .modal-content {
    transform: translateY(0); /* Sobe para o centro da tela */
    opacity: 1;
    /* No desktop, aplica uma borda arredondada na parte inferior */
    border-radius: 12px; 
    margin-top: 5vh; /* Inicia um pouco abaixo do topo */
    width: 90%;
    max-width: 700px;
}

/* 3. Imagem (Fica no Topo, Sem Padding) */
#modal-imagem {
    width: 100%;
    height: auto;
    max-height: 300px; 
    object-fit: cover;
    border-radius: 12px 12px 0 0; /* Apenas o topo arredondado */
    margin-bottom: 0; /* Sem margem inferior */
}

/* 4. Corpo do Texto (Padding aplicado aqui) */
.modal-body {
    padding: 30px 40px; /* Aplica o espaçamento ao corpo do texto */
}

/* 5. Título e Meta */
#modal-titulo {
    font-size: 2em; 
    font-weight: 800; /* Títulos mais fortes */
    color: var(--color-highlight); 
    margin-bottom: 5px;
    line-height: 1.1;
}

.modal-meta {
    color: var(--text-secondary);
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--divider-color); 
    padding-bottom: 15px;
}

/* 6. Descrição Detalhada */
#modal-descricao p {
    line-height: 1.8; 
    margin-bottom: 1.8em;
    color: var(--text-primary);
    font-size: 1em;
}

/* 7. Botão Fechar (Fora do corpo, no topo, como um 'X' de um app) */
.fechar-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10000; /* Garante que fique acima da imagem */
    font-size: 22px;
    color: var(--text-primary); 
    background: rgba(0, 0, 0, 0.4); /* Fundo para contraste na imagem */
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

.fechar-modal:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 8. Botão Ler Completo */
.btn-ler-completo {
    display: block; 
    margin-top: 30px; 
    padding: 14px 25px;
    background-color: var(--color-highlight);
    color: #000000; 
    text-align: center;
    text-decoration: none;
    border-radius: 8px; 
    font-weight: 700;
    font-size: 1em;
    transition: opacity 0.2s;
}

.btn-ler-completo:hover {
    opacity: 0.9;
}

/* --- Responsividade (Mobile: Ocupa a tela inteira) --- */
@media (max-width: 768px) {
    .modal-overlay.ativo .modal-content {
        margin-top: 0;
        border-radius: 0; /* Ocupa 100% da tela */
        height: 100vh;
        width: 100%;
        overflow-y: auto;
    }
    
    #modal-imagem {
        max-height: 200px;
        border-radius: 0; /* Sem bordas arredondadas no topo do mobile */
    }
    
    .modal-body {
        padding: 20px 20px 40px 20px;
    }

    #modal-titulo {
        font-size: 1.5em;
    }
    
    .fechar-modal {
        top: 10px;
        right: 10px;
        font-size: 20px;
    }
}