/* =============================================================
   Takashima · Artigos (/artigos/)
   Carrega depois de /plano-de-saude/assets/css/styles.css e usa os mesmos tokens.
   Cartões e capa tipográfica ficam no styles.css (a LP também usa).
   Regra: nenhuma cor literal; tudo vem do :root da LP.
   ============================================================= */

/* 1. Topo do artigo --------------------------------------------- */
.artigo__topo,
.artigos-indice__topo { padding-top: calc(var(--header-h) + clamp(28px, 5vw, 56px)); }
.artigo__topo { padding-bottom: clamp(32px, 5vw, 56px); }
.artigo__topo-grade { display: grid; gap: 18px; justify-items: start; }
.artigo__topo-grade > * { max-width: 860px; }
/* No desktop, o topo alinha com a coluna do texto (depois do sumário de 240 px + 64 px) */
@media (min-width: 1024px) { .artigo__topo-grade, .artigo__foto { padding-left: 304px; } }
.artigo__topo h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); }
/* Página de texto sem sumário (ex.: /plano-de-saude/privacidade/): topo e texto na mesma coluna central */
.artigo--texto .artigo__topo-grade { max-width: 68ch; margin-inline: auto; padding-left: 0; }
.artigo--texto .artigo__topo-grade > * { max-width: 100%; }
.artigo--texto .artigo__grade { grid-template-columns: minmax(0, 1fr); }

.trilha ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-pequeno); color: var(--cinza-texto); }
.trilha li { display: inline-flex; align-items: center; gap: 6px; }
.trilha li + li::before { content: "/"; color: var(--linha-campo); }
.trilha a { color: var(--titulo); font-weight: 600; text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-underline-offset: 3px; }

.artigo__autoria { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: var(--fs-pequeno); color: var(--cinza-texto); }
.artigo__autoria b { color: var(--titulo); }
.artigo__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--pessego); box-shadow: 0 0 0 3px var(--branco); }

.artigo__foto { margin-top: clamp(28px, 4vw, 44px); }
.artigo__foto .capa-artigo { border-radius: var(--radius-bloco); box-shadow: var(--sombra-card); }

/* 2. Grade: sumário + texto ------------------------------------- */
.artigo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sem isso a tabela (min-width 520 px) alarga a página no celular */
  gap: 32px;
  padding-block: clamp(40px, 6vw, 72px) var(--secao-y);
}
@media (min-width: 1024px) {
  .artigo__grade { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
  .artigo__grade > .prosa:only-child { grid-column: 1 / -1; margin-inline: auto; }
}

.artigo__sumario {
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--areia-2);
  font-size: var(--fs-pequeno);
}
@media (min-width: 1024px) {
  .artigo__sumario { position: sticky; top: calc(var(--header-h) + 24px); background: transparent; padding: 0 0 0 18px; border-left: 2px solid var(--linha-clara); border-radius: 0; }
}
.artigo__sumario-titulo {
  margin-bottom: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}
.artigo__sumario ol { display: grid; gap: 10px; }
.artigo__sumario a { color: var(--tinta); font-weight: 600; line-height: 1.4; text-decoration: none; }
.artigo__sumario a:hover { color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }

/* 3. Texto corrido ---------------------------------------------- */
.prosa { max-width: 68ch; font-size: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem); line-height: 1.75; color: var(--tinta); }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.35rem + .7vw, 2rem); scroll-margin-top: calc(var(--header-h) + 24px); }
.prosa h3 { margin-top: 1.8em; font-size: var(--fs-h3); }
.prosa h2 + *, .prosa h3 + * { margin-top: .6em; }
.prosa a { color: var(--bordo); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pessego); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prosa a:hover { text-decoration-color: var(--bordo); }
.prosa strong { color: var(--titulo); }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .45em; }
.prosa li::marker { color: var(--ouro-texto); font-weight: 700; }
.prosa blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ouro);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--titulo);
}
.prosa figure img { border-radius: var(--radius-card); }
.prosa figcaption { margin-top: 10px; font-size: var(--fs-pequeno); color: var(--cinza-texto); }

/* Tabelas curtas: o texto quebra; se um dia vier uma larga, rola de lado dentro da caixa */
.prosa .tabela { overflow-x: auto; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--linha-clara); }
.prosa table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prosa th, .prosa td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha-clara); }
.prosa th { background: var(--areia-2); color: var(--titulo); font-weight: 700; }
.prosa tr:last-child td { border-bottom: 0; }

/* Destaques dentro do texto */
.prosa .nota,
.artigo-cta-meio {
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--branco);
  box-shadow: var(--sombra-suave);
}
.prosa .nota { border-left: 4px solid var(--ouro); }
.prosa .nota > * + * { margin-top: .6em; }
.prosa .nota--resumo { background: var(--rose); box-shadow: none; border-left-color: var(--bordo); }

.artigo-cta-meio {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-block: 2em;
  background: var(--bordo);
  background-image: var(--padrao-geometrico);
  background-size: 126px 210px;
  color: var(--texto-sobre-escuro);
  box-shadow: var(--sombra-card);
}
.artigo-cta-meio b { color: var(--branco); }
.artigo-cta-meio .link-seta { color: var(--ouro-claro); border-bottom-color: var(--linha-escura); text-decoration: none; }
.artigo-cta-meio .link-seta:hover { border-bottom-color: var(--ouro-claro); }
.artigo-cta-meio :focus-visible { outline-color: var(--anel-foco-escuro); }

/* 4. Fontes, aviso e assinatura --------------------------------- */
.artigo__fontes { margin-top: 3em; padding-top: 28px; border-top: 1px solid var(--linha-clara); }
.prosa .artigo__fontes h2 { margin-top: 0; font-size: var(--fs-h3); }
.artigo__fontes ul { font-size: var(--fs-pequeno); }

.artigo__aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--cinza-texto);
}
.artigo__aviso .icone { width: 18px; height: 18px; margin-top: 2px; color: var(--ouro-texto); }

.prosa .artigo__assinatura {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 2.4em;
  padding: 22px;
  border-radius: var(--radius-card);
  background: var(--areia-2);
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--cinza-texto);
}
.artigo__assinatura img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--pessego); }
.artigo__assinatura-nome { font-family: var(--fonte-titulo); font-size: 1.125rem; font-weight: 700; color: var(--titulo); }
@media (min-width: 768px) { .artigo__assinatura img { width: 96px; height: 96px; } }

/* 5. CTA e rodapé nas páginas de artigo -------------------------- */
.pagina-artigo .rodape { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }