/**
 * CURTIR E COMPARTILHAR — o visual dos botões sobre as fotos.
 *
 * Os botões ficam no canto de cima da própria imagem, discretos. No
 * computador, aparecem quando o ponteiro passa pela foto; no celular, onde
 * não existe "passar o ponteiro", ficam sempre visíveis, só que apagados.
 */

/* Os botões entram no bloco que o site JÁ tem em volta da foto. Nada é
   movido de lugar, e nenhuma medida do layout muda.
   
   A primeira versão criava uma moldura nova em volta da imagem e isso
   quebrou os cards: o CSS do site dá altura à foto a partir do bloco pai,
   e a moldura entrou no meio sem altura — a imagem carregava e aparecia
   com zero de altura. Daí a regra: marcar, nunca envolver. */
.ab-foto { /* só marca que este bloco tem foto com botões */ }

/* Posição relativa apenas onde o bloco ainda era estático. O JS confere
   antes: bloco que já tem posição própria não é tocado. */
.ab-foto-pos { position: relative; }

.ab-foto-acoes {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 7px;
  line-height: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;    /* enquanto escondidos, não roubam o clique */
  z-index: 2;
}

.ab-foto:hover .ab-foto-acoes,
.ab-foto:focus-within .ab-foto-acoes {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ab-bt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 600 .78rem/1 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: #fff;
  /* Fundo escuro translúcido: funciona tanto sobre foto clara quanto
     escura, sem precisar saber qual é a imagem. */
  background: rgba(20, 24, 22, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .16s ease, transform .12s ease;
}

.ab-bt:hover  { background: rgba(20, 24, 22, .82); }
.ab-bt:active { transform: scale(.94); }

.ab-bt svg { fill: none; stroke: currentColor; stroke-width: 1.9; }

/* O coração só enche quando a pessoa curte. */
.ab-bt-curtir.curtida        { background: rgba(200, 40, 50, .88); }
.ab-bt-curtir.curtida svg    { fill: #fff; stroke: #fff; }

.ab-conta { display: none; font-variant-numeric: tabular-nums; }
.ab-bt-curtir.tem-conta .ab-conta { display: inline; }

/* Um pulo curto ao curtir, para o clique dar resposta. */
@keyframes ab-pulso {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.ab-bt.ab-pulsa svg { animation: ab-pulso .42s ease; }

/* O aviso "Link copiado", para quem não tem o compartilhamento do celular. */
.ab-aviso {
  position: absolute;
  top: 46px;
  right: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(20, 24, 22, .9);
  color: #fff;
  font: 600 .76rem/1 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 3;
}
.ab-aviso.ver { opacity: 1; transform: translateY(0); }

/* No celular não existe passar o ponteiro: os botões ficam sempre à vista,
   apagados o bastante para não brigar com a foto. */
@media (hover: none) {
  .ab-foto-acoes {
    opacity: .82;
    transform: none;
    pointer-events: auto;
  }
  .ab-bt { min-height: 38px; }   /* alvo maior para o dedo */
}

/* Quem pediu menos animação no sistema não leva nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .ab-foto-acoes, .ab-bt, .ab-aviso { transition: none; }
  .ab-bt.ab-pulsa svg { animation: none; }
}

/* Impressão: os botões não existem no papel. */
@media print {
  .ab-foto-acoes, .ab-aviso { display: none !important; }
}