/* ============================================================
   GALERIA DE EVENTOS — mosaico com filtro
   Gplay — site da banda
   ============================================================
   Painel "noite". Abas de filtro em cima (feito pra ligar com o mesmo
   texto das categorias em Tipos de evento, seção 07), grade tipo
   mosaico embaixo — cada foto como um "print de photo booth": leve
   rotação, canto com fita, legenda carimbada com data + local (a
   mesma dupla que aparece na Agenda).

   Filtro em js/galeria.js (vanilla, sem depender de lib nenhuma).
   ============================================================ */

.galeria {
    padding: clamp(56px, 8vw, 96px) 0;
}

.galeria__cabeca {
    max-width: var(--gp-container);
    margin: 0 auto clamp(28px, 4vw, 40px);
    padding: 0 clamp(20px, 4vw, 56px);
}

/* título "Registro de Palco" — estilo compartilhado em css/geral.css */

/* ---------------------------------------------------------- FILTROS */
.galeria__filtros {
    max-width: var(--gp-container);
    margin: 0 auto clamp(28px, 4vw, 40px);
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.galeria__filtro {
    font-family: var(--font-dado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(237, 231, 217, 0.6);
    background: transparent;
    border: 1px solid rgba(237, 231, 217, 0.25);
    border-radius: 2px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.galeria__filtro:hover {
    border-color: var(--gp-vermelho);
    color: var(--gp-papel);
}

.galeria__filtro.is-ativo {
    background: var(--gp-vermelho);
    border-color: var(--gp-vermelho);
    color: #fff;
}

/* ---------------------------------------------------------- MOSAICO */
.galeria__grade {
    max-width: var(--gp-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    gap: 18px;
}

.galeria__item {
    position: relative;
    display: block;
    /* alguns itens são <a> (vídeo) — reseta estilo padrão de link */
    text-decoration: none;
    color: inherit;
    grid-column: span 1;
    grid-row: span 1;
    transform: rotate(-1deg);
    /* SEM overflow:hidden aqui — se não, corta a fita do ::before, que
       precisa passar por cima da borda (fica meio dentro, meio fora).
       Quem clipa a foto/zoom é o .galeria__foto, um nível abaixo. */
}

.galeria__item:nth-child(3n) {
    transform: rotate(1.3deg);
}

.galeria__item:nth-child(4n) {
    transform: rotate(-0.6deg);
}

.galeria__item.oculto {
    display: none;
}

.galeria__item--destaque {
    grid-column: span 2;
    grid-row: span 2;
}

/* wrapper que clipa a foto (corners + zoom do hover) — o item em volta
   ficou sem overflow:hidden justamente pra fita do ::before poder passar
   por cima da borda sem ser cortada junto. */
.galeria__foto {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
}

.galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.15) contrast(1.05);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.galeria__item:hover img {
    transform: scale(1.06);
    filter: grayscale(0) contrast(1.05);
}

/* fita de canto — pedaço de "washi tape" */
.galeria__item::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 52px;
    height: 18px;
    background: rgba(237, 231, 217, 0.75);
    transform: translateX(-50%) rotate(-10deg);
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.galeria__legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
    font-family: var(--font-dado);
    font-size: var(--gp-fs-legenda);
    letter-spacing: 0.04em;
    color: var(--gp-papel);
}

.galeria__legenda b {
    color: var(--gp-vermelho);
    margin-right: 6px;
}

/* ---------------------------------------------------------- PLAY (vídeo)
   Só a capa cadastrada + este triângulo — sem player/iframe embutido.
   Clique no item abre o vídeo direto no YouTube (target="_blank"). */
.galeria__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(11, 11, 12, 0.55);
    border: 1.5px solid rgba(237, 231, 217, 0.7);
    transform: translate(-50%, -50%);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.galeria__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--gp-papel);
    transform: translate(-50%, -50%);
}

.galeria__item:hover .galeria__play {
    background: var(--gp-vermelho);
    border-color: var(--gp-vermelho);
}

/* ============================================================ RESPONSIVO */
@media (max-width: 700px) {
    .galeria__grade {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 130px;
    }

    .galeria__item--destaque {
        grid-column: span 2;
        grid-row: span 2;
    }
}