/* ==========================
   Galeria de Imagens com Lightbox
========================== */

/* Container da Galeria */
.pgglae-container {
    display: grid;                                      /* Layout em grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* Colunas responsivas */
    gap: 1.5rem;                                       /* Espaçamento entre itens */
    padding: 1.5rem;                                   /* Padding interno */
    max-width: 1400px;                                 /* Largura máxima */
    margin: 0 auto;                                    /* Centralização */
}

/* Item da Galeria */
.pgglae-item {
    position: relative;                                /* Para posicionamento interno */
    aspect-ratio: 4/3;                                /* Proporção da imagem */
    overflow: hidden;                                  /* Esconde overflow */
    border-radius: 8px;                               /* Cantos arredondados */
    cursor: pointer;                                  /* Cursor ao hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);           /* Sombra suave */
    transition: transform 0.3s ease;                  /* Animação suave */
}

.pgglae-item:hover {
    transform: translateY(-5px);                      /* Efeito hover */
}

/* Imagem dentro do item */
.pgglae-item img {
    width: 100%;                                      /* Largura total */
    height: 100%;                                     /* Altura total */
    object-fit: cover;                                /* Ajuste da imagem */
    transition: transform 0.3s ease;                  /* Animação suave */
}

.pgglae-item:hover img {
    transform: scale(1.05);                           /* Zoom no hover */
}

/* Lightbox */
.pgglae-lightbox {
    display: none;                                    /* Inicialmente oculto */
    position: fixed;                                  /* Fixo na tela */
    top: 0;                                          /* Alinhado ao topo */
    left: 0;                                         /* Alinhado à esquerda */
    width: 100%;                                     /* Largura total */
    height: 100%;                                    /* Altura total */
    background: rgba(0, 0, 0, 0.9);                  /* Fundo escuro */
    z-index: 1000;                                   /* Nível de empilhamento */
    padding: 2rem;                                   /* Espaçamento interno */
    opacity: 0;                                      /* Inicialmente transparente */
    visibility: hidden;                              /* Inicialmente invisível */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transição suave */
}

.pgglae-lightbox.active {
    display: flex;                                   /* Exibe quando ativo */
    justify-content: center;                         /* Centraliza horizontalmente */
    align-items: center;                             /* Centraliza verticalmente */
    opacity: 1;                                      /* Totalmente visível */
    visibility: visible;                             /* Visível */
}

/* Container da Imagem no Lightbox */
.pgglae-content {
    position: relative;                              /* Para posicionamento */
    max-width: 62.5rem;                              /* Largura máxima */
    width: 100%;                                     /* Largura total */
    transform: scale(0.9);                           /* Escala inicial */
    transition: transform 0.3s ease;                 /* Transição suave */
    z-index: 1000;                                   /* Nível de empilhamento */
}

.pgglae-lightbox.active .pgglae-content {
    transform: scale(1);                             /* Escala final */
}

/* Imagem no Lightbox */
.pgglae-image {
    width: 100%;                                     /* Largura total */
    height: auto;                                    /* Altura automática */
    max-height: 80vh;                                /* Altura máxima */
    object-fit: contain;                             /* Ajuste da imagem */
}

/* Legenda */
.pgglae-caption {
    position: absolute;                              /* Posicionamento absoluto */
    bottom: -40px;                                   /* Distância do fundo */
    left: 0;                                         /* Alinhado à esquerda */
    width: 100%;                                     /* Largura total */
    padding: 1rem;                                   /* Espaçamento interno */
    color: #fff;                                     /* Cor do texto */
    text-align: center;                              /* Alinhamento do texto */
    background: rgba(0, 0, 0, 0.7);                  /* Fundo semi-transparente */
}

/* Botões de Navegação */
.pgglae-nav {
    position: fixed;                                 /* Fixo na tela */
    top: 50%;                                        /* Centro vertical */
    transform: translateY(-50%);                     /* Ajuste do centro */
    padding: 1rem;                                   /* Espaçamento interno */
    color: #fff;                                     /* Cor do texto */
    background: rgba(0, 0, 0, 0.5);                  /* Fundo semi-transparente */
    border: none;                                    /* Sem borda */
    cursor: pointer;                                 /* Cursor pointer */
    font-size: 2rem;                                /* Tamanho do texto */
    transition: background 0.3s ease;                /* Transição suave */
    z-index: 1001;                                   /* Sempre acima do conteúdo */
}

.pgglae-nav:hover {
    background: rgba(0, 0, 0, 0.8);                  /* Fundo mais escuro no hover */
}

.pgglae-prev {
    left: 0.5rem;                                    /* Posição à esquerda */
    z-index: 1002;                                   /* Garante visibilidade */
}

.pgglae-next {
    right: 0.5rem;                                   /* Posição à direita */
    z-index: 1002;                                   /* Garante visibilidade */
}

/* Botão Fechar */
.pgglae-close {
    position: absolute;                              /* Posicionamento absoluto */
    top: 1rem;                                       /* Distância do topo */
    right: 1rem;                                     /* Distância da direita */
    color: #fff;                                     /* Cor do texto */
    background: rgba(0, 0, 0, 0.5);                  /* Fundo semi-transparente */
    border: none;                                    /* Sem borda */
    width: 2.5rem;                                   /* Largura */
    height: 2.5rem;                                  /* Altura */
    border-radius: 50%;                              /* Forma circular */
    cursor: pointer;                                 /* Cursor pointer */
    display: flex;                                   /* Layout flexível */
    justify-content: center;                         /* Centraliza horizontal */
    align-items: center;                             /* Centraliza vertical */
    font-size: 1.5rem;                              /* Tamanho do texto */
    transition: all 0.3s ease;                       /* Transição suave */
}

.pgglae-close:hover {
    background: rgba(255, 0, 0, 0.8);                /* Vermelho no hover */
    transform: rotate(90deg);                        /* Rotação no hover */
}

/* Spinner de Carregamento */
.pgglae-spinner {
    position: absolute;                              /* Posicionamento absoluto */
    top: 50%;                                        /* Centro vertical */
    left: 50%;                                       /* Centro horizontal */
    transform: translate(-50%, -50%);                /* Ajuste do centro */
    width: 40px;                                     /* Largura */
    height: 40px;                                    /* Altura */
    border: 4px solid #f3f3f3;                       /* Borda clara */
    border-top: 4px solid #fe8948;                   /* Borda superior colorida */
    border-radius: 50%;                              /* Forma circular */
    animation: pgglae-spin 1s linear infinite;       /* Animação de rotação */
    display: none;                                   /* Inicialmente oculto */
}

.pgglae-spinner.active {
    display: block;                                  /* Mostra quando ativo */
}

@keyframes pgglae-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsividade */
@media (max-width: 768px) {
    .pgglae-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    .pgglae-lightbox {
        padding: 1rem;
    }

    .pgglae-nav {
        position: fixed;                             /* Mantém fixo */
        width: 40px;                                 /* Largura fixa */
        height: 40px;                                /* Altura fixa */
        display: flex;                               /* Layout flexível */
        align-items: center;                         /* Centraliza vertical */
        justify-content: center;                     /* Centraliza horizontal */
        background: rgba(0, 0, 0, 0.7);              /* Fundo mais visível */
        font-size: 1.5rem;
        padding: 0.75rem;
    }
    
    .pgglae-prev {
        left: 0;                                     /* Cola na borda */
        border-radius: 0 4px 4px 0;                  /* Arredonda lado direito */
    }
    
    .pgglae-next {
        right: 0;                                    /* Cola na borda */
        border-radius: 4px 0 0 4px;                  /* Arredonda lado esquerdo */
    }

    .pgglae-close {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
    }

    .pgglae-caption {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .pgglae-container {
        grid-template-columns: 1fr;                  /* Uma coluna em mobile */
    }

    .pgglae-nav {
        font-size: 1.2rem;
        padding: 0.5rem;
    }
}