/* inicio.css: o que a aba Início do canal mostra embaixo das abas, como a página inicial de um canal de vídeo.
   O .destaque é o último episódio em vitrine: a miniatura grande à esquerda e, à direita, o selo Novo, o título, o
   resumo, o player e os botões. O .comece é a prateleira "Comece por aqui": no computador, um cartão cinza com o
   título ocupa a primeira das quatro colunas e os três episódios escolhidos ocupam as outras três, alinhados com a
   grade de todos os episódios embaixo. Depende de: base.css, cartao-ep.css, tocador.css e lista.css.
   Telefone nas regras soltas, computador no @media do fim. */

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

.destaque { padding: 24px 0 8px; }

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

.destaque__miniatura { display: block; }

.destaque__texto { display: grid; gap: 10px; align-content: start; min-width: 0; }

.destaque__meta { font-size: 13px; color: var(--texto-suave); }

.destaque__titulo { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.destaque__titulo a { text-decoration: none; }

.destaque__convidado { margin-top: 6px; font-size: 14px; color: var(--texto-suave); }
.destaque__convidado strong { font-weight: 700; color: var(--texto); }
.destaque__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

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

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

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

.comece__cabeca { display: grid; gap: 4px; align-content: start; }

@media (min-width: 900px) {
  .destaque { padding: 32px 0 8px; }
  .destaque__dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .destaque__miniatura .miniatura__numero { font-size: 120px; }
  .destaque__titulo { font-size: 26px; }
  .destaque__resumo { font-size: 16px; }
  .comece { padding: 40px 0 8px; scroll-margin-top: 72px; }
  /* a primeira coluna tem a largura exata de uma das quatro da grade (16px é o vão entre elas) */
  .comece__dentro { grid-template-columns: calc((100% - 3 * 16px) / 4) minmax(0, 1fr); gap: 16px; }
  .comece__cabeca { align-content: end; gap: 8px; padding: 20px; border-radius: var(--raio); background: var(--bloco); }
  .comece__cabeca .secao__titulo { font-size: 26px; line-height: 1.1; }
  .comece .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}