/* =====================================================================
   /noticias e /noticias/:slug, por cima do m1l.css (a caixa vazia e a paginação são de lá) e, no artigo, do leitura.css. Cada notícia
   é uma folha de calendário arrancada (o dia grande) ao lado do tipo, do título e do começo do texto. A folha é impressa (--branco e
   --tinta), igual nas duas edições; os tipos usam as tintas do pacote, nunca a do JOGAR. Cor só por token.
   ===================================================================== */
.nt-pagina{background:var(--papel);color:var(--sobre-papel);min-height:clamp(560px,78vh,1100px)}

/* o filtro: as abas em links, na tinta do papel */
.nt-filtro .abas{background:var(--tinta);flex-wrap:wrap}
.nt-filtro .aba{color:var(--branco)}
.nt-filtro .aba[aria-current="page"]{color:var(--tinta)}
.nt-filtro .abas :focus-visible{outline-color:var(--realce)}

/* a lista: uma folha por notícia; a fixada leva a borda mais grossa e a sombra de papel colado */
.nt-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.nt-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,30px);align-items:start;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);border:3px solid var(--contorno);border-radius:20px;background:var(--papel);transition:background-color .15s}
.nt-item:hover{background:var(--zebra)}
.nt-item.fixada{border-width:4px;box-shadow:0 6px 0 var(--contorno)}
.nt-folha{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;min-height:84px;margin-top:8px;padding:8px 6px 9px;
  background:var(--branco);color:var(--tinta);border:3px solid var(--tinta);border-radius:12px;rotate:-2deg;line-height:1}
.nt-folha::before{content:"";position:absolute;top:-11px;left:50%;translate:-50% 0;width:42px;height:12px;border:3px solid var(--tinta);border-bottom:0;
  border-radius:9px 9px 0 0;background:var(--branco)}
.nt-folha b{font-weight:900;font-style:italic;font-stretch:110%;font-size:40px;letter-spacing:-.02em}
.nt-folha span[aria-hidden]{margin-top:4px;font-weight:800;font-stretch:80%;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nt-corpo{min-width:0}
.nt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.nt-tipo{display:inline-block;font-weight:800;font-stretch:85%;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;padding:4px 11px;
  border:2px solid var(--tinta);border-radius:999px}
.nt-noticia{background:var(--realce);color:var(--tinta)}
.nt-evento{background:var(--pacote);color:var(--sobre-pacote)}
.nt-atualizacao{background:var(--acento);color:var(--sobre-esc)}
.nt-titulo{margin:0 0 8px;font-weight:800;font-stretch:85%;font-size:clamp(22px,2.2vw,28px);line-height:1.1;text-wrap:balance;overflow-wrap:anywhere}
.nt-titulo a{text-decoration:none}
/* a folha inteira leva à notícia; o foco continua no título */
.nt-titulo a::after{content:"";position:absolute;inset:0;border-radius:18px}
.nt-titulo a:hover{text-decoration:underline}
.nt-titulo a:focus-visible{outline:none}
.nt-item:has(.nt-titulo a:focus-visible){outline:4px solid var(--contorno);outline-offset:4px}
.nt-resumo{margin:0;max-width:70ch;font-size:16px;line-height:1.5}

/* o artigo: o tipo e a data em cima do título, a volta embaixo */
.nt-meta-artigo{margin-bottom:14px}
.nt-meta-artigo time{font-weight:700;color:var(--apagado)}
.nt-volta{margin:clamp(28px,4vw,44px) 0 0}

@media (max-width:600px){
  .nt-item{grid-template-columns:62px minmax(0,1fr);gap:14px}
  .nt-folha{width:62px;min-height:66px}
  .nt-folha b{font-size:30px}
  .nt-folha span[aria-hidden]{font-size:12px;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  .nt-item{transition:none}
}