/* Blog do Radar (/blog). Usa o visual do site (radar.css) e só tokens do design system. */

.blog { background: var(--bg-app); }
.blog-env { max-width: var(--env-max); }

/* ------------------------------------------------------------ topo escuro */
.blog-topo { position: relative; overflow: hidden; padding: var(--space-12) 0 var(--space-11); }
.blog-topo::after { content: ""; position: absolute; top: calc(-1 * var(--size-4)); right: calc(-1 * var(--size-4)); width: var(--size-10); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 var(--space-12), color-mix(in srgb, var(--gold-400) 14%, transparent) var(--space-12) calc(var(--space-12) + var(--border-w))); pointer-events: none; }
.blog-topo .env { position: relative; z-index: 1; }
.blog-topo h1 { max-width: 22ch; margin: 0; color: var(--text-inverse); font: var(--fw-semibold) clamp(var(--fs-3xl), 4.2vw, var(--fs-5xl))/1.08 var(--font-sans); letter-spacing: var(--ls-tight); text-wrap: balance; }
.blog-topo--lista h1 { max-width: 20ch; }
.blog-linha-fina { max-width: 62ch; margin: var(--space-6) 0 0; color: var(--text-inverse-muted); font: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans); }
.blog-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-7); color: var(--text-inverse-muted); font: var(--text-small); }
.blog-trilha a { color: var(--gold-300); text-decoration: none; }
.blog-trilha a:hover { text-decoration: underline; }
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: var(--space-8) 0 0; color: var(--text-inverse-muted); font: var(--text-small); }
.blog-meta span { display: inline-flex; align-items: center; gap: var(--space-3); }
.blog-meta .ds-icon { color: var(--gold-300); }

/* ------------------------------------------------------------ artigo */
.blog-grade { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-7); gap: var(--space-12); align-items: start; padding-top: var(--space-11); padding-bottom: var(--space-12); }
.blog-grade:not(:has(.blog-lado)) { grid-template-columns: minmax(0, 1fr); }
.blog-corpo { grid-row: 1; grid-column: 1; min-width: 0; max-width: 72ch; }
.blog-corpo section { padding: 0; }
.blog-corpo > p:first-of-type { font-size: var(--fs-xl); color: var(--text-primary); }
.blog-corpo a { color: var(--text-primary); text-decoration-color: var(--gold-500); text-decoration-thickness: var(--border-w-2); text-underline-offset: var(--space-2); }
.blog-corpo a:hover { text-decoration-color: currentColor; }
.blog-corpo blockquote { margin: 0 0 var(--space-6); padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg); background: var(--surface-accent-soft); color: var(--text-primary); }
.blog-corpo blockquote p:last-child { margin-bottom: 0; }
.blog-corpo strong { color: var(--text-primary); }
.blog-capa { display: block; width: 100%; height: auto; margin: 0 0 var(--space-10); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

.blog-lado { grid-row: 1; grid-column: 2; position: sticky; top: calc(var(--topbar-h) + var(--space-8)); display: grid; gap: var(--space-6); }
.blog-sumario { padding: var(--space-7); border-radius: var(--radius-lg); border: var(--border-w) solid var(--border-subtle); background: var(--surface-card); }
.blog-sumario-titulo { margin: 0 0 var(--space-5); color: var(--text-secondary); font: var(--text-label); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.blog-sumario ol { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: secao; }
.blog-sumario li { display: grid; grid-template-columns: var(--space-8) 1fr; counter-increment: secao; font: var(--text-small); }
.blog-sumario li::before { content: counter(secao, decimal-leading-zero); color: var(--text-accent); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.blog-sumario a { color: var(--text-primary); text-decoration: none; }
.blog-sumario a:hover { color: var(--text-accent); }
.blog-lado-cta { width: 100%; justify-content: center; }

.blog-faq { margin-top: var(--space-11); }
.blog-faq-item { border-bottom: var(--border-w) solid var(--border-subtle); }
.blog-faq-item summary { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-7) 0; color: var(--text-primary); font: var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-sans); cursor: pointer; list-style: none; }
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: "+"; flex: none; color: var(--text-accent); font-weight: var(--fw-bold); transition: transform var(--dur-base) var(--ease-out); }
.blog-faq-item[open] summary::after { transform: rotate(45deg); }
.blog-faq-item p { margin: 0 0 var(--space-7); color: var(--text-secondary); }
.blog-faq-item summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.blog-fontes { margin-top: var(--space-10); }
.blog-fontes ul { font: var(--text-small); }
.blog-como-feito { margin-top: var(--space-10); padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--text-secondary); font: var(--text-small); }
.blog-como-feito p { margin: 0; }

/* ------------------------------------------------------------ convite */
.blog-convite { padding: var(--space-12) 0; }
.blog-convite h2 { max-width: 20ch; margin: 0 0 var(--space-6); color: var(--text-inverse); font: var(--fw-semibold) clamp(var(--fs-2xl), 3.2vw, var(--fs-4xl))/1.1 var(--font-sans); letter-spacing: var(--ls-tight); }
.blog-convite p { max-width: 60ch; margin: 0; color: var(--text-inverse-muted); font: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans); }
.blog-convite-acoes { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-9); }
.blog-convite .blog-convite-nota { margin-top: var(--space-6); font: var(--text-caption); }

/* ------------------------------------------------------------ lista */
.blog-categorias { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-9) 0 var(--space-8); overflow-x: auto; scrollbar-width: none; }
.blog-categorias::-webkit-scrollbar { display: none; }
.blog-categorias a { flex: none; padding: var(--space-4) var(--space-6); border-radius: var(--radius-pill); border: var(--border-w) solid var(--border-default); background: var(--surface-card); color: var(--text-primary); font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.blog-categorias a:hover { border-color: var(--border-accent); }
.blog-categorias a[aria-current="page"] { border-color: var(--surface-brand); background: var(--surface-brand); color: var(--text-inverse); }

.blog-lista { display: grid; gap: var(--space-2); margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.blog-item-link { display: grid; grid-template-columns: var(--size-5) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-6); margin: 0 calc(-1 * var(--space-6)); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.blog-item-link:hover { background: var(--surface-hover); }
.blog-item-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.blog-item-capa { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-brand); }
.blog-item-texto { display: grid; gap: var(--space-4); }
.blog-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin: 0; color: var(--text-secondary); font: var(--text-caption); }
.blog-tipo { color: var(--text-accent); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.blog-item-titulo { color: var(--text-primary); font: var(--fw-semibold) var(--fs-xl)/var(--lh-snug) var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.blog-item-link:hover .blog-item-titulo { text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: var(--space-2); }
.blog-item-descricao { color: var(--text-secondary); font: var(--text-small); }

.blog-item--destaque { margin-bottom: var(--space-8); }
.blog-item--destaque .blog-item-link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-11); padding: var(--space-8) var(--space-6); }
.blog-item--destaque .blog-item-capa { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.blog-item--destaque .blog-item-titulo { font: var(--fw-semibold) clamp(var(--fs-2xl), 2.6vw, var(--fs-4xl))/1.12 var(--font-sans); letter-spacing: var(--ls-tight); }
.blog-item--destaque .blog-item-descricao { font: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans); }

.blog-relacionados { padding: var(--space-12) 0 var(--space-6); background: var(--neutral-25); }
.blog-relacionados h2 { margin: 0 0 var(--space-8); font: var(--text-h2); }
.blog-vazio { margin: var(--space-10) 0 var(--space-12); color: var(--text-secondary); font: var(--text-body); }
.blog-paginas { display: flex; justify-content: space-between; gap: var(--space-6); margin: calc(-1 * var(--space-8)) 0 var(--space-12); }

/* ------------------------------------------------------------ telas menores */
@media (max-width: 1100px) {
  .blog-grade { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .blog-lado { position: static; grid-row: auto; grid-column: 1; }
  .blog-lado-cta { display: none; }
  .blog-corpo { grid-row: auto; }
}
@media (max-width: 760px) {
  .blog-nav-link { display: none; }
  .blog-item--destaque .blog-item-link { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}
@media (max-width: 640px) {
  .blog-topo { padding: var(--space-11) 0 var(--space-10); }
  .blog-item-link { grid-template-columns: var(--size-2) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .blog-item-titulo { font-size: var(--fs-lg); }
  .blog-item-descricao { display: none; }
  .blog-corpo > p:first-of-type { font-size: var(--fs-lg); }
  .blog-convite-acoes .ds-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-faq-item summary::after, .blog-categorias a, .blog-item-link { transition: none; }
}