/* =========================================================
   bloco: galeria
   grade - quebra em linhas, tudo visivel
   peek  - faixa rolavel, proximo item aparece cortado
   ========================================================= */

.galeria-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.galeria-item {
    margin: 0;
    min-width: 0;
}

.galeria-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.galeria-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--line);
}

.galeria-legenda {
    display: block;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.block--dark .galeria-legenda {
    color: var(--on-dark-soft);
}

.galeria-item a:hover .galeria-legenda {
    color: var(--color-primary);
}

/* ---------- variacao: grade ---------- */

.galeria--grade .galeria-lista {
    display: grid;
    gap: 28px;
}

.galeria--grade.galeria--col2 .galeria-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria--grade.galeria--col3 .galeria-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galeria--grade.galeria--col4 .galeria-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- variacao: peek ---------- */

.galeria--peek .galeria-lista {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding-bottom: 12px;
    /* Sangra ate a borda da tela: o corte lateral e o convite a rolar. */
    margin-right: calc(var(--gutter) * -1);
}

.galeria--peek .galeria-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.galeria--peek.galeria--col2 .galeria-item { width: 46%; }
.galeria--peek.galeria--col3 .galeria-item { width: 31%; }
.galeria--peek.galeria--col4 .galeria-item { width: 23%; }

@media (max-width: 900px) {
    .galeria--grade.galeria--col3 .galeria-lista,
    .galeria--grade.galeria--col4 .galeria-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .galeria--peek.galeria--col2 .galeria-item,
    .galeria--peek.galeria--col3 .galeria-item,
    .galeria--peek.galeria--col4 .galeria-item {
        width: 78%;
    }
}

@media (max-width: 560px) {
    .galeria--grade .galeria-lista {
        grid-template-columns: minmax(0, 1fr);
    }
}