/* Blog: corpo do artigo. Mesma coluna e mesma margem esquerda do hero
   (840 px; texto corrido em 680 px). Ritmo de leitura com blocos que quebram a
   coluna: telas largas (.blog-wide), faixas de ponta a ponta (.blog-bleed),
   pontos-chave, frase em destaque, citação, faixa de dados e passos
   numerados. Uma família só (Geist), sem itálico. */

.blog-body
{
    max-width: 840px;
    margin: 0 auto;
    padding-top: 56px;
    padding-bottom: 96px;
}

/* Texto corrido */
.blog-prose
{
    font-size: 19px;
    line-height: 1.7;
    color: var(--text-primary);
}

.blog-prose > *
{
    max-width: 680px;
}

.blog-prose > p,
.blog-prose > ul,
.blog-prose > ol
{
    margin: 0 0 26px;
}

/* Abertura: continua o hero; a capitular é o mesmo Geist 600 do título */
.blog-prose > p.blog-lede
{
    margin-bottom: 34px;
    font-size: 22px;
    line-height: 1.6;
}

.blog-prose > p.blog-lede::first-letter
{
    float: left;
    margin: 8px 14px 0 0;
    font-size: 4.3em;
    line-height: .8;
    font-weight: 600;
    letter-spacing: -.04em;
    color: var(--fg);
}

.blog-prose h2
{
    margin: 88px 0 20px;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--fg);
    text-wrap: balance;
    scroll-margin-top: 132px;
}

.blog-prose h3
{
    margin: 40px 0 10px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--fg);
}

.blog-prose h2 + h3
{
    margin-top: 28px;
}

.blog-prose strong
{
    font-weight: 600;
    color: var(--fg);
}

/* Ênfase sem itálico: o blog não usa itálico (difícil de ler) */
.blog-prose em
{
    font-style: normal;
    font-weight: 500;
    color: var(--fg);
}

.blog-prose a:not([class])
{
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-prose a:not([class]):hover
{
    color: var(--brand-deep);
}

.blog-prose ul,
.blog-prose ol
{
    padding-left: 22px;
}

.blog-prose li
{
    margin: 0 0 10px;
    padding-left: 4px;
}

.blog-prose li::marker
{
    color: var(--text-muted);
}

.blog-prose code
{
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    font-family: var(--font-mono);
    font-size: .88em;
    color: var(--fg);
}

/* Citação: em pé, entre filetes */
.blog-prose blockquote
{
    margin: 48px 0;
    padding: 26px 0;
    border-top: 1px solid var(--line-bold);
    border-bottom: 1px solid var(--line-bold);
}

.blog-prose blockquote p
{
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -.015em;
    color: var(--fg);
}

/* Quebras da coluna */
.blog-prose > .blog-wide,
.blog-prose > .blog-bleed
{
    max-width: none;
}

/* Centradas na largura da tela. O seletor com .blog-prose ganha do margin
   do .blog-figure, que vem depois e zerava a margem esquerda (telas 100 px
   fora do centro no desktop) */
.blog-prose > .blog-wide
{
    width: min(1040px, 100vw - 32px);
    margin-left: calc(50% - min(520px, 50vw - 16px));
}

.blog-prose > .blog-bleed
{
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Pontos-chave: o resumo de um minuto num quadro névoa */
.blog-keypoints
{
    margin: 56px 0;
    padding: 32px 36px 22px;
    border-radius: var(--radius);
    background: var(--mist);
}

.blog-prose .blog-keypoints h2
{
    margin: 0 0 16px;
    font-size: 24px;
}

.blog-keypoints ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-keypoints li
{
    position: relative;
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: 17px;
    line-height: 1.55;
}

.blog-keypoints li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--brand);
}

/* Frase em destaque, repetida do texto ao lado */
.blog-pull
{
    margin: 56px 0;
    padding: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--brand);
    text-wrap: balance;
}

/* Tela do produto, larga e centrada */
.blog-figure
{
    margin: 48px 0 56px;
}

.blog-figure img
{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 32px 64px -32px rgba(var(--brand-ink-rgb), .28);
}

.blog-figure-crop img
{
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

.blog-figure figcaption
{
    max-width: 680px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Passos numerados: só onde a ordem importa */
.blog-prose ol.blog-steps
{
    margin: 32px 0 40px;
    padding: 0;
    list-style: none;
    counter-reset: blog-step;
}

.blog-steps li
{
    position: relative;
    margin: 0;
    padding: 22px 0 22px 72px;
    border-top: 1px solid var(--line);
    counter-increment: blog-step;
}

.blog-steps li:last-child
{
    border-bottom: 1px solid var(--line);
}

.blog-steps li::before
{
    content: counter(blog-step);
    position: absolute;
    left: 0;
    top: 14px;
    font-size: 44px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.04em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* Perguntas frequentes: pergunta e resposta entre filetes */
.blog-faq h3
{
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 19px;
}

.blog-faq p
{
    margin: 8px 0 24px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Nota no meio do texto */
.blog-callout
{
    margin: 32px 0;
    padding: 18px 0 4px;
    border-top: 2px solid var(--brand);
    font-size: 16px;
    line-height: 1.6;
}

.blog-callout__title
{
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
}

.blog-prose table,
.blog-table
{
    width: 100%;
    margin: 32px 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.blog-prose th,
.blog-prose td,
.blog-table th,
.blog-table td
{
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.blog-prose thead th,
.blog-table thead th
{
    border-bottom-color: var(--line-bold);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}

@media (max-width: 900px)
{
    .blog-body
    {
        padding-top: 32px;
        padding-bottom: 72px;
    }

    .blog-prose
    {
        font-size: 17px;
        line-height: 1.65;
    }

    .blog-prose > p.blog-lede
    {
        font-size: 19px;
    }

    .blog-prose h2
    {
        margin-top: 64px;
        font-size: 26px;
    }

    .blog-prose h3
    {
        margin-top: 32px;
        font-size: 19px;
    }

    .blog-prose blockquote p
    {
        font-size: 20px;
    }

    .blog-keypoints
    {
        padding: 24px 20px 14px;
    }

    .blog-pull
    {
        font-size: 27px;
    }

    .blog-figure img
    {
        border-radius: var(--radius);
    }

    .blog-steps li
    {
        padding-left: 56px;
    }

    .blog-steps li::before
    {
        font-size: 34px;
    }

    .blog-prose table,
    .blog-table
    {
        display: block;
        overflow-x: auto;
    }
}