/* Teste de hero editorial: capa do artigo 11 em tela cheia, com a caixa do título sobre a borda
   inferior da imagem. A altura da imagem é calculada para que a caixa inteira caiba na primeira
   dobra (o cabeçalho sai da conta). Resumo e data ficam abaixo da dobra. Só vale para
   index-editorial.html; não altera estilo.css. */

.capa-editorial { position: relative; margin: 0; }

.capa-editorial__imagem {
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* cabeçalho (~112px) + metade da caixa (~130px) saem da altura da tela */
  height: clamp(280px, calc(100svh - 340px), 56rem);
  overflow: hidden;
}
.capa-editorial__imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.capa-editorial__texto {
  position: relative;
  max-width: 52rem;
  margin: -4rem var(--esp-5) 0;
  padding: var(--esp-5);
  background: var(--fundo);
  border: var(--filete-fino) solid var(--filete);
}

/* nó do fio: no centro da borda inferior da caixa, onde a linha animada começa */
.capa-editorial__no {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.capa-editorial__rotulo { margin-top: 0; }
.capa-editorial__contador { font-variant-numeric: tabular-nums; color: var(--acento); }

.capa-editorial__titulo {
  font-variation-settings: var(--eixos-exibicao);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: var(--peso-medio);
  line-height: 1.06;
  letter-spacing: var(--tracking-titulo);
  margin-top: var(--esp-2);
  text-wrap: balance;
}
.capa-editorial__titulo a { color: inherit; text-decoration: none; }
.capa-editorial__titulo a:hover, .capa-editorial__titulo a:focus-visible { text-decoration: underline; text-decoration-thickness: var(--filete-medio); text-underline-offset: 0.15em; }

.capa-editorial__lede { margin: var(--esp-5) var(--esp-5) 0; max-width: 46rem; font-size: var(--escala-400); line-height: var(--entrelinha-corpo); }
.capa-editorial > .meta { margin: var(--esp-3) var(--esp-5) 0; }

@media (max-width: 47.99rem) {
  /* no celular o cabeçalho ocupa mais altura (duas linhas de menu) */
  .capa-editorial__imagem { height: clamp(240px, calc(100svh - 430px), 40rem); }
  .capa-editorial__texto { margin: -3rem var(--esp-4) 0; padding: var(--esp-4); }
  /* no celular o fio sai um pouco à direita da borda esquerda: a curva desce suave até o artigo 10 */
  .capa-editorial__no { left: calc(var(--esp-4) + 2.5rem); }
  .capa-editorial__titulo { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .capa-editorial__lede, .capa-editorial > .meta { margin-inline: var(--esp-4); }
}

/* a data fica dentro da caixa, abaixo do título; o resumo saiu da página */
.capa-editorial__texto .meta { margin-top: var(--esp-4); }