/* ══════════════════════════════════════════════════════════════════════════════
   JU COOKIE DESIGNER · /galeria — o acervo
   Consome ds.css. Aqui moram só as composições da galeria: a barra de filtros,
   o mosaico e a lupa.
   ══════════════════════════════════════════════════════════════════════════ */

body{padding-top:var(--nav-h)}
.pagina-galeria [hidden]{display:none!important}

/* ─── ABERTURA ───────────────────────────────────────────────────────────── */
.gal-topo{
  position:relative;overflow:hidden;
  padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,44px);
  background:linear-gradient(168deg,var(--ju-raspberry-50) 0%,var(--color-background) 62%);
  border-bottom:var(--border-subtle);
}
.gal-topo__inner{position:relative}
.gal-topo__titulo{
  font-weight:300;font-size:clamp(31px,5.4vw,62px);line-height:1.02;letter-spacing:-.038em;
  text-wrap:balance;margin-bottom:var(--space-5);
}
.gal-topo__conta{
  margin-top:var(--space-5);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-tertiary);
}
.gal-topo__conta strong{color:var(--color-accent-ink);font-weight:700}

/* ─── BARRA DE FILTROS ───────────────────────────────────────────────────
   Gruda logo abaixo da navbar. `top` usa --nav-h para as duas nunca se
   sobreporem quando a página rola. */
.gal-barra{
  position:sticky;top:var(--nav-h);z-index:40;
  padding-block:var(--space-4);
  background:color-mix(in srgb, var(--color-background) 90%, transparent);
  background:var(--color-background);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:var(--border-subtle);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gal-barra{background:color-mix(in srgb, var(--color-background) 86%, transparent)}
}
/* o rolo horizontal existe para o celular: 6 filtros não cabem em 320px */
.gal-barra__rolo{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
}
.gal-barra__rolo::-webkit-scrollbar{display:none}

.gal-filtro{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;scroll-snap-align:start;
  min-height:44px;padding:0 16px;cursor:pointer;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font:inherit;font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-secondary);
  transition:background var(--duration-fast) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard),
             color var(--duration-fast) var(--easing-standard),
             transform var(--duration-fast) var(--easing-standard);
}
@media (hover:hover){
  .gal-filtro:hover{border-color:var(--color-border-strong);background:var(--color-background-alt)}
}
.gal-filtro:active{transform:scale(.96)}
.gal-filtro[aria-pressed="true"]{
  background:var(--color-accent-soft);border-color:var(--color-accent-strong);color:var(--color-accent-ink);
}
.gal-filtro__n{
  display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--color-background-alt);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--color-text-tertiary);
}
.gal-filtro[aria-pressed="true"] .gal-filtro__n{background:var(--ju-ink-0);color:var(--color-accent-ink)}

/* ─── MOSAICO ────────────────────────────────────────────────────────────
   Colunas de CSS: cada peça mantém a proporção da foto, sem recorte. É o que
   deixa a leitura editorial em vez de grade de e-commerce. */
.gal-grade-wrap{padding-block:clamp(24px,4vw,52px) clamp(40px,6vw,72px)}
.gal-grade{columns:2;column-gap:12px;list-style:none;padding:0;margin:0}
@media (min-width:640px){.gal-grade{columns:3;column-gap:var(--gap-grid)}}
@media (min-width:1100px){.gal-grade{columns:4}}

.gal-peca{display:inline-block;width:100%;break-inside:avoid;margin:0 0 12px}
@media (min-width:640px){.gal-peca{margin-bottom:var(--gap-grid)}}
.gal-peca[hidden]{display:none!important}

.gal-peca__botao{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;cursor:pointer;
  background:var(--color-surface-sunken);border:0;
  box-shadow:var(--shadow-card);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
  transition:transform var(--duration-standard) var(--easing-standard);
}
.gal-peca__botao img{display:block;width:100%;height:auto;transition:transform 700ms var(--easing-standard)}
@media (hover:hover){
  .gal-peca__botao:hover{transform:translateY(-3px)}
  .gal-peca__botao:hover img{transform:scale(1.04)}
  .gal-peca__botao:hover .gal-peca__rotulo{opacity:1;transform:none}
}
.gal-peca__botao:active{transform:translateY(-1px) scale(.99);transition-duration:var(--duration-fast)}
.gal-peca__botao:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

.gal-peca__rotulo{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;text-align:left;
  background:linear-gradient(180deg,rgba(36,28,32,0) 0%,rgba(36,28,32,.62) 55%,rgba(36,28,32,.9) 100%);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--duration-standard) var(--easing-standard),
             transform var(--duration-standard) var(--easing-emphasized);
}
.gal-peca__nome{
  display:block;font-size:11.5px;font-weight:600;line-height:1.3;color:#FFFCF8;
  text-shadow:0 1px 4px rgba(24,16,20,.6);
}
/* no touch não existe hover: o rótulo fica sempre visível */
@media (hover:none){
  .gal-peca__rotulo{opacity:1;transform:none}
}

.gal-vazio{padding:var(--space-10) 0;text-align:center;color:var(--color-text-tertiary)}

/* ─── LUPA ───────────────────────────────────────────────────────────────── */
.gal-lupa{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:var(--space-4)}
.gal-lupa[hidden]{display:none!important}
.gal-lupa__fundo{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(28,20,24,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--duration-standard) var(--easing-standard);
}
.gal-lupa.is-aberta .gal-lupa__fundo{opacity:1}

.gal-lupa__caixa{
  position:relative;z-index:1;
  width:min(1080px,100%);max-height:92svh;max-height:92vh;
  display:flex;flex-direction:column;
  opacity:0;transform:scale(.97) translateY(10px);
  transition:opacity var(--duration-standard) var(--easing-standard),
             transform var(--duration-standard) var(--easing-emphasized);
}
.gal-lupa.is-aberta .gal-lupa__caixa{opacity:1;transform:none}

.gal-lupa__figura{
  display:grid;gap:0;margin:0;overflow:hidden;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  max-height:92svh;max-height:92vh;
}
.gal-lupa__moldura{background:var(--ju-ink-900);display:grid;place-items:center;min-height:0}
.gal-lupa__moldura img{display:block;width:100%;height:auto;max-height:52svh;object-fit:contain}
.gal-lupa__legenda{padding:var(--space-5) var(--card-pad) var(--card-pad);overflow-y:auto;min-height:0}
.gal-lupa__cat{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-ink);
}
.gal-lupa__titulo{
  margin-top:6px;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(21px,3.4vw,29px);line-height:1.15;color:var(--color-text-primary);
}
.gal-lupa__texto{margin-top:8px;font-size:var(--text-body-sm);line-height:1.6;color:var(--color-text-secondary);text-wrap:pretty}
.gal-lupa__texto:empty{display:none}
.gal-lupa__cta{margin-top:var(--space-5)}
.gal-lupa__pos{
  margin-top:var(--space-4);text-align:center;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--color-text-muted);
}

.gal-lupa__x,.gal-lupa__seta{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:46px;height:46px;cursor:pointer;
  background:var(--color-surface-raised);border:var(--border-subtle);border-radius:var(--radius-circle);
  font-size:26px;line-height:1;color:var(--color-text-primary);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard);
}
@media (hover:hover){.gal-lupa__x:hover,.gal-lupa__seta:hover{background:var(--color-background-alt);transform:scale(1.06)}}
.gal-lupa__x:active,.gal-lupa__seta:active{transform:scale(.92)}
.gal-lupa__x{top:-14px;right:-6px;font-size:24px}
.gal-lupa__seta{top:calc(26svh - 23px)}
.gal-lupa__seta--ant{left:-6px}
.gal-lupa__seta--pro{right:-6px}
.gal-lupa__seta[disabled]{opacity:.3;cursor:not-allowed}

@media (min-width:900px){
  .gal-lupa__figura{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .gal-lupa__moldura img{max-height:80svh}
  .gal-lupa__legenda{display:flex;flex-direction:column;justify-content:center}
  .gal-lupa__x{top:-16px;right:-16px}
  .gal-lupa__seta{top:50%;margin-top:-23px}
  .gal-lupa__seta--ant{left:-23px}
  .gal-lupa__seta--pro{right:-23px}
}
@media (max-width:400px){
  .gal-lupa{padding:var(--space-3)}
  .gal-lupa__x{top:-10px;right:-2px}
  .gal-lupa__seta{width:42px;height:42px}
}

/* ─── FECHO ──────────────────────────────────────────────────────────────── */
.gal-fecho{position:relative;overflow:hidden;border-top:var(--border-subtle);background:linear-gradient(160deg,var(--ju-cyan-100) 0%,var(--color-background) 68%)}
.gal-fecho__inner{position:relative;text-align:center}
.gal-fecho__inner .lead{margin-top:var(--space-4);margin-inline:auto}
.gal-fecho__acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-6)}
@media (max-width:400px){.gal-fecho__acoes .btn{flex:1 1 100%}}