/* ============================================================
   significado.css — as 22 páginas de significado e o índice.

   Complementa o pagina.css, não o substitui. Tudo o que já existe
   lá continua valendo aqui: .pagina, .prosa, .rastro, .fio,
   .convite, .cta, .micro. Este arquivo cuida só do que estas
   páginas têm de próprio — a arte em retrato, a tabela de resumo,
   a navegação entre arcanos e a grade das 22.

   Nenhum token novo. Cores, medidas e fontes saem do style.css.
   ============================================================ */

/* ------------------------------------------------------------
   A ARTE DA CARTA

   É retrato 2:3, ao contrário da arte das Revelações, que é
   paisagem. Por isso ela NÃO ocupa a largura da coluna: numa tela
   de 1080px uma carta de largura inteira teria 1620px de altura e
   empurraria o texto inteiro para fora da primeira tela.

   Largura fixa em 320px, centralizada. A carta já vem com moldura
   e fundo escuro próprios do template do Canva — não leva máscara
   de dissolução como a .artigo-arte, porque aqui o corte é a
   moldura, e dissolver a moldura seria desmanchar de propósito a
   única borda que a peça tem.
   ------------------------------------------------------------ */
.sig-arte{
  display:block;
  width:320px; max-width:min(100%, 62vw);
  height:auto;
  margin:0 auto 44px;
  border-radius:4px;
}
@media (max-width:760px){
  .sig-arte{ width:260px; margin-bottom:34px; }
}

/* ------------------------------------------------------------
   RESUMO RÁPIDO

   Duas colunas, direita e invertida. Fica acima da prosa porque é
   o que quem chega da busca quer em cinco segundos.

   `table-layout:fixed` é o que garante as duas metades iguais: as
   listas de palavras-chave têm comprimentos diferentes, e sem ele
   a coluna da invertida — quase sempre a mais longa — comeria a
   outra. As células ficam alinhadas ao topo pelo mesmo motivo.
   ------------------------------------------------------------ */
.sig-resumo{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  margin:0 0 52px;
  font-size:16px;
  line-height:1.6;
}
.sig-resumo caption{
  /* Some da tela e continua existindo para o leitor de tela: o
     <h1> logo acima já diz de que carta se trata, e repetir isso
     em texto visível seria ruído. Mas uma tabela sem legenda é uma
     tabela sem contexto para quem não vê a página. */
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sig-resumo th{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ambar);
  text-align:left;
  padding:0 20px 12px 0;
  border-bottom:1px solid var(--linha);
}
.sig-resumo td{
  vertical-align:top;
  padding:18px 20px 0 0;
  color:rgba(234,224,203,.84);
}
.sig-resumo th:last-child,
.sig-resumo td:last-child{ padding-right:0; }

@media (max-width:560px){
  /* Numa tela estreita, duas colunas de palavras-chave separadas
     por ponto viram duas colunas de uma palavra por linha. Aqui a
     tabela vira duas faixas empilhadas, e o cabeçalho de cada uma
     passa a ser o rótulo da faixa. */
  .sig-resumo, .sig-resumo thead, .sig-resumo tbody,
  .sig-resumo tr, .sig-resumo th, .sig-resumo td{ display:block; }
  .sig-resumo thead{ display:none; }
  .sig-resumo td{ padding:0 0 18px; }
  .sig-resumo td::before{
    display:block;
    font-family:var(--sans);
    font-size:13px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--ambar);
    margin-bottom:8px;
  }
  .sig-resumo td:first-child::before{ content:"Na direita"; }
  .sig-resumo td:last-child::before{ content:"Invertida"; }
  .sig-resumo td:first-child{
    border-bottom:1px solid var(--linha);
    margin-bottom:18px;
  }
}

/* ------------------------------------------------------------
   O PAR — o formato do segundo bloco da página

   A página tem dois blocos, e eles pedem tratamentos diferentes:

     1. O ARCANO   (o que significa · invertida) — leitura corrida,
        que é como se lê algo que se quer entender.
     2. A APLICAÇÃO (amor · dinheiro · tiragem) — consulta, que é
        como se lê algo que se quer usar.

   Tratar UMA seção do bloco 1 de um jeito e a seção irmã de outro
   foi o erro da primeira versão: deixava a página manca. O
   tratamento é do BLOCO inteiro, nunca de uma seção sozinha.

   As três seções do bloco 2 têm a mesma estrutura interna — a
   carta na direita e a carta invertida, uma de cada vez —, e é
   essa estrutura que o par torna visível. Os rótulos são os
   mesmos da tabela do topo, de propósito: quem já leu o resumo
   reconhece as duas colunas quando desce.

   Na tiragem o par muda de conteúdo mas não de forma: responde
   bem a / responde mal a.
   ------------------------------------------------------------ */
.sig-par{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin:0 0 26px;
}
.sig-par > div{
  padding:18px 22px;
  background:var(--azul-card);
  border-top:2px solid var(--linha);
}
/* Só a coluna da direita leva o fio âmbar: é a leitura primeira da
   carta, e a hierarquia entre as duas some se as duas forem iguais. */
.sig-par > div:first-child{ border-top-color:var(--ambar); }
.sig-par small{
  display:block;
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:10px;
}
.sig-par p{ margin:0; }
.sig-par p + p{ margin-top:14px; }

/* O par da tiragem é mais curto e fica melhor com as duas colunas
   alinhadas pelo topo do texto, não esticadas até a mesma altura. */
.sig-par-curto > div{ align-self:start; }

@media (max-width:640px){
  /* Empilhado, o fio no topo de cada metade continua marcando onde
     uma começa e a outra acaba — não precisa de mais nada. */
  .sig-par{ grid-template-columns:1fr; gap:2px; }
}

/* ------------------------------------------------------------
   NAVEGAÇÃO ENTRE OS ARCANOS

   Duas metades, anterior e próxima. É o que fecha o anel das 22 e
   dá ao crawler um caminho contínuo — O Mundo aponta de volta para
   O Louco.

   A próxima fica alinhada à direita para que o par leia como uma
   linha do tempo, e não como dois botões iguais.
   ------------------------------------------------------------ */
.sig-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin-top:56px;
  padding-top:34px;
  border-top:1px solid var(--linha);
}
.sig-nav a{
  display:block;
  padding:16px 20px;
  background:var(--azul-card);
  border:1px solid var(--linha);
  border-radius:3px;
  transition:background .2s, border-color .2s;
}
.sig-nav a:hover{ background:#182742; border-color:var(--ambar); }
.sig-nav small{
  display:block;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:6px;
}
.sig-nav span{
  font-family:var(--serif);
  font-size:19px; line-height:1.35;
  color:var(--pergaminho);
}
.sig-nav-prox{ text-align:right; }

.sig-todas{ margin:22px 0 0; font-size:14px; }

.sig-disclaimer{
  margin:40px 0 0;
  padding-top:22px;
  border-top:1px solid var(--linha);
  font-size:14px;
  color:var(--ocre-suave);
}

/* ------------------------------------------------------------
   A GRADE DO ÍNDICE — /tarot/significado/

   As 22 em ordem numérica, com miniatura da arte, numeral e nome.

   `auto-fill` com mínimo de 132px: a grade escolhe sozinha quantas
   colunas cabem, de duas num celular a seis num desktop, sem uma
   única media query. O mínimo é o que garante que a miniatura
   continue legível — a Bíblia Visual calibrou as cartas para
   funcionar a 200px, e abaixo de 130 o baralho vira textura.

   `aspect-ratio` na imagem é o que mantém o CLS em zero mesmo com
   a largura decidida pela grade: a altura é conhecida antes de a
   imagem chegar.
   ------------------------------------------------------------ */
.sig-grade{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:26px 20px;
}
.sig-grade li{ margin:0; }
.sig-grade a{ display:block; }
.sig-grade img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:680 / 1020;
  border-radius:3px;
  margin-bottom:10px;
  transition:transform .2s, box-shadow .2s;
}
.sig-grade a:hover img{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(10,17,29,.55);
}
.sig-grade b{
  display:block;
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.08em;
  color:var(--ambar);
  margin-bottom:2px;
}
.sig-grade span{
  display:block;
  font-family:var(--serif);
  font-size:17px; line-height:1.3;
  color:var(--pergaminho);
}
.sig-grade a:hover span{ color:var(--ambar-claro); }