/* ==========================================================
   ARTIGO.CSS
   Estilos exclusivos das páginas de conteúdo (pasta /conteudos/).
   Depende das variáveis definidas em style.css (:root) —
   sempre carregar style.css ANTES deste arquivo.
   ========================================================== */

/* --- Barra "voltar" --- */
.artigo__voltar-bar {
  padding: 22px 0 0;
}

.artigo__voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--verde);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.artigo__voltar:hover,
.artigo__voltar:focus-visible {
  color: var(--verde-escuro);
}

/* --- Cabeçalho do artigo --- */
.artigo__cabecalho {
  max-width: 760px;
  padding: 28px 0 8px;
}

.artigo__categoria {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--verde);
  background: #dcebdd;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.artigo__cabecalho h1 {
  margin: 0;
  color: var(--verde-escuro);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.artigo__resumo {
  margin: 20px 0 0;
  color: var(--texto-suave);
  font-size: 1.15rem;
  line-height: 1.6;
}

.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* --- Corpo do artigo --- */
.artigo__corpo {
  max-width: 760px;
  padding: 24px 0 60px;
  font-size: 1.08rem;
  line-height: 1.8;
}

.artigo__corpo h2 {
  margin: 2.2em 0 0.6em;
  color: var(--verde-escuro);
  font-size: 1.55rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.artigo__corpo h2:first-child {
  margin-top: 0;
}

.artigo__corpo h3 {
  margin: 1.8em 0 0.5em;
  color: var(--verde-escuro);
  font-size: 1.22rem;
}

.artigo__corpo p {
  margin: 0 0 1.1em;
  color: var(--texto);
}

.artigo__corpo ul,
.artigo__corpo ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
  color: var(--texto);
}

.artigo__corpo li {
  margin-bottom: 0.6em;
}

.artigo__corpo li::marker {
  color: var(--verde);
  font-weight: 700;
}

.artigo__corpo strong {
  color: var(--verde-escuro);
}

/* Imagem solta no corpo do artigo (uso geral) */
.artigo__corpo img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(28, 69, 44, 0.1);
}

.artigo__corpo figure {
  margin: 1.8em 0;
}

.artigo__corpo figcaption {
  margin-top: 10px;
  color: var(--texto-suave);
  font-size: 0.9rem;
  text-align: center;
}

/* Comparação lado a lado (ex.: "sozinho" x "com apoio") */
.artigo__comparacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 2em 0;
}

.artigo__comparacao-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(28, 69, 44, 0.1);
}

.artigo__comparacao-item figcaption {
  margin-top: 10px;
  color: var(--verde-escuro);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 720px) {
  .artigo__comparacao {
    grid-template-columns: 1fr;
  }
}
/* Comparação estilo banner: texto já embutido na imagem,
   sem corte forçado e sem legenda separada */
.artigo__comparacao--banner .artigo__comparacao-item img {
  aspect-ratio: auto;
  object-fit: initial;
}
.artigo__corpo blockquote {
  margin: 1.8em 0;
  padding: 18px 22px;
  border-left: 4px solid var(--dourado);
  border-radius: 0 12px 12px 0;
  background: var(--verde-suave);
  color: var(--texto);
  font-style: italic;
}

/* Reaproveita a classe .aviso-saude já existente em style.css
   (margem esquerda dourada) para o aviso de conteúdo educativo. */
.artigo__corpo .aviso-saude {
  margin: 2em 0 0;
}

/* --- "Veja também" --- */
.veja-tambem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.veja-tambem__card {
  display: block;
  padding: 24px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(28, 69, 44, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.veja-tambem__card:hover,
.veja-tambem__card:focus-visible {
  transform: translateY(-4px);
  border-color: #98b9a1;
  box-shadow: var(--sombra);
}

.veja-tambem__icone {
  font-size: 1.6rem;
}

.veja-tambem__card h3 {
  margin: 14px 0 0;
  color: var(--verde-escuro);
  font-size: 1.08rem;
  line-height: 1.35;
}

.veja-tambem__card p {
  margin: 8px 0 0;
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.5;
}

.veja-tambem__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--verde);
  font-size: 0.88rem;
  font-weight: 800;
}

/* --- Responsivo --- */
@media (max-width: 720px) {
  .artigo__cabecalho {
    padding: 20px 0 4px;
  }

  .artigo__corpo {
    padding: 20px 0 48px;
    font-size: 1rem;
  }

  .veja-tambem__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   ADICIONAR AO FINAL DE assets/css/artigo.css
   Componente: mapa nutricional (imagem + legenda dos ícones)
   ========================================================== */

.mapa-nutricional {
  margin: 2em 0;
}

.mapa-nutricional img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(28, 69, 44, 0.1);
}

.mapa-nutricional__legenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.mapa-nutricional__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--verde-suave);
}

.mapa-nutricional__icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--verde-escuro);
  color: #fff;
  font-size: 1.1rem;
}

.mapa-nutricional__item--dourado .mapa-nutricional__icone {
  background: var(--dourado);
}

.mapa-nutricional__item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--verde-escuro);
  font-size: 0.98rem;
}

.mapa-nutricional__item p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .mapa-nutricional__legenda {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   ADICIONAR AO FINAL DE assets/css/artigo.css
   Componente: legenda de ícones (genérico, reutilizável em
   qualquer artigo que tenha uma imagem com ícones/setas —
   mesma ideia do .mapa-nutricional, mas com nome genérico)
   ========================================================== */

.artigo__legenda-icones {
  margin: 2em 0;
}

.artigo__legenda-icones img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(28, 69, 44, 0.1);
}

.artigo__legenda-icones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.artigo__legenda-icones-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--verde-suave);
}

.artigo__legenda-icones-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--verde-escuro);
  color: #fff;
  font-size: 1.1rem;
}

.artigo__legenda-icones-item--dourado .artigo__legenda-icones-icone {
  background: var(--dourado);
}

.artigo__legenda-icones-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--verde-escuro);
  font-size: 0.98rem;
}

.artigo__legenda-icones-item p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .artigo__legenda-icones-grid {
    grid-template-columns: 1fr;
  }
}