/* =====================================================================
 * Galeria do tema — front-end
 * Breakpoints: desktop > 1024px · tablet 768–1024px · celular ≤ 767px
 * ===================================================================== */

.agg-wrap { --agg-accent: #c46a1b; margin: 0 0 2rem; }
.agg {
    --agg-gap-atual: var(--agg-gap, 10px);
    --agg-cols-atual: var(--agg-cols, 4);
    --agg-row-atual: var(--agg-row, 240px);
    position: relative;
}
@media (max-width: 1024px) {
    .agg { --agg-cols-atual: var(--agg-cols-t, 3); }
}
@media (max-width: 767px) {
    .agg {
        --agg-cols-atual: var(--agg-cols-m, 2);
        --agg-gap-atual: var(--agg-gap-m, 6px);
        --agg-row-atual: var(--agg-row-m, 140px);
    }
}

/* ---------- Item ---------- */
.agg-item {
    position: relative; margin: 0; overflow: hidden;
    border-radius: var(--agg-radius, 4px); background: rgba(127,127,127,.12);
}
.agg-link { display: block; position: relative; overflow: hidden; border-radius: inherit; cursor: zoom-in; }
span.agg-link { cursor: default; }
.agg-item img {
    display: block; width: 100%; height: auto; max-width: none; margin: 0;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease, opacity .4s ease;
}
.agg-item.is-oculto,
.agg-item.is-filtrado { display: none !important; }
.agg-item.is-entrando { animation: agg-entrar .4s ease both; }
@keyframes agg-entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Efeitos ao passar o mouse (somente dispositivos com mouse) */
@media (hover: hover) {
    .agg--efeito-zoom .agg-link:hover img { transform: scale(1.06); }
    .agg--efeito-escurecer .agg-link:hover img { filter: brightness(.7); }
}
.agg-link:focus-visible { outline: 3px solid var(--agg-accent); outline-offset: 2px; }

/* Legendas */
.agg-legenda { font-size: .875rem; line-height: 1.35; }
.agg--legenda-abaixo .agg-item { background: transparent; overflow: visible; }
.agg--legenda-abaixo .agg-legenda { padding: 6px 2px 0; opacity: .85; }
.agg--legenda-hover .agg-legenda {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 8px; color: #fff; pointer-events: none;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    transform: translateY(6px); opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.agg--legenda-hover .agg-item:hover .agg-legenda,
.agg--legenda-hover .agg-item:focus-within .agg-legenda { opacity: 1; transform: none; }
@media (hover: none) {
    .agg--legenda-hover .agg-legenda { opacity: 1; transform: none; }
}

/* ---------- Layout: grade uniforme ---------- */
.agg--grade {
    display: grid;
    grid-template-columns: repeat(var(--agg-cols-atual), minmax(0, 1fr));
    gap: var(--agg-gap-atual);
}
.agg--grade .agg-item img { aspect-ratio: var(--agg-ratio, 1 / 1); object-fit: cover; height: 100%; }

/* ---------- Layout: mosaico (Pinterest) ---------- */
.agg--mosaico {
    display: grid;
    grid-template-columns: repeat(var(--agg-cols-atual), minmax(0, 1fr));
    gap: var(--agg-gap-atual);
    align-items: start;
}
/* Com JS: linhas de 1px e cada item ocupa "N linhas" → encaixe perfeito */
.agg--mosaico.is-js { grid-auto-rows: 1px; row-gap: 0; }
.agg--mosaico.is-js .agg-item { margin-bottom: var(--agg-gap-atual); }

/* ---------- Layout: linhas justificadas (Flickr) — 100% CSS ---------- */
.agg--justificado { display: flex; flex-wrap: wrap; gap: var(--agg-gap-atual); }
.agg--justificado::after { content: ''; flex: 999 1 0; }
.agg--justificado .agg-item {
    flex: var(--r) 1 calc(var(--agg-row-atual) * var(--r));
    min-width: 0;
}
.agg--justificado .agg-item img { aspect-ratio: var(--r); object-fit: cover; height: auto; }

/* ---------- Celular: carrossel deslizante ---------- */
@media (max-width: 767px) {
    .agg.agg--mobile-carrossel {
        display: flex !important; flex-wrap: nowrap; gap: var(--agg-gap-atual);
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
        grid-auto-rows: auto;
    }
    .agg.agg--mobile-carrossel::-webkit-scrollbar { display: none; }
    .agg.agg--mobile-carrossel::after { display: none; }
    .agg.agg--mobile-carrossel .agg-item {
        flex: 0 0 82%; scroll-snap-align: center; margin-bottom: 0;
        grid-row-end: auto !important;
    }
    .agg.agg--mobile-carrossel .agg-item img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
    .agg.agg--mobile-carrossel .agg-item.is-oculto { display: block !important; } /* no carrossel mostra tudo */
    .agg-wrap.is-carrossel .agg-mais-wrap { display: none; }
}
.agg-pontos { display: none; }
@media (max-width: 767px) {
    .agg-wrap.is-carrossel .agg-pontos {
        display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; min-height: 8px;
    }
}
.agg-pontos span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .2s, transform .2s; }
.agg-pontos span.is-ativo { opacity: .9; transform: scale(1.3); }
.agg-pontos .agg-pontos-texto { width: auto; height: auto; background: none; opacity: .7; font-size: .8rem; transform: none; }

/* ---------- Filtros ---------- */
.agg-filtros {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px;
}
.agg-filtro {
    appearance: none; border: 1px solid currentColor; background: transparent; color: inherit;
    padding: 6px 16px; border-radius: 999px; font-size: .9rem; line-height: 1.2; cursor: pointer;
    opacity: .7; transition: opacity .2s, background-color .2s, color .2s, border-color .2s;
}
.agg-filtro:hover { opacity: 1; }
.agg-filtro.is-ativo { opacity: 1; background: var(--agg-accent); border-color: var(--agg-accent); color: #fff; }
@media (max-width: 767px) {
    .agg-filtros {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
        margin-inline: -16px; padding: 0 16px 4px;
    }
    .agg-filtros::-webkit-scrollbar { display: none; }
    .agg-filtro { flex: 0 0 auto; }
}

/* ---------- Carregar mais ---------- */
.agg-mais-wrap { text-align: center; margin-top: 20px; }
.agg-mais {
    appearance: none; border: 0; background: var(--agg-accent); color: #fff; cursor: pointer;
    padding: 10px 26px; border-radius: 999px; font-size: .95rem; transition: filter .2s;
}
.agg-mais:hover { filter: brightness(1.1); }
.agg-mais[hidden] { display: none; }
.agg-vazia { opacity: .6; font-style: italic; }

/* =====================================================================
 * Lightbox
 * ===================================================================== */
.agg-lb {
    position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
    background: #0a0a0a; color: #fff; opacity: 0; transition: opacity .2s ease;
    -webkit-user-select: none; user-select: none;
}
.agg-lb.is-aberto { opacity: 1; }
.agg-lb[hidden] { display: none; }
.agg-lb-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); font-size: .9rem; z-index: 2;
}
.agg-lb-contador { opacity: .75; font-variant-numeric: tabular-nums; }
.agg-lb-palco {
    position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none; overscroll-behavior: contain;
}
.agg-lb-trilho { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; will-change: transform; }
.agg-lb-img {
    max-width: calc(100vw - 140px); max-height: 100%; width: auto; height: auto; object-fit: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.agg-lb-img.is-carregada { opacity: 1; }
.agg-lb-carregando {
    position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius: 50%; animation: agg-giro .8s linear infinite;
}
@keyframes agg-giro { to { transform: rotate(360deg); } }
.agg-lb-legenda {
    text-align: center; padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
    font-size: .95rem; line-height: 1.4; min-height: 1.4em; opacity: .9;
}
.agg-lb button {
    appearance: none; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background-color .2s; padding: 0;
}
.agg-lb button:hover, .agg-lb button:focus-visible { background: rgba(255,255,255,.25); outline: none; }
.agg-lb button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agg-lb-ant, .agg-lb-prox { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.agg-lb-ant { left: 16px; }
.agg-lb-prox { right: 16px; }
.agg-lb.is-unica .agg-lb-ant, .agg-lb.is-unica .agg-lb-prox { display: none; }

@media (max-width: 767px) {
    .agg-lb-img { max-width: 100vw; box-shadow: none; }
    .agg-lb .agg-lb-ant, .agg-lb .agg-lb-prox { display: none; } /* no celular navega deslizando */
    .agg-lb-legenda { font-size: .875rem; }
}
html.agg-lb-travado, html.agg-lb-travado body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
    .agg-item img, .agg-lb, .agg-lb-img, .agg-item.is-entrando { transition: none !important; animation: none !important; }
}