/*
 * Camada do tema WordPress sobre o CSS do prototipo canonico.
 *
 * Token novo, nenhum — cor, tipo, raio, sombra e espacamento saem das variaveis
 * de estilos.css (design.md §2 a §6).
 */

/* ------------------------------------------------------------------ card */

/*
 * O card e um link so, para o Moodle, em toda a plataforma. Houve por algumas
 * horas uma versao com dois destinos — titulo para a pagina do curso, botao para
 * o Moodle —, mas a pagina do curso saiu na reuniao de 06/08/2026 e com ela a
 * divisao. O `.mini-cta` continua parecendo um botao: ele sinaliza que o card e
 * clicavel e diz para onde leva, sem ser um alvo separado.
 */

.vitrine-vazia {
  padding: 24px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

/* --------------------------------------------------------------- carrossel */

/*
 * A seta de voltar nao existe enquanto nao ha para onde voltar, e a de avancar
 * some ao chegar no fim. Botao que nao faz nada e ruido — e, no teclado, uma
 * parada a toa. `hidden` cuida do leitor de tela; o `display` vence a regra do
 * componente, que declara `display: grid`.
 */
.carousel-prev[hidden],
.carousel-next[hidden] {
  display: none;
}

/*
 * Os pontos de navegacao sairam em 13/08/2026: as setas ja dizem que a faixa
 * anda, e embaixo dos cards eles viravam duas formas soltas na pagina, sem
 * dizer o que eram.
 */

/* -------------------------------------------------------------- erro 404 */

/*
 * Quem chega aqui veio de um link velho e precisa entender num golpe de vista
 * que o endereco falhou, nao o clique dela. O numero e so desenho: quem usa
 * leitor de tela ouve o kicker e o titulo, que dizem a mesma coisa por extenso.
 */
.erro-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 4vw, 54px);
}

/* Precisa dos dois nomes: `.catalog-hero p` ja dita tamanho, cor e margem de
   todo paragrafo da faixa, e com uma classe so esta regra perdia a disputa. */
.erro-hero .erro-numero {
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, .3);
  font-family: var(--display);
  font-size: clamp(84px, 14vw, 184px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.05em;
  -webkit-user-select: none;
  user-select: none;
}

/* Sem base propria a coluna de texto encolheria ate a largura do botao. */
.erro-texto {
  flex: 1 1 min(420px, 100%);
  min-width: 0;
}