/* =============================================
   ESTILOS DA PÁGINA GALERIA - galeria.css
================================================== */

/* --- NOVA SEÇÃO: CABEÇALHO INTRODUTÓRIO --- */
.intro-section {
    padding-top: 150px; /* Mais espaço para o header fixo */
    padding-bottom: 40px;
    text-align: center;
}

/* O h2 já pega o estilo global, o que é ótimo. Vamos apenas ajustar a margem. */
.intro-section h2 {
    margin-bottom: 15px; 
}

.intro-section p {
    color: var(--cor-cinza-texto);
    line-height: 1.6;
    font-size: 1rem;
    max-width: 60ch; /* Limita a largura da linha para melhorar a leitura */
    margin-left: auto;
    margin-right: auto;
}

/* --- 1. Estilos da Seção (Mobile First) --- */
.gallery-section {
    padding-top: 100px; /* Espaço para o header fixo não sobrepor o conteúdo */
    padding-bottom: 60px;
}

/* --- 2. Botões de Filtro --- */
.filter-controls {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha em telas pequenas */
    justify-content: center;
    gap: 10px; /* Espaçamento entre os botões */
    margin-bottom: 40px;
}

.filter-btn {
    background-color: transparent;
    color: var(--cor-cinza-texto);
    border: 1px solid #444;
    padding: 10px 20px;
    border-radius: 50px; /* Deixa os botões em formato de pílula */
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse por cima */
.filter-btn:hover {
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    border-color: var(--cor-dourado);
}

/* Estilo do botão ativo (selecionado) */
.filter-btn.active {
    background-color: var(--cor-vermelho-vibrante);
    color: var(--cor-branco);
    border-color: var(--cor-vermelho-vibrante);
}

/* --- 3. Grid da Galeria (Mobile First) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr; /* Inicia com uma coluna única no mobile */
    gap: 20px; /* Espaçamento entre as imagens */
}

.gallery-item {
    position: relative; /* Essencial para o posicionamento do overlay */
    overflow: hidden;   /* Esconde partes da imagem que "vazam" do container */
    border-radius: 8px; /* Cantos arredondados para as imagens */
    display: block;     /* Garante que o link <a> ocupe o espaço corretamente */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir todo o espaço sem distorcer */
    display: block;    /* Remove qualquer espaço extra abaixo da imagem */
    transition: transform 0.4s ease; /* Transição suave para o efeito de zoom */
}

/* --- 4. Efeito de Sobreposição (Overlay) --- */

/* Adiciona um leve zoom na imagem ao passar o mouse */
.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.4s ease; /* Transição suave para o aparecimento */
}

/* Torna o overlay visível ao passar o mouse sobre o item da galeria */
.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__overlay span {
    color: var(--cor-branco);
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid var(--cor-branco);
    padding: 10px 30px;
    text-align: center;
}

/* =============================================
   5 - ESTILOS DO MODAL DA GALERIA
============================================== */

/* O container do modal (fundo escuro) */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fica fixo na tela, mesmo com scroll */
    z-index: 1000; /* Garante que fique na frente de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll se a imagem for muito grande */
    background-color: rgba(0, 0, 0, 0.9); /* Fundo preto com 90% de opacidade */
    
    /* Centraliza o conteúdo com Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Adiciona uma transição suave */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Estilo para quando o modal estiver ativo */
.modal.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}


/* A imagem dentro do modal */
.modal-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 85%;
    /* Animação de zoom ao aparecer */
    animation-name: zoom;
    animation-duration: 0.4s;
}

@keyframes zoom {
    from {transform: scale(0.8)}
    to {transform: scale(1)}
}

/* O botão de fechar (X) */
.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
}

/* Botões de navegação (anterior/próximo) */
.modal-prev,
.modal-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none; /* Impede que o texto seja selecionado */
}

.modal-prev {
    left: 15px;
    border-radius: 3px 0 0 3px;
}

.modal-next {
    right: 15px;
}

.modal-prev:hover,
.modal-next:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* =============================================
   5. Media Queries para Telas Maiores
============================================= */

/* --- Estilos para Tablets (a partir de 768px) --- */
@media (min-width: 768px) {
    .gallery-section {
        padding-top: 80px; /* Aumenta o espaço para o header maior */
        padding-bottom: 80px;
    }

    .filter-btn {
        font-size: 0.9rem; /* Aumenta um pouco a fonte dos botões */
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas para tablets */
    }
}

/* --- Estilos para Desktops (a partir de 1024px) --- */
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* Três colunas para desktops */
    }
}