/* ===========================================================================
   /news — estilos próprios da área de notícias do feed diário (Multica).
   Carrega DEPOIS de /blog/_style.css, que segue sendo a base compartilhada
   (tokens, header, footer, cards, corpo de artigo). Aqui entra só o que a
   área de notícias tem e o blog editorial não tem:
     · zonas do índice  — em destaque / recentes / arquivo
     · peças do corpo   — figura com legenda, gráfico, caixa de ícones
   Não duplicar nada que já exista em _style.css.
   =========================================================================== */

/* ---------- Logotipo real no cabeçalho e no rodapé ---------- */
/* O .logo do _style.css desenha a marca em texto; aqui ela é a assinatura
   horizontal de verdade, como na home. O guia de marca proíbe recriar o
   logotipo, então o PNG manda — o CSS só o dimensiona. */
.site-header .logo img{height:32px;width:auto;display:block}
.site-footer .logo img{height:34px;width:auto;display:block}
@media (max-width:520px){ .site-header .logo img{height:26px} }

/* ---------- Imagens dentro das molduras ---------- */
/* Faltava isto: o índice insere <img> no .thumb do card, e sem regra a imagem
   entrava no tamanho natural do arquivo, estourando a moldura 16/9 — era o que
   deixava a notícia quebrada. Vale para as três molduras, para nenhuma página
   nova precisar de style inline. */
/* contain, NÃO cover: as capas são infográficos com texto e números — recortar
   para preencher a moldura corta justamente a informação. Com contain a peça
   aparece inteira; a moldura ganha fundo claro para a sobra não virar uma
   tarja escura. Sem imagem, o gradiente teal e o placeholder continuam valendo. */
.card .thumb img,
.feature-media img,
.article-cover img{width:100%;height:100%;object-fit:contain;display:block}
.card .thumb,
.feature-media,
.article-cover{overflow:hidden}
.card .thumb:has(img),
.feature-media:has(img),
.article-cover:has(img){background:var(--bg-light)}

/* A peça de destaque fica ao lado de um texto que pode ser longo; sem limite, a
   linha estica e a imagem ganha bandas enormes. Quatro linhas bastam para o
   resumo, e o card mantém proporção de cartaz. */
.feature-body .excerpt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:820px){ .feature-media{min-height:0;aspect-ratio:16/10} }

/* ---------- Cabeçalho de dia ----------
   A data encabeça o grupo em vez de se repetir em cada manchete. Vale para
   Últimas notícias e Recentes; no Arquivo ela já está no próprio dropdown. */
.diagrupo + .diagrupo{margin-top:30px}
.diatitulo{display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-800)}
.diatitulo::after{content:"";flex:1;height:1px;background:rgba(10,110,125,.16)}
.diagrupo .newslist{border-top:0}
@media (max-width:560px){ .diatitulo{font-size:11.5px;gap:10px} }

/* ---------- Últimas notícias: blocos retangulares empilhados ----------
   A leva atual (as mesmas notícias do carrossel da home) vem em blocos iguais,
   um sobre o outro: imagem numa coluna com teto de altura e o resumo ao lado.
   As capas são infográficos — em moldura de cartaz dominam o bloco sem ficar
   legíveis; nesta proporção ancoram a notícia sem virar torre. */
.newsblocks{display:flex;flex-direction:column;gap:18px}
#newsRoot .feature-body{padding:22px 26px;gap:9px}
#newsRoot .feature-body h3{font-size:clamp(18px,2.1vw,21px)}
#newsRoot .feature-body .excerpt{-webkit-line-clamp:3;font-size:15px}
@media (min-width:820px){
  #newsRoot .feature-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}
  #newsRoot .feature-media{aspect-ratio:16/9;min-height:0;max-height:212px}
}
/* No celular o bloco empilha imagem em cima e texto embaixo; sem apertar, três
   blocos viram mil e quinhentos pixels antes da lista seguinte. */
@media (max-width:560px){
  .newsblocks{gap:14px}
  #newsRoot .feature-body{padding:18px 20px;gap:7px}
  #newsRoot .feature-body h3{font-size:18px}
  #newsRoot .feature-body .excerpt{-webkit-line-clamp:2;font-size:14.5px}
}

/* ---------- Recentes: lista compacta ----------
   A manchete manda e a miniatura só ancora. Os cards grandes mostravam uma
   notícia por rolagem; a lista mostra a leva inteira de uma vez. */
.newslist{max-width:960px;border-top:1px solid rgba(10,110,125,.12)}
/* Com muitas publicações a coluna única vira rolagem longa e sobra meia tela
   vazia à direita. A classe vem do script, pela contagem de itens. */
@media (min-width:1040px){
  .newslist.duas{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;max-width:none;
    border-top:0}
  .newslist.duas .newsrow{border-top:1px solid rgba(10,110,125,.12);border-bottom:0;
    grid-template-columns:140px minmax(0,1fr);gap:18px}
}
.newsrow{display:grid;grid-template-columns:172px minmax(0,1fr);gap:22px;align-items:start;
  padding:20px 14px 20px 0;border-bottom:1px solid rgba(10,110,125,.12);color:inherit;
  transition:background .16s ease,padding-left .16s ease}
.newsrow:hover,.newsrow:focus-visible{background:var(--white);padding-left:14px;color:inherit;outline:none}
.newsrow .thumb{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--bg-light);
  display:flex;align-items:center;justify-content:center}
.newsrow .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.newsrow .thumb.vazia{background:linear-gradient(135deg,var(--teal-700),var(--teal-900))}
.newsrow .thumb .ph{font-family:"Montserrat",sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center;padding:0 10px}
.newsrow .txt{display:block}
.newsrow h3{font-family:"Montserrat",sans-serif;font-weight:600;font-size:17.5px;line-height:1.3;color:var(--ink)}
.newsrow:hover h3{color:var(--teal-800)}
.newsrow .ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.newsrow .meta{display:block;margin-top:9px;font-size:12.5px;color:var(--ink-muted)}
@media (max-width:560px){
  .newsrow{grid-template-columns:108px minmax(0,1fr);gap:14px;padding:16px 0}
  .newsrow:hover{padding-left:0}
  .newsrow h3{font-size:16px}
  /* No celular o resumo saía cortado no meio da palavra e empurrava a data
     para longe da manchete. A linha some: manchete + data bastam para escolher. */
  .newsrow .ex{display:none}
  .newsrow .meta{margin-top:6px}
}

/* Grade herdada do blog — segue valendo para /blog; o índice de notícias não
   usa mais .grid.cols-*, mas a regra não custa nada e evita regressão lá. */
@media (min-width:700px){ .grid.cols-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} }

/* ---------- Arquivo do mês (dropdown por dia) ---------- */
.archive{display:flex;flex-direction:column;gap:10px;max-width:760px}
.archive details{background:var(--white);border:1px solid rgba(10,110,125,.14);border-radius:var(--radius);
  overflow:hidden}
.archive details[open]{box-shadow:var(--shadow)}
.archive summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:15px;
  color:var(--ink)}
.archive summary::-webkit-details-marker{display:none}
.archive summary:hover{color:var(--teal-800)}
.archive summary .n{font-family:"Open Sans",sans-serif;font-weight:400;font-size:13px;color:var(--ink-muted)}
.archive summary .chev{width:10px;height:10px;border-right:2px solid var(--teal-500);
  border-bottom:2px solid var(--teal-500);transform:rotate(45deg);transition:transform .18s;flex:0 0 auto;
  margin-left:auto;margin-right:2px}
.archive details[open] summary .chev{transform:rotate(-135deg)}
.archive ul{list-style:none;margin:0;padding:0 20px 8px;border-top:1px solid rgba(10,110,125,.1)}
.archive li{padding:13px 0;border-bottom:1px solid rgba(10,110,125,.08)}
.archive li:last-child{border-bottom:0}
.archive li a{display:flex;gap:12px;align-items:baseline;color:var(--ink);font-size:15px;line-height:1.4}
.archive li a:hover{color:var(--teal-800)}
.archive li .tag{font-family:"Montserrat",sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal-800);background:#E8F4F6;border-radius:20px;padding:3px 9px;
  flex:0 0 auto}

/* ---------- Peças do corpo do artigo: figura, gráfico, ícones ---------- */
/* Sangram além da coluna de texto (680px) sem estourar o wrap do site. */
.article-body figure{margin:30px 0;max-width:none}
@media (min-width:860px){ .article-body figure.wide{width:min(860px,92vw);margin-left:50%;transform:translateX(-50%)} }
.article-body figure img{width:100%;display:block;border-radius:var(--radius);background:var(--bg-light)}
.article-body figure .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  border-radius:var(--radius);background:linear-gradient(135deg,var(--teal-700),var(--teal-900));
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-align:center;padding:0 24px}
.article-body figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-muted);line-height:1.5}
.article-body figcaption b{color:var(--ink-soft)}

/* Caixa de destaques com ícone — “o que isso significa”, números-chave etc. */
.keybox{background:var(--bg-light);border:1px solid rgba(10,110,125,.14);border-radius:var(--radius);
  padding:22px 24px;margin:30px 0}
.keybox h3{font-family:"Montserrat",sans-serif;font-weight:600;font-size:16px;color:var(--teal-800);
  letter-spacing:.02em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.keybox h3 svg{width:20px;height:20px;fill:none;stroke:var(--teal-500);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.keybox ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.keybox li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.keybox li svg{width:19px;height:19px;margin-top:2px;fill:none;stroke:var(--teal-500);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Números em linha (mini-gráfico sem biblioteca) */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:30px 0}
.stat{background:var(--white);border:1px solid rgba(10,110,125,.14);border-left:4px solid var(--teal-500);
  border-radius:var(--radius);padding:18px 20px}
.stat b{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:28px;color:var(--teal-800);
  line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-muted);line-height:1.45}

/* ---------- Estado vazio / carregando do índice ---------- */
.news-state{max-width:640px;margin:56px auto;padding:30px;text-align:center;background:var(--white);
  border:1px dashed rgba(10,110,125,.3);border-radius:var(--radius);color:var(--ink-muted)}
.news-state h2{font-family:"Montserrat",sans-serif;font-size:20px;color:var(--ink);margin-bottom:8px}