/* Post do blog (Figma: página "Blog post", 388:1645) — e, com os mesmos
   componentes, o post de Notícias (single-noticia.php, sem barra lateral).
   Hero de 700px (gradiente 138,56°, sem textura) com título/autor à
   esquerda e foto 630×390 à direita (y=198); corpo a y=830 (846px de
   texto + 20px + 413px de barra lateral). */

.article-hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(138.559deg, #19202E 15.803%, #672A1C 51.298%, #EC4208 87.082%);
  padding-top: 120px;
  padding-bottom: 56px;
  color: var(--color-white);
}
@media (min-width: 1024px) {
  .article-hero { min-height: 700px; box-sizing: border-box; padding-top: 198px; padding-bottom: 0; }
}

.article-hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
}
@media (min-width: 1024px) {
  .article-hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) 630px; gap: 20px; align-items: start; }
}

/* Texto a 72px abaixo do topo da foto (270 vs 198). */
.article-hero-copy { max-width: 558px; }
@media (min-width: 1024px) {
  .article-hero-copy { margin-top: 72px; }
}

/* Link de volta pra listagem (Blog/Notícias): "‹ Blog", 14px Light laranja. */
.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-orange);
  margin-bottom: 12px;
  transition: color var(--transition-base);
}
.article-back-link:hover { color: var(--color-orange-light); text-decoration: underline; }
.article-back-link-icon { width: 14px; height: 14px; flex-shrink: 0; }

.article-hero-copy h1 {
  margin: 0;
  text-wrap: wrap;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.28px;
}
@media (min-width: 768px) {
  .article-hero-copy h1 { font-size: 44px; letter-spacing: -0.44px; }
}

/* Autor: avatar de 30px + "Escrito por…" (14px) e data (12px) 4px abaixo. */
.article-hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.article-hero-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-white); object-fit: cover; }
.article-hero-meta-text { display: flex; flex-direction: column; gap: 4px; }
.article-hero-author { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-02); }
.article-hero-date { margin: 0; font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--color-gray-02); }

.article-hero-media { width: 100%; }
.article-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 630 / 390;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .article-hero-media img { border-radius: 30px; }
}

/* Layout de duas colunas: corpo do artigo + barra lateral (Figma:
   846px + 20px de vão + 413px, dentro do container de 1280px). */
.article-section { padding: 56px 0; }
@media (min-width: 1024px) {
  /* 130px entre o hero e o texto (700→830); 120px do fim da navegação
     até o rodapé. */
  .article-section { padding: 130px 0 120px; }
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 846fr) minmax(0, 413fr); gap: 20px; align-items: start; }
}

/* Tipografia do corpo (node 388:1821): parágrafos 18px light; subtítulo
   20px semibold; entre blocos uma linha em branco inteira (27px). */
.article-body { font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--color-navy); }
@media (min-width: 768px) {
  .article-body { font-size: 18px; }
}
.article-body > * { margin-top: 0; margin-bottom: 27px; }
.article-body > :last-child { margin-bottom: 0; }
.article-body > h2,
.article-body > h3,
.article-body > h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-navy);
}
.article-body > ul,
.article-body > ol { padding-left: 24px; }
.article-body > ul { list-style: disc; }
.article-body > ol { list-style: decimal; }

/* Imagens do artigo: caixas de 846×506 (raio 30, fundo #E9EDF3 enquanto
   carrega). */
.article-body figure { margin: 0 0 27px; }
.article-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--color-bg-band);
}
@media (min-width: 768px) {
  .article-body img { border-radius: 30px; }
}
.article-body figure img { aspect-ratio: 846 / 506; object-fit: cover; }
.article-body a { color: var(--color-orange); text-decoration: underline; }
.article-body strong { font-weight: 600; }

/* Compartilhar (ícones de 46px, à direita) 67px abaixo do texto; linha
   divisória 25px abaixo dos ícones e "Post anterior" logo embaixo dela. */
.article-nav { margin-top: 48px; }
@media (min-width: 1024px) {
  .article-nav { margin-top: 67px; }
}

.article-share { display: flex; align-items: center; justify-content: flex-end; gap: 13px; margin-bottom: 25px; }
.article-share img { display: block; width: 47.3px; height: 47.3px; margin: -0.5px; }
.article-share a { transition: transform var(--transition-base), opacity var(--transition-base); }
.article-share a:hover { transform: translateY(-3px); opacity: 0.9; }

.article-nav-divider { border: none; border-top: 1px solid var(--color-border-blue); margin: 0; }

.article-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.article-nav-prev,
.article-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-orange);
  text-decoration: none;
}
.article-nav-prev:hover,
.article-nav-next:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .article-nav-prev,
  .article-nav-next { font-size: 18px; }
}
.article-nav-next { margin-left: auto; }
.article-nav-arrow-icon { width: 24px; height: 24px; margin: 0; flex-shrink: 0; transition: transform var(--transition-base); }
.article-nav-arrow-icon--prev { transform: rotate(180deg); }
.article-nav-prev:hover .article-nav-arrow-icon--prev { transform: rotate(180deg) translateX(4px); }
.article-nav-next:hover .article-nav-arrow-icon { transform: translateX(4px); }

/* Barra lateral: posts recentes (413×452) + busca (413×90), vão de 20px. */
.article-sidebar { display: flex; flex-direction: column; gap: 20px; }

.article-recent {
  box-sizing: border-box;
  border: 1px solid var(--color-border-blue);
  border-radius: 30px;
  padding: 31px 31px 31px;
}
.article-recent h2 { margin: 0 0 29px; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--color-orange); letter-spacing: -0.24px; }

.article-recent-list { display: flex; flex-direction: column; gap: 21.5px; margin: 0; padding: 0; list-style: none; }
.article-recent-item { display: flex; align-items: center; gap: 23px; }
.article-recent-thumb { flex-shrink: 0; display: block; width: 149px; aspect-ratio: 149 / 95; border-radius: 12px; overflow: hidden; background: #D9D9D9; }
.article-recent-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.article-recent-item:hover .article-recent-thumb img { transform: scale(1.06); }
.article-recent-title {
  flex: 0 1 165px; /* caixa de texto de 165px no Figma */
  min-width: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-navy);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-recent-title:hover { color: var(--color-orange); }

.article-search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 90px;
  border: 1px solid var(--color-border-blue);
  border-radius: 30px;
  padding: 0 31px;
}
.article-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-navy);
  background: transparent;
}
.article-search-input::placeholder { color: var(--color-gray-03); }
/* Lupa de 33px à esquerda (Figma 388:1968), campo ao lado. */
.article-search-submit { order: -1; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; cursor: pointer; }
.article-search-submit img { width: 33px; height: 33px; }
.article-search:focus-within { border-color: var(--color-orange-light); }

/* Entrada animada ao rolar (fade + slide-up), como nas outras páginas. */
.article-body > *,
.article-recent,
.article-search {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-search { transition-delay: 0.1s; }
.article-body > .is-visible,
.article-recent.is-visible,
.article-search.is-visible { opacity: 1; transform: none; }
html:not(.js) .article-body > *,
html:not(.js) .article-recent,
html:not(.js) .article-search { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .article-body > *, .article-recent, .article-search { opacity: 1; transform: none; transition: none; }
}