/* Página /galeria — grade de fotos com scroll infinito.
   Mobile-first: regras base = mobile, depois @media min-width pra cima,
   nos mesmos breakpoints já usados no resto do site (768 / 992 / 1200). */

#galeria-pagina {
    padding: 30px 0 50px;
}

#galeria-pagina .galeria-title {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 15px;
}

#galeria-pagina .galeria-title h1 {
    font-size: 22px;
    margin-bottom: 5px;
    color: #000;
}

#galeria-pagina .galeria-title h4 {
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

#galeria-grid {
    margin: 0 -3px;
}

#galeria-grid .galeria-item {
    padding: 3px;
    margin-bottom: 6px;
}

#galeria-grid .galeria-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background-color: #f6f6f6; /* placeholder enquanto a imagem carrega */
}

#galeria-vazio {
    text-align: center;
    color: #7e7e7e;
    padding: 40px 15px;
}

#galeria-carregando {
    display: none;
    text-align: center;
    color: #7e7e7e;
    padding: 20px 0;
    font-size: 14px;
}

#galeria-erro {
    display: none;
    text-align: center;
    color: #c74a50;
    padding: 10px 0;
    font-size: 14px;
}

#galeria-sentinela {
    height: 1px;
}

/* Tablet (>= 768px): 3 colunas via col-sm-4 do Bootstrap no HTML;
   aqui só ajustamos tipografia e altura da miniatura. */
@media screen and (min-width: 768px) {
    #galeria-pagina .galeria-title h1 {
        font-size: 26px;
    }

    #galeria-pagina .galeria-title h4 {
        font-size: 15px;
    }

    #galeria-grid .galeria-item img {
        height: 210px;
    }
}

/* Desktop (>= 992px): 4 colunas via col-md-3 do Bootstrap no HTML. */
@media screen and (min-width: 992px) {
    #galeria-grid .galeria-item img {
        height: 240px;
    }
}

/* Desktop grande (>= 1200px): miniaturas um pouco maiores ainda. */
@media screen and (min-width: 1200px) {
    #galeria-grid .galeria-item img {
        height: 270px;
    }
}