/* =========================================================================
   PAGE — /blog
   Só o que é exclusivo da listagem: a grade completa, a busca e a barra de
   filtros. O cabeçalho e a faixa de conversão vêm de `sections/pagina.css`; o
   card e a "sala" vêm de `sections/blog.css`, os mesmos da home.
   ====================================================================== */

/* A listagem vem logo abaixo do cabeçalho, que já é branco: a faixa suave é o
   que separa as duas sem precisar de uma borda dura — a mesma decisão já
   tomada no catálogo de apostilas. */
.blog--list {
    background-color: var(--color-bg-subtle);
    border-block: 1px solid var(--color-border);
}

.blog--list .blog__backdrop {
    display: none;
}

/* -------------------------------------------------------------------------
   Busca
   ---------------------------------------------------------------------- */
.blog__search {
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

/* -------------------------------------------------------------------------
   Barra de filtros
   No celular os chips rolam de borda a borda em vez de quebrar em linhas: com
   a largura que cada rótulo tem, `wrap` empilharia um chip por linha e a barra
   ficaria mais alta que o primeiro card.
   ---------------------------------------------------------------------- */
.blog__filters {
    margin-top: var(--space-5);
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* O respiro vertical existe para a sombra do chip ativo não ser cortada
       pelo contexto de rolagem. */
    padding-block: var(--space-2);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.blog__filters::-webkit-scrollbar {
    display: none;
}

.blog__filters > * {
    flex: none;
    scroll-snap-align: start;
}

/* Reentrada escalonada a cada troca de filtro ou busca (classe aplicada pelo
   JS). Só existe aqui: os relacionados do artigo nunca são filtrados.
   O atraso vem do índice recalculado entre os cards visíveis. */
.blog__grid.is-filtering .blog__cell {
    animation: card-in var(--dur-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}

.blog__empty {
    margin-top: var(--space-8);
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    text-align: center;
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

@media (min-width: 768px) {
    /* Com a largura do tablet os chips já cabem em uma ou duas linhas: a barra
       volta a ser centralizada, alinhada ao cabeçalho da seção. */
    .blog__filters {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }
}

@media print {
    .blog__search,
    .blog__filters {
        display: none !important;
    }
}