/* RIBONDI — lightbox proprio.

   Sem dependencia: um overlay fixo, uma imagem centralizada e tres botoes.
   O display:none/flex fica amarrado ao aria-hidden, entao o estado visual e o
   estado acessivel nunca saem de sincronia - nao existe "fechado para o leitor
   de tela mas visivel na tela". */

.rb-lb{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 28, 31, .92);
  padding: 24px;
}
.rb-lb[aria-hidden="false"]{
  display: flex;
}

.rb-lb__img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rb-lb button{
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
}
.rb-lb button:hover,
.rb-lb button:focus-visible{
  background: rgba(255, 255, 255, .24);
}
.rb-lb__fechar{ top: 16px; right: 16px; }
.rb-lb__prev{ left: 16px; top: 50%; transform: translateY(-50%); }
.rb-lb__next{ right: 16px; top: 50%; transform: translateY(-50%); }

/* Com uma imagem so, as setas nao fazem sentido. */
.rb-lb[data-unica="true"] .rb-lb__prev,
.rb-lb[data-unica="true"] .rb-lb__next{
  display: none;
}

/* Trava a rolagem do fundo enquanto a caixa esta aberta. */
body.rb-lb-aberta{
  overflow: hidden;
}

/* Legenda do item ampliado. Fica sob a imagem, discreta: quem abriu quer ver
   a foto, o texto so serve para nao perder de vista qual tratamento e. */
.rb-lb__legenda{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  pointer-events: none;
}