/* ============================================================
   VEDA — ampliar imagem (lightbox)

   Carregado pela página do SESH e pela de Serviços, que é onde há tela de
   aplicativo para ampliar. O comportamento está em scripts/ampliar.js.
   ============================================================ */
.amp-alvo { position: relative; display: block; cursor: zoom-in; }
.amp-alvo:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; border-radius: var(--r-lg); }

/* A lupa aparece no hover. No celular não há hover, e a imagem inteira é a
   área de toque — por isso ela não é o único sinal de que dá para clicar:
   o cursor de zoom, o contorno de foco e o rótulo do leitor de tela também. */
.amp-lupa {
  position: absolute; right: 14px; bottom: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,16,26,0.72); border: 1px solid var(--line-2);
  color: var(--fg); pointer-events: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.amp-lupa svg { width: 18px; height: 18px; }
.amp-alvo:hover .amp-lupa,
.amp-alvo:focus-visible .amp-lupa { opacity: 1; transform: translateY(0); }
.amp-alvo img { transition: filter var(--dur-base) var(--ease-out); }
.amp-alvo:hover img { filter: var(--tela-sombra-hover); }

/* Sem hover (celular e tablet), a lupa fica sempre visível: é a única pista
   que sobra de que a imagem abre. */
@media (hover: none) {
  .amp-lupa { opacity: 1; transform: none; }
}

/* ---- a caixa ---- */
.amp {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(10,7,13,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 200ms var(--ease-out);
  cursor: zoom-out;
}
.amp.is-on { opacity: 1; }
body.amp-aberto { position: fixed; width: 100%; overflow: hidden; }

.amp-figura {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.amp-figura img {
  max-width: 100%;
  /* Desconta a legenda e a folga, senão a imagem estoura a altura da tela e
     a legenda sai de vista justamente em telas baixas (notebook deitado). */
  max-height: calc(100vh - 22vmin);
  width: auto; height: auto; object-fit: contain;
  cursor: default; border-radius: var(--tela-raio); filter: var(--tela-sombra);
}
.amp-figura figcaption {
  display: flex; flex-direction: column; gap: 3px; text-align: center;
  max-width: 70ch; cursor: default;
}
.amp-t { font-weight: 600; font-size: 15px; color: var(--fg); }
.amp-d { font-size: 14px; line-height: 1.5; color: var(--fg-mute); }

.amp-fechar, .amp-nav {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,241,237,0.07); border: 1px solid var(--line-2);
  color: var(--fg); cursor: pointer; border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.amp-fechar:hover, .amp-nav:hover { background: var(--magenta); border-color: var(--magenta); }
.amp-fechar:focus-visible, .amp-nav:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.amp-fechar { top: 20px; right: 20px; width: 44px; height: 44px; }
.amp-fechar svg { width: 20px; height: 20px; }
.amp-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.amp-nav svg { width: 22px; height: 22px; }
.amp-ant { left: 20px; }
.amp-prox { right: 20px; }

/* No celular as setas laterais roubariam a imagem: descem para o rodapé da
   tela, lado a lado, onde o polegar alcança. E o gesto de arrastar continua
   valendo, que é o que a maioria vai tentar primeiro. */
@media (max-width: 640px) {
  .amp { padding: 0; }
  .amp-figura { gap: 12px; padding: 64px 12px 84px; }
  .amp-figura img { max-height: calc(100vh - 180px); }
  .amp-fechar { top: 12px; right: 12px; width: 40px; height: 40px; }
  .amp-nav { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .amp-ant { left: calc(50% - 54px); }
  .amp-prox { right: calc(50% - 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .amp { transition: none; }
  .amp-lupa, .amp-alvo img { transition: none; }
}

/* ---- tamanho real ----
   O toque na imagem alterna entre caber na tela e tamanho real. No estado
   ampliado a moldura passa a rolar nos dois eixos, e a imagem larga: é assim
   que se lê o nome de uma coluna num print de 2400px aberto num telefone. */
.amp-figura img { cursor: zoom-in; }
.amp.amp-zoom { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.amp.amp-zoom .amp-figura { max-width: none; max-height: none; margin: auto; }
.amp.amp-zoom .amp-figura img {
  max-width: none; max-height: none;
  width: auto; height: auto;
  cursor: zoom-out;
}
/* Ampliado, a legenda e as setas atrapalhariam a leitura. */
.amp.amp-zoom figcaption, .amp.amp-zoom .amp-nav { display: none; }