/*
 * Página `blog` (etapa I8) -- a moldura, e só ela.
 *
 * O escopo é `.pagina--blog`, que o `base.html` põe no `<main>` a partir do registro de
 * `backend/montagem`, como nas outras onze páginas do registro. O desenho da listagem -- o cartão, a
 * busca, os filtros, a paginação -- está em `componentes/blog.css`, porque o plugin da I4 pode
 * entrar em qualquer página.
 *
 * **O que é moldura aqui são os recuos laterais, e eles não são um só.** O original recua a
 * faixa da busca e a lista em `2 * 2vw`, e os filtros em `3 * 2vw` -- os filtros ficam mais
 * para dentro que os cartões de propósito, e é a diferença que faz o menu aberto não encostar
 * na borda da tela. Três valores diferentes numa folha de componente seriam medida de página
 * escondida no lugar errado.
 */

.pagina--blog {
  padding-bottom: 187px;
}

.pagina--blog .blog__em-destaque {
  margin: 56px 4vw 96px;
}

.pagina--blog .blog__busca {
  margin-left: 4vw;
  margin-right: 4vw;
}

.pagina--blog .blog__filtros {
  margin-left: 6vw;
  margin-right: 6vw;
}

.pagina--blog .blog__lista,
.pagina--blog .blog__vazio,
.pagina--blog .blog__paginacao {
  margin-left: 4vw;
  margin-right: 4vw;
}

/*
 * No celular quem recua é o cartão, e não a lista -- é o que o original faz
 * (`.blog-posts { margin: 0 }` com `padding` no `.post-item`). O componente já cuida disso: o
 * recuo do cartão cai de 12,5% para 4vw naquele ponto de quebra. O que muda aqui é só o dos
 * filtros, que continuam mais para dentro que os cartões, e o respiro do fim da página.
 */
@media (max-width: 768px) {
  .pagina--blog {
    padding-bottom: 69px;
  }

  .pagina--blog .blog__filtros {
    margin-left: 8vw;
    margin-right: 8vw;
  }

  .pagina--blog .blog__em-destaque {
    margin: 32px 4vw 48px;
  }
}