/* ---------------------------------------------------------------------------
   Seção posts-ia/: grade dos posts gerados por IA. Herda tokens de style.css e
   o esqueleto da página de detalhe de projeto.css; aqui só o que é da grade.
   --------------------------------------------------------------------------- */

/* "Como funciona": passos numerados 01..04 no lugar da seta da proj-list */
.posts-passos { counter-reset: passo; }
.posts-passos li { counter-increment: passo; }
.posts-passos li::before { content: counter(passo, decimal-leading-zero); }

.posts-aviso {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
  max-width: 46rem;
}

/* grade: 1 coluna no celular, quantas couberem (mín. 18rem) no resto */
.posts-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 6px;
  overflow: hidden;
}

.post-img { display: block; aspect-ratio: 4 / 5; background: var(--line); }
.post-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}
.post-img:hover img { opacity: 0.9; }

.post-texto { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.6rem; }
.post-texto h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* a legenda vem do gerador com quebras de linha: respeitar */
.post-legenda {
  white-space: pre-line;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-dim);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.post-meta a { color: var(--accent); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }

/* ---- vídeos (Reels 9:16) ---- */
.videos-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.video-quadro { position: relative; aspect-ratio: 9 / 16; background: #000; }
.video-quadro video { display: block; width: 100%; height: 100%; object-fit: cover; }
.selo-ia {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a0a0b;
  background: var(--accent);
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  pointer-events: none;
}
.video-formato {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
}