/* ==========================================================================
   PRISMA · card.css — CARTÃO
   --------------------------------------------------------------------------
   Um cartão representa uma UNIDADE REAL de informação: um projeto, um agente,
   uma tarefa, um arquivo, um curso. Não é caixa para separar parágrafo.

   A regra que o sistema leva a sério: não "cardificar" tudo. Antes de criar um
   cartão, tente espaço, alinhamento, divisor e tipografia. Vinte cartões
   iguais numa tela não organizam nada — eles achatam a hierarquia até que
   nada mais pareça importante.

   ANATOMIA
     .cartao-media?   imagem, ícone grande ou gráfico
     .cartao-cabeca   título + etiqueta/estado
     .cartao-corpo    a informação
     .cartao-rodape   metadados e ações

   Composto de primitives: tipografia, badge, avatar, botão, progresso.
   Não reimplementar nenhum deles aqui.
   ========================================================================== */

.cartao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  padding: var(--espaco-6);

  /* Herda o material da superfície: véu, aresta interna, raio grande.
     Ver foundations/glass.css — a caixa chapada com borda dura é
     exatamente o que este sistema evita. */
  background-color: var(--surface-1);
  background-image: var(--surface-veu);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-raised);
}

.cartao-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.cartao-titulo  { font-size: var(--h4-size); font-weight: 600; color: var(--text-primary);
                  line-height: 1.35; }
.cartao-corpo   { font-size: var(--body-sm-size); color: var(--text-secondary); line-height: 1.55; }
.cartao-rodape  { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap;
                  padding-top: var(--espaco-4);
                  border-top: 1px solid var(--border-subtle); }

/* Etiqueta em caixa alta no canto — diz a CATEGORIA da peça, não o estado. */
.cartao-etiqueta {
  font-size: 11px;
  font-family: var(--fonte-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.cartao-media {
  margin: calc(-1 * var(--espaco-6)) calc(-1 * var(--espaco-6)) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-3);
}
.cartao-media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   VARIANTES
   -------------------------------------------------------------------------- */

/* Cartão clicável: a peça inteira é o alvo. O movimento vem de motion.css
   e só existe onde há ponteiro de verdade. */
.cartao--acao,
.cartao-acao {
  cursor: pointer;
  text-align: start;
  width: 100%;
}
.cartao--acao:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }

/* Cartão de vidro: SÓ quando flutua sobre campo com textura. Sobre superfície
   sólida o blur não tem o que refratar e a peça vira um cartão mais fraco. */
.cartao--vidro {
  background-color: var(--glass-tint-liquid);
  background-image: none;
  -webkit-backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-floating);
}

/* Cartão de destaque: inverte a relação com o fundo. Um por tela. */
.cartao--destaque {
  /* --surface-destaque É um gradiente (imagem). Por isso vai em
     background-image, e a cor de base é a do fim do gradiente — nunca
     `background:` seguido de `background-image: none`, que apaga o próprio
     fundo (defeito real, achado por medição em 19/09/2026). */
  background-color: var(--surface-destaque-base);
  background-image: var(--surface-destaque);
  box-shadow: inset 0 0 0 1px var(--border-on-destaque), var(--elev-floating);
  color: var(--text-on-destaque);
}
.cartao--destaque .cartao-titulo   { color: var(--text-on-destaque); }
.cartao--destaque .cartao-corpo    { color: var(--text-on-destaque-2); }
.cartao--destaque .cartao-etiqueta { color: var(--text-on-destaque-3); }
.cartao--destaque .cartao-rodape   { border-top-color: var(--border-on-destaque); }

/* Controle dentro do destaque lê os tokens on-destaque, não os do tema: o
   painel é escuro em todos os temas, então a tinta de vidro do tema claro
   (branco a 58%) viraria uma pílula cinza com texto escuro. */
.cartao--destaque .btn--vidro,
.cartao--destaque .btn--secundario,
.cartao--destaque .chip {
  background-color: var(--glass-on-destaque);
  background-image: none;
  color: var(--text-on-destaque);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border-on-destaque);
}
.cartao--destaque .btn--vidro:hover:not(:disabled),
.cartao--destaque .btn--secundario:hover:not(:disabled),
.cartao--destaque .chip:hover { background-color: var(--glass-on-destaque-hover); color: var(--text-on-destaque); }

/* Selecionado — estado, não decoração. */
.cartao[aria-selected="true"],
.cartao--selecionado {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 50%, transparent),
              var(--elev-floating), var(--glow-active);
}

/* Em execução — o agente está trabalhando nesta peça agora. */
.cartao--processando {
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-raised), var(--glow-processing);
}

/* Compacto: para lista densa, onde o cartão é linha e não bloco. */
.cartao--compacto { padding: var(--espaco-4); gap: var(--espaco-3); border-radius: var(--radius-lg); }
.cartao--compacto .cartao-titulo { font-size: var(--body-size); }

/* Silencioso: agrupa sem desenhar caixa. A alternativa honesta a cardificar
   tudo — mantém a unidade de informação sem mais uma moldura na tela. */
.cartao--silencioso {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   GRADE DE CARTÕES
   `auto-fit` + `minmax` para o layout responder à largura real disponível,
   sem media query e sem número mágico de colunas.
   -------------------------------------------------------------------------- */
.cartao-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--espaco-5);
}

/* --------------------------------------------------------------------------
   ESQUELETO DO CARTÃO
   Reproduz a FORMA do cartão, não um bloco cinza genérico.
   -------------------------------------------------------------------------- */
.cartao--esqueleto { gap: var(--espaco-3); }
.cartao--esqueleto .esqueleto--titulo { width: 62%; }