/* Deltas do blog sobre artigo-detalhes.css (base compartilhada: corpo, sidebar,
   modal de autor, reveal, hover, mg-btn, shimmer, carrossel "Leia também",
   e os cards de conteúdo — callout, citação, aprendizados, vocabulário,
   caixa de dica — que agora vivem lá para funcionar em qualquer publicação).
   Tudo escopado em .blog-detalhes para não vazar para o artigo. */

/* Leia também — ajustes do blog (carrossel + cards vêm do artigo-detalhes.css). */

.blog-detalhes .leia-tambem__featured-title {
  color: var(--color-heading);
}

.blog-detalhes .article-badge.tag-tone--navy-deep {
  color: #29235c;
  background-color: rgba(41, 35, 92, 0.16);
}

.blog-detalhes .article-badge.tag-tone--indigo {
  color: #394195;
  background-color: rgba(57, 65, 149, 0.16);
}

.blog-detalhes .article-badge.article-badge--intro {
  color: #ffffff;
  background-color: rgba(57, 65, 149, 0.72);
}

.blog-detalhes .article-badge.tag-tone--lilac {
  color: #cb6ce6;
  background-color: rgba(203, 108, 230, 0.18);
}

.blog-detalhes .article-badge.tag-tone--teal {
  color: #169194;
  background-color: rgba(22, 145, 148, 0.2);
}

.blog-detalhes .article-badge.tag-tone--orange {
  color: #ff8000;
  background-color: rgba(255, 128, 0, 0.2);
}

.blog-detalhes .article-badge.tag-tone--amber {
  color: #ffa626;
  background-color: rgba(255, 166, 38, 0.2);
}

/* Sem selos de tag neste design; os mini-cards usam um eyebrow opcional. */
.blog-detalhes .leia-tambem__mini-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--color-accent);
}
.blog-detalhes .leia-tambem__mini-eyebrow[hidden] { display: none; }

.blog-detalhes .leia-tambem__sidebar {
  width: 377px;
  gap: 45px;
}

.blog-detalhes .leia-tambem__mini-image {
  width: 130px;
}

/* Crop por POSIÇÃO de slot (o carrossel rotaciona imagens diferentes por slot). */
.blog-detalhes .leia-tambem__featured-image img {
  object-position: 50% 30%;
}
.blog-detalhes .leia-tambem__mini-card:nth-child(1) .leia-tambem__mini-image img {
  object-position: 50% 45%;
}
.blog-detalhes .leia-tambem__mini-card:nth-child(2) .leia-tambem__mini-image img {
  object-position: 68% 50%;
}
.blog-detalhes .leia-tambem__mini-card:nth-child(3) .leia-tambem__mini-image img {
  object-position: 50% 55%;
}

@media (max-width: 991.98px) {
  .blog-detalhes .leia-tambem__sidebar { width: 100%; }
}
@media (max-width: 575.98px) {
  .blog-detalhes .leia-tambem__mini-image { width: 110px; }
}

/* Tipografia genérica do corpo (h3/h4, listas, links, blockquote, etc.) — a base
   já estiliza p/h2/callout/citação/figura; sem mexer nos botões/badges próprios. */
.blog-detalhes .article-content h3 {
  margin: 30px 0 11px;
  font-size: calc(18px * var(--ab-font-scale));
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.5;
  color: var(--ab-ink);
  transition: font-size 0.15s ease;
}

.blog-detalhes .article-content h4 {
  margin: 26px 0 10px;
  font-size: calc(16px * var(--ab-font-scale));
  font-weight: 600;
  line-height: 1.5;
  color: var(--ab-ink);
  transition: font-size 0.15s ease;
}

/* Listas comuns (não as do tipbox/learnings, que têm marcador próprio). */
.blog-detalhes .article-content > ul,
.blog-detalhes .article-content > ol,
.blog-detalhes .article-content p + ul,
.blog-detalhes .article-content p + ol,
.blog-detalhes .article-content h2 + ul,
.blog-detalhes .article-content h3 + ul {
  margin: 0 0 17px;
  padding-left: 22px;
}

.blog-detalhes .article-content li {
  font-size: calc(15px * var(--ab-font-scale));
  line-height: 1.85;
  color: var(--ab-ink);
  margin: 0 0 6px;
  transition: font-size 0.15s ease;
}

.blog-detalhes .article-content > ul li::marker,
.blog-detalhes .article-content p + ul li::marker { color: var(--ab-orange); }

/* Links inline do corpo (sem classe própria — preserva botões/CTAs). */
.blog-detalhes .article-content a:not([class]) {
  color: #d77f12;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.blog-detalhes .article-content a:not([class]):hover {
  color: var(--ab-navy);
}

.blog-detalhes .article-content .lw-inline-orange-link > a,
.blog-detalhes .article-content a.lw-inline-orange-link,
.blog-detalhes .article-content .row.my-4 .col-12.text-center.mt-3 > a {
  color: #d77f12;
  text-decoration: underline !important;
  text-decoration-color: #d77f12 !important;
  text-underline-offset: 2px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.blog-detalhes .article-content .lw-inline-orange-link > a:hover,
.blog-detalhes .article-content .lw-inline-orange-link > a:active,
.blog-detalhes .article-content a.lw-inline-orange-link:hover,
.blog-detalhes .article-content a.lw-inline-orange-link:active,
.blog-detalhes .article-content .row.my-4 .col-12.text-center.mt-3 > a:hover,
.blog-detalhes .article-content .row.my-4 .col-12.text-center.mt-3 > a:active {
  color: var(--ab-navy);
  text-decoration-color: var(--ab-navy) !important;
}

.blog-detalhes .article-content .lw-inline-orange-link > a:focus-visible,
.blog-detalhes .article-content a.lw-inline-orange-link:focus-visible,
.blog-detalhes .article-content .row.my-4 .col-12.text-center.mt-3 > a:focus-visible {
  outline: 2px solid rgba(215, 127, 18, 0.35);
  outline-offset: 2px;
}

.blog-detalhes .article-content strong,
.blog-detalhes .article-content b { font-weight: 700; color: var(--ab-ink); }
.blog-detalhes .article-content em,
.blog-detalhes .article-content i { font-style: italic; }

/* Citação simples (blockquote solto), diferente do bloco .article-quote. */
.blog-detalhes .article-content > blockquote {
  margin: 28px 0;
  border-left: 3px solid var(--ab-orange);
  border-radius: 0 8px 8px 0;
  background: var(--ab-bg-soft);
  padding: 16px 22px;
  font-size: calc(17px * var(--ab-font-scale));
  font-style: italic;
  line-height: 1.55;
  color: var(--ab-ink);
  transition: font-size 0.15s ease;
}

.blog-detalhes .article-content hr {
  border: 0;
  border-top: 1px solid var(--ab-hairline);
  margin: 32px 0;
}

/* Imagem solta no corpo (não a .article-figure__img nem badges). */
.blog-detalhes .article-content img:not([class]) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 24px 0;
}

.blog-detalhes .article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--ab-bg-soft);
  border: 1px solid var(--ab-hairline);
  border-radius: 4px;
  padding: 1px 5px;
}