/* Seção /entenda — superfície educacional.
   Namespace exclusivo `ent-`: nenhuma classe deste arquivo existe em
   public.css nem em noticias.css. Mesma razão da folha do Observatório —
   /sobre e /planos compartilham `.section` e a Frente B vai reescrevê-las, e
   namespace isolado desacopla as frentes.

   NENHUM token de cor é declarado aqui. Todas as cores herdam de public.css
   (`--text`, `--muted`, `--dim`, `--border`, `--surface`, `--sienna`), que é a
   única fonte da superfície pública: mexer lá alcança esta seção junto, que é
   o comportamento desejado. Carregado só pelos templates da seção, depois de
   public.css. */

.ent-hero,
.ent-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* 3,25rem = 52px é só o respiro abaixo da barra, o mesmo da landing e do
   Observatório: o cabeçalho canônico ocupa 88px no fluxo e a compensação da
   barra fixa saiu de dentro das páginas na Frente B. */
.ent-hero { padding-top: 3.25rem; padding-bottom: 2.5rem; }
.ent-wrap { padding-bottom: 6rem; }

.ent-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1rem;
}
/* Neutraliza qualquer <em> herdado: a voz Truesail não colore palavra dentro
   de sentença em conteúdo editorial. */
.ent-hero h1 em { font-style: normal; color: inherit; }

.ent-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }

/* `min(100%, 17rem)` no piso da trilha, e não `17rem` seco: abaixo de 17rem de
   espaço útil a trilha passaria a ser mais larga que o container e a página
   ganharia rolagem horizontal. Com o `min`, a trilha encolhe junto.
   `auto-fill` e não `auto-fit`: com uma peça só, `auto-fit` colapsaria as
   trilhas vazias e o card único esticaria de ponta a ponta — a biblioteca
   nasce com uma peça e vai crescer, e o card tem de ter a mesma largura no dia
   um e no dia dez. O máximo é `1fr` contra container de largura definida (a
   `max-width` acima), que é a condição para a repetição automática resolver. */
.ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

/* Perímetro SEM borda: o card se separa do fundo por camada tonal
   (`--surface` sobre o `--bg` do corpo) mais raio, nunca por linha de 1px. */
.ent-card {
  position: relative;
  background: var(--surface);
  border-radius: 14px;
  padding: 1.75rem;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
/* A sombra só aparece no repouso alto: sobre navy, sombra parada lê como
   sujeira. Tinta preta é a mesma do modo escuro do design system, onde a
   sombra ambiente é rgba(0,0,0,...) — a proibição de preto puro vale para
   texto e preenchimento, não para sombra. */
.ent-card:hover,
.ent-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

/* O número da ordem é elemento gráfico, não informação: sai da árvore de
   acessibilidade pelo template e aqui recebe peso visual sem competir com o
   título. Sienna diluída em vez de sienna cheia — cheia, o número viraria o
   destaque do card e o título viraria legenda. O par declaração/`color-mix`
   segue o padrão que public.css já usa no distintivo de economia: a primeira
   linha é o que navegador sem `color-mix` enxerga. */
.ent-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(231, 111, 81, .45);
  color: color-mix(in srgb, var(--sienna) 45%, transparent);
  margin-bottom: .75rem;
}

.ent-card h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  margin-bottom: .5rem;
}
.ent-card h2 a { color: var(--text); text-decoration: none; }
.ent-card:hover h2 a { color: var(--sienna); }

/* O link do título cobre o card inteiro: o alvo de toque passa a ser o card,
   bem acima dos 44px mínimos, e o nome acessível do link continua sendo o
   título — não o card inteiro, que arrastaria a chamada e o número junto. */
.ent-card h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ent-card h2 a:focus-visible { outline: none; }
.ent-card:focus-within { outline: 2px solid var(--sienna); outline-offset: 2px; }

.ent-chamada { font-size: .9375rem; color: var(--muted); line-height: 1.6; }

/* Bloco de saída. Separador discreto em vez de caixa ou fundo: a seção é
   material de leitura, e um bloco de venda emoldurado no fim de um guia cobra
   o pedágio que o guia existe para não cobrar. */
.ent-saida {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* Aqua é cor de link, nunca de chamada principal — o botão sienna ao lado é
   quem carrega a decisão. */
.ent-saida-link {
  font-size: .9375rem;
  color: var(--teal);
  text-decoration: none;
}
.ent-saida-link:hover { text-decoration: underline; }

.ent-saida-nota {
  margin-top: 1.25rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--dim);
}
.ent-saida-nota a { color: var(--muted); text-decoration: underline; }
.ent-saida-nota a:hover { color: var(--text); }

/* ── Peça ──────────────────────────────────────────────────────────────── */

/* Trilha de navegação. Discreta por desenho: orienta quem chegou pela busca
   sem competir com o título logo abaixo. O último nível não é link — é onde a
   pessoa já está. */
.ent-trilha {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
  margin-bottom: 1rem;
}
.ent-trilha a { color: var(--muted); text-decoration: none; }
.ent-trilha a:hover { color: var(--text); text-decoration: underline; }
.ent-trilha .sep { margin: 0 .5rem; opacity: .6; }

/* Corpo da peça — o HTML do markdown-it não tem atributo algum. Toda regra
   abaixo depende exclusivamente do seletor de descendência. */
.ent-artigo {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
  hyphens: auto;
  text-wrap: pretty;
}
.ent-artigo > :first-child { margin-top: 0; }
.ent-artigo p { margin-bottom: 1.25em; }
/* h1 no corpo é erro editorial: duplica o H1 da página. Estilizado como h2
   para que o acidente não vire um título gigante enquanto não for corrigido na
   origem. */
.ent-artigo h1,
.ent-artigo h2 {
  font-size: 1.375rem; font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em; color: var(--text); margin: 2.5em 0 .6em;
}
.ent-artigo h3 {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  color: var(--text); margin: 2em 0 .5em;
}
.ent-artigo ul,
.ent-artigo ol { padding-left: 1.5rem; margin-bottom: 1.25em; }
/* O preflight do Tailwind CDN zera list-style em runtime. Especificidade só
   decide propriedade declarada nos dois lados — sem estas duas linhas o
   marcador some. */
.ent-artigo ul { list-style: disc; }
.ent-artigo ol { list-style: decimal; }
.ent-artigo li::marker { color: var(--dim); }
.ent-artigo li { margin-bottom: .5em; }
.ent-artigo li:last-child { margin-bottom: 0; }
.ent-artigo strong { color: var(--text); font-weight: 600; }
.ent-artigo em { font-style: italic; color: inherit; }
.ent-artigo a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.ent-artigo a:hover { color: var(--sienna); }
.ent-artigo blockquote {
  border-left: 2px solid var(--border); padding-left: 1rem;
  margin: 2em 0; color: var(--dim);
}
.ent-artigo hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.ent-artigo code { font-family: 'Space Mono', monospace; font-size: .875em; }

/* TABELA — a peça educacional compara lado a lado, e é aqui que ela vive.
   O markdown-it emite `<table>` sem envoltório, então a rolagem tem de morar
   na própria tabela: `width: max-content` com `max-width: 100%` deixa a tabela
   estreita no tamanho natural dela e faz só a larga rolar dentro de si, em vez
   de empurrar a página inteira para o lado. Página que rola na horizontal é
   defeito conhecido desta base — a tabela não pode ser a próxima porta.
   `display: block` é o que habilita a rolagem; os grupos de linha voltam a
   formar tabela anônima dentro dela, e as colunas seguem alinhadas. */
.ent-artigo table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
  margin: 2em 0;
}
/* Camada tonal marca o cabeçalho, não uma barra de cor: a tabela é leitura, e
   destaque forte aqui rouba a atenção do texto em volta. */
.ent-artigo thead th {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
/* Divisória de linha é interior de conteúdo, não perímetro de card — o que a
   regra de não-linha proíbe é a moldura em volta, não a separação entre
   linhas de dado. */
.ent-artigo th,
.ent-artigo td {
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
/* Cifras alinhadas por coluna mesmo com dígitos de larguras diferentes. O
   alinhamento à direita de coluna numérica vem do próprio markdown, que o
   markdown-it traduz em estilo por célula — esta folha não o força. */
.ent-artigo td { font-variant-numeric: tabular-nums; }
.ent-artigo tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
  .ent-hero { padding-top: 1.5rem; }
  .ent-hero,
  .ent-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ent-card { padding: 1.5rem; }
  /* No estreito a tabela é sempre a peça mais larga da página. Corpo menor e
     respiro menor por célula cabem mais coluna antes de a rolagem começar. */
  .ent-artigo table { font-size: .875rem; }
  .ent-artigo th,
  .ent-artigo td { padding: .5rem .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ent-card { transition: none; }
  .ent-card:hover,
  .ent-card:focus-within { transform: none; }
}