/* Complementa /p/landing.css. Só o que o artigo precisa a mais: leitura longa,
   sumário, resposta direta, tabela, FAQ e caixa de autor. */
.artigo { max-width: 720px; }
.artigo h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.artigo h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; margin: 2.4rem 0 .8rem; letter-spacing: -.01em; scroll-margin-top: 80px; }
.artigo h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; scroll-margin-top: 80px; }
.artigo p, .artigo li { font-size: 1.03rem; line-height: 1.72; }
.artigo ul, .artigo ol { padding-left: 1.2rem; margin: .9rem 0; }
.artigo li { margin: .35rem 0; }
.artigo a { text-underline-offset: 3px; }
.artigo code { background: rgba(127,127,127,.14); padding: .12em .38em; border-radius: 5px; font-size: .92em; }
.artigo blockquote { border-left: 3px solid var(--blue, #0058DD); margin: 1.2rem 0; padding: .1rem 0 .1rem 1rem; opacity: .9; }

.meta-artigo { font-size: .88rem; opacity: .7; margin: 0 0 1.4rem; }

/* Resposta direta: é o trecho que buscador e IA citam, então vem antes de tudo
   e é visualmente destacado para o leitor achar a resposta sem rolar. */
.resposta-direta {
  font-size: 1.1rem; line-height: 1.65; font-weight: 500;
  border-left: 4px solid var(--blue, #0058DD);
  background: rgba(0, 88, 221, .05);
  padding: .95rem 1.1rem; border-radius: 0 10px 10px 0; margin: 0 0 1.8rem;
}

.sumario { border: 1px solid rgba(127,127,127,.25); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 2rem; }
.sumario-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; opacity: .6; margin: 0 0 .5rem; font-weight: 600; }
.sumario ul { list-style: none; padding: 0; margin: 0; }
.sumario li { margin: .3rem 0; font-size: .95rem; }

.tabela { overflow-x: auto; margin: 1.2rem 0; }
.tabela table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabela th, .tabela td { border: 1px solid rgba(127,127,127,.25); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.tabela th { background: rgba(127,127,127,.08); font-weight: 600; }

.faq details { border-bottom: 1px solid rgba(127,127,127,.22); padding: .85rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.faq details p { margin: .6rem 0 0; opacity: .92; }

.autor { display: flex; flex-direction: column; gap: .2rem; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; padding: 1rem 1.1rem; margin: 2.6rem 0 1.6rem; }
.autor-nome { font-weight: 700; }
.autor-cargo { font-size: .85rem; opacity: .7; }
.autor-bio { font-size: .93rem; line-height: 1.6; margin: .5rem 0 0; opacity: .9; }

/* ---- indice em cards ----
   Geometria medida no proprio blog do Bitly, em viewport de 1280 (referencia
   dada pelo operador), e nao estimada de olho:

     3 colunas de 388px, gap de 30px, cards de altura igual (540px la)
     fundo do card TINGIDO, nao branco       (la: #EEEAE3)
     border-radius 24px
     ZERO borda e ZERO sombra no estado de repouso
     overflow hidden, com a imagem colada nas bordas do card
     bloco de texto com padding de 24px
     eyebrow 500 uppercase com letter-spacing 1,28px (0,08em)
     titulo 600 a 32px com line-height 1,2 e 8px de respiro embaixo

   O que NAO copiei: a cor. O #EEEAE3 e o creme da marca deles. Aqui o papel
   equivalente (superficie tingida sobre pagina branca) e o --surface do nosso
   proprio tema. Mesmo tratamento, cor nossa.

   O tipo entra um degrau abaixo do deles porque titulo em portugues e cerca de
   20% mais longo que em ingles: 32px aqui quebraria em quatro linhas. */
.indice-blog { max-width: 1240px; }

.grade-cartoes {
  list-style: none; padding: 0; margin: 1.1rem 0 0;
  display: grid; gap: 30px;
  /* 320px de minimo e o que entrega 3 colunas em 1240 e cai para 2 e 1 sozinho,
     sem media query por breakpoint. O min(320px, 100%) e o guarda: sem ele, em
     tela mais estreita que 320 a coluna continua exigindo 320 e a pagina passa
     a rolar na horizontal. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  /* iguala a altura de TODAS as linhas, nao so das da mesma fileira, que e o
     que o Bitly faz fixando 540px em todo card. */
  grid-auto-rows: 1fr;
}
.cartao a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface, #F4F6FA);
  border-radius: 24px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.cartao a:hover, .cartao a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(3, 31, 57, .10);
}
/* aspect-ratio segura o espaco antes de a imagem baixar, o que evita o pulo
   de layout (CLS) quando a capa entra por lazy load. */
.cartao-capa { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: rgba(127,127,127,.08); }
.cartao-capa-vazia { display: block; }
.cartao-corpo { display: flex; flex-direction: column; gap: .35rem; padding: 24px; flex: 1; }
.cartao-cluster { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #4a5562); }
.cartao-titulo { font-weight: 700; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.015em; margin-bottom: .1rem; }
.cartao-desc { font-size: 1rem; line-height: 1.58; color: var(--muted, #4a5562); flex: 1; }
.cartao-leia { font-size: .92rem; font-weight: 650; color: var(--blue, #0058DD); margin-top: .6rem; }
.cartao a:hover .cartao-leia span { display: inline-block; transform: translateX(3px); transition: transform .16s ease; }

/* Capa no topo do artigo. Fica depois da resposta direta de proposito: a
   resposta e o trecho que buscador e IA citam, entao ela vem antes da imagem. */
.capa-artigo { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 1 / 1; border-radius: 24px; margin: 0 auto 1.8rem; }

@media (prefers-reduced-motion: reduce) {
  .cartao a, .cartao a:hover, .cartao a .cartao-leia span { transition: none; transform: none; }
}

.blog-rodape { max-width: 720px; margin: 3rem auto 2rem; padding: 1.4rem 1.2rem 0; border-top: 1px solid rgba(127,127,127,.2); font-size: .9rem; opacity: .8; text-align: center; }
.blog-rodape .mini { font-size: .82rem; opacity: .8; }

/* O landing.css poe margem generosa em section, boa pra landing e demais pro
   indice do blog, onde as secoes sao curtas. */
main.wrap > section { margin-bottom: 1.6rem; }
main.wrap > section > h2 { margin-bottom: .4rem; }

/* Bloco de codigo do artigo. white-space: pre e o que preserva as quebras do
   exemplo de UTM, que so faz sentido com uma URL por linha. */
.artigo pre {
  background: var(--surface, #F4F6FA); border: 1px solid var(--border, #E2E6EC);
  border-radius: 10px; padding: .85rem 1rem; margin: 1.1rem 0; overflow-x: auto;
}
.artigo pre code {
  background: none; padding: 0; border-radius: 0;
  font-size: .86rem; line-height: 1.6; white-space: pre; display: block;
}