/* ═══════════════════════════════════════════════════════════════
   INO9 SPORTS · BLOG — índice, artigo, 404 e política
   Complementa o styles.css (tokens, nav, faixas, botões, faq,
   rodapé), que estas páginas também carregam. Prefixos art-/bc-/
   blog- de propósito: .post-meta já é global no styles.css
   (cards de blog da home).
   ═══════════════════════════════════════════════════════════════ */

/* ── topo (artigo, índice, páginas simples) ──────────────────── */
.art-hero{
  padding:34px 0 38px;border-bottom:1px solid var(--risco-2);
  background:radial-gradient(60% 140% at 100% 0%,rgba(233,180,41,.08),transparent 62%),var(--ink);
}
.art-col{max-width:720px;margin:0 auto}
.art-trilha{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-dim);
}
.art-trilha a{color:inherit;text-decoration:none;border-bottom:1px solid var(--risco-2);transition:color .18s}
.art-trilha a:hover{color:var(--fita)}
.art-trilha [aria-current]{color:var(--txt)}
.art-h1{
  font-family:var(--disp);font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(30px,4.6vw,50px);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 16px;
}
.art-h1 em{
  display:block;margin-top:6px;font-style:normal;color:var(--fita);
  font-variation-settings:"wdth" 82,"wght" 500;text-transform:none;letter-spacing:-.01em;
}
.art-lead{margin:0;color:var(--txt-dim);font-size:16px;line-height:1.6;max-width:62ch}
.art-meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--risco-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);
}
.art-meta b{color:var(--txt);font-weight:500}

/* ── corpo do artigo: papel (faixa bone), coluna de leitura ──── */
.art-sec{padding:44px 0 56px}
.art{max-width:720px;margin:0 auto;color:#33322B;font-size:17px;line-height:1.7}
.art-capa{margin:0 0 34px}
.art-capa img{width:100%;height:auto;border:1px solid var(--bone-2)}
.art h2{
  font-family:var(--disp);font-variation-settings:"wdth" 104,"wght" 800;
  font-size:clamp(22px,2.8vw,28px);line-height:1.05;letter-spacing:-.005em;text-transform:uppercase;
  color:#141209;margin:46px 0 14px;
}
.art h3{
  font-family:var(--disp);font-variation-settings:"wdth" 96,"wght" 700;
  font-size:18px;line-height:1.2;text-transform:uppercase;color:#141209;margin:28px 0 8px;
}
.art p{margin:0 0 16px}
.art strong{color:#141209}
.art a{color:#7A5C12;text-decoration-thickness:1px;text-underline-offset:3px}
.art a:hover{color:#141209}
.art ul,.art ol{margin:0 0 20px;padding-left:22px;display:grid;gap:8px}
.art li::marker{color:#8A6B18}
.art-nota{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#6E6349;line-height:1.5}

.art-destaque{margin:26px 0;padding:18px 20px;background:#F3EEE2;border-left:3px solid var(--fita)}
.art-destaque p{margin:0;color:#1A1B18}

.art-figura{margin:32px 0}
.art-figura .par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.art-figura img{width:100%;height:auto;background:#F3EEE2}
.art-figura figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#6E6349;line-height:1.55}

/* tabela comparativa: rola na horizontal dentro da caixa, nunca a página */
.art-tabela{margin:26px 0;overflow-x:auto;border:1px solid var(--bone-2);-webkit-overflow-scrolling:touch}
.art-tabela table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.art-tabela th,.art-tabela td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bone-2)}
.art-tabela thead th{
  background:#F3EEE2;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:#6E6349;
}
.art-tabela tbody th{font-weight:600;color:#141209}
.art-tabela tbody tr:last-child>*{border-bottom:0}

/* passos numerados */
.art .art-passos{list-style:none;padding:0;counter-reset:passo;gap:12px}
.art-passos li{counter-increment:passo;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start}
.art-passos li::before{
  content:counter(passo,decimal-leading-zero);padding:5px 0;text-align:center;
  font-family:var(--mono);font-size:12px;color:#8A6B18;border:1px solid #CFC5AB;
}

/* leia também */
.art-leia{margin:50px 0 0;padding-top:24px;border-top:1px solid var(--bone-2)}
.art-leia h2{margin:0 0 14px;font-size:18px}
.art .art-leia ul{list-style:none;padding:0;margin:0;gap:10px}
.art-leia a{
  display:block;padding:14px 16px;border:1px solid #CFC5AB;text-decoration:none;
  color:#141209;font-weight:600;line-height:1.35;transition:border-color .2s,background .2s;
}
.art-leia a:hover{border-color:#141209;background:#F3EEE2;color:#141209}
.art-leia a span{display:block;margin-top:4px;font-weight:400;font-size:14.5px;color:#5C5748;line-height:1.5}

/* FAQ e CTA dentro da coluna de leitura */
.art-col .sechead{grid-template-columns:1fr}

/* ── índice do blog ──────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--risco-2);border:1px solid var(--risco-2)}
.blog-card{display:flex;flex-direction:column;background:var(--ink);color:inherit;text-decoration:none;transition:background .2s}
.blog-card:hover{background:var(--ink-2)}
.bc-capa{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.bc-capa img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.3,0,.2,1)}
.blog-card:hover .bc-capa img{transform:scale(1.04)}
.bc-corpo{display:flex;flex-direction:column;flex:1;padding:18px}
.bc-data{margin-bottom:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fita)}
.blog-card h2{
  margin:0 0 8px;font-family:var(--disp);font-variation-settings:"wdth" 94,"wght" 700;
  font-size:17px;line-height:1.16;text-transform:uppercase;transition:color .2s;
}
.blog-card:hover h2{color:var(--fita)}
.blog-card p{flex:1;margin:0;font-size:13.5px;line-height:1.55;color:var(--txt-dim)}
.bc-ler{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fita)}
.blog-vazio{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* ── 404 ─────────────────────────────────────────────────────── */
.pg-404{min-height:52vh;display:flex;align-items:center}
.pg-404 .wrap{width:100%}   /* item flex encolhe e centraliza; aqui alinha com o logo */
.pg-404 .cta-row{margin-top:24px}

@media(max-width:520px){
  .art{font-size:16px}
  .art-sec{padding:30px 0 40px}
  .art-figura .par{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .bc-capa img,.blog-card h2,.art-leia a{transition:none}
  .blog-card:hover .bc-capa img{transform:none}
}