/* Blog: índice de artigos e "Leia também". O índice é lista com filetes:
   assunto, título e resumo, e a foto do artigo à direita; o artigo mais novo
   abre o índice com a tela do produto. O "Leia também" é cartão com foto.
   Cada artigo tem UMA foto do assunto dele, a mesma no topo, no índice e no
   cartão. */

.blog-index
{
    padding-top: 72px;
    padding-bottom: 104px;
}

.blog-lead-post
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 56px;
    align-items: center;
    padding-bottom: 72px;
}

.blog-lead-post__title
{
    margin: 10px 0 0;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.blog-lead-post__title a:hover,
.blog-entry__title a:hover
{
    color: var(--brand);
}

.blog-lead-post__excerpt
{
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.blog-lead-post__shot
{
    margin: 0;
}

.blog-lead-post__shot 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 24px 48px -24px rgba(var(--brand-ink-rgb), .22);
}

.blog-entry-list
{
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-bold);
}

.blog-entry
{
    display: grid;
    grid-template-columns: 220px minmax(0, 680px);
    gap: 72px;
    padding: 28px 0 30px;
    border-bottom: 1px solid var(--line);
}

.blog-topic
{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.blog-entry .blog-topic
{
    padding-top: 5px;
}

.blog-entry__title
{
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--fg);
}

.blog-entry__excerpt
{
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Linha do índice com a foto do artigo à direita; a linha inteira abre o
   artigo pelo link do título (o ::after cobre a linha) */
.blog-entry--media
{
    position: relative;
    grid-template-columns: 160px minmax(0, 1fr) 240px;
    grid-template-areas: "topic text media";
    gap: 40px;
    align-items: start;
}

.blog-entry--media .blog-topic
{
    grid-area: topic;
}

.blog-entry--media > div
{
    grid-area: text;
}

.blog-entry__media
{
    grid-area: media;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--brand-ink);
}

.blog-entry--media .blog-entry__title a::after
{
    content: '';
    position: absolute;
    inset: 0;
}

.blog-entry--media:hover .blog-entry__title a
{
    color: var(--brand);
}

/* "Leia também" no fim do artigo */
.blog-more
{
    padding: 80px 0 96px;
}

.blog-more__title
{
    margin: 0 0 28px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Cartões do "Leia também": a foto de cada artigo (a mesma do topo dele),
   assunto, título e resumo. O cartão inteiro abre o artigo pelo link do
   título (o ::after cobre o cartão), sem link dentro de link. */
.blog-cards
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-card
{
    position: relative;
}

.blog-card__media
{
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    border-radius: var(--radius-lg);
    background: var(--brand-ink);
    aspect-ratio: 3 / 2;
}

.blog-card__media img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.blog-card:hover .blog-card__media img
{
    transform: scale(1.03);
}

/* crédito legível também sobre foto clara */
.blog-card__media .lp-orbit-credit
{
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.blog-card .blog-topic
{
    margin: 0 0 6px;
}

.blog-card__title
{
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--fg);
    text-wrap: balance;
}

.blog-card__title a
{
    color: inherit;
    text-decoration: none;
}

.blog-card__title a::after
{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.blog-card:hover .blog-card__title a
{
    color: var(--brand);
}

.blog-card__title a:focus-visible
{
    outline: none;
}

.blog-card__title a:focus-visible::after
{
    outline: 2px solid var(--brand);
    outline-offset: 6px;
}

.blog-card__excerpt
{
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce)
{
    .blog-card__media img
    {
        transition: none;
    }

    .blog-card:hover .blog-card__media img
    {
        transform: none;
    }
}

@media (max-width: 720px)
{
    .blog-cards
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .blog-card__title
    {
        font-size: 21px;
    }
}

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

    .blog-lead-post
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-bottom: 48px;
    }

    .blog-lead-post__title
    {
        font-size: 28px;
    }

    .blog-lead-post__excerpt
    {
        font-size: 17px;
    }

    .blog-entry
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 22px 0 24px;
    }

    .blog-entry .blog-topic
    {
        padding-top: 0;
    }

    /* celular: foto pequena à direita do assunto e do título; o resumo
       desce para a largura toda (o div do texto some do grid) */
    .blog-entry--media
    {
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-areas: "topic media" "title media" "excerpt excerpt";
        gap: 6px 16px;
    }

    .blog-entry--media > div
    {
        display: contents;
    }

    .blog-entry--media .blog-entry__title
    {
        grid-area: title;
    }

    .blog-entry--media .blog-entry__excerpt
    {
        grid-area: excerpt;
        margin-top: 4px;
    }

    .blog-entry__media
    {
        border-radius: var(--radius-md);
    }

    .blog-entry__title
    {
        font-size: 20px;
    }

    .blog-more
    {
        padding: 56px 0 72px;
    }
}