/* ============================================================
   css/galeria.css — grade de imagens e visualizador escuro.
   Cada imagem mantém a proporção natural: vertical continua
   vertical, horizontal continua horizontal, PNG livre também.
   ============================================================ */

.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(130px,15vw,200px),1fr));
  gap:.75rem;
  align-items:start;
  grid-auto-rows:auto;
  margin:0 0 1.6rem;
}

.figura{
  display:block;
  border:1px solid var(--l);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  padding:0;
  cursor:zoom-in;
  height:auto;
  aspect-ratio:auto;
}
.figura:hover,.figura:focus-visible{border-color:var(--pa);outline:3px solid var(--pj);outline-offset:2px}

.figura img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
}

/* ---------- visualizador ---------- */

body.travado{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:rgba(9,13,18,.97);
  backdrop-filter:blur(3px);
}
.lb[hidden]{display:none}

.lb-topo{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.5rem;
  padding:.7rem 1rem .4rem;
}

.lb-conta{
  display:inline-flex;align-items:center;gap:.3rem;
  min-height:44px;padding:0 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;font-size:.96rem;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.lb-barra{opacity:.55;font-weight:600}

.lb-grupo{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem;border-radius:999px;
  background:rgba(255,255,255,.08);
}

.lb-b{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:0 0 46px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .15s, background .15s, border-color .15s;
}
.lb-b svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.lb-b:hover,.lb-b:focus-visible{
  background:var(--pa);border-color:var(--pa);
  transform:translateY(-2px) scale(1.06);outline:none;
}
.lb-b:focus-visible{box-shadow:0 0 0 3px rgba(127,216,190,.9)}

.lb-play.on{background:var(--pj);border-color:var(--pj);color:#12202A}

.lb-x{background:rgba(176,58,72,.85);border-color:rgba(176,58,72,.9)}
.lb-x:hover{background:#B03A48;border-color:#B03A48}

.lb-palco{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.4rem 1rem 0;
  touch-action:pan-y;
}

.lb-moldura{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;
  padding:.6rem;border-radius:16px;overflow:hidden;
  background-color:#151a20;
  background-image:
    linear-gradient(45deg,#20262e 25%,transparent 25%),
    linear-gradient(-45deg,#20262e 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#20262e 75%),
    linear-gradient(-45deg,transparent 75%,#20262e 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0;
}

.lb-moldura img{
  display:block;
  max-width:100%;max-height:calc(100vh - 200px);
  width:auto;height:auto;
  background:transparent;cursor:default;
  user-select:none;-webkit-user-drag:none;
}

.lb-seta{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;flex:0 0 58px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  transition:transform .15s, background .15s;
}
.lb-seta svg{
  width:30px;height:30px;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.lb-seta:hover,.lb-seta:focus-visible{background:var(--pa);border-color:var(--pa);transform:scale(1.06);outline:none}
.lb-seta:focus-visible{box-shadow:0 0 0 3px rgba(127,216,190,.9)}

.lb-legenda{
  margin:0;padding:.5rem 1rem 1rem;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:.88rem;line-height:1.4;
}

@media print{
  body.imprimir > *:not(.lb){display:none!important}
  body.imprimir .lb{position:static;background:#fff;inset:auto;backdrop-filter:none}
  body.imprimir .lb-topo,body.imprimir .lb-legenda,body.imprimir .lb-seta{display:none}
  body.imprimir .lb-palco{padding:0;display:block}
  body.imprimir .lb-moldura{background:none;padding:0;border-radius:0}
  body.imprimir .lb-moldura img{max-width:100%;max-height:none;width:100%}
  .grade{grid-template-columns:repeat(3,1fr)}
}