/* ============================================================
   REDES.LAB ON · Ampliar foto
   A foto grande por cima da tela. Fundo bem escuro, para a
   imagem ser a única coisa que existe enquanto está aberta.
   ============================================================ */

.amp-veu{
  position:fixed; inset:0; z-index:9000;
  display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(18,8,12,.93);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.amp-veu.aberto{display:flex;}

/* A cena é a foto mais o painel da publicação, lado a lado no
   computador e um sobre o outro no celular. A informação em volta da
   foto não se perde ao ampliar: quem publicou, o texto, os números e
   as ações continuam à mão. */
.amp-cena{
  display:flex; gap:22px; align-items:center; justify-content:center;
  width:100%; max-width:1500px; max-height:100%;
}
.amp-veu.com-painel .amp-cena{align-items:stretch;}

.amp-palco{
  margin:0; flex:1 1 auto; min-width:0; max-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.amp-palco img{
  display:block; max-width:100%; max-height:calc(100vh - 150px);
  width:auto; height:auto; border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:amp-entra .22s ease-out;
}

/* ---- o painel da publicação ---- */
.amp-lado{
  flex:0 0 372px; width:372px; align-self:stretch; overflow-y:auto;
  background:var(--surface,#fff); color:var(--ink,#241016);
  border-radius:8px; padding:18px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:14px;
}
.amp-lado[hidden]{display:none;}
.amp-lado .post-head{display:flex; gap:11px; align-items:flex-start;}
.amp-lado .post-body{font-size:15px; line-height:1.6;}
.amp-lado .post-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--rule,#E2D8DB);}
.amp-lado .post-actions{display:flex; flex-wrap:wrap; gap:6px;}
.amp-lado .post-stats{display:flex; flex-wrap:wrap; gap:10px; font-size:12.5px; margin-bottom:10px;}
/* dentro do painel, o cursor de ampliar não faz sentido */
.amp-lado img,.amp-lado .media-tile{cursor:default !important;}
/* ---- a conversa com a foto aberta ----
   Sem comentários, o rodapé fica colado embaixo e o painel respira. Com
   comentários, o espaço é da conversa, e o rodapé volta ao lugar dele,
   logo depois do relato. */
.amp-lado:has(.amp-conversa) .post-foot{margin-top:0;}
.amp-conversa{margin-top:0; border-top:none; padding-top:0;}
.amp-conversa .pc-item{gap:0;}
.amp-conversa .pc-balao{background:var(--surface-sunk,#F6F1F2);}
.amp-conversa .pc-campo{background:var(--surface,#fff);}
.amp-lista{display:flex; flex-direction:column; gap:10px;}
.amp-veu.sem-animacao .amp-palco img{animation:none;}
@keyframes amp-entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.amp-palco figcaption{
  max-width:70ch; text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; color:rgba(255,249,240,.82);
}

.amp-contador{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; letter-spacing:.12em; color:rgba(255,249,240,.55);
  font-variant-numeric:tabular-nums; pointer-events:none;
}

.amp-fechar,.amp-passo{
  position:absolute; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,249,240,.22); background:rgba(255,249,240,.08);
  color:#FFF9F0; border-radius:999px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.amp-fechar:hover,.amp-passo:hover{background:rgba(255,249,240,.18); border-color:rgba(255,249,240,.42);}
.amp-fechar:focus-visible,.amp-passo:focus-visible{outline:2px solid #EDB92E; outline-offset:3px;}

.amp-fechar{top:16px; right:16px; width:42px; height:42px;}
.amp-passo{top:50%; transform:translateY(-50%); width:46px; height:46px;}
.amp-antes{left:14px;}
.amp-depois{right:14px;}

@media (max-width:1000px){
  .amp-veu{padding:0;}
  .amp-cena{flex-direction:column; gap:0; height:100%; max-height:100%;}
  .amp-palco{flex:0 1 auto; padding:52px 12px 8px;}
  .amp-palco img{max-height:min(52vh,420px);}
  .amp-lado{
    flex:1 1 auto; width:100%; max-width:100%;
    border-radius:14px 14px 0 0; overflow-y:auto;
    padding:16px 18px 26px;
  }
  .amp-veu.com-painel .amp-contador{position:static; margin-top:8px;}
}
@media (max-width:620px){
  .amp-veu:not(.com-painel) .amp-palco img{max-height:calc(100vh - 190px);}
  .amp-passo{width:40px; height:40px;}
  .amp-veu:not(.com-painel) .amp-passo{top:auto; bottom:52px; transform:none;}
  .amp-veu:not(.com-painel) .amp-contador{bottom:66px;}
  .amp-veu.com-painel .amp-passo{top:26vh; transform:none;}
  .amp-antes{left:12px;}
  .amp-depois{right:12px;}
}

/* As camadas em cima da foto são decoração: o véu de textura e a
   legenda. Elas não devem roubar o clique de quem quer ver a imagem
   grande. O botão de vídeo continua clicável, porque tem função. */
.post-media .media-grain,.post-media .media-cap,
[data-ampliar] .media-grain,[data-ampliar] .media-cap{pointer-events:none;}

/* A foto que abre precisa parecer que abre. */
.adm-enc-foto img,.post-media img,.rla-pf-galeria img,[data-ampliar] img{
  transition:filter .15s ease, transform .15s ease;
}
.adm-enc-foto img:hover,.post-media img:hover,.rla-pf-galeria img:hover,[data-ampliar] img:hover{
  filter:brightness(1.04);
}
.adm-enc-foto img:focus-visible,.post-media img:focus-visible,
.rla-pf-galeria img:focus-visible,[data-ampliar] img:focus-visible{
  outline:2px solid var(--primary,#C5204B); outline-offset:2px;
}