/* ============================================================
   EMBED THUMB · Componente padrao para tabelas Top 10
   Substitui codigo bruto do reel por miniatura clicavel
   Reutilizavel em todas as paginas de criadores
   ============================================================ */

/* Wrapper celula tabela */
td.cmt-code {
  padding:14px 10px;
  width:88px;
}

/* Card do embed pequeno */
.cmt-embed {
  display:block;
  width:64px;
  height:90px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  background:#0a0a14;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation:isolate;
}

/* Imagem thumbnail Instagram */
.cmt-embed img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

/* Overlay sutil pra dar profundidade */
.cmt-embed::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
  z-index:1;
  pointer-events:none;
  transition:opacity .25s ease;
}

/* Icone play centralizado */
.cmt-embed::before {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;
  background:rgba(0,0,0,.6);
  border-radius:50%;
  z-index:2;
  pointer-events:none;
  opacity:.85;
  transition:opacity .25s ease, transform .25s ease;
}

/* Triangulo play (pseudo via clip-path no span interno) */
.cmt-embed .cmt-embed-play {
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  margin:-5px 0 0 -3px;
  border-style:solid;
  border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
  z-index:3;
  pointer-events:none;
  opacity:.95;
}

/* Codigo abaixo da thumbnail (pequenissimo, monoespacado) */
.cmt-embed-code {
  display:block;
  margin-top:6px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  color:#64748b;
  letter-spacing:.5px;
  text-align:left;
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Hover: levanta + sombra cyan + zoom suave */
.cmt-embed:hover {
  transform:translateY(-3px);
  border-color:rgba(34,211,238,.4);
  box-shadow:
    0 10px 24px -8px rgba(34,211,238,.25),
    0 4px 12px -2px rgba(0,0,0,.5);
}
.cmt-embed:hover img { transform:scale(1.06); }
.cmt-embed:hover::after { opacity:.55; }
.cmt-embed:hover::before { opacity:1; transform:scale(1.1); }

/* Estado quando a thumbnail nao carrega (graceful degradation) */
.cmt-embed img[data-failed="1"] { display:none; }
.cmt-embed img[data-failed="1"] + .cmt-embed-fallback { display:flex; }
.cmt-embed-fallback {
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #0d0d18 0%, #1a1a2e 100%);
  color:#64748b;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  text-align:center;
  padding:6px;
  word-break:break-all;
  line-height:1.2;
  z-index:1;
}

/* Mobile: thumbnail um pouco menor */
@media (max-width:760px) {
  td.cmt-code { padding:10px 8px; width:72px; }
  .cmt-embed { width:54px; height:76px; }
  .cmt-embed-code { font-size:8px; max-width:60px; }
  .cmt-embed::before { width:18px; height:18px; margin:-9px 0 0 -9px; }
  .cmt-embed .cmt-embed-play { border-width:4px 0 4px 6px; margin:-4px 0 0 -2px; }
}