/* episodio.css: a página de um episódio. No alto, a faixa escura com o número enorme em contorno e o título em
   Anton; o player largo logo abaixo; depois o corpo: no computador, os capítulos numa fileira de cartões numerados
   (5 por linha), o resumo à esquerda com os quatro primeiros trechos da transcrição à direita, os links citados
   num cartão e quem participa com o nome em Anton. No telefone, capítulos, transcrição, links e quem faz viram
   abas (o resumo fica fora delas, sempre à vista). Embaixo, anterior e próximo e os do mesmo tema.
   Depende de: base.css, cartao-ep.css e tocador.css. Telefone nas regras soltas, computador no @media do fim. */

/* ------------------------------------------------------------ a faixa do alto */

.ep-faixa { position: relative; overflow: hidden; padding: 36px 0 32px; background: var(--cartao); border-bottom: 1px solid var(--linha); }

.ep-faixa__dentro { position: relative; }

/* o número enorme, só o contorno, atrás do título; no telefone ele passa por baixo do título, então fica mais apagado */
.ep-faixa__numero {
  position: absolute; right: -6px; top: -28px; z-index: 0;
  font-family: var(--letra-titulo); font-size: 170px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 240, .16); user-select: none; pointer-events: none;
}

.ep-faixa__texto { position: relative; z-index: 1; display: grid; gap: 14px; }

.ep-faixa__rotulo { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }

.ep-faixa__titulo { font-size: 42px; max-width: 18ch; }

.ep-faixa__com { color: var(--texto-suave); }

.ep-faixa__temas { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------ o player largo */

.ep-tocador { padding-top: 24px; }

/* ------------------------------------------------------------ o corpo */

.ep-corpo { padding-top: 32px; }

.ep-resumo { display: grid; gap: 14px; align-content: start; }

.ep-resumo__texto { font-size: 17px; line-height: 1.6; }

.ep-resumo__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* as abas do telefone: quatro botões que cabem na largura */
.abas {
  display: flex; gap: 4px; margin: 32px 0 20px; padding: 4px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--cartao);
}

.abas button {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px; overflow: hidden;
  border: 0; border-radius: 3px; background: none; color: var(--texto-suave);
  font-family: var(--letra-titulo); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.abas button[data-ativa] { background: var(--laranja); color: var(--tinta-no-laranja); }

.painel { display: grid; gap: 16px; align-content: start; }

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

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

.capitulos { display: grid; gap: 8px; counter-reset: capitulo; }

.capitulo { counter-increment: capitulo; }

.capitulo__botao {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; width: 100%; height: 100%; padding: 14px 16px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--texto); text-align: left;
}
.capitulo__botao:hover { background: var(--cartao-alto); border-color: var(--linha-clara); }

.capitulo__botao::before {
  content: counter(capitulo, decimal-leading-zero); grid-row: 1 / 3;
  font-family: var(--letra-titulo); font-size: 30px; line-height: 1; color: var(--texto-suave);
}

.capitulo__tempo { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

.capitulo__titulo { font-size: 15px; font-weight: 600; line-height: 1.3; }

.capitulo[data-agora] .capitulo__botao { border-color: var(--laranja); }
.capitulo[data-agora] .capitulo__botao::before { color: var(--laranja); }

/* ------------------------------------------------------------ transcrição */

.falas { display: grid; }

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

.fala__tempo {
  align-self: start; padding: 4px 9px; border: 1px solid var(--linha); border-radius: 999px; background: none;
  color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums;
}
.fala__tempo:hover { border-color: var(--linha-clara); color: var(--texto); }

.fala__texto { font-size: 15px; color: var(--texto-suave); }

.fala[data-agora] .fala__tempo { background: var(--laranja); border-color: var(--laranja); color: var(--tinta-no-laranja); }
.fala[data-agora] .fala__texto { color: var(--texto); }

.ep-transcricao .botao { justify-self: start; }

.transcricao-janela .fala:first-child { border-top: 0; }

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

.citados {
  display: grid; gap: 16px; align-content: start; padding: 24px 20px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao);
}

.citados__lista { display: grid; gap: 14px; counter-reset: citado; }

.citado { counter-increment: citado; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }

.citado::before {
  content: counter(citado, decimal-leading-zero); grid-row: 1 / 3;
  font-family: var(--letra-titulo); font-size: 24px; line-height: 1.1; color: var(--texto-suave);
}

.citado a { font-weight: 600; overflow-wrap: anywhere; }

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

/* ------------------------------------------------------------ quem participa */

.quem-lista { display: grid; gap: 20px; }

.quem { display: grid; gap: 8px; }

.quem__nome { font-size: 36px; }

.quem__papel { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

.quem__bio { color: var(--texto-suave); }

.creditos { display: grid; gap: 6px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--texto-suave); }

.credito__funcao { color: var(--texto-fraco); }
.credito__funcao::after { content: ": "; }

/* ------------------------------------------------------------ anterior, próximo e do mesmo tema */

.outros { padding-top: 56px; }

.vizinhos { display: grid; gap: 12px; }

.vizinho__link {
  display: grid; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); text-decoration: none;
}
.vizinho__link:hover { background: var(--cartao-alto); border-color: var(--linha-clara); }

.vizinho__lado { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
[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-weight: 600; }

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

@media (min-width: 900px) {
  .ep-faixa { padding: 56px 0 48px; }
  .ep-faixa__numero { right: 0; top: -40px; font-size: 300px; -webkit-text-stroke: 3px var(--linha-clara); }
  .ep-faixa__titulo { font-size: 72px; }
  .ep-faixa__com { font-size: 18px; }
  .ep-tocador { padding-top: 32px; }

  /* o corpo em duas colunas; os capítulos tomam a linha inteira e vêm primeiro */
  .ep-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px 48px; padding-top: 56px; }
  .abas { display: none; }
  .ep-corpo [data-painel]:not([data-ativa]) { display: grid; }
  .ep-capitulos { grid-column: 1 / -1; order: 1; }
  .ep-resumo { order: 2; }
  .ep-transcricao { order: 3; }
  .ep-links { order: 4; }
  .ep-quem { order: 5; }

  .ep-resumo__texto { font-size: 19px; }
  .capitulos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .capitulo__botao { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 18px; }
  .capitulo__botao::before { grid-row: auto; margin-bottom: 6px; font-size: 44px; }
  .fala { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 0; }
  .fala__texto { font-size: 16px; }
  .citados { padding: 28px; }
  .quem__nome { font-size: 44px; }
  .outros { padding-top: 88px; }
  .vizinhos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-lado="proximo"] { grid-column: 2; }
  .do-tema { margin-top: 64px; }
}