/* Configuração Base */
body {
    background-color: #DFEDF6; 
    background-image: url('../assets/bg-color.png');
    background-repeat: repeat; 
    background-size: 600px;     
    background-attachment: fixed;
    
    font-family: 'EB Garamond', serif;
    color: #282828;
}

header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 40px 0 20px 0;
    font-weight: 600;
}

.galeria {
    columns: 4;
    column-gap: 15px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.foto-miniatura {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    break-inside: avoid;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.foto-miniatura:hover {
    transform: translateY(-5px);
    filter: brightness(0.9);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Responsividade: Celular e Tablet */
@media (max-width: 768px) {
    .galeria { columns: 2; }
}
@media (max-width: 480px) {
    .galeria { 
        columns: 2;         
        column-gap: 10px;   
        padding: 10px;      
    }
}

/* AJUSTE NO MODAL */
.modal {
    display: none; /* O JS vai mudar isso para 'flex' */
    position: fixed;
    z-index: 1000; /* Aumentado para garantir que fique sobre tudo */
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Um pouco mais escuro para foco */
    backdrop-filter: blur(8px);
    
    /* Centralização garantida */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.modal-conteudo {
    max-width: 90%;
    max-height: 75vh; /* Ajustado para dar espaço ao botão embaixo */
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    object-fit: contain; /* Garante que a foto não estique */
    animation: zoomIn 0.3s ease forwards;
}

/* Garante que o botão de fechar não suma em telas pequenas */
.fechar {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 45px;
    font-weight: 300; /* Mais elegante */
    cursor: pointer;
    line-height: 1;
    z-index: 1001;
}
.fechar:hover { color: #aaa; }

.controles-modal {
    margin-top: 25px;
}

.botao-download {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    color: #000;
    padding: 12px 24px;
    border-radius: 30px; 
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.2s, transform 0.2s;
}

.botao-download:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

.logo-titulo {
  height: 60px;
  width: auto;
  mix-blend-mode: multiply;
}

/* --- ANIMAÇÕES DO MODAL --- */

/* Animação do fundo escuro (abrindo) */
@keyframes fadeIn {
    from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
    to { background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); }
}

/* Animação do fundo escuro (fechando) */
@keyframes fadeOut {
    from { background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); }
    to { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
}

/* Animação da foto (abrindo) */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animação da foto (fechando) */
@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.8); opacity: 0; }
}

/* Aplica a animação de entrada no modal inteiro */
.modal.abrindo {
    animation: fadeIn 0.3s ease forwards;
}

/* Aplica a animação de saída quando a classe 'fechando' for adicionada */
.modal.fechando {
    animation: fadeOut 0.3s ease forwards;
}

.modal.fechando .modal-conteudo {
    animation: zoomOut 0.3s ease forwards;
}

/* Esconde os controles e o botão X suavemente na hora de fechar */
.modal.fechando .fechar, 
.modal.fechando .controles-modal {
    opacity: 0;
    transition: opacity 0.2s;
}