/* ================================================================
   TM Grade de Conteúdo (Reels) — estilo "Terminal Hacker"
   Mesma identidade visual aprovada no mockup (posts do blog):
   mono, scanlines, verde/ciano neon, selos em amarelo neon.
   ================================================================ */

.tm-gr-wrap { box-sizing: border-box; }
.tm-gr-wrap *, .tm-gr-wrap *::before, .tm-gr-wrap *::after { box-sizing: border-box; }

/*
 * O tema (folha de estilo carregada DEPOIS da nossa, ou com seletor mais
 * específico tipo ".entry-content h1") sobrescreve a cor de elementos de
 * texto genéricos (h1, p, etc.) com a cor padrão dele — deixando nosso
 * título parcialmente apagado (só o <span> com cor explícita se salva).
 * Por isso toda cor/fundo/fonte do nosso layout abaixo tem !important:
 * garante que o visual "Terminal Hacker" sempre vence, não importa o que
 * o tema tente aplicar por cima.
 */

.tm-gr-terminal {
  position: relative;
  background: #05060a !important;
  font-family: "Share Tech Mono", monospace !important;
  color: #eaf6f9 !important;
  overflow: hidden;
}
.tm-gr-terminal::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .05;
  background: repeating-linear-gradient(0deg, #00ffa2 0px, transparent 1px, transparent 3px) !important;
}

/* -------------------- HERO -------------------- */
.tm-gr-hero {
  position: relative;
  padding: 70px 20px 50px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,162,.12), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(0,200,255,.10), transparent 45%),
    #05060a !important;
  border-bottom: 1px solid #123024;
}
.tm-gr-hero-tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #00ffa2;
  color: #00ffa2 !important;
  border-radius: 4px;
  font-size: .75rem;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.tm-gr-hero-titulo {
  margin: 0 0 10px;
  font-family: "Share Tech Mono", monospace !important;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  color: #eafff5 !important;
  text-shadow: 0 0 18px rgba(0,255,162,.5);
}
.tm-gr-hero-titulo span { color: #00ffa2 !important; }
.tm-gr-hero-sub {
  margin: 0 auto;
  max-width: 560px;
  font-size: 1.05rem;
  color: #8fd9c4 !important;
  opacity: .9;
}
.tm-gr-hero-prompt {
  margin-top: 22px;
  font-size: .95rem;
  color: #00ffa2 !important;
  opacity: .85;
}
.tm-gr-hero-prompt::after { content: "▌"; animation: tm-gr-piscar 1s step-end infinite; }
@keyframes tm-gr-piscar { 50% { opacity: 0; } }

/* -------------------- SEÇÃO / GRADE -------------------- */
.tm-gr-secao { max-width: 1180px; margin: 0 auto; padding: 34px 20px 10px; position: relative; z-index: 2; }
.tm-gr-secao-cabecalho { text-align: center; margin-bottom: 26px; }

.tm-gr-tag {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: rgba(255, 240, 0, .12) !important;
  color: #faff00 !important;
  border: 1px solid rgba(255, 240, 0, .55);
  text-shadow: 0 0 10px rgba(255, 240, 0, .65);
  box-shadow: 0 0 16px rgba(255, 240, 0, .18);
}

.tm-gr-secao-titulo {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 800;
  margin: 0 0 4px;
  color: #eafff5 !important;
}
.tm-gr-aspas { color: #00ffa2 !important; }
.tm-gr-secao-sub { font-size: 0.9rem; opacity: .7; margin: 0; color: #7fae9c !important; }

.tm-gr-grade {
  display: grid;
  /* Tamanho do card (nível 1–10, definido no admin) chega aqui como a
     variável --tm-gr-card-min; o "min(...,100%)" evita que um card grande
     estoure a largura da tela em celulares. Sem precisar de breakpoints
     fixos: o número de colunas por linha se ajusta sozinho ao espaço. */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tm-gr-card-min, 220px), 100%), 1fr));
  gap: 18px;
  padding-bottom: 30px;
}
@media (max-width: 620px)  { .tm-gr-grade { gap: 12px; } }

/* -------------------- CARD (janela estilo terminal) -------------------- */
.tm-gr-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: #0a1410 !important;
  border: 1px solid #1c3a2c;
  box-shadow: 0 0 0 rgba(0,255,162,0);
  transition: box-shadow .2s, border-color .2s, transform .2s;
  animation: tm-gr-flutuar 5s ease-in-out infinite;
}
.tm-gr-card:hover { border-color: #00ffa2; box-shadow: 0 0 22px rgba(0,255,162,.25); transform: translateY(-4px); }
@keyframes tm-gr-flutuar {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-9px) rotate(0.6deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .tm-gr-card { animation: none !important; } }

/* janela em formato paisagem — miniatura de POST, não de Reels vertical */
.tm-gr-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #1c3a2c;
}
/* fundo padrão (variando levemente por posição) quando não há foto anexada */
.tm-gr-card.tm-gr-sem-imagem .tm-gr-card-thumb { background-color: #0f2a20 !important; background-image: linear-gradient(150deg, #0f2a20, #081b15) !important; }
.tm-gr-card.tm-gr-sem-imagem:nth-of-type(5n+2) .tm-gr-card-thumb { background-image: linear-gradient(150deg, #0f2a20, #0d3d2a) !important; }
.tm-gr-card.tm-gr-sem-imagem:nth-of-type(5n+3) .tm-gr-card-thumb { background-image: linear-gradient(150deg, #0f2a20, #123f2c) !important; }
.tm-gr-card.tm-gr-sem-imagem:nth-of-type(5n+4) .tm-gr-card-thumb { background-image: linear-gradient(150deg, #0f2a20, #0a2e33) !important; }
.tm-gr-card.tm-gr-sem-imagem:nth-of-type(5n+5) .tm-gr-card-thumb { background-image: linear-gradient(150deg, #0f2a20, #123324) !important; }

/* "máscara" digital sobreposta na FOTO real, pra manter o visual de terminal
   por cima de qualquer imagem que o Ronaldo anexar */
.tm-gr-card:not(.tm-gr-sem-imagem) .tm-gr-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,10,8,.55) 0%, rgba(5,10,8,.15) 35%, rgba(5,10,8,.65) 100%),
    linear-gradient(150deg, rgba(0,255,162,.10), rgba(0,60,255,.06)) !important;
  mix-blend-mode: normal;
}

.tm-gr-dots {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  font-size: .55rem;
  letter-spacing: 3px;
  color: #2c5443 !important;
}
.tm-gr-card:not(.tm-gr-sem-imagem) .tm-gr-dots { color: rgba(234,255,245,.75) !important; text-shadow: 0 0 6px rgba(0,0,0,.6); }

.tm-gr-play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(5, 20, 15, .45) !important;
  border: 1px solid rgba(0,255,162,.55);
  box-shadow: 0 0 18px rgba(0,255,162,.25);
  backdrop-filter: blur(1px);
}
.tm-gr-play span { font-size: 1.15rem; color: #00ffa2 !important; line-height: 1; margin-left: 2px; }
.tm-gr-card.tm-gr-sem-imagem .tm-gr-play { background: transparent !important; border-color: transparent; box-shadow: none; }

.tm-gr-card-legenda {
  padding: 10px 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: #f4fffb !important;
  text-shadow: 0 0 7px rgba(0,255,162,.45);
  background: #0a1410 !important;
}
.tm-gr-card-legenda::before { content: "> "; color: #00ffa2 !important; }

/* card sem link nem imagem (item "div" em vez de "a") não precisa de cursor de link */
div.tm-gr-card { cursor: default; }

/* -------------------- EFEITO "EM ALTA" (borda arco-íris + selo) -------------------- */
/* Borda de gradiente animada, no estilo do anel de "story" postado do Instagram,
   contornando o card inteiro. Usa a técnica de dois fundos (cor sólida por
   dentro, gradiente por fora, cada um "cortado" numa camada) em vez de um
   pseudo-elemento, assim não é cortada pelo overflow:hidden do card. */
.tm-gr-card.tm-gr-card-efeito {
  border: 3px solid transparent !important;
  background-image:
    linear-gradient(#0a1410, #0a1410),
    linear-gradient(90deg, #f9ce34, #ee2a7b, #6228d7, #35c6f4, #f9ce34, #ee2a7b, #6228d7) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 300% 100% !important;
  animation: tm-gr-flutuar 5s ease-in-out infinite, tm-gr-arcoiris 3s linear infinite !important;
}
@keyframes tm-gr-arcoiris {
  0%   { background-position: 0 0, 0% 0; }
  100% { background-position: 0 0, 300% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-gr-card.tm-gr-card-efeito { animation: none !important; }
}

.tm-gr-card-selo {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  color: #fff !important;
  background: linear-gradient(90deg, #f9ce34, #ee2a7b, #6228d7) !important;
  box-shadow: 0 0 10px rgba(238,42,123,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}