/* inicio.css: os blocos do início, na ordem do site do Mel Robbins. O vídeo colorido de ponta a ponta (a câmera do
   estúdio se montando e se desmontando em loop) com o crédito embaixo, como legenda de foto; a frase grande em
   itálico; o último episódio em duas colunas (texto à esquerda, player à direita); o "Comece por aqui"; e a
   biblioteca: a busca e a linha de temas (palavras.css) que filtra a lista de baixo (lista.css).
   Depende de: base.css, palavras.css, cartao-ep.css e tocador.css. Telefone nas regras soltas, computador no @media do fim. */

/* ------------------------------------------------------------ o vídeo do alto (a câmera se montando, em loop) */

.heroi { margin: 0; background: var(--preto); }

.heroi__video { display: block; width: 100%; height: 460px; object-fit: cover; object-position: 50% 40%; }

.heroi__credito {
  padding: 8px var(--margem); background: var(--branco); border-bottom: 1px solid var(--fio);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-align: right; text-transform: uppercase; color: var(--cinza);
}

/* ------------------------------------------------------------ a frase */

.faixa-frase { padding: 56px 0 60px; text-align: center; }

.faixa-frase__titulo {
  max-width: 17ch; margin-inline: auto;
  font-size: 40px; font-style: italic; font-weight: 500; line-height: 1.04;
}

.faixa-frase__quem {
  display: grid; justify-items: center; gap: 18px; margin-top: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza);
}
.faixa-frase__quem::before { content: ""; width: 40px; border-top: 1px solid var(--fio); }

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

.destaque { padding: 44px 0 52px; }

.destaque__dentro { display: grid; gap: 24px; grid-template-areas: "cabeca" "tocador" "texto"; }

.destaque__cabeca { grid-area: cabeca; }

.destaque .tocador { grid-area: tocador; }

.destaque__texto { grid-area: texto; }

.destaque__titulo { margin-top: 12px; font-size: 32px; line-height: 1.05; }

.destaque__titulo a { text-decoration: none; }
.destaque__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.destaque__meta { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinza); }

.destaque__resumo { color: var(--cinza); }

.destaque__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }

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

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

.comece__cabeca { display: grid; gap: 6px; margin-bottom: 20px; }

.comece__nota { color: var(--cinza); font-size: 15px; }

/* ------------------------------------------------------------ a biblioteca: a busca e a linha de temas */

.biblioteca { padding: 52px 0 48px; text-align: center; scroll-margin-top: 16px; }

.biblioteca--abertura { padding: 36px 0 48px; }

.biblioteca__titulo { max-width: 18ch; margin-inline: auto; font-size: 34px; font-style: italic; font-weight: 500; line-height: 1.06; }

.biblioteca__texto { margin: 14px auto 0; max-width: 52ch; color: var(--cinza); font-size: 15px; }

.busca-grande { position: relative; width: min(620px, 100%); margin: 28px auto 0; }

.busca-grande__campo {
  width: 100%; min-height: 54px; padding: 0 52px 0 16px;
  border: 1px solid var(--fio); border-radius: 0; background: var(--branco);
  font: inherit; font-size: 17px; color: var(--preto);
}
.busca-grande__campo::placeholder { color: var(--cinza); }

.busca-grande__botao {
  position: absolute; right: 6px; top: 7px; display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; background: none;
}
.busca-grande__botao svg { width: 20px; height: 20px; }

.biblioteca .palavras { margin-top: 32px; scroll-margin-top: 24px; }

@media (min-width: 900px) {
  .heroi__video { height: min(62vw, 86vh); }
  .heroi__credito { padding: 10px 32px; }
  .faixa-frase { padding: 96px 0 100px; }
  .faixa-frase__titulo { max-width: 19ch; font-size: 72px; line-height: 1; }
  .faixa-frase__quem { margin-top: 36px; }
  .destaque { padding: 80px 0 88px; }
  .destaque__dentro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
    grid-template-areas: "cabeca tocador" "texto tocador"; gap: 28px 72px;
  }
  .destaque .tocador { align-self: start; }
  .destaque__titulo { font-size: 46px; }
  .comece { padding: 80px 0 88px; }
  .comece__cabeca { grid-template-columns: 1fr auto; align-items: baseline; margin-bottom: 28px; }
  .biblioteca { padding: 88px 0 80px; }
  .biblioteca--abertura { padding: 64px 0 72px; }
  .biblioteca__titulo { max-width: 20ch; font-size: 56px; }
  .biblioteca__texto { font-size: 17px; }
  .biblioteca .palavras { margin-top: 48px; }
}