/* Choose The Music -- Views/Student/LaunchLandingPage.cshtml (f10.6b, regra 9). Cor só por
   var(--ctm-...); valores novos em wwwroot/css/tokens.css. Movido do <style> original do .cshtml,
   sem mudar nenhuma regra. */

.launch-hero-card {
  background: linear-gradient(135deg, var(--ctm-slate-900) 0%, var(--ctm-indigo-950) 50%, var(--ctm-violet-950-hero) 100%);
  border: 1px solid var(--ctm-white-12) !important;
  box-shadow: var(--ctm-shadow-hero-dark);
}

/* f10.18 (D-58): a capa reserva o espaco antes de carregar (2:1, a proporcao da capa de exemplo); sem isso o
   cartao descia quando a imagem chegava (CLS 0,156 no Lighthouse mobile). Capa de outra proporcao e cortada (cover). */
.launch-banner-img {
  aspect-ratio: 2 / 1;
  max-height: 400px;
  object-fit: cover;
  width: 100%;
  border-radius: 1rem 1rem 0 0;
}

.countdown-box {
  background: var(--ctm-white-08);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ctm-white-15);
  border-radius: 1rem;
  min-width: 0; /* PEND-170: encolhe com a contagem a 360 px em vez de passar da borda; o piso de 75 px vale de 576 px para cima */
  flex: 1 1 0;
  white-space: nowrap; /* o rotulo (HORAS, MIN) nao quebra no meio da palavra */
}

@media (min-width: 576px) {
  .countdown-box { min-width: 75px; flex: 0 1 auto; }
}

/* PEND-170: o nome da professora quebra de linha e o avatar (flex-shrink-0 no markup) nao encolhe nem cobre o nome. */
.ctm-llp-professor { min-width: 0; }
.ctm-llp-contagem { max-width: 100%; }

/* PEND-170: botoes claros da confirmacao sobre o fundo escuro. O texto verde de .text-success dava 3,69:1 sobre o cinza do :hover do btn-light
   (que e o estado em que o botao fica logo apos o toque no envio); o texto passa a --ctm-teal-ink em todos os estados (>= 4,5:1, WCAG AA). */
.ctm-llp-btn-claro {
  --bs-btn-color: var(--ctm-teal-ink);
  --bs-btn-hover-color: var(--ctm-teal-ink);
  --bs-btn-active-color: var(--ctm-teal-ink);
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 1rem;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ctm-llp-description { white-space: pre-line; }

.ctm-llp-lead-box {
  background: linear-gradient(135deg, var(--ctm-indigo-950) 0%, var(--ctm-indigo-900) 100%);
}

/* PEND-29: isca (honeypot) contra robo -- fora da tela, nunca display:none (robo simples pula campo escondido assim).
   Gente nao ve nem alcanca (aria-hidden e tabindex -1 no markup). */
.ctm-llp-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* PEND-86 (f10.14): a pergunta padrão do questionário ficou mais curta (texto do .resx) e o rótulo deixou de quebrar em duas linhas;
   alvo de toque de 44 px garantido para o rótulo, que também ativa o campo (regra 22). */
.ctm-landing-pergunta {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* f13.4 (37R): botão "Acompanhar o lançamento" da confirmação de inscrição -- alvo de toque do kit (regra 22). */
.ctm-llp-follow-btn {
  min-height: var(--ctm-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* PEND-170: "Perfil de <nome>" numa linha so, com reticencias (o nome completo fica em title/aria-label); alvo de toque de 44 px (regra 22).
   O selo ao lado quebra de linha em vez de empurrar o botao. */
.ctm-llp-voltar {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--ctm-touch-min);
  max-width: 62%;
}
.ctm-llp-selo { min-width: 0; white-space: normal; text-align: center; }

/* PEND-170: rotulos da contagem menores no celular e sem espacamento de letras, para caber na caixa (HORAS, HEURES); do breakpoint sm em diante, o tamanho original. */
.countdown-box .extra-small { font-size: .625rem; letter-spacing: 0; }
@media (min-width: 576px) {
  .countdown-box .extra-small { font-size: revert; }
}

/* PEND-183 (37S): link discreto "Já me inscrevi: acompanhar o lançamento" abaixo do formulário -- sublinhado, sem competir com o botão da vaga; alvo de toque
   de 44 px (regra 22); o texto quebra em linha (nada rola para o lado a 360 px). A cor clara vem da classe text-white do Bootstrap na view (contraste sobre o fundo escuro). */
.ctm-llp-follow-returning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctm-touch-min);
  padding: .5rem;
  font-size: .875rem;
  text-decoration: underline;
}