/* ============================================================
   blog.css — índice e artigos do blog da Network Secure
   Complementa style.min.css e usa as mesmas variáveis de :root.
   Gerado em SITE/ pelo Fontes/site/build_site.py.
   ============================================================ */

.blog-page a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Índice: abertura ---------- */
.bh{padding:56px 0 36px;background:linear-gradient(180deg,#fff,var(--bg-3))}
.bh h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;max-width:22ch;margin-bottom:18px}
.bh__sub{font-size:18px;color:var(--ink-2);max-width:62ch;margin-bottom:28px}
.bh__temas ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.bh__temas a{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;background:#fff;transition:border-color .2s,color .2s}
.bh__temas a span{font-size:12.5px;color:var(--muted);font-weight:700}
.bh__temas a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Índice: artigo em destaque (o único bloco escuro da página) ---------- */
.destaque{padding:8px 0 24px}
.destaque__card{display:grid;gap:14px;background:#0F1115;color:#C5CAD3;border-radius:var(--radius);
  padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.destaque__card::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(241,90,41,.28),transparent);pointer-events:none}
.destaque__rotulo{font-size:14px;font-weight:700;color:var(--accent-2)}
.destaque__titulo{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff;
  font-size:clamp(26px,3.4vw,42px);max-width:26ch;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .2s}
.destaque__card:hover .destaque__titulo{text-decoration-color:var(--accent)}
.destaque__resumo{font-size:17px;max-width:60ch}
.destaque__meta{font-size:14px;color:#8A919E}

/* ---------- Índice: temas ---------- */
.tema{padding:48px 0 0}
.tema:last-of-type{padding-bottom:96px}
.tema__titulo{font-size:clamp(22px,2.4vw,28px);margin-bottom:6px;scroll-margin-top:96px}
.tema__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.entrada{border-top:1px solid var(--line);padding:22px 0 26px}
.entrada__meta{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.entrada__titulo{font-size:20px;line-height:1.25;margin-bottom:8px}
.entrada__titulo a{color:var(--ink);transition:color .2s}
.entrada__titulo a:hover{color:var(--accent)}
.entrada__resumo{font-size:15.5px;color:var(--ink-2);max-width:56ch}

/* ---------- Artigo ---------- */
.wrap--texto{max-width:784px}
.artigo__head{padding:52px 0 12px}
.artigo__titulo{font-size:clamp(30px,4vw,48px);font-weight:800;margin-bottom:16px}
.artigo__info{font-size:14.5px;color:var(--muted)}
.artigo{padding:20px 0 96px}

.artigo__corpo{font-size:18px;line-height:1.75;color:var(--ink-2)}
.artigo__corpo p{margin:0 0 22px}
.artigo__corpo strong{color:var(--ink)}
.artigo__corpo h2{font-size:clamp(22px,2.4vw,27px);color:var(--ink);margin:48px 0 16px;line-height:1.2}
.artigo__corpo h3{font-size:20px;color:var(--ink);margin:32px 0 12px;line-height:1.25}
.artigo__corpo a{color:#C2410C;text-decoration:underline;text-underline-offset:3px}
.artigo__corpo a:hover{text-decoration-thickness:2px}
.artigo__corpo code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;background:var(--bg-2);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px;overflow-wrap:anywhere}

.artigo__lede{font-size:20px;line-height:1.65;color:var(--ink);border-left:3px solid var(--accent);padding-left:20px;margin-bottom:34px !important}

.artigo__lista{margin:0 0 24px;padding:0}
.artigo__lista li{position:relative;padding-left:26px;margin-bottom:12px;list-style:none}
.artigo__lista li::before{content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.artigo__lista--num{counter-reset:n}
.artigo__lista--num li{counter-increment:n;padding-left:38px}
.artigo__lista--num li::before{content:counter(n);top:3px;left:0;width:24px;height:24px;background:var(--accent-soft);color:#C2410C;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

.artigo__cadeia{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;padding:0;margin:4px 0 28px}
.artigo__cadeia li{display:flex;align-items:center;gap:6px}
.artigo__cadeia span{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:7px 12px}
.artigo__cadeia li:not(:last-child)::after{content:"\2192";color:var(--accent);font-weight:700}
.artigo__cadeia li:last-child span{background:var(--ink);border-color:var(--ink);color:#fff}

.artigo__nota{background:var(--accent-soft);border-radius:14px;padding:18px 20px;font-size:16px;margin:0 0 26px !important}

.artigo__tabela-wrap{overflow-x:auto;margin:0 0 28px;border:1px solid var(--line);border-radius:14px}
.artigo__tabela{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55;min-width:520px}
.artigo__tabela th{background:var(--bg-2);text-align:left;font-weight:700;color:var(--ink);padding:12px 16px;border-bottom:1px solid var(--line)}
.artigo__tabela td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.artigo__tabela tr:last-child td{border-bottom:none}

.artigo__fonte{font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:36px}
.artigo__refs,.rel{padding:0}
.artigo__refs h2{font-size:20px;margin:36px 0 14px}
.artigo__refs li{font-size:15.5px}

/* ---------- Artigo: serviço relacionado ---------- */
.artigo__cta{margin-top:56px;background:var(--bg-2);border-radius:var(--radius);padding:clamp(24px,4vw,36px);border-top:4px solid var(--accent)}
.artigo__cta h2{font-size:22px;margin-bottom:10px}
.artigo__cta p{font-size:16.5px;color:var(--ink-2);margin-bottom:22px;max-width:58ch}
.artigo__cta-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.artigo__cta-link{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.artigo__cta-link:hover{color:var(--accent)}

/* ---------- Artigo: leia também ---------- */
.rel{margin-top:64px}
.rel h2{font-size:20px;margin-bottom:16px}
.rel__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rel__item{display:block;border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .2s}
.rel__item:hover{border-color:var(--accent)}
.rel__item strong{display:block;font-family:'Sora',sans-serif;font-size:16px;line-height:1.35;color:var(--ink);margin-bottom:6px}
.rel__item small{font-size:13.5px;color:var(--muted)}

@media (max-width:760px){
  .tema__lista,.rel__lista{grid-template-columns:1fr}
  .artigo__corpo{font-size:17px}
  .artigo__lede{font-size:18.5px}
}
@media (prefers-reduced-motion:reduce){
  .blog-page *{transition:none !important}
}

/* Citação no corpo do artigo (ex.: fala de executivo em post de notícia) */
.artigo__corpo blockquote{margin:6px 0 30px;padding:2px 0 2px 22px;border-left:3px solid var(--accent)}
.artigo__corpo blockquote p{font-family:'Sora',sans-serif;font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 10px}
.artigo__corpo blockquote footer{background:none;padding:0;margin:0;border:0;font-size:15px;color:var(--muted);font-weight:600}  /* zera o estilo do <footer> do site */