/* ==========================================================================
   Choose The Music — landing page (F2.2)
   Só variáveis --ctm-*/Bootstrap; nada de cor nova.
   ========================================================================== */

/* Faz a seção furar o .container do layout e ocupar a largura toda. */
.ctm-landing-hero.ctm-full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.ctm-landing-mock { box-shadow: var(--ctm-shadow-lg); color: var(--ctm-text); } /* o hero é branco; o card volta ao texto escuro */

/* Faixa final de CTA (mesmo gradiente da hero, mas como cartão) */
.ctm-cta-band {
  background: var(--ctm-gradient);
  color: var(--ctm-surface);
  border-radius: var(--ctm-radius-lg);
  box-shadow: var(--ctm-shadow-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.ctm-cta-band h2 { color: var(--ctm-surface); }
.ctm-cta-band p { color: var(--ctm-white-85); }

/* Fileira com rolagem horizontal (troca o carrossel por algo que funciona bem no touch) */
.ctm-scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  padding: .25rem .25rem 1rem;
  margin: 0 -.25rem;
  -webkit-overflow-scrolling: touch;
}
.ctm-scroll-row::-webkit-scrollbar { height: 8px; }
.ctm-scroll-row::-webkit-scrollbar-thumb { background: var(--ctm-border); border-radius: 99px; }

.ctm-scroll-item {
  flex: 0 0 85%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .ctm-scroll-item { flex-basis: calc(33.333% - .667rem); }
}

/* f10.19 (kit 01A/01B): listas que giram sozinhas. O título e o botão Pausar dividem a linha; se não couberem, o botão desce. */
.ctm-carrossel-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.ctm-carrossel-pausa {
  min-height: 44px;
  padding-inline: 1rem;
  gap: .375rem;
}
.ctm-carrossel-pausa:not([hidden]) { display: inline-flex; align-items: center; }

/* Lista em modo carrossel (a classe vem do JS): rolagem livre, sem encaixe, porque o encaixe desfaria cada passo da animação;
   a barra de rolagem fica transparente (mesma altura, sem pulo de layout) -- a pessoa pausa com o botão e arrasta. */
.ctm-scroll-row.is-carrossel {
  scroll-snap-type: none;
  scrollbar-color: transparent transparent;
}
.ctm-scroll-row.is-carrossel::-webkit-scrollbar-thumb { background: transparent; }
.ctm-scroll-row.is-carrossel.is-parado { scrollbar-color: var(--ctm-border) transparent; }
.ctm-scroll-row.is-carrossel.is-parado::-webkit-scrollbar-thumb { background: var(--ctm-border); }

.ctm-feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--ctm-primary-soft); color: var(--ctm-primary);
}
.ctm-feature-icon.is-teal { background: var(--ctm-teal-soft); color: var(--ctm-teal); }

.ctm-social-link {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ctm-border);
  color: var(--ctm-text-muted);
}
.ctm-social-link:hover { color: var(--ctm-primary); border-color: var(--ctm-primary-50); }

/* Pendencia 63: botoes do hero (professor/aluno) com icone alinhado ao texto (D-63). */
.ctm-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1.25;
  min-height: 3.25rem;
  /* PEND-113: nunca passa da coluna do texto (antes invadia o card do ranking); os botoes ficam
     empilhados (.ctm-hero-cta-group, PEND-115) e, se um botao sozinho nao couber, o texto quebra dentro dele. */
  max-width: 100%;
}
/* PEND-115: os dois botoes do hero tem a mesma largura (a do maior), um embaixo do outro. Celular: largura toda;
   a partir de 576 px a grade se ajusta ao maior botao (inline-grid), sem passar da coluna. */
.ctm-hero-cta-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 576px) {
  .ctm-hero-cta-group { display: inline-grid; max-width: 100%; }
}
.ctm-hero-cta i { flex-shrink: 0; }
.ctm-hero-cta span { text-align: center; min-width: 0; overflow-wrap: anywhere; }

/* f10.6c: alturas mínimas fixas (Home/Index.cshtml) para o card não pular de tamanho por causa de
   bio/depoimento curto. */
.ctm-landing-teacher-bio { min-height: 48px; }
.ctm-landing-testimonial-content { min-height: 72px; }