/*
 * Pagina /gallery/ (template-gallery.php). Carregado so nela pelo functions.php. Classes: .pcg-galeria-filtro,
 * .pcg-galeria__*, .pcg-foto (o lightbox .pcg-lb mora no theme.css: o /menu/ usa o mesmo). Tokens e utilitarios do theme.css; so dourado (regra 1).
 */

.pcg-galeria { --lado: max(var(--gutter), (100% - var(--largura)) / 2); }

/* ── Filtro (barra fixa abaixo do topo, rola na horizontal no celular, como o /menu/) ───────────────────── */
.pcg-galeria-filtro {
  position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top) + var(--wp-bar, 0px)); z-index: 40;
  background: rgba(18, 15, 12, .96); border-block: 1px solid var(--linha);
}
.pcg-galeria-filtro[hidden] { display: none; }
.pcg-galeria-filtro__lista {
  list-style: none; margin: 0; padding: 0 var(--lado);
  display: flex; gap: clamp(2px, 1.4vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.pcg-galeria-filtro__lista::-webkit-scrollbar { display: none; }
.pcg-galeria-filtro button {
  position: relative; display: inline-flex; align-items: center; height: 56px; min-width: 44px; padding: 0 12px;
  background: none; border: 0; cursor: pointer; white-space: nowrap; color: var(--texto-2);
  font: 900 .8125rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s var(--ease);
}
.pcg-galeria-filtro button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--ouro);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.pcg-galeria-filtro button[aria-pressed="true"] { color: var(--texto); }
.pcg-galeria-filtro button[aria-pressed="true"]::after { transform: scaleX(1); }
.pcg-galeria-filtro button:focus-visible { outline-offset: -4px; }
@media (hover: hover) { .pcg-galeria-filtro button:hover { color: var(--ouro-vivo); } }
@media (max-width: 899.98px) {
  .pcg-galeria-filtro__lista {
    padding-inline: 6px 32px;
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 40px), transparent);
  }
}

/* ── Grade ──────────────────────────────────────────────────────────────────────────────────────────────── */
.pcg-galeria__grade { padding: clamp(24px, 4vw, 56px) var(--lado) clamp(56px, 8vw, 104px); }
.pcg-galeria__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 600px) { .pcg-galeria__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) { .pcg-galeria__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pcg-foto[hidden] { display: none; }
.pcg-foto__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: zoom-in;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); color: var(--texto);
}
.pcg-foto__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
/* o nome fica sempre visivel (toque nao tem hover); o degrade garante o contraste sobre qualquer foto */
.pcg-foto__nome {
  position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; text-align: left;
  background: linear-gradient(to top, rgba(18, 15, 12, .92), rgba(18, 15, 12, 0));
  font: 400 clamp(1.125rem, 2.2vw, 1.5rem)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase;
}
.pcg-foto__btn:focus-visible { outline-offset: 3px; }
@media (hover: hover) { .pcg-foto__btn:hover img { transform: scale(1.05); } .pcg-foto__btn:hover { border-color: var(--ouro); } }
@media (prefers-reduced-motion: reduce) { .pcg-foto__btn img { transition: none; } }
.pcg-galeria__vazio { color: var(--texto-2); text-align: center; padding: 48px 0; }

/* ── Fecho: texto, para a emenda com o rodape (imagem) nao ser imagem→imagem ────────────────────────────── */
.pcg-galeria__fim {
  display: grid; justify-items: center; gap: 24px; text-align: center;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(72px, 9vw, 128px);
}