/* episodio.css: a página de um episódio, como uma matéria de revista. No alto, em off-white: o número e a data, o
   título enorme em itálico, o player logo abaixo e, em duas colunas, o resumo com os temas (à esquerda) e o
   "Ouça no" (à direita, depois de um fio). Embaixo, em faixas que revezam branco e off-white, cada uma aberta por um
   fio e com o título na coluna da margem: capítulos, o começo da transcrição, os links citados e quem participa;
   no telefone essas quatro viram abas, todas no branco (uma de cada vez, não há o que revezar). Depois
   compartilhar, anterior e próximo e do mesmo tema.
   Depende de: base.css, palavras.css, cartao-ep.css, tocador.css e assine.css. Telefone nas regras soltas,
   computador no @media do fim. */

/* ------------------------------------------------------------ o alto */

.ep-topo { padding: 28px 0 44px; }

.ep-cabeca { text-align: center; }

.ep-cabeca__numero { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.ep-cabeca__titulo { margin-top: 16px; font-size: 40px; font-style: italic; font-weight: 500; line-height: 1.02; }

.ep-cabeca__com { margin-top: 16px; font-family: var(--letra-titulo); font-size: 20px; font-style: italic; color: var(--cinza); }

.ep-midia { margin-top: 28px; }

.ep-texto { display: grid; gap: 28px; margin-top: 28px; }

.ep-texto__lead { font-family: var(--letra-titulo); font-size: 24px; font-weight: 500; line-height: 1.3; }

.ep-texto__meta { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza); }

.ep-texto__temas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }

.ep-ouvir { padding-top: 22px; border-top: 1px solid var(--fio); }

.ep-ouvir__titulo { margin-bottom: 14px; font-size: 24px; font-style: italic; font-weight: 500; }

.ep-ouvir .selos { grid-template-columns: 1fr 1fr; justify-content: start; gap: 8px; }
.ep-ouvir .selo { min-height: 50px; padding: 0 10px; gap: 8px; }
.ep-ouvir .selo__icone { width: 26px; height: 26px; }
.ep-ouvir .selo__chamada { display: none; }
.ep-ouvir .selo__nome { font-size: 15px; white-space: normal; }

.ep-ouvir .assine__mais { margin-top: 14px; }

/* ------------------------------------------------------------ as abas do telefone */

.ep-abas__barra { padding-top: 24px; background: var(--branco); }

.abas-telefone { display: flex; border-bottom: 1px solid var(--fio); }

.abas-telefone button {
  flex: 1 1 auto; min-height: 44px; margin-bottom: -1px; padding: 0 4px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--cinza);
  font-size: 14px; font-weight: 600;
}
.abas-telefone button[data-ativa] { border-bottom-color: var(--preto); color: var(--preto); }

.ep-abas [data-painel]:not([data-ativa]) { display: none; }

/* ------------------------------------------------------------ as faixas de baixo */

.faixa { padding: 36px 0 44px; }

.faixa__dentro { display: grid; gap: 20px; }

/* o lado do conteúdo, quando a faixa tem mais de uma peça (a transcrição e o botão de ler inteira) */
.faixa__conteudo { display: grid; gap: 16px; }

/* capítulos: o número em itálico, o título e o tempo, cada um entre fios */
.capitulos-grade { display: grid; counter-reset: capitulo; border-top: 1px solid var(--fio); }

.capitulo { counter-increment: capitulo; border-bottom: 1px solid var(--fio); }

.capitulo__botao {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 12px;
  width: 100%; padding: 13px 0; border: 0; background: none; text-align: left;
}

.capitulo__numero { font-family: var(--letra-titulo); font-size: 21px; font-style: italic; font-weight: 500; line-height: 1; color: var(--cinza); }
.capitulo__numero::before { content: counter(capitulo, decimal-leading-zero); }

.capitulo__titulo { font-size: 15px; font-weight: 500; line-height: 1.35; }

.capitulo__botao:hover .capitulo__titulo { text-decoration: underline; text-underline-offset: 3px; }

.capitulo__tempo { padding: 1px 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.capitulo[data-agora] .capitulo__numero { color: var(--preto); }
.capitulo[data-agora] .capitulo__tempo { background: var(--preto); color: var(--branco); }

/* transcrição: o começo à vista; a inteira abre na janela */
.transcricao__lista { display: grid; border-top: 1px solid var(--fio); }

.fala { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha); }

.fala__tempo {
  align-self: start; justify-self: start; padding: 2px 6px; border: 0; background: none;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--cinza-claro); text-underline-offset: 3px;
}
.fala[data-agora] .fala__tempo { background: var(--preto); color: var(--branco); text-decoration: none; }
.fala[data-agora] .fala__texto { color: var(--preto); }

.fala__texto { color: var(--cinza); font-size: 16px; }

.transcricao__mais { justify-self: start; margin-top: 4px; }

.transcricao-janela .transcricao__lista { border-top: 0; }
.transcricao-janela .fala { grid-template-columns: 56px minmax(0, 1fr); }

/* links citados: notas numeradas entre fios */
.citados__lista { display: grid; counter-reset: citado; border-top: 1px solid var(--fio); }

.citado {
  counter-increment: citado; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px;
  padding: 14px 0; border-bottom: 1px solid var(--fio);
}
.citado::before {
  content: counter(citado, decimal-leading-zero); grid-row: span 2;
  font-family: var(--letra-titulo); font-size: 21px; font-style: italic; font-weight: 500; line-height: 1.1; color: var(--cinza);
}

.citado a { font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }

.citado__fonte { font-size: 13px; color: var(--cinza); }

/* quem participa e os créditos */
.quem { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fio); }

.quem__nome { font-size: 36px; font-style: italic; font-weight: 500; }

.quem__bio { color: var(--cinza); }

.creditos { display: grid; margin-top: 28px; border-top: 1px solid var(--fio); font-size: 15px; }

.creditos li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }

.credito__funcao { color: var(--cinza); }

/* ------------------------------------------------------------ compartilhe, vizinhos e do mesmo tema */

.compartilhe { padding: 48px 0 40px; border-top: 1px solid var(--fio); text-align: center; }

.compartilhe__titulo { margin-bottom: 20px; font-size: 34px; font-style: italic; font-weight: 500; }

.vizinhos { display: grid; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }

.vizinho + .vizinho { border-top: 1px solid var(--fio); }

.vizinho__link { display: grid; gap: 6px; padding: 18px 0; text-decoration: none; }

.vizinho__lado { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza); }
[data-lado="anterior"] .vizinho__lado::before { content: "← "; }
[data-lado="proximo"] .vizinho__lado::after { content: " →"; }
[data-lado="proximo"] .vizinho__link { text-align: right; }

.vizinho__titulo { font-family: var(--letra-titulo); font-size: 23px; font-weight: 600; line-height: 1.12; }

.vizinho__link:hover .vizinho__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.outros { padding: 8px 0 56px; }

.do-tema { margin-top: 48px; }

.do-tema .sobretitulo--grande { margin-bottom: 18px; }

@media (min-width: 900px) {
  .ep-topo { padding: 64px 0 80px; }
  .ep-cabeca__titulo { font-size: 72px; line-height: 1; }
  .ep-cabeca__com { font-size: 24px; }
  .ep-midia { margin-top: 48px; }
  .ep-texto { grid-template-columns: minmax(0, 1fr) 290px; gap: 0; margin-top: 48px; }
  .ep-texto__principal { padding-right: 48px; }
  .ep-texto__lead { font-size: 30px; }
  .ep-ouvir { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--fio); }
  .ep-ouvir .selos { grid-template-columns: 1fr; gap: 8px; }
  .ep-ouvir .selo { min-height: 56px; padding: 0 14px; gap: 12px; }
  .ep-ouvir .selo__icone { width: 30px; height: 30px; }
  .ep-ouvir .selo__chamada { display: block; }
  .ep-ouvir .selo__nome { font-size: 18px; white-space: nowrap; }

  .ep-abas__barra { display: none; }
  .ep-abas [data-painel]:not([data-ativa]) { display: block; }
  .ep-abas [data-painel][hidden] { display: none; }

  .faixa { padding: 72px 0 88px; border-top: 1px solid var(--fio); }
  .faixa--off { background: var(--off); }
  .faixa__dentro { grid-template-columns: 220px minmax(0, 1fr); gap: 0 56px; }
  .capitulos-grade { grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .capitulo__titulo { font-size: 16px; }
  .transcricao__lista { max-width: 720px; }
  .fala { grid-template-columns: 84px minmax(0, 1fr); padding: 20px 0; }
  .fala__texto { font-size: 17px; }
  .citados__lista { max-width: 720px; }
  .citado { padding: 18px 0; }
  .quem__dentro { max-width: 720px; }
  .quem__nome { font-size: 44px; }
  .compartilhe { padding: 72px 0 48px; }
  .compartilhe__titulo { font-size: 48px; }
  .outros { padding: 16px 0 96px; }
  .vizinhos { grid-template-columns: 1fr 1fr; }
  .vizinho + .vizinho { border-top: 0; }
  .vizinho__link { padding: 26px 32px 28px 0; }
  [data-lado="proximo"] { grid-column: 2; border-left: 1px solid var(--fio); }
  [data-lado="proximo"] .vizinho__link { padding: 26px 0 28px 32px; }
  .vizinho__titulo { font-size: 28px; }
  .do-tema { margin-top: 64px; }
}