/* ==========================================================================
   Essence Tântric · artigos — o cartão de artigo e a listagem
   Autor: DEVOPS (Coneki) · 27/09/2026 · cliente Essence Tântric

   Pedido do dono, 27/09/2026: «todos os artigos estão sem fotos, precisam incluir
   thumbnails e melhorar o visual da listagem de artigos».

   O que estava medido antes disto (no ar, 1 440 px): a listagem de `/artigos/`
   servia 12 cartões e **zero imagens** — cada cartão eram três linhas de texto
   (data, título, ligação) numa grelha de três colunas, sem nada que distinguisse
   um artigo do seguinte. A fotografia existia no WordPress antigo em 2 dos 60
   artigos e não veio; as outras 58 são geradas (ver o relatório do dia).

   Factos que decidem o desenho:

   1. A fotografia é 3:2 e o `<img>` também (1536×1024 gerados). Um cartão com
      `cover` a 3:2 mostra a fotografia inteira: recorte zero. Não se pede à
      imagem uma proporção que ela não tem.
   2. O primeiro artigo da lista é o da capa: ocupa duas colunas em ecrã grande e
      leva o seu próprio tamanho de título. É ritmo editorial — evita a grelha de
      nove cartões iguais que é o padrão que o playbook §11 manda evitar.
   3. O resumo é o primeiro parágrafo do corpo, cortado. Não se inventa texto
      onde o cliente não escreveu nenhum.
   4. O cartão sem fotografia continua a funcionar (é o estado dos artigos até a
      fotografia entrar): o texto encosta-se ao topo e nada fica com um buraco.
   ========================================================================== */

.grelha-artigos {
  display: grid;
  gap: var(--esp-10) var(--esp-6);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .grelha-artigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grelha-artigos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-12) var(--esp-8);
  }
}

.cartao-artigo {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
}

.cartao-artigo__foto {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.cartao-artigo__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cartao-artigo__texto {
  display: grid;
  gap: var(--esp-3);
  align-content: start;
}

.cartao-artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: baseline;
  margin: 0;
}

.cartao-artigo__categoria {
  color: var(--cor-texto-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--cor-borda);
}

.cartao-artigo__ponto { color: var(--cor-acento); }

.cartao-artigo__titulo {
  font-size: var(--fs-h3);
  margin: 0;
  line-height: 1.18;
}

.cartao-artigo__titulo a { text-decoration: none; }

/* A ligação longa (o título) tem de se poder tocar: o alvo é a linha inteira. */
.cartao-artigo__titulo a {
  display: inline;
  padding-block: 2px;
}

.cartao-artigo__resumo {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--fs-corpo);
  max-width: var(--medida-prosa);
}

/* --- O artigo da capa ---------------------------------------------------- */

@media (min-width: 640px) {
  .cartao-artigo--destaque { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .cartao-artigo--destaque {
    grid-row: span 2;
    gap: var(--esp-6);
  }

  .cartao-artigo--destaque .cartao-artigo__titulo {
    font-size: var(--fs-h2);
    line-height: 1.12;
  }

  .cartao-artigo--destaque .cartao-artigo__resumo { font-size: var(--fs-corpo); }
}

.cartao-artigo--destaque .cartao-artigo__meta { order: -1; }

/* --- Resposta ao ponteiro: só onde há ponteiro a sério ------------------- */

@media (hover: hover) and (pointer: fine) {
  .cartao-artigo__foto img {
    transition: transform var(--dur-media) var(--ease-padrao);
  }

  .cartao-artigo:hover .cartao-artigo__foto img,
  .cartao-artigo:focus-within .cartao-artigo__foto img {
    transform: scale(1.03);
  }

  .cartao-artigo:hover .cartao-artigo__categoria,
  .cartao-artigo:focus-within .cartao-artigo__categoria {
    border-bottom-color: var(--cor-acento);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cartao-artigo__foto img { transition: none; }

  .cartao-artigo:hover .cartao-artigo__foto img,
  .cartao-artigo:focus-within .cartao-artigo__foto img { transform: none; }
}