/* inicio.css: os blocos do início, na ordem do site do Mel Robbins. O vídeo grande (aqui a câmera do estúdio
   se montando e se desmontando em loop, no lugar da foto de quem apresenta), a faixa creme com a frase, o último episódio com o player grande,
   o "Comece por aqui", a busca com os temas em cartões e, embaixo, a lista inteira (lista.css).
   Depende de: base.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 { position: relative; height: 460px; background: var(--grafite); }

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

.heroi__credito {
  position: absolute; left: var(--margem); bottom: 10px;
  font-size: 12px; color: rgba(255, 255, 255, .7);
}

/* ------------------------------------------------------------ a faixa da frase */

.faixa-frase { padding: 64px 0; background: var(--creme); text-align: center; }

.faixa-frase__titulo { font-size: 30px; max-width: 22ch; margin-inline: auto; }

.faixa-frase__quem { margin-top: 16px; color: var(--tinta-suave); }

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

.destaque { padding: 48px 0 16px; }

.destaque__titulo { margin-top: 10px; font-size: 22px; }

.destaque__titulo a { text-decoration: none; }
.destaque__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; }

.destaque__meta { margin: 10px 0 18px; font-size: 13px; text-transform: uppercase; color: var(--tinta-suave); }

.destaque__resumo { margin-top: 18px; color: var(--tinta-suave); }

.destaque__acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

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

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

.comece__cabeca { margin-bottom: 18px; }

.comece__nota { margin-top: 6px; color: var(--tinta-suave); font-size: 16px; }

/* ------------------------------------------------------------ a busca e os temas */

.biblioteca { padding: 56px 0 48px; border-top: 1px solid var(--linha); text-align: center; scroll-margin-top: 16px; }

.biblioteca--abertura { padding: 24px 0 48px; border-top: 0; }

.biblioteca__titulo { font-size: 26px; }

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

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

.busca-grande__campo {
  width: 100%; min-height: 52px; padding: 0 52px 0 18px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--creme);
  font: inherit; font-size: 17px; color: var(--tinta);
}

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

.temas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }

.tema-cartao {
  display: grid; justify-items: center; gap: 12px; width: 100%; padding: 22px 10px;
  border: 0; border-radius: var(--raio-pequeno); background: var(--creme);
  font-size: 14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.tema-cartao:hover { background: var(--creme-escuro); }
.tema-cartao[aria-pressed="true"] { background: var(--amarelo); }

.tema-cartao__icone {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amarelo);
}
.tema-cartao[aria-pressed="true"] .tema-cartao__icone { background: var(--branco); }

.tema-cartao__icone::before {
  content: ""; width: 18px; height: 18px; background: var(--tinta);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}

/* o desenho de cada tema, pelo nome que o comum põe no botão */
[data-filtro-tema="web"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }
[data-filtro-tema="fundamentos"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 4c-3 0-3 2-3 4s-2 4-2 4 2 2 2 4 0 4 3 4M16 4c3 0 3 2 3 4s2 4 2 4-2 2-2 4 0 4-3 4'/%3E%3C/svg%3E"); }
[data-filtro-tema="automacao"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-14 5.3M4 12a8 8 0 0 1 14-5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E"); }
[data-filtro-tema="ia"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2zM19 15l1 2.6 2.6 1-2.6 1L19 22l-1-2.4-2.6-1 2.6-1z'/%3E%3C/svg%3E"); }
[data-filtro-tema="hardware"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3C/svg%3E"); }
[data-filtro-tema="android"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }

@media (min-width: 900px) {
  .heroi { height: min(66vw, 92vh); }
  .heroi__credito { left: 32px; bottom: 14px; }
  .faixa-frase { padding: 104px 0; }
  .faixa-frase__titulo { font-size: 44px; max-width: 26ch; }
  .destaque { padding: 64px 0 24px; }
  .destaque__titulo { font-size: 24px; }
  .comece { padding: 48px 0 72px; }
  .biblioteca { padding: 72px 0 64px; }
  .biblioteca--abertura { padding: 40px 0 80px; }
  .biblioteca__titulo { font-size: 36px; max-width: 22ch; margin-inline: auto; }
  .temas-grade { grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 64px; }
  .tema-cartao { padding: 28px 10px 30px; font-size: 16px; }
}