/* Blog: casca da página. Menu (.lp-nav), rodapé (.lp-foot), trilha (.lp-crumb),
   botões (.lp-btn), superfícies (.lp-sky, .lp-mist), hero (.lp-orbit-hero) e
   tokens vêm da home v17: layout.css e landing/*.css. Aqui só o que é do blog. */

/* layout.css põe overflow-x: hidden no html e no body; isso transforma o body
   em contêiner de rolagem e desliga todo position: sticky (menu e barra de
   leitura). clip corta o excesso lateral do mesmo jeito, sem esse efeito. */
html,
body
{
    overflow-x: clip;
}

/* landing/base.css esconde `body > footer` (o rodapé antigo do layout). No
   blog o rodapé da home é filho direto do body e precisa aparecer. */
body > footer.lp-foot
{
    display: block;
}

main.blog-main
{
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.blog-skip-link
{
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: #FFFFFF;
}

.blog-skip-link:focus
{
    top: 12px;
    left: 12px;
}

/* Autor, data e tempo de leitura, no hero */
.blog-meta
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 32px 0 0;
    font-size: 14px;
    color: var(--sky-subtle);
}

.blog-meta__author
{
    font-weight: 500;
    color: var(--sky-fg);
}

.blog-meta__dot
{
    width: 1px;
    height: 12px;
    background: var(--sky-line);
}

@media (max-width: 900px)
{
    .blog-meta
    {
        gap: 4px 16px;
        margin-top: 20px;
    }

    .blog-meta__dot
    {
        display: none;
    }
}