/* ========================================================================
   NOTÍCIAS — página de publicação e faixa de destaque na Nossa rede.
   Reaproveita tokens e componentes do site (rotulo, olho, ficha, carimbo, tabela-env, selo).
   Gráfico segue o guia de visualização: barra fina (≤ 24 px), ponta arredondada de 4 px e
   base reta, grade de 1 px sólida e recessiva, valor na ponta da barra, texto sempre em cor de
   texto (nunca na cor da barra), tabela equivalente acessível e dica ao passar o mouse.
   Cores com contraste medido pela fórmula WCAG: barra em destaque #1D4ED8 (6,7:1 sobre branco),
   barras de contexto #7B87AE (3,55:1 sobre branco).
   ======================================================================== */
@layer componentes {

  /* ───── Faixa de notícia (Nossa rede) ───── */
  .nt-faixa{ background:var(--cor-creme-2); border-bottom:var(--filete) solid var(--cor-linha); }
  .nt-faixa__env{ display:grid; gap:var(--esp-5) var(--esp-7); align-items:center;
                  padding-block:var(--esp-6); grid-template-columns:1fr; }
  @media (min-width:900px){ .nt-faixa__env{ grid-template-columns:minmax(0,300px) 1fr; } }
  .nt-faixa__foto{ border-radius:var(--raio); overflow:hidden; aspect-ratio:3/2; background:var(--cor-mata); }
  .nt-faixa__foto img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
  .nt-faixa__t{ font-size:var(--t-h3); line-height:var(--lh-titulo); font-weight:var(--p-mega);
                letter-spacing:var(--ls-h2); margin-block:var(--esp-3); max-width:30ch; }
  .nt-faixa__t a{ color:var(--cor-tinta); text-decoration:none; }
  .nt-faixa__t a:hover{ text-decoration:underline; text-underline-offset:.15em; }
  .nt-faixa p{ max-width:62ch; }
  .nt-faixa .botao{ margin-top:var(--esp-4); }

  /* ───── Página da notícia ───── */
  .nt-meta{ display:flex; flex-wrap:wrap; gap:var(--esp-2) var(--esp-5); font-size:var(--t-nota);
            color:var(--cor-claro-2); margin-top:var(--esp-5); }
  /* coluna de leitura: mesma largura fixa para texto e rodapé (em rem, para não variar com o corpo da letra) */
  .nt-corpo{ max-width:47rem; margin-inline:auto; }
  /* blocos que respiram mais que a coluna de texto: centralizados, até 1000 px */
  .nt-largo{ max-width:1000px; margin-inline:auto; }
  /* trilha de navegação em linha (mesmo padrão das páginas de projeto) */
  .pagina-noticias .migalhas ol,.pagina-noticia-hecta-sos .migalhas ol{ display:flex; flex-wrap:wrap; gap:.65rem; list-style:none; padding:0; }
  .pagina-noticias .migalhas li+li::before,.pagina-noticia-hecta-sos .migalhas li+li::before{ content:'→'; margin-right:.65rem; }
  .nt-corpo > * + *{ margin-top:var(--esp-4); }
  .nt-corpo h2{ font-size:var(--t-h2); line-height:var(--lh-titulo); letter-spacing:var(--ls-h2);
                font-weight:var(--p-mega); margin-top:var(--esp-bloco); max-width:24ch; text-wrap:balance; }
  .nt-corpo h3{ font-size:var(--t-h3); line-height:var(--lh-titulo); font-weight:var(--p-forte);
                margin-top:var(--esp-6); }
  .nt-lide{ font-size:var(--t-olho); line-height:var(--lh-olho); color:var(--cor-tinta); }
  .nt-lide::first-letter{ font-weight:var(--p-mega); }
  .nt-citacao{ border-left:4px solid var(--cor-lima); padding:var(--esp-2) 0 var(--esp-2) var(--esp-5);
               font-family:var(--fam-italico); font-style:italic; font-size:var(--t-h3);
               line-height:1.4; color:var(--cor-tinta); max-width:40ch; }

  /* números de destaque: figura de herói, mesma família sem serifa, algarismos proporcionais */
  .nt-numeros{ list-style:none; padding:0; margin:var(--esp-6) auto 0; display:grid; gap:var(--esp-4);
               grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); max-width:1000px; }
  .nt-numeros li{ background:var(--cor-creme-2); border-radius:var(--raio); padding:var(--esp-5); }
  .nt-numeros b{ display:block; font-size:clamp(2rem,1.6rem + 1.6vw,3rem); line-height:1.05;
                 font-weight:var(--p-mega); letter-spacing:-.02em; color:var(--cor-tinta); }
  .nt-numeros span{ display:block; margin-top:var(--esp-2); color:var(--cor-tinta-2); font-size:var(--t-nota); }

  /* ───── Gráfico de barras horizontais (forma "destaque") ───── */
  .nt-grafico{ margin:var(--esp-6) auto; background:var(--cor-branco); border-radius:var(--raio-g);
               box-shadow:var(--sombra-1); padding:var(--esp-6) var(--esp-5); max-width:1000px; }
  .nt-grafico__t{ font-size:var(--t-h3); font-weight:var(--p-forte); line-height:var(--lh-titulo); }
  .nt-grafico__sub{ color:var(--cor-tinta-2); font-size:var(--t-nota); margin-top:var(--esp-2); max-width:70ch; }
  .nt-barras{ list-style:none; padding:0; margin:var(--esp-6) 0 0; display:grid; gap:var(--esp-3); }
  .nt-barras li{ display:grid; grid-template-columns:minmax(0,15rem) 1fr; gap:var(--esp-2) var(--esp-4);
                 align-items:center; position:relative; min-height:var(--alvo); border-radius:var(--raio-p); }
  .nt-barras li:focus-visible{ outline:3px solid var(--foco-a); outline-offset:3px; }
  @media (max-width:620px){ .nt-barras li{ grid-template-columns:1fr; } }
  .nt-barras__nome{ font-size:var(--t-nota); color:var(--cor-tinta); line-height:1.35; }
  .nt-barras__nome small{ display:block; color:var(--cor-tinta-2); font-size:var(--t-nota); }
  /* a trilha reserva 5,5rem à direita para o rótulo de valor da barra mais longa não vazar;
     a grade e a escala medem só a área útil (content-box), então 100% = fim do eixo */
  .nt-barras__trilho{ display:flex; align-items:center; gap:var(--esp-3); min-width:0; padding-right:5.5rem;
                      background:linear-gradient(to right, var(--cor-linha) 1px, transparent 1px) 0 0/20% 100% repeat-x;
                      background-origin:content-box; background-clip:content-box; }
  .nt-barras__barra{ height:22px; width:var(--v); min-width:6px; background:#7B87AE;
                     border-radius:0 4px 4px 0; flex:none; transition:filter var(--dur-rapida); }
  .nt-barras li.destaque .nt-barras__barra{ background:#1D4ED8; }
  .nt-barras li:hover .nt-barras__barra, .nt-barras li:focus-visible .nt-barras__barra{ filter:brightness(1.12); }
  .nt-barras__valor{ font-size:var(--t-nota); font-weight:var(--p-forte); color:var(--cor-tinta);
                     white-space:nowrap; font-variant-numeric:tabular-nums; }
  .nt-barras li.destaque .nt-barras__nome, .nt-barras li.destaque .nt-barras__valor{ font-weight:var(--p-mega); }
  /* escala: marcas de R$ 5 em R$ 5, na mesma posição da grade (20% da trilha cada) */
  .nt-grafico__eixo{ display:grid; grid-template-columns:minmax(0,15rem) 1fr; gap:var(--esp-4);
                     margin-top:var(--esp-3); font-size:var(--t-nota); color:var(--cor-tinta-2);
                     font-variant-numeric:tabular-nums; max-width:none; }
  .nt-escala{ position:relative; height:1.6em; margin-right:5.5rem; }
  .nt-escala span{ position:absolute; top:0; left:var(--x); transform:translateX(-50%); white-space:nowrap; }
  .nt-escala span:first-child{ transform:none; }
  @media (max-width:620px){ .nt-grafico__eixo{ grid-template-columns:1fr; } .nt-grafico__eixo > span:first-child{ display:none; }
    /* tela estreita: só as marcas 0, 40% e 80% (R$ 0/10/20 ou 0/100/200), para não se atropelarem */
    .nt-escala span:nth-child(2n){ display:none; } }
  /* Tela dividida: o cartão do gráfico fica estreito com a janela ainda "larga", e a regra pela
     largura da janela (acima) não dispara — os rótulos do eixo se encavalavam entre 640 e 760 px.
     Por isso o gráfico decide pela largura do PRÓPRIO cartão (e a escala, pela própria largura):
     cartão abaixo de 45rem põe o nome em cima da barra; escala abaixo de 23rem mostra marca sim,
     marca não; abaixo de 10rem, só a primeira e a última. A regra de janela fica como reserva. */
  .nt-grafico{ container:grafico / inline-size; }
  .nt-escala{ container:escala / inline-size; }
  @container grafico (max-width:45rem){
    .nt-barras li, .nt-grafico__eixo{ grid-template-columns:1fr; }
    .nt-grafico__eixo > span:first-child{ display:none; }
  }
  @container escala (max-width:23rem){ .nt-escala span:nth-child(2n){ display:none; } }
  @container escala (max-width:10rem){
    .nt-escala span{ display:none; }
    .nt-escala span:first-child, .nt-escala span:last-child{ display:block; }
  }
  .nt-deslize{ display:none; font-size:var(--t-nota); color:var(--cor-tinta-2); margin:var(--esp-5) auto 0; max-width:47rem; }
  @media (max-width:820px){ .nt-deslize{ display:block; } }
  .nt-dica{ position:absolute; z-index:5; pointer-events:none; max-width:min(340px,86vw);
            background:var(--cor-mata); color:var(--cor-claro); border-radius:var(--raio-p);
            padding:var(--esp-3) var(--esp-4); font-size:var(--t-nota); line-height:1.45;
            box-shadow:var(--sombra-2); }
  .nt-dica b{ display:block; font-size:1.125rem; color:var(--cor-branco); }
  .nt-dica[hidden]{ display:none; }

  /* ───── Tabela comparativa de recursos ───── */
  .nt-tabela{ max-width:1000px; margin:var(--esp-6) auto; }
  .nt-tabela table{ min-width:760px; }
  .nt-tabela thead th{ vertical-align:bottom; }
  .nt-tabela th[scope="row"]{ font-weight:var(--p-forte); background:var(--cor-creme-2); width:22%; }
  .nt-tabela td.sos{ background:#EEF3FF; font-weight:var(--p-medio); }
  .nt-tabela thead th.sos{ background:#1D4ED8; color:var(--cor-branco); }
  .nt-sim{ color:#15803D; font-weight:var(--p-forte); }
  .nt-nao{ color:var(--cor-coral); font-weight:var(--p-forte); }
  .nt-parcial{ color:var(--cor-tinta-2); font-weight:var(--p-forte); }
  .nt-tabela caption{ caption-side:bottom; text-align:left; padding:var(--esp-4) var(--esp-5);
                      font-size:var(--t-nota); color:var(--cor-tinta-2); }

  /* ───── Caixas de fato, limite e transparência ───── */
  .nt-caixa{ border-radius:var(--raio-g); padding:var(--esp-6) var(--esp-6); max-width:1000px; margin:var(--esp-5) auto 0; }
  .nt-caixa--fato{ background:var(--cor-mata); color:var(--cor-claro-2); }
  .nt-caixa--fato h3{ color:var(--cor-claro); margin-top:0; }
  .nt-caixa--fato dl{ display:grid; gap:var(--esp-3) var(--esp-6); margin:var(--esp-5) 0 0;
                      grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
  .nt-caixa--fato dt{ color:var(--cor-roxo-claro); font-weight:var(--p-forte); font-size:var(--t-nota);
                      letter-spacing:.06em; text-transform:uppercase; }
  .nt-caixa--fato dd{ margin:var(--esp-1) 0 0; color:var(--cor-claro); }
  .nt-caixa--fato a{ color:var(--cor-verde-claro); }
  .nt-caixa--limite{ background:#FFF5F2; border:1px solid #F3C9BE; }
  .nt-caixa--limite h3{ margin-top:0; color:var(--cor-tinta); }
  .nt-caixa ul{ margin:var(--esp-4) 0 0; padding-left:1.2em; display:grid; gap:var(--esp-3); }

  .nt-rodape{ margin:var(--esp-bloco) auto 0; padding-top:var(--esp-5); border-top:var(--filete) solid var(--cor-linha);
              display:grid; gap:var(--esp-3); font-size:var(--t-nota); color:var(--cor-tinta-2); max-width:47rem; }
  .nt-rodape b{ color:var(--cor-tinta); }
  .nt-doc{ display:inline-flex; align-items:center; gap:var(--esp-3); min-height:var(--alvo);
           padding:var(--esp-3) var(--esp-5); border-radius:var(--raio-pill); background:var(--cor-creme-2);
           color:var(--cor-tinta); font-weight:var(--p-forte); text-decoration:none; }
  .nt-doc:hover{ background:var(--cor-linha); }

  /* ───── Lista de notícias ───── */
  .nt-lista{ list-style:none; padding:0; margin:var(--esp-6) 0 0; display:grid; gap:var(--esp-6); }
  .nt-cartao{ display:grid; gap:var(--esp-5); grid-template-columns:1fr; background:var(--cor-branco);
              border-radius:var(--raio-g); box-shadow:var(--sombra-1); overflow:hidden; }
  @media (min-width:900px){ .nt-cartao{ grid-template-columns:minmax(0,420px) 1fr; } }
  .nt-cartao img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; filter:saturate(.7); }
  .nt-cartao__corpo{ padding:var(--esp-5) var(--esp-6) var(--esp-6); display:grid; gap:var(--esp-3); align-content:center; }
  .nt-cartao__t{ font-size:var(--t-h3); line-height:var(--lh-titulo); font-weight:var(--p-mega); }
  .nt-cartao__t a{ color:var(--cor-tinta); text-decoration:none; }
  .nt-cartao__t a:hover{ text-decoration:underline; }
  /* o rótulo do site é flex em linha única: no cartão ele precisa quebrar, senão alarga a coluna em tela de 320 px */
  .nt-cartao > *, .nt-faixa__env > *{ min-width:0; }
  .nt-cartao .rotulo, .nt-faixa .rotulo{ flex-wrap:wrap; row-gap:var(--esp-1); }

  /* links sozinhos em célula de tabela: alvo de toque de 44 px (regra da casa, público idoso) */
  .pagina-noticia-hecta-sos td a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
}