/* Blog: lista de artigos (blog.html) e página de cada artigo (blog/<slug>.html), gerados por scripts/blog.py */
.blog-abertura .rotulo, .artigo-topo .rotulo, .card-artigo .rotulo { color: var(--bronze); }

/* ---------- Lista ---------- */
.lista-artigos { padding: 6vh 0 14vh; }
.lista-artigos .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.card-artigo { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line-light); text-decoration: none; color: inherit; transition: border-color .4s, transform .6s var(--grow); }
.card-artigo:hover { border-color: var(--bronze); transform: translateY(-3px); }
.card-artigo .capa { width: calc(100% + 56px); max-width: none; height: auto; margin: -28px -28px 6px; aspect-ratio: 1200 / 630; object-fit: cover; display: block; background: #000; }
.card-artigo h2 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; }
.card-artigo p { color: var(--muted-light); font-size: 15px; }
.card-artigo .meta { color: var(--muted-light); font-size: 11px; }
.lista-vazia { color: var(--muted-light); font-size: clamp(16px, 1.3vw, 20px); max-width: 34em; }

/* ---------- Artigo ---------- */
.artigo-topo { padding: 22vh 0 6vh; }
.artigo-topo h1 { font-size: clamp(30px, 4.4vw, 64px); line-height: 1.08; margin: 16px 0 22px; max-width: 18em; letter-spacing: .02em; }
.artigo-topo .lead { max-width: 38em; color: var(--muted-light); font-size: clamp(17px, 1.4vw, 21px); }
.artigo-topo .meta { margin-top: 26px; color: var(--muted-light); font-size: 11px; }
.artigo-corpo { max-width: 720px; margin: 0 auto; padding: 0 24px 10vh; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.8; color: rgba(241,242,236,.88); }
.artigo-corpo > * + * { margin-top: 1.1em; }
.artigo-corpo h2 { font-family: var(--title); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; margin-top: 2.2em; color: var(--surface); letter-spacing: .02em; }
.artigo-corpo h3 { font-size: clamp(18px, 1.5vw, 22px); margin-top: 1.8em; color: var(--surface); font-weight: 500; }
.artigo-corpo strong { color: var(--surface); font-weight: 500; }
.artigo-corpo a { color: var(--gold); text-underline-offset: 3px; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.3em; }
.artigo-corpo li + li { margin-top: .45em; }
.artigo-corpo blockquote { border-left: 2px solid var(--bronze); padding: 4px 0 4px 20px; color: var(--surface); font-style: italic; }
.artigo-corpo .gap { white-space: normal; }

/* capa do artigo: a imagem feita para ele, logo abaixo do título */
.artigo-capa { max-width: 1100px; margin: 0 auto 8vh; padding: 0 24px; }
.artigo-capa img { width: 100%; height: auto; display: block; border: 1px solid var(--line-light); }

/* "Como a PineCone implementa": o convite no fim do artigo */
.artigo-cta { max-width: 720px; margin: 0 auto 12vh; padding: 0 24px; }
.artigo-cta .caixa { border: 1px solid var(--bronze); padding: 32px; display: grid; gap: 16px; }
.artigo-cta .caixa p { color: var(--muted-light); }
.artigo-cta .acoes { display: flex; flex-wrap: wrap; gap: 14px 32px; }

.leia-tambem { padding: 0 0 14vh; }
.leia-tambem .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }

@media (max-width: 760px) {
  .artigo-topo { padding: 112px 0 32px; }
  .artigo-corpo { padding: 0 16px 56px; }
  .artigo-cta { padding: 0 16px; margin-bottom: 56px; }
  .card-artigo { padding: 22px; }
  .card-artigo .capa { width: calc(100% + 44px); margin: -22px -22px 4px; }
  .artigo-capa { padding: 0 16px; margin-bottom: 40px; }
}