/* ============================================================================
   CARTÃO DE ARTIGO — o coração do Módulo 1 (S10–S14) e do Módulo 3 (S27–S29).
   Contrato: 02-arquitetura/01-arquitetura-da-aula.md, Componentes 1.
   HTML: GERADO pelo build a partir de 04-deck/dados/artigos.json
         (07-scripts/cartao-artigo.mjs). Nunca escrito à mão.

   Revelação por batidas, SÓ CSS — nada de timer, e por isso voltar uma cena
   cai direto no estado final sem reencenar (CONTRATO §2):
     batida 0  capa (sempre em tela, à esquerda)
     batida 1  resumo   ┐
     batida 2  dados    ├ um painel por vez, no mesmo lugar (data-exclusivo)
     batida 3  crítica  ┘
   A cena declara data-beats="3".

   Geometria no palco de 1920×1080 (120 × 67,5 rem):
     topo 8,5rem (abaixo da act-tag) · base --ref-band (a citação do pé)
     capa 40rem · respiro 4rem · corpo o resto (≈ 64rem)
   ========================================================================== */

.cartao {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 8.5rem; bottom: var(--ref-band);
  display: grid; grid-template-columns: 40rem 1fr; gap: var(--sp-6);
}

/* --- A capa: a cara do artigo, e a citação dele -------------------------- */
.cartao__capa {
  display: grid; align-content: start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--bg-700);
  border: 1px solid var(--stroke); border-top: .375rem solid var(--primary-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cartao__revista {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font: 700 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--primary-soft);
}
.cartao__img {
  display: block; width: 100%; max-height: 22rem; object-fit: contain;
  border: 1px solid var(--stroke); border-radius: var(--r-sm);
}
.cartao__titulo {
  font: 600 var(--fs-h2)/var(--lh-h2) var(--font-body);
  color: var(--txt-high);
}
.cartao__autores { font: 400 var(--fs-ref)/1.3 var(--font-body); color: var(--txt-low) }
.cartao__ids     { font: 400 var(--fs-ref)/1.3 var(--font-mono); color: var(--txt-dim) }
.cartao__ids a   { color: var(--primary-soft); text-decoration: none }

/* --- O corpo: trilho + painéis empilhados no mesmo lugar ----------------- */
.cartao__corpo {
  display: grid; grid-template-rows: auto 1fr; min-width: 0;
}
.cartao__trilho { display: flex; gap: var(--sp-5) }
.cartao__trilho span {
  padding-bottom: var(--sp-1);
  border-bottom: .25rem solid transparent;
  color: var(--txt-dim);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.scene[data-beat="1"] .cartao__trilho [data-passo="1"],
.scene[data-beat="2"] .cartao__trilho [data-passo="2"],
.scene[data-beat="3"] .cartao__trilho [data-passo="3"] {
  color: var(--txt-high); border-color: var(--ai-core);
}

.cartao__painel {
  grid-row: 2; grid-column: 1; align-self: center;
  display: grid; gap: var(--sp-4);
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.scene[data-beat="1"] .cartao__painel[data-painel="1"],
.scene[data-beat="2"] .cartao__painel[data-painel="2"],
.scene[data-beat="3"] .cartao__painel[data-painel="3"] {
  opacity: 1; transform: none; pointer-events: auto;
}

/* 1 · resumo: três linhas, nada mais */
.cartao__linha { font: 600 var(--fs-h2)/var(--lh-h2) var(--font-body); color: var(--txt-high) }

/* 2 · dados: ficha 2×2 e os números-chave */
.cartao__ficha {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); margin: 0;
}
.cartao__ficha dt {
  font: 600 var(--fs-label)/1.2 var(--font-body);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--txt-low);
}
.cartao__ficha dd { margin: var(--sp-1) 0 0; font: 600 var(--fs-body)/1.3 var(--font-body); color: var(--txt-high) }
.cartao__numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.cartao__numeros li {
  padding-left: var(--sp-3); border-left: .25rem solid var(--ai-core);
  font: 600 var(--fs-lg)/var(--lh-lg) var(--font-body); color: var(--txt-high);
}

/* 3 · crítica: o que importa | onde falha */
.cartao__critica { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) }
.cartao__rotulo {
  font: 700 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.cartao__rotulo--ok    { color: var(--ok) }
.cartao__rotulo--falha { color: var(--warn) }
.cartao__lista { margin: 0; padding-left: 1.25em; display: grid; gap: var(--sp-2) }
.cartao__lista li { font: 500 var(--fs-lg)/var(--lh-lg) var(--font-body); color: var(--txt-high) }
.cartao__lista--ok li::marker    { color: var(--ok) }
.cartao__lista--falha li::marker { color: var(--warn) }

/* --- Cartão vazio: lugar marcado, sem conteúdo --------------------------- */
.cartao[data-estado="vazio"] .cartao__capa { border-style: dashed; border-top-style: solid; border-top-color: var(--warn) }
.cartao[data-estado="vazio"] .cartao__revista { color: var(--warn) }
.cartao__vazio { font: 600 var(--fs-h2)/1.2 var(--font-body); color: var(--txt-dim) }

/* --- Modo de leitura (celular): tudo empilhado e visível ----------------- */
@media (max-width: 900px) {
  .cartao { position: static; display: grid; grid-template-columns: 1fr; gap: 1rem }
  .cartao__corpo { display: grid; grid-template-rows: none; gap: 1rem }
  .cartao__trilho { display: none }
  .cartao__painel { grid-row: auto; opacity: 1; transform: none; pointer-events: auto }
  .cartao__ficha, .cartao__critica { grid-template-columns: 1fr }
}
@media print {
  .cartao__painel { opacity: 1; transform: none }
}