/*
 * Cabeçalho do post (etapa I8, para a marcação da I5).
 *
 * Transcreve `plugins/header-post.scss` do `maple-bear-site`, com os tokens daqui no lugar das
 * cores de lá. As duas colunas -- texto à esquerda sobre fundo claro, capa à direita
 * sangrando -- são o desenho do cabeçalho, e por isso moram aqui: sem elas não há cabeçalho,
 * só um título solto. O que fica em `paginas/post.css` é o que está **em volta** dele.
 *
 * **Não é plugin, e a folha acompanha essa decisão:** o cabeçalho é parte do template do post
 * (I5), então ele não precisa de envelope de linha nem de coluna da D2 -- a própria folha
 * arma as duas colunas.
 *
 * **Os ornamentos do original não vêm:** a folha da Maple traz um `.decoration` girado 1,5° e
 * uma folha de bordo antes do nome do site. São marca de lá, não desenho de cabeçalho.
 */

/*
 * **`grid`, e não `flex`**, e a diferença foi medida no navegador: como item de flex, a capa
 * é um elemento substituído e não estica -- ela parava na altura intrínseca e a faixa cinza
 * do texto seguia 90px abaixo dela. No grid o `stretch` padrão alcança a imagem, e as duas
 * colunas terminam juntas, que é o que o original entrega com `height: 100%`.
 *
 * O `:has()` é o mesmo recurso que o `learning.css` da G8 usa: **sem capa não há segunda
 * coluna**, e o texto ocupa a faixa inteira em vez de deixar 43% de branco. É o aceite da I5.
 */
.cabecalho-do-post {
  display: grid;
  grid-template-columns: 1fr;
}

.cabecalho-do-post:has(.cabecalho-do-post__capa) {
  grid-template-columns: 57% 43%;
}

.cabecalho-do-post__texto {
  padding: 108px 4vw 91px;
  background-color: var(--seb-cinza-fundo);
}

.cabecalho-do-post__data {
  font-family: var(--seb-fonte-corpo);
  font-size: 13px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seb-azul);
  margin-bottom: 22px;
}

/*
 * `<h1>`, e no original é `<h2>`: ali o `<h1>` da página é o logotipo do header. Aqui o título
 * do post é o título da página, e um documento com o primeiro nível saltado é o defeito que a
 * G14 corrigiu no resto do site.
 */
.cabecalho-do-post__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 50px;
  font-weight: 600;
  line-height: 65px;
  color: var(--seb-azul);
  margin-bottom: 36px;
}

/*
 * Os pares são `<dl>`, e no original são `<div class="item">` com dois `<p>`. Rótulo e valor
 * **são** uma lista de definições, e o elemento certo custa zero: o leitor de tela passa a
 * anunciar "Autor: SEB Education" em vez de duas frases soltas.
 */
.cabecalho-do-post__dados {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.cabecalho-do-post__dado {
  margin-top: 55px;
  width: 50%;
}

.cabecalho-do-post__rotulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--seb-azul);
}

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

.cabecalho-do-post__compartilhar {
  margin-top: 55px;
  width: 100%;
}

.cabecalho-do-post__redes {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 5px;
}

.cabecalho-do-post__redes img {
  display: block;
  width: auto;
  height: 25px;
  transition: opacity 0.25s ease-in-out;
}

/*
 * O `hover` é opacidade, e não troca de cor: os três ícones são arquivos SVG com o azul
 * dentro, pelo padrão que o `linha-do-tempo.css` da F3 fixou -- `mask` tingiria pelo token,
 * mas pinta um quadrado cheio onde ela não existe.
 */
.cabecalho-do-post__redes a:hover img {
  opacity: 0.6;
}

/*
 * A capa preenche a coluna da direita e sangra até a borda da tela -- o recuo lateral é da
 * folha da página, e ela o tira desta metade de propósito.
 */
.cabecalho-do-post__capa {
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  object-position: center;
}

.cabecalho-do-post__capa--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed var(--seb-cinza-borda);
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  color: var(--seb-azul);
}

@media (max-width: 768px) {
  .cabecalho-do-post:has(.cabecalho-do-post__capa) {
    grid-template-columns: 1fr;
  }

  .cabecalho-do-post__texto {
    padding: 26px 4vw;
  }

  .cabecalho-do-post__data {
    font-size: 10px;
    line-height: 12px;
    margin-bottom: 21px;
  }

  .cabecalho-do-post__titulo {
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 0;
  }

  .cabecalho-do-post__dado,
  .cabecalho-do-post__compartilhar {
    width: 100%;
    margin-top: 14px;
  }

  .cabecalho-do-post__rotulo,
  .cabecalho-do-post__valor {
    font-size: 14px;
    line-height: 21px;
  }

  .cabecalho-do-post__redes {
    gap: 10px;
  }

  .cabecalho-do-post__redes img {
    height: 15px;
  }

  .cabecalho-do-post__capa {
    height: 74vw;
    min-height: 0;
    max-height: 400px;
  }
}