/* inicio.css: os blocos do início depois do vídeo. O último episódio num cartão largo (texto à esquerda, player à
   direita no computador) e o "Comece por aqui" com os três cartões grandes (cartao-ep.css). A lista de todos vem
   de lista.css e o onde ouvir de onde-ouvir.css.
   Depende de: base.css, cartao-ep.css e tocador.css. Telefone nas regras soltas, computador no @media do fim. */

/* ------------------------------------------------------------ o último episódio */

.ultimo { padding: 48px 0 0; scroll-margin-top: 16px; }

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

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

.ultimo__titulo { font-size: 32px; }
.ultimo__titulo a { text-decoration: none; }
.ultimo__titulo a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }

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

.ultimo__resumo { font-size: 16px; color: var(--texto-suave); }

.ultimo__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ------------------------------------------------------------ comece por aqui */

.comece { padding: 56px 0 0; scroll-margin-top: 16px; }

@media (min-width: 900px) {
  .ultimo { padding: 72px 0 0; }
  .ultimo__cartao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 36px; }
  /* o player estica até a altura do texto ao lado; os controles se espalham pela altura em vez de sobrar embaixo */
  .ultimo__cartao .tocador { align-content: space-between; }
  .ultimo__titulo { font-size: 42px; }
  .ultimo__resumo { font-size: 17px; }
  .comece { padding: 88px 0 0; }
}