/* ============================================================================
   BLOG — a lista e o artigo

   POR QUE ELE ENTRA NO MOLDE DE PÁGINA INTERNA e não ganha um desenho próprio:
   /festas, /recreacao e /oficinas já são a mesma peça com outro conteúdo (o
   cartão claro sobre o preto do Norvin, o topo com as três cores, a régua). Um
   blog com linguagem própria seria a quarta página interna a ser aprendida, e é
   exatamente o que faz um site parecer três sites colados. Aqui muda só o
   MIOLO: uma grade de chamadas na lista, uma coluna de leitura no artigo.

   O CONTEÚDO VEM DE `content/blog.json`. A lista é assada pela build (o HTML
   nasce pronto, para o Google ler) e o artigo é montado no navegador a partir
   do mesmo arquivo — assim um post publicado pelo painel aparece sem precisar
   de build nenhuma. É a mesma troca que o resto do site faz: o que precisa de
   busca vai assado, o que precisa ser fresco vai montado.
   ========================================================================== */

/* ------------------------------------------------------------- a listagem */

.bg-grade{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:calc(28 * var(--u)) calc(24 * var(--u));
  padding:calc(30 * var(--u)) clamp(18px, 3.6vw, 52px) calc(10 * var(--u));
}

/* A CHAMADA. Foto em cima, etiqueta, título e resumo embaixo — a ordem em que
   se lê uma chamada de revista. O cartão inteiro é o link: alvo de 300px de
   altura é melhor que um "leia mais" de 60x16. */
.bg-card{
  display:flex;flex-direction:column;
  min-width:0;
  color:inherit;text-decoration:none;
  background:var(--chapa);
  border:1px solid var(--fio);
  border-radius:calc(16 * var(--u));
  overflow:hidden;
  transition:transform .32s var(--e-entrada), box-shadow .32s var(--e-entrada),
             border-color .32s var(--e-entrada);
}
@media (hover: hover){
  .bg-card:hover{
    transform:translateY(-3px);
    border-color:#C9C9C9;
    box-shadow:0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.13);
  }
  .bg-card:hover .bg-card-foto img{transform:scale(1.035)}
}
.bg-card:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px}

.bg-card-foto{
  position:relative;display:block;
  aspect-ratio:3 / 2;overflow:hidden;
  background:#E6E6E6;
}
.bg-card-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--e-entrada);
}
.bg-card-corpo{
  display:flex;flex-direction:column;gap:calc(9 * var(--u));
  padding:calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  flex:1;
}
/* etiqueta e data na mesma linha: as duas são metadado, e metadado não ocupa
   duas alturas de texto numa chamada */
.bg-card-meta{
  display:flex;align-items:center;gap:calc(10 * var(--u));
  margin:0;
  font-size:calc(10.5 * var(--u));font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.bg-card-meta i{
  width:4px;height:4px;border-radius:50%;background:var(--turquesa);
  display:inline-block;flex:none;font-style:normal;
}
.bg-card-tit{
  margin:0;
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(20 * var(--u));font-weight:700;
  letter-spacing:-.026em;line-height:1.2;
  color:var(--tinta);text-wrap:pretty;
}
.bg-card-txt{
  margin:0;
  font-size:calc(14 * var(--u));line-height:1.55;
  color:var(--tinta-2);text-wrap:pretty;
}
.bg-card-ler{
  margin:auto 0 0;padding-top:calc(12 * var(--u));
  font-size:calc(12 * var(--u));font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinta);
}

/* a linha de apoio da lista: mesma familia da `.ft-restante-sub` das outras
   internas, so' que aqui ela abre a pagina em vez de fechar */
.bg-lead{
  max-width:calc(680 * var(--u));
  margin:0;
  padding:calc(4 * var(--u)) clamp(18px, 3.6vw, 52px) 0;
  font-size:calc(16.5 * var(--u));line-height:1.6;
  color:var(--tinta-2);text-wrap:pretty;
}
@media (max-width: 640px){
  .bg-lead{
    padding:0 clamp(14px, 4vw, 20px);
    font-size:clamp(14.5px, 4vw, 16px);
  }
}

/* O TITULO DE UM POST NAO E' O NOME DA PAGINA. `.ft-titulo` foi desenhado para
   UMA PALAVRA monumental e centrada (FESTAS, OFICINAS, BLOG) em ate' 126px. Uma
   frase de 50 caracteres nesse corpo vira tres linhas de parede, empurra o
   texto para fora da primeira tela e ainda le como grito. Aqui ele volta a ser
   manchete de materia: corpo menor, alinhado a' esquerda e com medida maxima,
   que e' como se le' um titulo de texto em qualquer lugar. */
#post-titulo{
  font-size:clamp(26px, 4.3vw, 58px);
  line-height:1.04;
  letter-spacing:-.032em;
  text-align:left;
  max-width:calc(980 * var(--u));
  text-wrap:balance;
}

/* ---------------------------------------------------------------- o artigo */

.bg-artigo{
  padding:calc(26 * var(--u)) clamp(18px, 3.6vw, 52px) calc(20 * var(--u));
}
.bg-artigo:has(> .bg-lead){padding:0}
/* A MEDIDA DE LEITURA É 68 CARACTERES, e não a largura do cartão: linha de
   1.200px obriga o olho a procurar o começo da próxima e é onde a pessoa
   desiste de um texto longo. */
.bg-texto{max-width:calc(720 * var(--u));margin-inline:auto}
.bg-texto p{
  margin:0 0 calc(18 * var(--u));
  font-size:calc(16.5 * var(--u));line-height:1.7;
  color:#2A2A2A;text-wrap:pretty;
}
.bg-texto p b{color:var(--tinta);font-weight:600}
.bg-texto h2{
  margin:calc(34 * var(--u)) 0 calc(12 * var(--u));
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(22 * var(--u));font-weight:700;
  letter-spacing:-.028em;line-height:1.24;
  color:var(--tinta);
}
.bg-texto ul{margin:0 0 calc(18 * var(--u));padding:0;list-style:none}
.bg-texto li{
  position:relative;
  margin:0 0 calc(9 * var(--u));padding-left:calc(20 * var(--u));
  font-size:calc(16 * var(--u));line-height:1.62;color:#2A2A2A;
}
.bg-texto li::before{
  content:"";position:absolute;left:0;top:calc(11 * var(--u));
  width:calc(8 * var(--u));height:1.5px;background:var(--turquesa);
}
/* O DESTAQUE É A FRASE QUE FICA. Barra de cor à esquerda e corpo maior: é o
   único lugar do texto onde a voz sobe. */
.bg-destaque{
  margin:calc(26 * var(--u)) 0;
  padding:calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(20 * var(--u));
  border-left:3px solid var(--turquesa);
  font-family:"Inter Display","Inter",sans-serif;
  font-size:calc(18.5 * var(--u));font-weight:600;line-height:1.42;
  letter-spacing:-.018em;
  color:var(--tinta);
}

/* a barra de fecho do artigo, mesma peça do `.ft-pedir` das outras internas */
.bg-pe{
  max-width:calc(720 * var(--u));margin:calc(34 * var(--u)) auto 0;
  padding-top:calc(22 * var(--u));
  border-top:1px solid var(--fio);
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(20 * var(--u));flex-wrap:wrap;
}
.bg-pe p{
  margin:0;max-width:calc(380 * var(--u));
  font-size:calc(14 * var(--u));line-height:1.5;color:var(--tinta-2);
}
.bg-voltar{
  display:inline-block;margin-top:calc(18 * var(--u));
  font-size:calc(12.5 * var(--u));font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tinta-2);text-decoration:none;
  border-bottom:1px solid #C9C9C9;
}
@media (hover: hover){ .bg-voltar:hover{color:var(--tinta);border-color:var(--tinta)} }

/* enquanto o JSON não chegou, e quando o endereço não existe */
.bg-recado{
  padding:calc(40 * var(--u)) clamp(18px, 3.6vw, 52px);
  font-size:calc(15 * var(--u));color:var(--tinta-2);
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 980px){
  .bg-grade{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  /* UMA COLUNA SÓ ABAIXO DE 640, e não duas: com 390 de largura o cartão de
     duas colunas fica com 175px, e um título de duas linhas dentro dele vira
     quatro. A chamada precisa de largura para ser chamada. */
  .bg-grade{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(16px, 4vw, 22px);
    padding:clamp(18px, 4.6vw, 26px) clamp(14px, 4vw, 20px) clamp(6px, 2vw, 10px);
  }
  .bg-card-corpo{padding:clamp(14px, 4vw, 18px) clamp(14px, 4vw, 18px) clamp(16px, 4.4vw, 20px)}
  .bg-card-tit{font-size:clamp(17px, 4.6vw, 20px)}
  .bg-card-txt{font-size:clamp(13.5px, 3.6vw, 14.5px)}
  .bg-card-meta{font-size:clamp(9.5px, 2.6vw, 10.5px)}
  .bg-artigo{padding:clamp(18px, 4.6vw, 26px) clamp(14px, 4vw, 20px) clamp(16px, 4vw, 22px)}
  .bg-texto p{font-size:clamp(15px, 4.1vw, 16.5px);line-height:1.65}
  .bg-texto li{font-size:clamp(14.5px, 4vw, 16px)}
  .bg-texto h2{font-size:clamp(18px, 5vw, 22px);margin-top:clamp(24px, 6vw, 34px)}
  .bg-destaque{font-size:clamp(16px, 4.4vw, 18.5px);padding-left:clamp(14px, 4vw, 20px)}
  .bg-pe{flex-direction:column;align-items:flex-start}
}