/* materia.css: a página do episódio como matéria longa: a abertura, a coluna lateral (player e guias), a transcrição como corpo e o "continue".
   Depende de: css/base.css antes dele (cores, letras, guias, player, onde ouvir, linhas). */

/* ---------------------------------------------------------------- telefone: abertura, player, guias e uma parte por vez */

.materia { padding-top: 18px; }

/* ---------- a abertura */

.materia__abertura { display: grid; gap: 12px; }
.materia__arquivo { color: inherit; text-decoration: none; }
.materia__arquivo:hover { color: var(--vermelho-escuro); text-decoration: underline; }

.materia__titulo {
  font: 500 36px/1.04 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* número, data e duração numa linha só, e quem assina */
.materia__ficha {
  display: grid;
  gap: 12px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--fio);
}
.materia__meta {
  display: flex;
  flex-wrap: wrap;
  font: 700 13.5px/1.3 var(--sem-serifa);
  font-variant-numeric: tabular-nums;
}
.materia__meta > * + *::before { content: "·"; margin: 0 8px; color: var(--tinta-fraca); font-weight: 400; }
.materia__data-longa { display: none; }

.materia__assinaturas { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.assinatura { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.assinatura__texto { display: grid; gap: 2px; }
.assinatura__nome {
  font: 800 12.5px/1.2 var(--sem-serifa);
  font-stretch: 85%;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.assinatura:hover .assinatura__nome { color: var(--vermelho); }
.assinatura__papel { font: italic 400 15px/1.25 var(--serifa); color: var(--tinta-fraca); }

/* onde ouvir fica depois das partes, junto do anterior e do próximo: no telefone o player sobe pra primeira tela */
.materia__ouvir { margin-top: 30px; }

/* ---------- a coluna lateral: player, a nota de quem não tem áudio, guias e partes */

.materia__lateral { display: grid; gap: 16px; margin-top: 20px; }

.nota {
  padding: 14px 16px;
  border-left: 3px solid var(--vermelho);
  background: var(--papel-claro);
  font: 400 16px/1.45 var(--serifa);
}
.nota__rotulo {
  display: block;
  margin-bottom: 4px;
  font: 700 11.5px/1.3 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermelho);
}
.nota a { font-weight: 600; color: var(--vermelho); }

.materia__guias { margin-top: 4px; }

/* ---------- capítulos */

.capitulo__botao {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--fio);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.capitulo__botao:hover { background: var(--papel-claro); }
.capitulo__tempo { font: 700 13px/1.2 var(--sem-serifa); font-variant-numeric: tabular-nums; color: var(--vermelho); }
.capitulo__titulo { font: 500 17px/1.3 var(--serifa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capitulo[data-agora] .capitulo__botao { background: var(--vermelho-claro); }
.capitulo[data-agora] .capitulo__titulo { font-weight: 700; }

/* ---------- links citados */

.citados > li + li { border-top: 1px solid var(--fio); }
.citado { display: grid; gap: 2px; padding: 11px 2px; text-decoration: none; }
.citado__tipo { font: 700 11px/1.3 var(--sem-serifa); font-stretch: 82%; letter-spacing: .14em; text-transform: uppercase; color: var(--vermelho); }
.citado__titulo { font: 500 17px/1.3 var(--serifa); text-decoration: underline; text-decoration-color: var(--fio); text-underline-offset: .2em; }
.citado:hover .citado__titulo { color: var(--vermelho); text-decoration-color: currentColor; }
.citado__fonte { font: 500 12.5px/1.3 var(--sem-serifa); color: var(--tinta-fraca); }
.citado__fonte::after { content: " ↗"; }

/* ---------- créditos */

.credito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fio);
}
.credito__funcao { font: 700 11.5px/1.4 var(--sem-serifa); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
.credito__nome { font: 400 16px/1.35 var(--serifa); }

/* ---------- a transcrição: no telefone, caixa com rolagem própria que acompanha o áudio */

.transcricao__dica { padding: 10px 0 8px; font: 500 13px/1.3 var(--sem-serifa); color: var(--tinta-fraca); }

/* as sombras de cima e de baixo só aparecem quando há texto escondido pra aquele lado */
.transcricao__texto {
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  background:
    linear-gradient(var(--papel) 30%, rgba(243, 237, 226, 0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(243, 237, 226, 0), var(--papel) 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(28, 25, 21, .18), transparent) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(28, 25, 21, .18), transparent) center bottom / 100% 10px no-repeat scroll;
  background-color: var(--papel);
}

.fala {
  padding: 10px 6px;
  border-radius: var(--raio);
  font: 400 17px/1.55 var(--serifa);
  cursor: pointer;
  transition: background-color .2s;
}
.fala:hover { background-color: rgba(28, 25, 21, .045); }
.fala[data-agora] { background-color: var(--vermelho-claro); }
.fala__tempo {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--papel-claro);
  color: var(--vermelho);
  font: 700 12px/1.4 var(--sem-serifa);
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
  cursor: pointer;
}
.transcricao__fim { display: none; }

/* ---------- continue: anterior, próximo e os da mesma seção */

.continue { display: grid; gap: 24px; margin-top: 28px; }
.vizinhos { display: flex; flex-direction: column; gap: 10px; }
.vizinho {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio);
  background: var(--papel-claro);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.vizinho:hover { background: var(--tinta); color: var(--papel); }
.vizinho__rotulo { font: 700 11.5px/1.3 var(--sem-serifa); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; color: var(--vermelho); }
.vizinho:hover .vizinho__rotulo { color: inherit; }
.vizinho__titulo { font: 600 17px/1.3 var(--serifa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesma-secao { display: grid; gap: 4px; }

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

@media (min-width: 900px) {
  /* duas colunas: a matéria (abertura, transcrição e continue) e a lateral fixa, que acompanha a leitura */
  .materia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas:
      "abertura lateral"
      "ouvir    lateral"
      "leitura  lateral"
      "continue lateral";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 56px;
    align-items: start;
    padding-top: 30px;
  }

  .materia__abertura { grid-area: abertura; gap: 14px; }
  .materia__titulo { font-size: 56px; line-height: 1.02; }
  .materia__linha-fina { font-size: 22px; line-height: 1.4; max-width: 34em; }
  .materia__ficha { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 4px; }
  .materia__data-curta { display: none; }
  .materia__data-longa { display: inline; }

  /* onde ouvir numa faixa só, logo embaixo da abertura: o nome, as três e o "mais opções" */
  .materia__ouvir { grid-area: ouvir; display: flex; align-items: center; gap: 10px; margin-top: 16px; }
  .materia__ouvir .onde-ouvir__topo { display: contents; }
  .materia__ouvir .onde-ouvir__titulo { flex: none; max-width: 8em; margin-right: 4px; }
  .materia__ouvir .plataformas { flex: 1 1 auto; }
  .materia__ouvir .plataforma { min-height: 42px; }
  .materia__ouvir .onde-ouvir__mais { order: 2; min-height: 42px; }

  /* a lateral nunca passa da altura da tela: player e guias ficam, e se a parte aberta
     for maior que o espaço, só ela rola por dentro */
  .materia__lateral {
    grid-area: lateral;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 32px);
    margin-top: 0;
  }
  .materia__lateral > * { flex: none; }
  .materia__lateral > [data-painel] { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .materia__guias { margin-top: 2px; }
  .guias__guia--so-telefone { display: none; }
  .capitulo__botao { min-height: 34px; padding: 6px 6px; }
  .capitulo__titulo { font-size: 16px; }
  .citado { padding: 9px 2px; }

  /* no computador a transcrição é o corpo da matéria: sempre à vista, a página rola com ela,
     e o tempo de cada trecho fica pendurado na margem */
  .materia__leitura { grid-area: leitura; margin-top: 40px; padding-left: 118px; }
  .materia [data-painel="transcricao"]:not([data-ativa]) { display: block; }
  .materia[data-abas] .transcricao__titulo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .transcricao__dica { padding: 8px 0 26px; font-size: 13.5px; }
  .transcricao__texto { max-height: none; overflow: visible; border: 0; background: none; }

  .fala {
    position: relative;
    max-width: 68ch;
    margin: 0 0 1.05em;
    padding: 0;
    border-radius: 0;
    font-size: 19.5px;
    line-height: 1.62;
  }
  .fala:hover { background: none; }
  .fala__tempo {
    position: absolute;
    left: -118px;
    top: .3em;
    width: 84px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinta-fraca);
    font-size: 13px;
    text-align: right;
  }
  .fala:hover .fala__tempo { color: var(--vermelho); }
  .fala[data-agora] { background: none; }
  .fala[data-agora]::before {
    content: "";
    position: absolute;
    left: -20px;
    top: .3em;
    bottom: .3em;
    width: 3px;
    background: var(--vermelho);
  }
  .fala[data-agora] .fala__tempo { color: var(--vermelho); font-weight: 800; }

  /* o quadradinho vermelho que fecha a matéria */
  .transcricao__fim { display: block; margin-top: -.2em; }
  .transcricao__fim::before { content: ""; display: inline-block; width: 11px; height: 11px; background: var(--vermelho); }

  .continue {
    grid-area: continue;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 40px;
    margin-top: 48px;
    padding-top: 18px;
    border-top: 3px solid var(--tinta);
  }
}