/*
 * Listagem do blog e cartão do post (etapa I8).
 *
 * Transcreve `plugins/blog.scss` (a busca, os filtros e a paginação) e `posts.scss` (o cartão)
 * do `maple-bear-site`, com as cores trocadas pelos tokens daqui: onde lá é
 * `--medium-red-color`, aqui é `--seb-azul`. Nenhum hexadecimal de marca escrito à mão -- é o
 * aceite da etapa, e o mesmo teste que a F1 fez com o azul do hero.
 *
 * **A moldura de página não está aqui** -- é a regra que a E1, a E2 e a E3 fixaram: margens
 * em volta, respiro entre seções da página e o `gap` que cerca o bloco pertencem a
 * `paginas/blog.css`. O que **é** o componente é a listagem inteira, da busca à paginação: ela
 * é um plugin só, e o ritmo interno dela não muda de página para página.
 *
 * ### As duas colunas saem de uma lista só
 *
 * O original emite a lista **três vezes**: `.column-left` com os ímpares, `.column-right` com
 * os pares e `.column-mobile` com tudo, escondida por CSS. Aqui é um `<ul>`, e as colunas são
 * `columns: 2`.
 *
 * **`columns`, e não `grid`**, e a razão é o desencontro proposital das duas colunas: no
 * original a esquerda começa 120px mais baixa e daí em diante cada coluna corre sozinha. Num
 * grid de duas colunas as linhas se alinham, então o desencontro morre depois do primeiro par
 * -- e não há `masonry` para pedir. Com `columns`, cada coluna flui sozinha e o
 * `margin-top` do primeiro item desloca a esquerda inteira, que é o efeito de lá.
 *
 * O que diverge é **qual** post cai em qual coluna: lá é ímpar/par, aqui é a primeira metade à
 * esquerda. A leitura em cima-para-baixo e depois à direita é a ordem do documento, e o
 * desenho é o mesmo.
 *
 * ### O menu de filtro é `<details>`, e o `max-height` animado não vem junto
 *
 * Lá o `blog2.js` escreve `style="max-height: ..."` para abrir a lista; sem o script os
 * filtros não filtram nada. Aqui é o `<details>` da D7, que abre sem script -- e a transição
 * de `max-height` não tem como acompanhar, porque o painel só existe depois de aberto. O
 * estado é a seta, que gira.
 */

.blog__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 50px;
  font-weight: 600;
  line-height: 65px;
  color: var(--seb-azul);
  margin-bottom: 40px;
}

/* ------------------------------------------------------------ as notícias em destaque */

.blog__em-destaque {
  --destaque-vao: 64px;
}

.destaque-post {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--destaque-vao);
  width: 100%;
}

.destaque-post__capa {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 520px;
  object-fit: cover;
  border-radius: 10px;
}

.destaque-post:not(:has(> .destaque-post__capa)) {
  grid-template-columns: minmax(0, 1fr);
}

.destaque-post__categoria {
  margin-bottom: 16px;
  font-family: var(--seb-fonte-corpo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seb-cinza-rotulo);
}

.destaque-post__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  margin-bottom: 20px;
}

.destaque-post__titulo a {
  color: var(--seb-azul);
  transition: color 0.25s ease-in-out;
}

.destaque-post__titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.destaque-post:hover .destaque-post__titulo a {
  color: rgb(var(--seb-azul-rgb) / 0.7);
}

.destaque-post__resumo {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: var(--seb-cinza-rotulo);
}

.blog__em-destaque .carrossel__nav {
  position: static;
  transform: none;
  width: auto;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding-left: calc((100% - var(--destaque-vao)) * 7 / 12 + var(--destaque-vao));
}

.blog__em-destaque .carrossel__seta img {
  width: 48px;
  height: 48px;
}

@media (max-width: 1119.98px) {
  .destaque-post__titulo {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 768px) {
  .destaque-post {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }

  .destaque-post__categoria {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .destaque-post__titulo {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 12px;
  }

  .destaque-post__resumo {
    font-size: 14px;
    line-height: 26px;
  }

  .blog__em-destaque .carrossel__nav {
    display: none;
  }

  .blog__em-destaque .carrossel__marcadores {
    margin-top: 16px;
  }
}

/* ------------------------------------------------------------------------ a busca */

.blog__busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background-color: var(--seb-cinza-fundo);
  padding: 72px 4vw 49px;
}

/*
 * O rótulo é visível, e no original não existe: lá o campo tem só o `placeholder`, que
 * desaparece assim que se digita. É a mesma correção que a G11 fez nos 19 campos do
 * `fale-conosco`.
 */
.blog__busca-rotulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: var(--seb-azul);
  width: 100%;
}

.blog__busca-campo {
  flex: 1;
  min-width: 260px;
  max-width: 550px;
  border: none;
  border-bottom: 1px solid var(--seb-azul);
  background-color: transparent;
  padding: 0 15px 8px 0;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 18px;
  color: var(--seb-azul);
}

.blog__busca-campo::placeholder {
  color: var(--seb-cinza-rotulo);
}

.blog__busca-enviar {
  border: 1px solid var(--seb-azul);
  background-color: var(--seb-azul);
  color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 18px;
  padding: 10px 28px;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
}

.blog__busca-enviar:hover {
  background-color: transparent;
  color: var(--seb-azul);
}

/* ---------------------------------------------------------------------- os filtros */

.blog__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 77px;
  padding-top: 105px;
  margin-bottom: 58px;
}

/*
 * `position: relative` e `z-index` porque o painel aberto sai do fluxo e passa por cima dos
 * cartões -- que é o que o original faz, e o que evita a página inteira pular 200px para
 * baixo cada vez que alguém abre um filtro.
 */
.blog__filtro {
  position: relative;
  width: 21vw;
  min-width: 200px;
  max-width: 260px;
}

.blog__filtro[open] {
  z-index: 2;
}

.blog__filtro-rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 18px;
  color: var(--seb-azul);
  cursor: pointer;
  list-style: none;
}

.blog__filtro-rotulo::-webkit-details-marker {
  display: none;
}

/*
 * A seta é desenhada em CSS, como o `+` do acordeão da D7 -- e pela razão que a F3 registrou
 * no `linha-do-tempo.css`: `mask` tingiria um SVG pelo token, mas num navegador sem `mask`
 * pinta um quadrado cheio no lugar do ícone. Duas bordas giradas não têm esse risco e saem do
 * token direto.
 */
.blog__filtro-rotulo::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--seb-azul);
  border-bottom: 2px solid var(--seb-azul);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease-in-out;
}

.blog__filtro[open] .blog__filtro-rotulo::after {
  transform: translateY(2px) rotate(-135deg);
}

.blog__filtro-opcoes {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 9px 0;
  background-color: var(--seb-cinza-fundo);
}

.blog__filtro-opcoes a {
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  color: var(--seb-azul);
  padding: 9px 19px;
  transition: color 0.25s ease-in-out;
}

/*
 * **O `hover` é fundo, e o ativo é peso** -- e não cor, que foi a primeira versão: em
 * `--seb-azul-claro` sobre o cinza da faixa a opção ativa ficava ilegível. Medido no
 * navegador. O fundo é o mesmo `color-mix` que o acordeão da D7 usa, pela mesma razão de o
 * azul-claro com alfa não valer um token ainda.
 */
.blog__filtro-opcoes a:hover {
  background-color: color-mix(in srgb, var(--seb-azul-claro) 25%, transparent);
}

.blog__filtro-opcoes a[aria-current] {
  font-weight: 700;
}

/* ------------------------------------------------------------ a lista e o cartão */

/*
 * **`column-gap: 0`, e a calha sai do recuo do cartão**, como no original: lá as colunas são
 * dois `width: 50%` encostados, e o que as separa é o `padding` de 12,5% de cada `.post-item`.
 * Com `gap` **e** recuo, a calha sairia dobrada.
 */
.blog__lista {
  columns: 2;
  column-gap: 0;
}

.blog__item {
  break-inside: avoid;
  margin-bottom: 110px;
}

/*
 * O desencontro da coluna da esquerda, que no original é
 * `.column-left .post-item:first-child { margin-top: 120px }`. Com uma lista só, o primeiro
 * item **é** o topo da coluna esquerda.
 */
.blog__item:first-child {
  margin-top: 120px;
}

/*
 * O recuo interno é do cartão, e não da lista: é dele que o traço do título sai para a
 * esquerda. Sem ele o traço da coluna esquerda cai fora da tela -- medido no navegador, a
 * 1440px, na versão sem este recuo: o traço tem 57px e começava em -21px.
 */
.cartao-post {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 12.5%;
  padding-right: 12.5%;
}

.cartao-post__capa {
  width: 100%;
  height: 22vw;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 36px;
  transition: transform 0.25s ease-in-out;
}

.cartao-post:hover .cartao-post__capa {
  transform: scale(1.02);
}

.cartao-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--seb-fonte-corpo);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seb-cinza-rotulo);
}

.cartao-post__autor {
  font-weight: 700;
  color: var(--seb-azul);
}

.cartao-post__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 25px;
  font-weight: 600;
  line-height: 35px;
  margin-bottom: 14px;
}

.cartao-post__titulo a {
  color: var(--seb-azul);
  transition: color 0.25s ease-in-out;
  /*
   * As duas medidas do traço, como property, porque a regra abaixo depende de as três
   * declarações concordarem: `-(traço + vão) + traço + vão` tem de somar zero. Com os valores
   * escritos à mão, o `@media` precisava repetir os três e uma edição em um só quebraria o
   * alinhamento do título em silêncio. Assim o ponto de quebra troca dois números.
   */
  --traco: min(57px, 4vw);
  --vao: 22px;
}

/*
 * O traço à esquerda do título, que no original é um `::before` absoluto do `.title` saindo
 * para dentro do recuo do cartão.
 *
 * **Aqui ele é inline, e a diferença não é de estilo: é o que faz o cartão inteiro clicável.**
 * Absoluto, ele obriga o `<h3>` a ser `position: relative` -- e aí o `::after` do link, logo
 * abaixo, passa a se resolver contra o *título* em vez de contra o cartão, deixando a capa e o
 * resumo fora da área de clique. Foi o que a revisão desta etapa encontrou.
 *
 * **E ele é `::before` do link, e não do `<h3>`**, o que também foi medido: a `base.css` faz
 * de todo `<a>` um `display: block`, então um pseudo inline no `<h3>` fica numa linha
 * anônima *acima* do título em vez de ao lado dele. Dentro do link, ele é o primeiro pedaço
 * da primeira linha, que é onde o original o põe.
 *
 * A margem negativa é a largura do traço mais o vão: o avanço soma zero, então o texto do
 * título fica exatamente onde ficaria sem ele, e o traço ocupa o recuo do cartão. O `top` em
 * `em` alinha o traço com a primeira linha nos dois pontos de quebra, sem valor por `@media`.
 */
.cartao-post__titulo a::before {
  content: '';
  display: inline-block;
  position: relative;
  top: -0.5em;
  width: var(--traco);
  height: 2px;
  margin-left: calc(-1 * (var(--traco) + var(--vao)));
  margin-right: var(--vao);
  background-color: var(--seb-azul);
}

/*
 * **O cartão inteiro é clicável pelo link do título**, e não por um `<a>` vazio esticado por
 * CSS como o original faz -- link sem nome acessível, que o leitor de tela anuncia como
 * "link" e mais nada, 8 vezes por página. O `::after` cobre o cartão; o nome do link continua
 * sendo o título.
 */
.cartao-post__titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.cartao-post:hover .cartao-post__titulo a {
  color: rgb(var(--seb-azul-rgb) / 0.7);
}

.cartao-post__resumo {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: var(--seb-cinza-rotulo);
}

/* ------------------------------------------------------- o vazio e a paginação */

.blog__vazio {
  font-family: var(--seb-fonte-corpo);
  font-size: 25px;
  font-weight: 500;
  line-height: 35px;
  color: var(--seb-azul);
  max-width: 600px;
  margin-top: 35px;
}

.blog__paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  font-family: var(--seb-fonte-corpo);
  font-size: 15px;
  line-height: 18px;
  color: var(--seb-azul);
}

.blog__pagina-anterior,
.blog__pagina-proxima {
  color: var(--seb-azul);
  border: 1px solid var(--seb-azul);
  padding: 10px 24px;
  transition: all 0.25s ease-in-out;
}

.blog__pagina-anterior:hover,
.blog__pagina-proxima:hover {
  background-color: var(--seb-azul);
  color: var(--seb-branco);
}

/* O mesmo ponto de quebra do resto do tema. */
@media (max-width: 768px) {
  .blog__titulo {
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 20px;
  }

  .blog__busca {
    padding: 21px 4vw 23px;
  }

  .blog__busca-campo {
    min-width: 0;
    font-size: 12px;
  }

  .blog__filtros {
    flex-direction: column;
    gap: 25px;
    padding-top: 44px;
    margin-bottom: 30px;
  }

  .blog__filtro {
    width: 100%;
    max-width: 100%;
  }

  .blog__filtro-rotulo {
    padding: 5px 0;
    font-size: 12px;
  }

  .blog__filtro-opcoes a {
    font-size: 14px;
    line-height: 17px;
  }

  .blog__lista {
    columns: 1;
  }

  .blog__item {
    margin-bottom: 63px;
  }

  .blog__item:first-child {
    margin-top: 0;
  }

  .cartao-post {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .cartao-post__capa {
    height: 70vw;
    max-height: 400px;
    margin-bottom: 22px;
  }

  .cartao-post__meta {
    font-size: 10px;
  }

  .cartao-post__titulo {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .cartao-post__titulo a {
    --traco: 15px;
    --vao: 8px;
  }

  .cartao-post__resumo {
    font-size: 14px;
    line-height: 26px;
  }

  .blog__vazio {
    font-size: 18px;
    line-height: 24px;
    margin-top: 0;
  }
}

/* --------------------------------------------------- as últimas postagens (I7) */

.blog-destaques__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  color: var(--seb-azul);
  margin-bottom: 32px;
}

.blog-destaques__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.blog-destaques__item {
  flex: 1 1 280px;
}

.blog-destaques__ver-todos {
  display: inline-block;
  margin-top: 40px;
  color: var(--seb-azul);
  border: 1px solid var(--seb-azul);
  padding: 10px 24px;
  transition: all 0.25s ease-in-out;
}

.blog-destaques__ver-todos:hover {
  background-color: var(--seb-azul);
  color: var(--seb-branco);
}

@media (max-width: 768px) {
  .blog-destaques__titulo {
    font-size: 26px;
    line-height: 33px;
    margin-bottom: 20px;
  }

  .blog-destaques__lista {
    flex-direction: column;
    gap: 30px;
  }

  .blog-destaques__ver-todos {
    margin-top: 20px;
  }
}