/*
 * A faixa do blog, que fecha a home.
 *
 * Antes era um título pequeno, uma linha e um botão: pedia o clique sem mostrar
 * nada do que havia do outro lado. Agora mostra três artigos de verdade, com
 * capa, e o botão vira a saída para o resto.
 *
 * O título estava em 1.2rem, metade do das outras seções. Aqui ele entra na
 * mesma escala do "Uma plataforma" e do "Modelos de IA": se é uma seção, tem
 * tipografia de seção.
 */

.home-blog {
  background: #ffffff;
  border-top: 1px solid #cfc7dc;
  padding: 84px 0;
}

.blog-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.linte-home-v2 .home-blog h2 {
  margin: 0;
  max-width: 22ch;
  font: 400 clamp(30px, 3.1vw, 44px)/1.12 'Roboto Serif', Georgia, serif;
  letter-spacing: -.03em;
  color: #1b0d35;
}

.linte-home-v2 .home-blog h2 span { color: #6c2bea }

.blog-intro p {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: #4c4358;
}

/* Mesmo botão de contorno das outras ações da home. */
.blog-todos {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  border: 1px solid #211a2b;
  padding: 12px 17px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #211a2b;
  transition: background 260ms cubic-bezier(.2, 0, .2, 1), border-color 260ms cubic-bezier(.2, 0, .2, 1);
}

.blog-todos:hover {
  background: #c7f04a;
  border-color: #c7f04a;
  color: #211a2b;
}

.blog-todos span { font-size: 15px; line-height: 1 }

/* ------------------------------------------------------------ cartões --- */

.blog-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.blog-cartoes a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.blog-cartoes img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  background: #f1eef8;
  /* o véu some no hover: a grade lê como conjunto em repouso e devolve a foto
     quando a pessoa mira um cartão */
  filter: saturate(.9) brightness(.98);
  transition: filter 400ms cubic-bezier(.2, 0, .2, 1);
}

.blog-cartoes a:hover img { filter: none }

.blog-categoria {
  display: block;
  margin: 18px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6c2bea;
}

.linte-home-v2 .blog-cartoes h3 {
  margin: 10px 0 0;
  font: 400 19px/1.32 'Roboto Serif', Georgia, serif;
  letter-spacing: -.015em;
  color: #1b0d35;
  transition: color 260ms cubic-bezier(.2, 0, .2, 1);
}

.blog-cartoes a:hover h3 { color: #6c2bea }

.blog-ler {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6c2bea;
}

@media (max-width: 1000px) {
  .blog-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px }
  .blog-cartoes li:nth-child(3) { display: none }
}

@media (max-width: 760px) {
  .home-blog { padding: 56px 0 }

  .blog-intro {
    display: block;
  }

  .blog-todos { margin-top: 24px }

  .blog-cartoes {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 30px;
  }

  /* No celular a grade some e sobra o mais recente: três cartões empilhados
     empurrariam o rodapé para longe demais de quem só queria sair da página. */
  .blog-cartoes li:nth-child(2),
  .blog-cartoes li:nth-child(3) { display: none }
}