/* A secao de novidades. As paginas sao geradas por scripts/gerar-novidades.js
   e reaproveitam o styles.css inteiro (cabecalho, marca, botoes, eyebrow);
   aqui fica so o que e de ler um post, que a pagina de venda nao tem. */

.nov-header { gap: 24px; }
.nov-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nov-nav > a:not(.header-cta) { color: var(--muted); font-size: 11px; transition: color .2s ease; }
.nov-nav > a:not(.header-cta):hover { color: var(--green); }

.nov-main { padding-bottom: 40px; }

.nov-resumo { max-width: 640px; margin: 26px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* --- as etiquetas ----------------------------------------------------- */

.nov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.nov-chip { display: inline-block; padding: 5px 9px; border: 1px solid var(--line-bright); color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nov-chip-grande { border-color: var(--green-deep); color: var(--green); }
.nov-chip-aviso { border-color: #6b5a1f; color: #f2cf5b; }

/* --- o post ----------------------------------------------------------- */

.nov-post { max-width: 780px; padding: 56px 0 24px; }
.nov-voltar { display: inline-block; margin-bottom: 34px; color: var(--muted); font-size: 11px; }
.nov-voltar:hover { color: var(--green); }
.nov-mais-nova { margin: -14px 0 30px; padding: 10px 14px; border-left: 1px solid var(--green); background: rgba(198,255,74,.04); color: var(--muted); font-size: 11px; }
.nov-mais-nova a { color: var(--green); }
.nov-post h1 { margin: 0; font-size: clamp(30px, 4.2vw, 48px); font-weight: 500; letter-spacing: -.06em; line-height: 1.08; }
.nov-til { color: var(--line-bright); }

/* Como no post de versao do Patreon que serviu de referencia: o print
   acompanha o texto em tamanho de ler, tres por linha e ate 240 px cada, com
   moldura fina e legenda fora dela. O da ponte e deitado e ocupa a coluna. */
.nov-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 14px; align-items: start; margin: 30px 0; }
.nov-galeria figure { min-width: 0; margin: 0; }
.nov-galeria figure.is-larga { grid-column: 1 / -1; }
.nov-galeria img { display: block; width: 100%; height: auto; border: 1px solid var(--line-bright); background: #0b100d; }
.nov-galeria figcaption { padding-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.nov-corpo { margin-top: 38px; }
.nov-corpo > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.nov-corpo h2 { margin: 44px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--paper); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.nov-corpo h3 { margin: 28px 0 10px; color: var(--green); font-size: 14px; }
.nov-corpo ul { margin: 0 0 16px; padding: 0; list-style: none; }
.nov-corpo li { position: relative; margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.nov-corpo li::before { position: absolute; top: .72em; left: 0; width: 5px; height: 5px; border: 1px solid var(--green); content: ''; }
.nov-corpo li ul { margin: 10px 0 0; }
.nov-corpo li li::before { border-color: var(--line-bright); }
.nov-corpo strong { color: var(--paper); font-weight: 600; }
.nov-corpo a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.nov-corpo code { padding: 1px 5px; background: var(--panel-light); color: var(--paper); font-size: .92em; }
.nov-corpo blockquote { margin: 18px 0; padding: 13px 16px; border-left: 1px solid #f2cf5b; background: rgba(242,207,91,.05); }
.nov-corpo blockquote p { margin: 0; color: var(--paper); font-size: 12px; line-height: 1.7; }

.nov-atualizar { margin: 48px 0 0; padding: 24px; border: 1px solid var(--line-bright); background: var(--panel); }
.nov-atualizar .eyebrow { margin-bottom: 16px; }
.nov-atualizar ul { margin: 0; padding: 0; list-style: none; }
.nov-atualizar li, .nov-atualizar p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.nov-atualizar strong { color: var(--paper); }
.nov-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.nov-download-nota { margin: 14px 0 0 !important; font-size: 10px !important; }

/* --- anterior, seguinte e o indice ------------------------------------ */

.nov-vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 780px; padding: 40px 0 0; }
.nov-vizinho { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s ease; }
.nov-vizinho:hover { border-color: var(--green-deep); }
.nov-vizinho small { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.nov-vizinho strong { color: var(--green); font-size: 16px; font-weight: 600; }
.nov-vizinho span { color: var(--paper); font-size: 12px; line-height: 1.5; }
.nov-vizinho-seguinte { text-align: right; }
.nov-vizinho.is-vazio { border: 0; background: transparent; }

.nov-todas { max-width: 780px; padding: 56px 0 30px; }
.nov-todas h2 { margin: 0 0 16px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.nov-lista { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.nov-lista a { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.nov-lista a:hover { background: var(--panel); }
.nov-lista-versao { color: var(--green); font-weight: 600; }
.nov-lista-titulo { color: var(--paper); font-size: 12px; }
.nov-lista time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.nov-lista a.is-atual { background: #101610; }
.nov-lista a.is-atual .nov-lista-titulo::after { margin-left: 8px; color: var(--green); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; content: '· ' attr(data-aqui); }

.nov-footer { padding-top: 30px; }
.nov-footer-links { display: inline-flex; gap: 18px; }
.nov-footer-links a:hover { color: var(--green); }

@media (max-width: 620px) {
  .nov-nav { gap: 16px; }
  .nov-post { padding-top: 36px; }
  .nov-vizinhos { grid-template-columns: 1fr; }
  .nov-vizinho-seguinte { text-align: left; }
  .nov-vizinho.is-vazio { display: none; }
  .nov-lista a { grid-template-columns: 52px 1fr; }
  .nov-lista time { grid-column: 2; }
  .nov-atualizar { padding: 18px; }
  .nov-downloads { grid-template-columns: 1fr; }
  .nov-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* A página traz uma cópia por idioma que o post tem; fica a do <html>, que o
   <head> já escolheu. Sem JavaScript o <html> é pt-BR, e fica o português. */
html[lang="pt-BR"] [data-lang]:not([data-lang="pt-BR"]),
html[lang="en"] [data-lang]:not([data-lang="en"]),
html[lang="es"] [data-lang]:not([data-lang="es"]),
html[lang="fr"] [data-lang]:not([data-lang="fr"]),
html[lang="de"] [data-lang]:not([data-lang="de"]),
html[lang="it"] [data-lang]:not([data-lang="it"]),
html[lang="nl"] [data-lang]:not([data-lang="nl"]),
html[lang="pl"] [data-lang]:not([data-lang="pl"]),
html[lang="tr"] [data-lang]:not([data-lang="tr"]),
html[lang="ru"] [data-lang]:not([data-lang="ru"]),
html[lang="vi"] [data-lang]:not([data-lang="vi"]),
html[lang="ja"] [data-lang]:not([data-lang="ja"]),
html[lang="ko"] [data-lang]:not([data-lang="ko"]),
html[lang="zh-Hans"] [data-lang]:not([data-lang="zh-Hans"]),
html[lang="zh-Hant"] [data-lang]:not([data-lang="zh-Hant"]) { display: none !important; }