/* ==========================================================================
   PLAY MARCAS — blog e post
   --------------------------------------------------------------------------
   Continua o sistema de style.css: nenhum valor cru, tudo em token. As
   medidas novas daqui entram como token proprio no topo.
   ========================================================================== */

:root {
  --post-texto: 62rem;        /* teto do texto corrido: ~90 caracteres   */
  --raio-card: .5rem;
}

/* O header do blog nasce sobre fundo claro, entao ja entra no estado
   "rolado" para o logo escuro aparecer. */
.pagina-blog,
.pagina-post,
.pagina-404 { background: var(--white); }

/* --------------------------------------------------------------------------
   Topo da listagem
   -------------------------------------------------------------------------- */

.blog-topo {
  padding: calc(var(--space-8) + 4rem) 0 var(--space-8);
  color: var(--on-orange);
  background: var(--orange);
}

.blog-topo h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.blog-topo h1 em { color: var(--brown-deep); font-style: normal; }

.blog-topo > .container > p:last-child {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--on-orange-muted);
}

/* --------------------------------------------------------------------------
   Grade de cards
   -------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-6);
}

.blog-card { height: 100%; }

.blog-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--raio-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.blog-card a:hover,
.blog-card a:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.blog-card img,
.blog-card-sem-capa {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
}

/* Card sem capa usa a MESMA imagem que vai para o Open Graph. Compor o
   placeholder em CSS deixava o card do site e a miniatura do WhatsApp
   diferentes uma da outra, para o mesmo post. */
.blog-card-sem-capa {
  background: url("/assets/images/og-padrao.png") center / cover no-repeat var(--orange);
}

.blog-card-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.blog-card-corpo time {
  color: var(--muted);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.blog-card-corpo h2,
.blog-card-corpo h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-4);
  line-height: var(--lh-snug);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.blog-card-corpo p {
  color: var(--muted);
  font-size: var(--type-body-sm);
}

.blog-card-link {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--orange-ink);
  font-weight: 600;
  font-size: var(--type-label);
}

.blog-vazio { color: var(--muted); }

.blog-paginacao {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.blog-paginacao a,
.blog-paginacao span {
  padding: var(--space-2) var(--space-4);
  color: var(--brown);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.blog-paginacao span[aria-current] {
  color: var(--white);
  background: var(--brown);
  border-color: var(--brown);
}

.blog-relacionados { background: var(--cream); }

.blog-relacionados h2 {
  margin-bottom: var(--space-6);
  font-size: var(--type-display-3);
}

/* --------------------------------------------------------------------------
   Post
   -------------------------------------------------------------------------- */

/* ALINHAMENTO.

   Antes isso era `max-width: 44rem` na mesma div que ja tinha .container.
   O resultado: uma coluna de 44rem centrada na viewport, comecando em
   368px numa tela de 1440, enquanto todo o resto do site comeca em 112px,
   que e a borda do container de 76rem. O post ficava deslocado do site.

   Agora .post-largura E o container padrao, e quem recebe a medida de
   leitura sao os FILHOS. Assim a borda esquerda do texto cai exatamente
   na mesma linha do cabecalho, do rodape e de todas as secoes da home. */
.post-largura {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

/* O conteudo ocupa o container inteiro, da borda esquerda a direita, igual
   as secoes da home. Uma coluna estreita encostada na esquerda deixava a
   metade direita da tela vazia em monitor largo.

   O preco disso e a linha longa em tela muito larga, entao o texto corrido
   (paragrafo e lista) mantem um teto proprio, generoso mas finito: acima de
   ~90 caracteres o olho perde o comeco da linha seguinte. Titulo, imagem,
   grafico, tabela, numeros e CTA vao ate a borda. */
.post-corpo > p,
.post-corpo > ul,
.post-corpo > ol,
.post-corpo > blockquote,
.post-corpo > aside:not(.post-cta) {
  max-width: var(--post-texto);
}

.post-cabecalho {
  padding: calc(var(--space-8) + 4rem) 0 var(--space-6);
  background: var(--cream);
}

.post-cabecalho h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.post-cabecalho .eyebrow a { color: inherit; }

.post-resumo {
  max-width: var(--post-texto);
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--type-lead);
}

.post-meta {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--type-label);
}

.post-capa {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
  margin-top: calc(var(--space-7) * -1);
  margin-bottom: var(--space-7);
}



.post-capa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
  box-shadow: var(--shadow-lift);
}

.post-corpo { padding-bottom: var(--space-8); }

.post-corpo > * + * { margin-top: var(--space-5); }

.post-corpo p { color: var(--ink); }

.post-lead {
  color: var(--brown) !important;
  font-size: var(--type-lead);
}

.post-corpo a { color: var(--orange-ink); }

.post-h2,
.post-h3 {
  margin-top: var(--space-8) !important;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.post-h2 { font-size: var(--type-display-3); }
.post-h3 { font-size: var(--type-display-4); }

.post-lista { padding-left: var(--space-5); }
.post-lista li + li { margin-top: var(--space-2); }

.post-citacao {
  padding-left: var(--space-5);
  border-left: 3px solid var(--orange);
}

.post-citacao p {
  font-family: var(--font-display);
  font-size: var(--type-display-4);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.post-citacao cite {
  display: block;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--type-label);
  font-style: normal;
}

.post-citacao cite span { display: block; opacity: .8; }

/* Imagem e grafico podem estourar a coluna de texto: sao elementos de
   leitura visual, e a medida de 44rem existe para a linha de texto. */
/* Imagem, grafico, tabela, numeros e CTA ocupam o container inteiro. */
.post-imagem,
.post-galeria,
.post-grafico,
.post-tabela-wrap,
.post-destaques,
.post-cta {
  width: 100%;
}

.post-imagem img,
.post-galeria img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
}

.post-imagem figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--type-body-sm);
}

.post-credito {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-eyebrow);
  opacity: .85;
}

.post-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.post-tabela { width: 100%; border-collapse: collapse; }
.post-tabela-wrap { overflow-x: auto; }

.post-tabela th,
.post-tabela td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-body-sm);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.post-tabela thead th {
  color: var(--muted);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.post-aviso {
  padding: var(--space-5);
  background: var(--orange-pale);
  border-radius: var(--radius);
}

.post-aviso strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--brown-dark);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Numero de destaque
   -------------------------------------------------------------------------- */

.post-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
}

.post-destaque {
  padding: var(--space-6) var(--space-5);
  color: var(--on-orange);
  background: var(--brown);
  border-radius: var(--radius);
}

.post-destaque strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.post-destaque span {
  display: block;
  margin-top: var(--space-3);
  color: var(--on-brown);
  font-size: var(--type-body-sm);
}

/* --------------------------------------------------------------------------
   Grafico
   -------------------------------------------------------------------------- */

.post-grafico {
  padding: var(--space-6);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--raio-card);
}

.post-grafico-titulo {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-4);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.post-grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--type-label);
}

.post-grafico-legenda li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.post-grafico-legenda span {
  width: .7rem;
  height: .7rem;
  border-radius: .2rem;
}

/* O teto de 1080 e o que mantem a escala em 1: e a largura em que o SVG
   foi desenhado. Sem ele, num container de 1216 o grafico esticava 1,6x e
   o texto do eixo chegava ao leitor com 19px, maior que o corpo do post. */
.grafico-svg {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin-inline: auto;
}

/* Texto do grafico usa tinta, nunca a cor da serie: quem carrega a
   identidade e a marca colorida ao lado, nao a letra. */
.grafico-svg .g-eixo {
  fill: #765d50;
  font-family: var(--font-text);
  font-size: 12px;
}

.grafico-svg .g-valor {
  fill: #2b1911;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.post-grafico-nota {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--type-body-sm);
}

.post-grafico-dados { margin-top: var(--space-4); }

.post-grafico-dados summary {
  color: var(--orange-ink);
  font-size: var(--type-label);
  cursor: pointer;
}

.post-grafico-dados table {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--type-body-sm);
}

.post-grafico-dados th,
.post-grafico-dados td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   CTA do rodape do post
   A estrutura e fixa: card laranja, texto na esquerda, retrato na direita.
   -------------------------------------------------------------------------- */

.post-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: var(--space-5);
  align-items: end;
  margin-top: var(--space-8) !important;
  overflow: hidden;
  color: var(--on-orange);
  background: var(--orange);
  border-radius: var(--raio-card);
}

.post-cta-texto { padding: var(--space-7) 0 var(--space-7) var(--space-7); }

.post-cta h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.post-cta p {
  max-width: 32ch;
  margin-bottom: var(--space-5);
  color: var(--on-orange-muted) !important;
}

/* O retrato encosta na base do card e e recortado por ele, igual ao hero. */
.post-cta-retrato {
  display: block;
  align-self: end;
  width: 100%;
  height: auto;
  margin-bottom: -.25rem;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 50rem) {
  /* Empilhado, o retrato viraria uma faixa enorme antes do texto. Some, e
     o card continua sendo o mesmo CTA laranja. */
  .post-cta { grid-template-columns: 1fr; }
  .post-cta-retrato { display: none; }
  .post-cta-texto { padding: var(--space-6); }

  .post-grafico { padding: var(--space-4); }
  .blog-topo { padding-top: calc(var(--space-7) + 3.5rem); }
}

/* --------------------------------------------------------------------------
   Blocos de layout
   -------------------------------------------------------------------------- */

.post-separador {
  height: 0;
  margin: var(--space-8) 0 !important;
  border: 0;
  border-top: 1px solid var(--line);
}

.post-botao { margin-top: var(--space-6) !important; }

.post-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 44rem) {
  .post-colunas { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Aparato de referencia
   Espirito da Wikipedia — nota numerada, lista de referencias, sumario —
   com a tipografia e a cor da Play Marcas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Marca de citacao no texto
   -------------------------------------------------------------------------- */

.fonte-marca {
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
}

.fonte-marca a {
  padding: 0 .1em;
  color: var(--orange-ink);
  text-decoration: none;
}

.fonte-marca a:hover { text-decoration: underline; }

/* A citacao alvo do clique acende, para o olho achar a linha certa numa
   lista longa de referencias. */
.post-referencias li:target,
.fonte-marca:target {
  background: var(--orange-pale);
  border-radius: var(--radius-sm);
}

.fonte-quebrada {
  padding: 0 .25em;
  color: #a3301f;
  font-size: .7em;
  vertical-align: super;
  background: #fbe3df;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Lista de referencias
   -------------------------------------------------------------------------- */

.post-referencias {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.post-referencias h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-4);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.post-referencias ol {
  padding-left: 0;
  list-style: none;
  counter-reset: fonte;
}

.post-referencias li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .5rem;
  padding: .35rem .4rem;
  font-size: var(--type-body-sm);
  line-height: 1.55;
  counter-increment: fonte;
}

/* O numero vem do contador, nao do marcador do <ol>: assim ele fica na
   coluna da grade, alinhado com a seta de voltar. */
.post-referencias li::before {
  content: counter(fonte) ".";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fonte-voltar {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
}

.post-referencias li::before { grid-column: 1; grid-row: 1; }

/* A seta de voltar so aparece no hover: em repouso o numero e o que o olho
   procura, e as duas coisas juntas na mesma coluna viram ruido. */
.post-referencias li:hover .fonte-voltar,
.post-referencias li:focus-within .fonte-voltar,
.post-referencias li:target .fonte-voltar { visibility: visible; }

.post-referencias li:hover::before,
.post-referencias li:focus-within::before,
.post-referencias li:target::before { visibility: hidden; }

.fonte-voltar { text-align: right; }
.fonte-voltar a { color: var(--orange-ink); text-decoration: none; }
.fonte-voltar a:hover { text-decoration: underline; }

.fonte-corpo { grid-column: 2; }

.fonte-meta {
  display: block;
  color: var(--muted);
  font-size: var(--type-eyebrow);
}

/* Fonte declarada embaixo de grafico e numero. */
.post-fonte-dado {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--type-eyebrow);
  font-style: normal;
  letter-spacing: .02em;
}

.post-destaque .post-fonte-dado {
  display: block;
  margin-top: var(--space-3);
  color: var(--on-brown-soft);
}

/* --------------------------------------------------------------------------
   Sumario
   -------------------------------------------------------------------------- */

.post-sumario {
  padding: var(--space-5) var(--space-6);
  background: var(--cream);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
}

.post-sumario-titulo {
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.post-sumario ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--type-body-sm);
}

.post-sumario li { margin-bottom: .3rem; }
.post-sumario li.nivel-3 { margin-left: 1rem; list-style: circle; }
.post-sumario a { color: var(--ink); }

/* --------------------------------------------------------------------------
   Links entre posts
   -------------------------------------------------------------------------- */

.post-link-interno {
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

/* Referencia a post que ainda nao foi publicado. Fica visivel de proposito:
   e um lembrete de revisao, nao um link morto para o leitor. */
.post-link-quebrado {
  color: var(--muted);
  border-bottom: 1px dotted var(--muted);
  cursor: help;
}

.post-leia-tambem {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--cream);
  border-radius: var(--raio-card);
}

.post-leia-tambem h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-4);
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.post-leia-tambem ul { margin: 0; padding: 0; list-style: none; }

.post-leia-tambem li + li {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.post-leia-tambem a { font-weight: 600; }

.post-leia-tambem span {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: var(--type-body-sm);
}

/* Titulo dentro da previa do painel: mesmo papel do h1 do post. */
.post-titulo-previa {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}