/* temas.css: os temas como bolinhas coloridas, cada tema numa cor suave, com quantos episódios tem dentro e o nome
   embaixo. Apertar uma filtra a lista de episódios (o comum faz o filtro e marca aria-pressed; o verde.js leva até a
   lista). Vale no início e na página de episódios.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.temas { padding: 40px 0 8px; scroll-margin-top: 16px; }

.temas__nota { margin-top: 6px; color: var(--texto-suave); }

.bolinhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; margin-top: 24px; }

.bolinha {
  display: grid; justify-items: center; gap: 8px; width: 100%; padding: 8px 4px;
  border: 0; border-radius: var(--raio); background: none;
}

.bolinha__disco {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--cor-tema, var(--verde-claro)); color: var(--texto);
  font-size: 22px; font-weight: 800; transition: scale .15s;
}
.bolinha:hover .bolinha__disco { scale: 1.06; }
.bolinha[aria-pressed="true"] .bolinha__disco { box-shadow: 0 0 0 4px var(--creme), 0 0 0 8px var(--floresta); }

.bolinha__nome { font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; }
.bolinha[aria-pressed="true"] .bolinha__nome { font-weight: 800; color: var(--floresta); }

/* a cor de cada tema, pelo nome que o comum põe no botão */
[data-filtro-tema="web"] { --cor-tema: #bfe3c8; }
[data-filtro-tema="fundamentos"] { --cor-tema: #fbd9a8; }
[data-filtro-tema="automacao"] { --cor-tema: #cfe0f7; }
[data-filtro-tema="ia"] { --cor-tema: #e4d3f5; }
[data-filtro-tema="hardware"] { --cor-tema: #f8d3cc; }
[data-filtro-tema="android"] { --cor-tema: #f3e7a1; }

@media (min-width: 900px) {
  .temas { padding: 56px 0 8px; }
  .bolinhas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
  .bolinha__disco { width: 88px; height: 88px; font-size: 28px; }
  .bolinha__nome { font-size: 15px; }
}