/* =====================================================================
   blog-article.css — Ajustes do ARTIGO (escopo .article-x)
   Aplica ao /blog/tratamento-de-canal-doi/ as mesmas correções do hub,
   SEM afetar os outros artigos (que não têm a classe .article-x).
   - Corrige o vão grande sob o H1 (header é sticky, não somar header-height).
   - Capa e cards "Leia também" ~20% mais altos (mais presença da Dra.).
   - object-position calibrável por imagem (desktop + mobile).
   v=20260529a
   ===================================================================== */

/* topo enxuto: header sticky já ocupa espaço — sem o vão de 136px */
.article-x .article-hero {
  padding-top: var(--space-lg);
}

/* capa ~20% mais alta (3/2 no lugar de 16/9) */
.article-x .article-cover {
  aspect-ratio: 3 / 2;
}
.article-x .article-cover img {
  object-position: 50% 38%;   /* calibrado · desktop · artigo CANAL (capa = consulta) */
}
.article-x .ax-cover-dor img { object-position: 49% 16%; }  /* calibrado · desktop · artigo DOR (capa = dra-dor-hero) */
.article-x .article-cover.ax-cover-clar { aspect-ratio: 5 / 4; }  /* capa do CLAREAMENTO +20% de altura (estava baixa) */
.article-x .ax-cover-clar img { object-position: 50% 12%; } /* calibrado · desktop · artigo CLAREAMENTO (capa = dra-clareamento-hero) */

/* cards "Leia também" mais altos (3/4 no lugar de 4/5) */
.article-x .post-card-media {
  aspect-ratio: 3 / 4;
}
.article-x .ax-dor   .post-card-media img { object-position: 50% 20%; }  /* CALIBRÁVEL · desktop */
.article-x .ax-clar  .post-card-media img { object-position: 50% 20%; }  /* CALIBRÁVEL · desktop */
.article-x .ax-canal .post-card-media img { object-position: 50% 20%; }  /* CALIBRÁVEL · desktop */

/* ---- mobile ---- */
@media (max-width: 600px) {
  .article-x .article-cover { aspect-ratio: 4 / 3; }
  .article-x .article-cover img { object-position: 50% 42%; }   /* calibrado · mobile · artigo CANAL */
  .article-x .ax-cover-dor img { object-position: 50% 17%; }    /* calibrado · mobile · artigo DOR */
  .article-x .article-cover.ax-cover-clar { aspect-ratio: 10 / 9; }  /* capa do CLAREAMENTO +20% de altura (mobile) */
  .article-x .ax-cover-clar img { object-position: 50% 13%; }   /* calibrado · mobile · artigo CLAREAMENTO */
  .article-x .ax-dor   .post-card-media img { object-position: 50% 18%; } /* CALIBRÁVEL · mobile */
  .article-x .ax-clar  .post-card-media img { object-position: 50% 18%; } /* CALIBRÁVEL · mobile */
  .article-x .ax-canal .post-card-media img { object-position: 50% 18%; } /* CALIBRÁVEL · mobile */
}

/* =====================================================================
   EEAT — fontes/referências + bloco de autoria (etapa 3 SEO)
   ===================================================================== */
.article-x .article-sources {
  max-width: 720px; margin: var(--space-xl) auto 0; padding: 0 var(--space-md);
}
.article-x .article-sources h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.2rem; color: var(--color-graphite);
  margin: 0 0 var(--space-xs); scroll-margin-top: var(--header-height);
}
.article-x .article-sources ul { padding-left: 1.2rem; margin: 0; }
.article-x .article-sources li {
  font-size: 0.95rem; line-height: 1.6;
  color: rgba(var(--color-graphite-rgb), 0.82); margin-bottom: 0.35rem;
}
.article-x .article-sources a { color: var(--color-bronze); text-underline-offset: 3px; }
.article-x .article-sources a:hover { color: var(--color-gold); }

.article-x .author-box {
  display: flex; gap: var(--space-md); align-items: flex-start;
  max-width: 720px; margin: var(--space-lg) auto 0; padding: var(--space-md) var(--space-lg);
  background: var(--color-ivory);
  border: 1px solid rgba(var(--color-gold-rgb), 0.3);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 16px 16px 0;
}
.article-x .author-box img {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: 50% 20%;
  border: 2px solid var(--color-gold);
}
.article-x .author-box-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--color-graphite); margin: 0 0 0.15rem;
}
.article-x .author-box-role {
  font-size: 0.88rem; font-weight: 600; color: var(--color-bronze); margin: 0 0 0.5rem;
}
.article-x .author-box-bio {
  font-size: 0.95rem; line-height: 1.6; color: rgba(var(--color-graphite-rgb), 0.85); margin: 0;
}
.article-x .author-box-bio a { color: var(--color-bronze); }

/* data visível na meta do artigo */
.article-x .article-meta time { color: rgba(var(--color-graphite-rgb), 0.7); }

@media (max-width: 560px) {
  .article-x .author-box { flex-direction: column; gap: var(--space-sm); }
}