/* AELPAR — autoria dos artigos, espaço da foto do autor, tabelas de texto e gráfico */

/* Foto do autor: as iniciais aparecem enquanto o arquivo da foto não existir.
   Para ativar a foto, envie /assets/img/autores/caio-caetano.webp (quadrada, 400 x 400 px). */
.autor-foto { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: var(--verde-claro); color: var(--verde-escuro); border: 2px solid #FFFFFF;
  font-family: var(--f-titulo); font-weight: 600; font-size: 18px; letter-spacing: .02em; }
.autor-foto::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: center / cover no-repeat; }
.autor-foto--caio::after, .autor-foto--g::after { background-image: url("/assets/img/autores/caio-caetano.webp"); }
.autor-foto--g { width: 72px; height: 72px; font-size: 22px; border-color: var(--borda); }

/* Cabeçalho do artigo */
.autor-topo { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.autor-topo .autor-foto { width: 64px; height: 64px; font-size: 20px; border-color: rgba(255,255,255,.85); }
.autor-topo__nome { color: #FFFFFF; font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0; }
.autor-topo__cred { color: var(--texto-claro); opacity: .9; font-size: 14px; line-height: 1.45; margin: 2px 0 0; }

/* Capa do cartão no blog e na página inicial */
.capa .autor-foto { position: absolute; z-index: 1; left: 20px; top: 18px; width: 52px; height: 52px; font-size: 16px; }

/* Caixa "Sobre o autor" no fim do artigo */
.autor-box { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; padding: 20px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); }
.prosa .autor-box p { margin: 0; }
.autor-box__rot { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-escuro); }
.autor-box__nome { font-family: var(--f-titulo); font-weight: 600; font-size: 19px; color: var(--texto); line-height: 1.3; }
.autor-box__cred { font-size: 14px; color: var(--texto-2); line-height: 1.5; }

/* Tabelas com texto longo: quebram linha em vez de rolar indefinidamente */
.tabela-texto th, .tabela-texto td { white-space: normal; min-width: 150px; vertical-align: top; }

/* Gráfico */
.grafico { margin: 28px 0; }
.grafico svg { width: 100%; height: auto; display: block; font-family: var(--f-texto); }
.grafico .g-titulo { font-size: 17px; font-weight: 600; fill: var(--texto); }
.grafico .g-sub { font-size: 13px; fill: var(--texto-2); }
.grafico .g-ref { stroke: var(--borda-forte); stroke-dasharray: 4 4; }
.grafico .g-eixo { stroke: var(--borda-forte); }
.grafico .g-barras rect { fill: var(--cinza-barra); opacity: .55; }
.grafico .g-barras rect.g-destaque { fill: var(--verde-escuro); opacity: 1; }
.grafico .g-val { font-size: 14px; fill: var(--texto); text-anchor: middle; }
.grafico .g-val--destaque { font-weight: 700; fill: var(--verde-escuro); }
.grafico .g-ano { font-size: 13px; fill: var(--texto-2); text-anchor: middle; }
.grafico figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--texto-2); }

.referencias li { font-size: 15px; }

/* Na capa do cartão a foto usa <i>, porque .capa span já tem posicionamento próprio */
.autor-foto, .autor-foto i { font-style: normal; }
.capa .autor-foto i { position: relative; z-index: 0; }

/* v2: foto maior e acima do título */
.autor-topo { margin-top: 20px; margin-bottom: 8px; gap: 20px; flex-wrap: wrap; }
.autor-topo .autor-foto { width: 160px; height: 160px; font-size: 48px; border-width: 4px; box-shadow: 0 12px 28px rgba(0,30,15,.25); }
.autor-topo__nome { font-size: 19px; }
.autor-topo__cred { font-size: 15px; }
.autor-topo + .rotulo { margin-top: 24px; }
.autor-box { gap: 24px; flex-wrap: wrap; }
.autor-foto--g { width: 144px; height: 144px; font-size: 42px; }
@media (max-width: 760px) { .autor-topo .autor-foto { width: 128px; height: 128px; font-size: 40px; } .autor-foto--g { width: 112px; height: 112px; font-size: 34px; } }.topo__lead + .rotulo { display: flex; margin-top: 22px; }
/* v3: círculo maior no banner e no cartão do blog */
.autor-topo { align-items: center; gap: 22px; margin-top: 22px; }
.autor-topo .autor-foto { width: 192px; height: 192px; font-size: 52px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 14px 32px rgba(0,30,15,.28); }
.autor-topo__nome { font-size: 20px; }
.capa .autor-foto { left: auto; right: 24px; top: 50%; transform: translateY(-50%); width: 116px; height: 116px; border: 3px solid #FFFFFF; font-size: 30px; }
.capa:has(.autor-foto)::before, .capa:has(.autor-foto)::after { display: none; }
.capa:has(.autor-foto) span { max-width: calc(100% - 170px); bottom: 22px; font-size: 16px; }
.capa:has(.autor-foto) span::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--amarelo); }
@media (max-width: 760px) { .autor-topo .autor-foto { width: 152px; height: 152px; } .autor-foto--g { width: 112px; height: 112px; } }