/* ============================================================
   css/galeria.css — grade de imagens e visualizador escuro.
   Miniatura: caixa 4:3, entre 150 e 210 px de largura.
   A imagem inteira cabe dentro. PNG alto não estica a fileira.
   ============================================================ */

.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,210px));
  justify-content:start;
  gap:.75rem;
  align-items:start;
  margin:0 0 1.6rem;
}

.figura{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border:1px solid var(--l);
  border-radius:12px;
  overflow:hidden;
  background:#F3F0EC;
  padding:0;
  cursor:zoom-in;
}
.figura:hover,.figura:focus-visible{border-color:var(--pa);outline:3px solid var(--pj);outline-offset:2px}

/* Pasta no primeiro lugar da grade, do tamanho de uma miniatura. */
.grade > .card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border:3px solid var(--pa);
  border-radius:12px;
  overflow:hidden;
  background:#F3F0EC;
}
.grade > .card .capa{aspect-ratio:auto;height:100%;background:#F3F0EC}
.grade > .card .capa img{width:100%;height:100%;object-fit:contain}
.grade > .card .txt{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:0;
  padding:.12rem .4rem .14rem;
  background:var(--pa);color:#fff;
}
.grade > .card .rotulo{color:#fff;font-size:.84rem;line-height:1.05}
.grade > .card .conta{color:#fff;font-size:.7rem;line-height:1.05;margin:0;opacity:.92}

.figura img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  background:transparent;
}

/* ---------- 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-px{
  display:inline-flex;align-items:center;
  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)}
  .figura{aspect-ratio:auto;height:auto;position:static}
  .figura img{position:static;inset:auto;height:auto;max-height:none;max-width:100%;object-fit:contain}
}