/* episodio.css: a página de um episódio. O cabeçalho num cartão verde-floresta (o número numa bolinha laranja, o
   título em branco), o player em pílula creme nascendo do cartão, o resumo com os temas e onde ouvir. Embaixo, os
   quatro blocos: capítulos em pastilhas (pílulas que quebram em fileiras), a transcrição em balões de fala que alternam
   os lados (os quatro primeiros; a inteira na janela), os links com um ícone redondo e quem faz. No telefone esses
   quatro viram abas; no computador ficam em grade. Depois compartilhar, anterior e próximo e do mesmo tema.
   Depende de: base.css, tocador.css, cartao-ep.css, pessoa.css e onde-ouvir.css.
   Telefone nas regras soltas, computador no @media do fim. */

/* ------------------------------------------------------------ o cartão verde do alto */

.ep-cartao { padding: 12px var(--margem) 0; }

.ep-cartao__dentro {
  padding: 28px 20px 76px; border-radius: var(--raio);
  background: var(--floresta); color: var(--branco);
}

.ep-cartao__rotulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-claro);
}

.ep-cartao__titulo { margin-top: 16px; font-size: 30px; line-height: 1.1; }

.ep-cartao__com { margin-top: 12px; font-weight: 700; color: var(--verde-claro); }

/* o player nasce do cartão: sobe por cima da borda de baixo dele */
.ep-tocador { position: relative; z-index: 1; margin-top: -56px; }

/* ------------------------------------------------------------ resumo, temas e onde ouvir */

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

.ep-resumo__texto { font-size: 18px; font-weight: 600; line-height: 1.4; }

.ep-resumo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.ep-resumo__temas { display: contents; }

.ep-resumo__compartilhar { margin-left: auto; }

.ep-ouvir { padding-top: 18px; border-top: 3px dotted var(--verde-claro); }

.ep-ouvir__titulo { font-size: 16px; font-weight: 800; }

.ep-ouvir .selos { justify-content: start; margin-top: 12px; }

.ep-ouvir .pilula { margin-top: 12px; }

/* ------------------------------------------------------------ os quatro blocos e as abas do telefone */

.ep-blocos { margin-top: 36px; }

.abas {
  display: flex; gap: 2px; padding: 4px; margin-bottom: 20px; overflow: hidden;
  border-radius: 999px; background: var(--verde-claro);
}

.abas button {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.abas button[data-ativa] { background: var(--floresta); color: var(--branco); }

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

.bloco { display: grid; gap: 18px; align-content: start; }

/* ------------------------------------------------------------ capítulos: as pastilhas */

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

.pastilha__botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px;
  border: 0; border-radius: 999px; background: var(--creme-claro); box-shadow: inset 0 0 0 2px var(--verde-claro);
  font-size: 15px; font-weight: 600; text-align: left;
}
.pastilha__botao:hover { background: var(--verde-claro); }
.pastilha__botao svg { width: 18px; height: 18px; flex: none; }

.pastilha__tempo { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto-suave); }

.pastilha[data-agora] .pastilha__botao { background: var(--laranja); box-shadow: none; }
.pastilha[data-agora] .pastilha__tempo { color: var(--texto); }

/* ------------------------------------------------------------ transcrição: os balões de fala */

.baloes { display: grid; gap: 14px; }

.balao {
  position: relative; width: 92%; padding: 14px 16px; border-radius: 22px;
  background: var(--creme-claro); box-shadow: 0 2px 0 var(--linha);
}
/* o molde (<template>) é o primeiro filho; os balões alternam pelo tipo, que o molde não conta */
.balao:nth-of-type(odd) { justify-self: start; border-bottom-left-radius: 6px; }
.balao:nth-of-type(even) { justify-self: end; border-bottom-right-radius: 6px; background: var(--verde-claro); box-shadow: none; }

.balao__tempo {
  margin-bottom: 8px; padding: 2px 10px; border: 0; border-radius: 999px;
  background: var(--floresta); color: var(--branco); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.balao__texto { font-size: 15px; line-height: 1.5; }

.balao[data-agora] { box-shadow: 0 0 0 3px var(--laranja); }

.bloco--transcricao .botao-laranja { justify-self: start; }

/* ------------------------------------------------------------ links citados: a lista com o ícone redondo */

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

.citado {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 20px; background: var(--creme-claro); box-shadow: 0 2px 0 var(--linha);
}

.citado__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--verde-claro); }
.citado__icone svg { width: 20px; height: 20px; }

.citado__texto a { font-weight: 700; overflow-wrap: anywhere; text-decoration-color: var(--verde-claro-escuro); text-underline-offset: 3px; }

.citado__fonte { display: block; margin-top: 2px; font-size: 13px; color: var(--texto-suave); }

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

.compartilhe { padding: 48px 0 24px; text-align: center; }

.compartilhe__titulo { margin-bottom: 18px; font-size: 24px; }

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

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

.vizinho__link {
  display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--raio);
  background: var(--creme-claro); box-shadow: 0 2px 0 var(--linha); text-decoration: none;
}
.vizinho__link:hover { box-shadow: 0 0 0 3px var(--verde-claro); }

.vizinho__lado { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; 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: 700; }

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

.do-tema .titulo-de-bloco { margin-bottom: 16px; }

@media (min-width: 900px) {
  .ep-cartao { padding-top: 16px; }
  .ep-cartao__dentro { padding: 48px 56px 104px; border-radius: 40px; }
  .ep-cartao__rotulo { font-size: 13px; }
  .ep-cartao__titulo { margin-top: 20px; max-width: 22ch; font-size: 48px; }
  .ep-cartao__com { font-size: 18px; }
  .ep-tocador { margin-top: -62px; }
  .ep-resumo { margin-top: 40px; }
  .ep-resumo__texto { font-size: 22px; }
  .ep-ouvir { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .ep-ouvir__titulo { font-size: 17px; }
  .ep-ouvir .selos { margin-top: 0; }
  .ep-ouvir .pilula { margin-top: 0; }

  .ep-blocos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 64px; }
  .abas { display: none; }
  .ep-blocos [data-painel]:not([data-ativa]) { display: grid; }
  .bloco { grid-column: 1 / -1; }
  /* com transcrição, ela toma a coluna da esquerda e os blocos depois dela sobem pra da direita; a última
     linha fica elástica pra altura dela não esticar a linha dos links e afastar o "Quem faz" */
  .ep-blocos:has(.bloco--transcricao:not([hidden])) { grid-template-rows: auto auto 1fr; }
  .bloco--transcricao { grid-column: 1; grid-row: span 2; }
  .bloco--transcricao:not([hidden]) ~ .bloco { grid-column: 2; }

  .pastilhas { gap: 12px; }
  .pastilha__botao { font-size: 16px; }
  .balao { width: 84%; padding: 18px 22px; }
  .balao__texto { font-size: 16px; }
  .compartilhe { padding: 64px 0 24px; }
  .compartilhe__titulo { font-size: 30px; }
  .outros { padding-bottom: 80px; }
  .vizinhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-lado="proximo"] { grid-column: 2; }
  .do-tema { margin-top: 56px; }
}