/* === ESTILOS DA GALERIA (MOBILE FIRST) === */

/* Configuração da lista de fotos como um grid flexível */
ul#album-fotos {
    width: 100%;
    list-style: none; /* Remove as bolinhas da lista */

    /* Usando CSS Grid para controlar o layout */
    display: grid;
    grid-template-columns: 1fr; /* No mobile, temos apenas 1 coluna */
    gap: 20px; /* Espaçamento entre as fotos */
}

/* Estilo de cada item (foto) da lista */
ul#album-fotos li {
    position: relative; /* Necessário para posicionar a legenda sobre a foto */
    height: 200px; /* Altura fixa para todas as fotos */
    background-color: #f0f0f0; /* Cor de fundo enquanto a imagem carrega */
    background-size: cover; /* Faz a imagem cobrir todo o espaço, sem distorcer */
    background-position: center center; /* Centraliza a imagem */
    border: 5px solid white;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    transition: all 0.3s ease-in-out; /* Animação suave para todas as propriedades */
}

/* Legenda da foto (o <span> dentro do <li>) */
ul#album-fotos li span {
    position: absolute; /* Permite posicionar a legenda */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7); /* Fundo preto semitransparente */
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;

    /* No mobile, a legenda está sempre visível */
    opacity: 1;
    transition: opacity 0.3s;
}

/* --- ATENÇÃO: Definição das imagens de fundo --- */
/* Troque os nomes dos arquivos para corresponder às suas imagens! */

ul#album-fotos li#foto01 { background-image: url('../_imagens/01_01.jpg'); }
ul#album-fotos li#foto02 { background-image: url('../_imagens/02_01.jpg'); }
ul#album-fotos li#foto03 { background-image: url('../_imagens/03_01.jpg'); }
ul#album-fotos li#foto04 { background-image: url('../_imagens/04_01.jpg'); }
ul#album-fotos li#foto05 { background-image: url('../_imagens/04_02.jpg'); }
ul#album-fotos li#foto06 { background-image: url('../_imagens/04_03.JPG'); }
ul#album-fotos li#foto07 { background-image: url('../_imagens/04_04.jpg'); }
ul#album-fotos li#foto08 { background-image: url('../_imagens/05_01.jpg'); }
ul#album-fotos li#foto09 { background-image: url('../_imagens/05_02.jpg'); }
ul#album-fotos li#foto10 { background-image: url('../_imagens/06_01.jpg'); }
ul#album-fotos li#foto11 { background-image: url('../_imagens/07_01.jpg'); }
ul#album-fotos li#foto12 { background-image: url('../_imagens/07_02.jpg'); }
ul#album-fotos li#foto13 { background-image: url('../_imagens/08_01.jpg'); }
ul#album-fotos li#foto14 { background-image: url('../_imagens/08_02.jpg'); }
ul#album-fotos li#foto15 { background-image: url('../_imagens/08_03.jpg'); }
ul#album-fotos li#foto16 { background-image: url('../_imagens/09_01.JPG'); }
ul#album-fotos li#foto17 { background-image: url('../_imagens/09_02.jpg'); }
ul#album-fotos li#foto18 { background-image: url('../_imagens/09_03.jpg'); }
ul#album-fotos li#foto19 { background-image: url('../_imagens/09_04.jpg'); }
ul#album-fotos li#foto20 { background-image: url('../_imagens/09_05.jpg'); }
ul#album-fotos li#foto21 { background-image: url('../_imagens/10_01.jpg'); }
ul#album-fotos li#foto22 { background-image: url('../_imagens/10_02.jpg'); }
ul#album-fotos li#foto23 { background-image: url('../_imagens/10_03.jpg'); }
ul#album-fotos li#foto24 { background-image: url('../_imagens/10_04.jpg'); }
ul#album-fotos li#foto25 { background-image: url('../_imagens/10_05.jpg'); }
ul#album-fotos li#foto26 { background-image: url('../_imagens/10_06.jpg'); }
ul#album-fotos li#foto27 { background-image: url('../_imagens/11_01.jpg'); }
ul#album-fotos li#foto28 { background-image: url('../_imagens/11_02.jpg'); }
ul#album-fotos li#foto29 { background-image: url('../_imagens/11_03.jpg'); }
ul#album-fotos li#foto30 { background-image: url('../_imagens/11_04.jpg'); }
ul#album-fotos li#foto31 { background-image: url('../_imagens/11_05.jpg'); }
ul#album-fotos li#foto32 { background-image: url('../_imagens/12_01.jpg'); }
ul#album-fotos li#foto33 { background-image: url('../_imagens/12_02.jpg'); }
ul#album-fotos li#foto34 { background-image: url('../_imagens/12_03.jpg'); }
ul#album-fotos li#foto35 { background-image: url('../_imagens/13_01.jpg'); }
ul#album-fotos li#foto36 { background-image: url('../_imagens/14_01.jpg'); }
ul#album-fotos li#foto37 { background-image: url('../_imagens/14_02.jpg'); }
ul#album-fotos li#foto38 { background-image: url('../_imagens/14_03.jpg'); }
ul#album-fotos li#foto39 { background-image: url('../_imagens/14_04.jpg'); }
ul#album-fotos li#foto40 { background-image: url('../_imagens/15_01.jpg'); }
ul#album-fotos li#foto41 { background-image: url('../_imagens/16_01.jpg'); }
ul#album-fotos li#foto42 { background-image: url('../_imagens/16_02.jpg'); }
ul#album-fotos li#foto43 { background-image: url('../_imagens/16_03.jpg'); }
ul#album-fotos li#foto44 { background-image: url('../_imagens/17_01.jpg'); }
ul#album-fotos li#foto45 { background-image: url('../_imagens/17_02.jpg'); }
ul#album-fotos li#foto46 { background-image: url('../_imagens/17_03.jpg'); }
ul#album-fotos li#foto47 { background-image: url('../_imagens/17_04.jpg'); }
ul#album-fotos li#foto48 { background-image: url('../_imagens/17_05.jpg'); }
ul#album-fotos li#foto49 { background-image: url('../_imagens/18_01.jpg'); }
ul#album-fotos li#foto50 { background-image: url('../_imagens/18_02.jpg'); }
ul#album-fotos li#foto51 { background-image: url('../_imagens/18_03.jpg'); }
ul#album-fotos li#foto52 { background-image: url('../_imagens/18_04.jpg'); }
ul#album-fotos li#foto53 { background-image: url('../_imagens/18_05.jpg'); }
ul#album-fotos li#foto54 { background-image: url('../_imagens/19_01.jpg'); }
ul#album-fotos li#foto55 { background-image: url('../_imagens/19_02.jpg'); }
ul#album-fotos li#foto56 { background-image: url('../_imagens/20_01.jpg'); }
ul#album-fotos li#foto57 { background-image: url('../_imagens/20_02.jpg'); }
ul#album-fotos li#foto58 { background-image: url('../_imagens/20_03.jpg'); }
ul#album-fotos li#foto59 { background-image: url('../_imagens/20_04.jpg'); }
ul#album-fotos li#foto60 { background-image: url('../_imagens/21_01.jpg'); }
ul#album-fotos li#foto61 { background-image: url('../_imagens/21_02.jpg'); }
ul#album-fotos li#foto62 { background-image: url('../_imagens/21_03.jpg'); }
ul#album-fotos li#foto63 { background-image: url('../_imagens/21_04.jpg'); }
ul#album-fotos li#foto64 { background-image: url('../_imagens/21_05.jpg'); }
ul#album-fotos li#foto65 { background-image: url('../_imagens/21_06.jpg'); }
ul#album-fotos li#foto66 { background-image: url('../_imagens/21_07.jpg'); }
ul#album-fotos li#foto67 { background-image: url('../_imagens/22_01.jpg'); }
ul#album-fotos li#foto68 { background-image: url('../_imagens/22_02.jpg'); }
ul#album-fotos li#foto69 { background-image: url('../_imagens/22_03.jpg'); }
ul#album-fotos li#foto70 { background-image: url('../_imagens/22_04.jpg'); }
ul#album-fotos li#foto71 { background-image: url('../_imagens/23_01.jpg'); }
ul#album-fotos li#foto72 { background-image: url('../_imagens/24_01.jpg'); }
ul#album-fotos li#foto73 { background-image: url('../_imagens/25_01.jpg'); }






/* =================================================================== */
/* MEDIA QUERY PARA TABLETS E DESKTOPS             */
/* Estilos aplicados SOMENTE em telas com 768px ou mais     */
/* =================================================================== */

@media (min-width: 768px) {

    /* Transforma a galeria em uma grade de 3 colunas */
    ul#album-fotos {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Esconde a legenda por padrão no desktop */
    ul#album-fotos li span {
        opacity: 0;
    }

    /* Efeito de HOVER para desktop */
    ul#album-fotos li:hover {
        transform: scale(1.5); /* Efeito de zoom na foto */
        z-index: 10; /* Garante que a foto ampliada fique por cima das outras */
    }

    /* Mostra a legenda ao passar o mouse */
    ul#album-fotos li:hover span {
        opacity: 1;
    }
}

/* Media Query para telas ainda maiores, se desejar mais colunas */
@media (min-width: 1200px) {

    /* Aumenta a altura das fotos em telas grandes */
    ul#album-fotos li {
        height: 250px;
    }
}