/* capa.css: o início da versão Revista, montado como capa: a matéria de capa, o sumário, "para começar", as seções e quem faz.
   Depende de: css/base.css antes dele (cores, letras, guias, player, onde ouvir). */

/* ---------------------------------------------------------------- telefone: a capa e, embaixo, as guias */

.capa { display: grid; gap: 22px; padding-top: 16px; }

/* ---------- a arte: anéis de sinal saindo de um ponto vermelho, e o número do episódio recortado em papel */

.arte {
  --arte-x: 0%;
  --arte-y: 100%;
  --arte-ponto: 15px;
  --arte-passo: 26px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1.5px solid var(--tinta);
  background-color: var(--papel-claro);
  background-image:
    radial-gradient(circle at var(--arte-x) var(--arte-y), var(--vermelho) 0 var(--arte-ponto), transparent calc(var(--arte-ponto) + 1px)),
    repeating-radial-gradient(circle at var(--arte-x) var(--arte-y), transparent 0 calc(var(--arte-passo) - 2px), var(--tinta) calc(var(--arte-passo) - 2px) var(--arte-passo));
}
.arte__numero {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 0 .1em;
  background: var(--papel-claro);
  color: var(--vermelho);
  font: italic 500 76px/.92 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.04em;
}
.arte--capa { --arte-x: 11%; --arte-y: 76%; --arte-ponto: 13px; --arte-passo: 22px; height: 84px; }
.arte--capa .arte__numero { bottom: 6px; font-size: 64px; }

/* ---------- a matéria de capa */

.materia-de-capa { display: grid; gap: 14px; }

.materia-de-capa__titulo {
  font: 500 38px/1.03 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.materia-de-capa__titulo a { text-decoration: none; }
.materia-de-capa__titulo a:hover { color: var(--vermelho); }

.materia-de-capa__meta {
  display: flex;
  flex-wrap: wrap;
  font: 600 13px/1.4 var(--sem-serifa);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fraca);
}
.materia-de-capa__meta > * + *::before { content: "·"; margin: 0 8px; }

/* o player da capa mora no papel: só troca as cores da caixa de tinta */
.tocador--capa {
  --tocador-fundo: transparent;
  --tocador-texto: var(--tinta);
  --tocador-fraco: var(--tinta-fraca);
  --tocador-borda: var(--tinta-fraca);
  --tocador-trilho: var(--fio);
  --tocador-cheio: var(--vermelho);
  padding: 12px 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  border-radius: 0;
}
.tocador--capa .tocador__controles { gap: 8px; }
.tocador__meio { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

.materia-de-capa__leia { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ---------- as guias da capa: três, em partes iguais */

.capa__guias { margin-top: 6px; }
.capa__guias .guias__guia { flex: 1 1 0; }

/* no telefone a guia já diz o nome da parte */
.capa__titulo-de-parte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- sumário: os anteriores, numerados */

.sumario__item + .sumario__item { border-top: 1px solid var(--fio); }
.sumario__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  text-decoration: none;
}
.sumario__numero {
  font: italic 500 34px/1 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.03em;
  color: var(--vermelho);
}
.sumario__texto { display: grid; gap: 4px; min-width: 0; }
.sumario__titulo { font: 600 19px/1.25 var(--serifa); }
.sumario__link:hover .sumario__titulo { color: var(--vermelho); }
.sumario__resumo {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 400 15.5px/1.4 var(--serifa);
  color: var(--tinta-fraca);
}
.sumario__meta { font: 600 12.5px/1.3 var(--sem-serifa); font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }
.sumario__todos { margin-top: 4px; }

/* ---------- para começar */

.comece__item + .comece__item { border-top: 1px solid var(--fio); }
.comece__link {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  row-gap: 3px;
  padding: 14px 0;
  text-decoration: none;
}
.comece__link .arte { grid-row: 1 / -1; height: 88px; --arte-ponto: 8px; --arte-passo: 13px; }
.comece__link .arte__numero { right: 4px; bottom: 4px; font-size: 40px; }
.comece__item:nth-child(3n+1) .arte { --arte-x: 0%; --arte-y: 100%; }
.comece__item:nth-child(3n+2) .arte { --arte-x: 100%; --arte-y: 0%; }
.comece__item:nth-child(3n+2) .arte__numero { right: auto; left: 4px; }
.comece__item:nth-child(3n+3) .arte { --arte-x: 50%; --arte-y: 0%; }
.comece__secao { font: 700 11.5px/1.3 var(--sem-serifa); font-stretch: 82%; letter-spacing: .14em; text-transform: uppercase; color: var(--vermelho); }
.comece__titulo { font: 600 19px/1.25 var(--serifa); }
.comece__link:hover .comece__titulo { color: var(--vermelho); }
/* encostada em cima: esticada pela grade, a caixa mostraria um pedaço da terceira linha */
.comece__resumo {
  align-self: start;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 400 15.5px/1.4 var(--serifa);
  color: var(--tinta-fraca);
}
.comece__meta { font: 600 12.5px/1.3 var(--sem-serifa); font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }

/* ---------- seções: os temas como seções da revista, numeradas */

.secoes__lista { counter-reset: secao; }
.secoes__item { counter-increment: secao; }
.secoes__item + .secoes__item { border-top: 1px solid var(--fio); }
.secao {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding: 12px 0;
  text-decoration: none;
}
.secao::before {
  content: counter(secao, decimal-leading-zero);
  font: 700 13px/1 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .1em;
  color: var(--vermelho);
}
.secao__nome { font: 600 19px/1.25 var(--serifa); }
.secao:hover .secao__nome { color: var(--vermelho); }
.secao__quantos { font: 600 13px/1.2 var(--sem-serifa); color: var(--tinta-fraca); white-space: nowrap; }

/* ---------- quem faz */

.quem-faz { display: grid; gap: 12px; }
.pessoa {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  text-decoration: none;
}
.avatar--medio { width: 64px; height: 64px; font-size: 32px; }
.pessoa__texto { display: grid; gap: 2px; }
.pessoa__nome { font: 600 21px/1.2 var(--serifa); }
.pessoa:hover .pessoa__nome { color: var(--vermelho); }
.pessoa__papel { font: 700 12px/1.3 var(--sem-serifa); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--vermelho); }
.pessoa__bio {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  font: 400 15.5px/1.45 var(--serifa);
  color: var(--tinta-media);
}

/* ---------------------------------------------------------------- computador */

@media (min-width: 900px) {
  /* a capa numa grade de doze: a matéria à esquerda e o sumário à direita, como a capa e o índice
     lado a lado; embaixo, "para começar" na largura toda, e as seções ao lado de quem faz */
  .capa {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "materia materia materia materia materia materia materia materia sumario sumario sumario sumario"
      "comece  comece  comece  comece  comece  comece  comece  comece  comece  comece  comece  comece"
      "secoes  secoes  secoes  secoes  secoes  secoes  secoes  secoes  quem    quem    quem    quem";
    column-gap: 32px;
    row-gap: 52px;
    padding-top: 26px;
  }

  .capa__guias { display: none; }
  .capa [data-painel]:not([data-ativa]) { display: block; }
  .capa__titulo-de-parte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }

  .materia-de-capa {
    grid-area: materia;
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-areas:
      "chapeu  chapeu"
      "titulo  titulo"
      "fina    arte"
      "meta    arte"
      "tocador arte"
      "leia    arte"
      "ouvir   ouvir";
    column-gap: 28px;
    row-gap: 12px;
    align-content: start;
    padding-right: 32px;
    border-right: 1px solid var(--tinta);
  }
  .materia-de-capa__chapeu { grid-area: chapeu; }
  .materia-de-capa__titulo { grid-area: titulo; font-size: 60px; line-height: 1.02; margin-bottom: 6px; }
  .materia-de-capa__linha-fina { grid-area: fina; font-size: 21px; }
  .materia-de-capa__meta { grid-area: meta; }
  .tocador--capa { grid-area: tocador; }
  .materia-de-capa__leia { grid-area: leia; }
  .materia-de-capa__ouvir { grid-area: ouvir; margin-top: 8px; }
  .arte--capa { grid-area: arte; height: auto; --arte-x: 24%; --arte-y: 84%; --arte-ponto: 20px; --arte-passo: 30px; }
  .arte--capa .arte__numero { top: 12px; right: 12px; bottom: auto; font-size: 140px; }

  .sumario { grid-area: sumario; }
  .sumario__lista { margin-top: 4px; }
  .sumario__link { padding: 12px 0; }

  .comece { grid-area: comece; }
  .comece__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 18px; }
  .comece__item + .comece__item { border-top: 0; }
  .comece__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 6px; padding: 0; }
  .comece__link .arte { grid-row: auto; height: 150px; margin-bottom: 8px; --arte-ponto: 12px; --arte-passo: 20px; }
  .comece__link .arte__numero { font-size: 84px; right: 8px; bottom: 6px; }
  .comece__item:nth-child(3n+2) .arte__numero { left: 8px; }
  .comece__titulo { font-size: 22px; }
  .comece__resumo { -webkit-line-clamp: 3; font-size: 16px; }

  .secoes { grid-area: secoes; }
  .secoes__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 6px; }
  .secoes__item + .secoes__item { border-top: 0; }
  .secoes__item { border-bottom: 1px solid var(--fio); }
  .secao { min-height: 64px; }
  .secao__nome { font-size: 22px; }

  .quem-faz { grid-area: quem; align-content: start; }
  .pessoa { grid-template-columns: 76px minmax(0, 1fr); margin-top: 8px; }
  .avatar--medio { width: 76px; height: 76px; font-size: 38px; }
}