/* ==========================================================================
   ÁREA DE ARTIGOS — a listagem

   A organização é a de jornal: uma manchete grande, duas chamadas de apoio
   ao lado e, embaixo, a lista do que veio antes. Cada chamada tem chapéu
   (a palavra que diz do que trata), título, linha fina e assinatura.

   As cores continuam sendo as três do site: preto, amarelo e branco. O que
   dá o ar de portal é a hierarquia — tamanho, peso e espaço — e não uma
   paleta nova.

   Tudo aqui usa pixel, e não em, de propósito: assim o texto de leitura não
   encolhe junto com a largura da janela, como acontece no resto do tema.
   ========================================================================== */

.blog{
  display:block; width:100%;
  max-width:1180px; margin:0 auto; padding:0 20px 70px;
  box-sizing:border-box;
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  color:#111;
}

/* ---------- cabeçalho da área ---------- */
.blogCab{ padding:46px 0 18px; border-bottom:3px solid #000; margin-bottom:0; }
.blogCab__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:46px; line-height:1; letter-spacing:.5px;
  text-transform:uppercase; color:#000; margin:0 0 10px;
}
.blogCab__frase{ margin:0; font-size:15px; line-height:1.55; color:#5a5a52; }

/* ---------- barra de editorias ---------- */
.editorias{
  border-bottom:1px solid #e3e3dd;
  margin:0 0 34px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.editorias::-webkit-scrollbar{ height:0; }
.editorias__interno{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:nowrap; flex-wrap:nowrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  min-width:-webkit-min-content; min-width:min-content;
}
.editorias__item{
  display:inline-block; white-space:nowrap;
  padding:15px 16px; margin:0;
  font-size:13.5px; font-weight:700; line-height:1;
  color:#6b6b63; text-decoration:none;
  border-bottom:3px solid transparent;
  -webkit-transition:.18s ease-in; transition:.18s ease-in;
}
.editorias__item:first-child{ padding-left:0; }
.editorias__item:hover{ color:#000; }
.editorias__item.esta{ color:#000; border-bottom-color:#feec34; }

/* ---------- o chapéu, usado em toda chamada ---------- */
.chapeu{
  display:inline-block;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:1.6px; text-transform:uppercase;
  color:#000; background:#feec34;
  padding:6px 10px; margin:0 0 12px;
  border-radius:3px;
}

/* ---------- assinatura: autor, data, tempo ---------- */
.assinatura{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin:0; padding:0;
  font-size:12.5px; line-height:1.5; color:#76766d;
}
.assinatura span + span{ margin-left:9px; padding-left:9px; border-left:1px solid #d8d8d2; }
.assinatura__autor{ font-weight:700; color:#3a3a34; }

/* ---------- manchete e apoio ---------- */
.topoBlog{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin:0 0 46px;
}
.manchete{
  -webkit-box-flex:1; -ms-flex:1 1 62%; flex:1 1 62%;
  min-width:0; padding:0 16px 0 0; box-sizing:border-box;
}
.manchete__link{ display:block; text-decoration:none; color:inherit; }
.manchete__foto{
  position:relative; width:100%; overflow:hidden;
  background:#ececea; margin-bottom:18px;
}
.manchete__foto::before{ content:''; display:block; padding-top:56.25%; }
@supports (aspect-ratio: 16 / 9){
  .manchete__foto::before{ display:none; }
  .manchete__foto{ aspect-ratio:16 / 9; }
}
.manchete__foto img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  -o-object-fit:cover; object-fit:cover; display:block;
  -webkit-transition:.4s ease-in; transition:.4s ease-in;
}
.manchete__link:hover .manchete__foto img{
  -webkit-transform:scale(1.03); transform:scale(1.03);
}
.manchete__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:40px; line-height:1.06; letter-spacing:.3px;
  text-transform:uppercase; color:#000;
  margin:0 0 12px;
}
.manchete__link:hover .manchete__titulo{ color:#3a3a34; }
.manchete__linhaFina{
  margin:0 0 14px; font-size:16.5px; line-height:1.58; color:#44443e;
}

.apoio{
  -webkit-box-flex:1; -ms-flex:1 1 38%; flex:1 1 38%;
  min-width:0; padding:0 0 0 16px; box-sizing:border-box;
  border-left:1px solid #e3e3dd;
}
.chamada{ padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid #e3e3dd; }
.chamada:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.chamada__link{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  text-decoration:none; color:inherit;
}
.chamada__foto{
  -webkit-box-flex:0; -ms-flex:0 0 108px; flex:0 0 108px;
  height:72px; overflow:hidden; background:#ececea; margin-right:13px;
}
.chamada__foto img{
  width:100%; height:100%; -o-object-fit:cover; object-fit:cover; display:block;
}
.chamada__texto{ min-width:0; }
.chamada .chapeu{ font-size:11px; padding:4px 8px; margin-bottom:8px; letter-spacing:1.3px; }
.chamada__titulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:16px; font-weight:700; line-height:1.28; color:#000;
  margin:0 0 8px;
}
.chamada__link:hover .chamada__titulo{ color:#3a3a34; }

/* ---------- lista do que veio antes ---------- */
.listaBlog__cab{
  font-family:'Anton', Impact, sans-serif; font-weight:400;
  font-size:22px; line-height:1; letter-spacing:.6px; text-transform:uppercase;
  color:#000; margin:0 0 4px; padding:0 0 12px;
  border-bottom:3px solid #000;
}
.listaBlog__cab span{ display:inline-block; }

.linhaBlog{ border-bottom:1px solid #e3e3dd; }
.linhaBlog:last-child{ border-bottom:0; }
.linhaBlog__link{
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  padding:22px 0; text-decoration:none; color:inherit;
}
.linhaBlog__foto{
  -webkit-box-flex:0; -ms-flex:0 0 232px; flex:0 0 232px;
  height:131px; overflow:hidden; background:#ececea; margin-right:20px;
}
.linhaBlog__foto img{
  width:100%; height:100%; -o-object-fit:cover; object-fit:cover; display:block;
  -webkit-transition:.4s ease-in; transition:.4s ease-in;
}
.linhaBlog__link:hover .linhaBlog__foto img{
  -webkit-transform:scale(1.04); transform:scale(1.04);
}
.linhaBlog__texto{ min-width:0; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; }
.linhaBlog .chapeu{ font-size:11px; padding:4px 8px; margin-bottom:9px; letter-spacing:1.3px; }
.linhaBlog__titulo{
  font-family:'Ubuntu','Open Sans',system-ui,sans-serif;
  font-size:21px; font-weight:700; line-height:1.24; color:#000;
  margin:0 0 9px;
}
.linhaBlog__link:hover .linhaBlog__titulo{ color:#3a3a34; }
.linhaBlog__linhaFina{
  margin:0 0 10px; font-size:14.5px; line-height:1.55; color:#5a5a52;
}

/* ---------- quando não há nada para mostrar ---------- */
.blogVazio{ padding:70px 0; text-align:center; }
.blogVazio p{ margin:0 0 18px; font-size:16px; color:#5a5a52; }
.blogVazio__link{
  display:inline-block; background:#feec34; color:#000; text-decoration:none;
  font-size:14px; font-weight:700; padding:14px 26px; border-radius:30px;
  border:3px solid #feec34;
}
.blogVazio__link:hover{ background:transparent; }

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */
@media (max-width:980px){
  .manchete{ -ms-flex:1 1 100%; flex:1 1 100%; padding:0 0 30px; }
  .apoio{
    -ms-flex:1 1 100%; flex:1 1 100%;
    padding:24px 0 0; border-left:0; border-top:3px solid #000;
  }
  .chamada__foto{ -ms-flex:0 0 132px; flex:0 0 132px; height:88px; }
  .manchete__titulo{ font-size:34px; }
  .linhaBlog__foto{ -ms-flex:0 0 190px; flex:0 0 190px; height:107px; }
  .linhaBlog__titulo{ font-size:19px; }
}

@media (max-width:640px){
  .blog{ padding:0 16px 54px; }
  .blogCab{ padding:32px 0 15px; }
  .blogCab__titulo{ font-size:34px; }
  .blogCab__frase{ font-size:14px; }
  .editorias{ margin-bottom:26px; }
  .editorias__item{ padding:13px 13px; font-size:13px; }

  .topoBlog{ margin-bottom:34px; }
  .manchete__foto{ margin-bottom:14px; }
  .manchete__titulo{ font-size:27px; line-height:1.1; }
  .manchete__linhaFina{ font-size:15px; }

  .chamada__link{ -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; }
  .chamada__foto{ -ms-flex:0 0 104px; flex:0 0 104px; height:70px; margin-right:12px; }
  .chamada__titulo{ font-size:15px; }

  .listaBlog__cab{ font-size:19px; }
  .linhaBlog__link{
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    padding:20px 0;
  }
  .linhaBlog__foto{
    -ms-flex:0 0 auto; flex:0 0 auto;
    width:100%; height:auto; margin:0 0 13px;
  }
  .linhaBlog__foto::before{ content:''; display:block; padding-top:56.25%; }
  .linhaBlog__foto{ position:relative; }
  .linhaBlog__foto img{ position:absolute; top:0; left:0; }
  .linhaBlog__titulo{ font-size:18px; }
  .linhaBlog__linhaFina{ font-size:14px; }
}