/* episodio.css: a página de um episódio, como uma matéria de revista. No alto, o número em serifa grande, o
   título, "com Flávio" em itálico e a data; depois, em duas colunas no computador, o player na caixa com filete e
   o resumo com os assuntos e os selos. O corpo em duas colunas: os capítulos (relógio em versalete) à esquerda e a
   transcrição em texto corrido com capitular à direita; no pé, os links citados como notas numeradas e quem faz.
   No telefone capítulos, transcrição, notas e quem faz viram abas, uma de cada vez.
   Depende de: base.css, tocador.css e ouvir.css (os selos). Telefone nas regras soltas, computador no @media do fim. */

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

.ep-cabeca { padding: 28px 0 8px; text-align: center; }

.ep-cabeca__numero {
  font-family: var(--letra-titulo); font-size: 72px; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ep-cabeca__ene { font-size: 0.4em; font-weight: 600; letter-spacing: 0; vertical-align: 0.9em; margin-right: 0.08em; }

.ep-cabeca__titulo { margin: 14px auto 0; max-width: 20ch; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }

.ep-cabeca__com { margin-top: 12px; font-style: italic; font-size: 17px; }

.ep-cabeca__meta { margin-top: 6px; font-size: 15px; color: var(--cinza-tinta); }

.ep-abertura { display: grid; gap: 24px; padding: 20px 0 36px; border-bottom: 1px solid var(--tinta); }
.ep-abertura > * { min-width: 0; }

.ep-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.ep-lead { font-size: 18px; line-height: 1.55; }

.ep-assuntos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 16px; }

.ep-assuntos__lista { display: contents; }

.ep-assuntos__lista a {
  font-family: var(--letra-titulo); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--tijolo); text-underline-offset: 4px;
}
.ep-assuntos__lista a:hover { color: var(--tijolo); }

.ep-ouca { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filete); }

.ep-ouca .selos { margin-top: 12px; }

.ep-ouca .mais { margin-top: 14px; }

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

.abas { display: flex; margin-top: 24px; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--filete); }

.abas button {
  flex: 1 1 0; min-width: 0; padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-family: var(--letra-titulo); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.abas button[data-ativa] { color: var(--tijolo); border-bottom-color: var(--tijolo); }

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

.ep-painel { padding: 24px 0; }

.ep-painel__titulo { margin-bottom: 14px; }

/* ------------------------------------------------------------ os capítulos: relógio em versalete */

.capitulos { display: grid; }

.capitulo__botao {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 10px; width: 100%; padding: 10px 0;
  border: 0; border-bottom: 1px dotted var(--filete-escuro); background: none; text-align: left;
}

.capitulo__tempo {
  font-family: var(--letra-titulo); font-size: 14px; font-weight: 600; font-variant-numeric: oldstyle-nums tabular-nums;
  color: var(--tijolo);
}

.capitulo__titulo { font-size: 16px; line-height: 1.3; }

.capitulo__botao:hover .capitulo__titulo { text-decoration: underline; text-decoration-color: var(--tijolo); text-underline-offset: 3px; }

.capitulo[data-agora] .capitulo__titulo { font-weight: 600; }
.capitulo[data-agora] .capitulo__titulo::before { content: "▸ "; color: var(--tijolo); }

/* ------------------------------------------------------------ a transcrição: texto corrido com capitular */

.transcricao { display: grid; gap: 18px; }

.fala { display: grid; gap: 4px; }

.fala__tempo {
  justify-self: start; padding: 0; border: 0; background: none;
  font-family: var(--letra-titulo); font-size: 12px; font-weight: 600; font-variant-numeric: oldstyle-nums tabular-nums;
  letter-spacing: 0.08em; color: var(--tijolo);
}
.fala__tempo:hover { text-decoration: underline; text-underline-offset: 3px; }

.fala__texto { font-size: 17px; line-height: 1.65; }

/* o trecho que está tocando ganha a mesma seta dos capítulos */
.fala[data-agora] .fala__tempo { font-weight: 700; }
.fala[data-agora] .fala__tempo::before { content: "▸ "; }

.transcricao .fala:first-of-type .fala__texto::first-letter {
  float: left; margin: 0.1em 0.12em 0 0;
  font-family: var(--letra-titulo); font-size: 3.4em; font-weight: 700; line-height: 0.8; color: var(--tijolo);
}

.transcricao__mais { margin-top: 22px; }

/* ------------------------------------------------------------ as notas: os links citados no pé */

.notas { display: grid; gap: 12px; padding-left: 28px; list-style: decimal; }

.nota { font-size: 16px; }
.nota::marker { font-family: var(--letra-titulo); font-weight: 700; color: var(--tijolo); }

.nota a { font-weight: 600; text-decoration-color: var(--filete-escuro); text-underline-offset: 3px; }
.nota a:hover { color: var(--tijolo); }

.nota__fonte { display: block; font-size: 14px; font-style: italic; color: var(--cinza-tinta); }

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

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

.quem__nome { font-size: 26px; }

.quem__papel { font-size: 14px; font-style: italic; color: var(--cinza-tinta); }

.quem__bio { margin-top: 4px; color: var(--cinza-tinta); }

.creditos { display: grid; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--filete); font-size: 15px; }

.credito__funcao { font-style: italic; color: var(--cinza-tinta); }
.credito__funcao::after { content: ": "; }

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

.vizinhos { display: grid; gap: 12px; padding: 28px 0; border-top: 1px solid var(--tinta); }

.vizinho__link { display: grid; gap: 4px; text-decoration: none; }

.vizinho__lado {
  font-family: var(--letra-titulo); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tijolo);
}
[data-lado="anterior"] .vizinho__lado::before { content: "← "; }
[data-lado="proximo"] .vizinho__lado::after { content: " →"; }

.vizinho__titulo { font-family: var(--letra-titulo); font-size: 17px; font-weight: 600; line-height: 1.3; }
.vizinho__link:hover .vizinho__titulo { text-decoration: underline; text-decoration-color: var(--tijolo); text-underline-offset: 4px; }

.do-tema { padding: 8px 0 48px; }

.do-tema__lista { display: grid; margin-top: 14px; }

.do-tema__item { border-bottom: 1px solid var(--filete); }

.do-tema__link { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 12px 0; text-decoration: none; }
.do-tema__link:hover .do-tema__titulo { color: var(--tijolo); }

.do-tema__numero { font-family: var(--letra-titulo); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.do-tema__titulo { font-family: var(--letra-titulo); font-size: 17px; font-weight: 600; line-height: 1.3; }

.do-tema__meta { grid-column: 2; font-size: 14px; font-style: italic; color: var(--cinza-tinta); }

@media (min-width: 900px) {
  .ep-cabeca { padding: 44px 0 12px; }
  .ep-cabeca__numero { font-size: 104px; }
  .ep-cabeca__titulo { margin-top: 20px; font-size: 52px; }
  .ep-cabeca__com { margin-top: 18px; font-size: 20px; }
  .ep-cabeca__meta { font-size: 16px; }
  .ep-abertura { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; padding: 36px 0 56px; }
  .ep-lead { font-size: 20px; }
  .ep-ouca .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ep-ouca .selo { min-height: 56px; }
  .ep-ouca .selo__nome { font-size: 14px; }

  .abas { display: none; }
  /* dense: "quem faz" volta pra preencher a coluna da esquerda ao lado das notas, em vez de descer uma linha */
  .ep-corpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-auto-flow: row dense; gap: 0 64px; }
  .ep-corpo [data-painel]:not([data-ativa]) { display: block; }
  .ep-painel { padding: 48px 0 24px; }
  .ep-painel--capitulos { grid-column: 1; }
  .ep-painel--transcricao { grid-column: 2; }
  .ep-painel--notas { grid-column: 2; }
  .ep-painel--quem { grid-column: 1; }
  /* sem transcrição (episódio sem áudio) só sobra quem faz: ele toma a largura toda */
  .ep-corpo:not(:has(.ep-painel--transcricao:not([hidden]))) .ep-painel--quem { grid-column: 1 / -1; }
  .capitulo__botao { grid-template-columns: 56px minmax(0, 1fr); }
  .fala { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: baseline; }
  .fala__texto { font-size: 18px; }
  .vizinhos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 36px 0; }
  [data-lado="proximo"] { grid-column: 2; text-align: right; }
  .do-tema { padding: 8px 0 72px; }
  .do-tema__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
}