/*
 * 09-cronograma.css
 * Seção: Estrutura da Formação — Da Inscrição à Formatura
 *
 * [MUDANÇA ESTRUTURAL] Timeline vertical de 4 itens sequenciais, enquadrada
 * por mês ("Mês 1" / "Meses X a Y") em vez de "Etapa N" (pedido do cliente,
 * 2026-08-13). O item 2 deixou de ter a sublista numerada dos 7 módulos —
 * o corpo agora é texto corrido, o que uniformizou a altura dos 4 cards.
 * Depois da <ol>, um bloco de fechamento (texto + CTA) foi adicionado no
 * mesmo padrão visual do `.noticias__cta-btn` (styles/sections/02b-noticias.css).
 *
 * Todos os valores catalogados usam var(--token) de styles/tokens.css.
 * Literais locais: espessura/cor da linha conectora (decorativo, sem token
 * catalogado) e a sombra de hover do CTA (mesmo padrão hardcoded já usado em
 * 02b-noticias.css para o dourado de destaque).
 */

.cronograma-section {
  background: var(--cor-fundo-preto-puro);
}

.cronograma-heading-wrap {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: 48px; /* alinhado ao mesmo bloco de cabeçalho de seção usado em 05/12/13 */
}

.cronograma-heading {
  font-size: var(--fs-h2-jornada-destaque);
  font-weight: var(--fw-h2-jornada-destaque);
  line-height: var(--lh-h2-jornada-destaque);
  color: var(--cor-texto-branco);
}

.cronograma-heading-destaque {
  color: var(--cor-destaque-em-verde);
  font-weight: var(--fw-h2-jornada-destaque);
}

/* ---------------------------------------------------------------------------
 * Timeline vertical — 4 itens
 *
 * Layout: cada <li> é um grid de 2 colunas (marcador | card). O marcador é um
 * flex-column (número + linha conectora que cresce com flex:1). Como o
 * marcador é item de grid, ele estica (align-items: stretch, padrão) até a
 * altura da linha inteira — que é definida pela altura do card ao lado. Isso
 * faz a linha conectora se adaptar automaticamente caso algum card fique mais
 * alto que os outros (ex. corpo de texto mais longo), sem precisar de nenhum
 * cálculo/JS: o espaçamento entre itens é o padding-bottom do card, não um
 * gap externo, e a linha atravessa esse espaço até encontrar o próximo
 * número.
 * ------------------------------------------------------------------------- */

.cronograma-timeline {
  display: flex;
  flex-direction: column;
}

.cronograma-etapa {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 28px;
}

.cronograma-etapa-marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cronograma-etapa-numero {
  flex-shrink: 0;
  /* RizomaM só existe no peso 400 (ver @font-face em base.css) — não usar
     --fw-stat-numero (peso-medio/500) aqui, senão o navegador sintetiza um
     fake-bold. */
  font-family: var(--font-familia-display);
  font-size: var(--fs-stat-numero);
  font-weight: 400;
  line-height: var(--lh-stat-numero);
  color: var(--cor-destaque-em-verde);
}

.cronograma-etapa-linha {
  flex: 1;
  width: 2px;
  min-height: 40px;
  margin-top: 14px;
  background: linear-gradient(
    to bottom,
    var(--cor-destaque-em-verde) 0%,
    rgba(173, 143, 75, 0.15) 100%
  );
}

.cronograma-etapa-card {
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cronograma-etapa--final .cronograma-etapa-card {
  padding-bottom: 0;
}

.cronograma-etapa-label {
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cor-destaque-em-verde);
}

.cronograma-etapa-titulo {
  font-size: var(--fs-item-horario-titulo);
  font-weight: var(--fw-item-horario-titulo);
  line-height: var(--lh-item-horario-titulo);
  color: var(--cor-texto-quote);
}

.cronograma-etapa-corpo {
  font-size: var(--fs-item-horario-corpo);
  font-weight: var(--fw-item-horario-corpo);
  line-height: var(--lh-item-horario-corpo);
  color: var(--cor-texto-cinza-claro);
}

/* ---------------------------------------------------------------------------
 * Fechamento — parágrafo + CTA, abaixo da timeline
 * ------------------------------------------------------------------------- */

.cronograma-fechamento {
  max-width: 560px;
  margin-inline: auto;
  margin-top: 48px; /* eco do heading-wrap: mesmo ritmo vertical acima/abaixo da timeline */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.cronograma-fechamento-texto {
  font-size: var(--fs-lista-corpo);
  font-weight: var(--fw-lista-corpo);
  line-height: var(--lh-lista-corpo);
  color: var(--cor-texto-cinza-medio);
}

.cronograma-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--botao-height-lg);
  padding: 0 32px;
  border-radius: calc(var(--botao-height-lg) / 2);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cronograma-cta-btn:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.cronograma-cta-btn:focus-visible {
  outline: 2px solid var(--cor-destaque-em-verde);
  outline-offset: 3px;
}

.cronograma-cta-seta {
  font-weight: var(--peso-semibold);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .cronograma-etapa {
    grid-template-columns: 72px 1fr;
    column-gap: 20px;
  }

  .cronograma-etapa-numero {
    font-size: calc(var(--fs-stat-numero) * 0.85);
  }
}

@media (max-width: 768px) {
  /* A timeline já nasce vertical, então não há quebra estrutural de grid
     aqui como havia no clone (2 colunas → 1). Ajuste é só de escala/spacing. */
  .cronograma-heading {
    font-size: calc(var(--fs-h2-jornada-destaque) * 0.85);
    line-height: calc(var(--lh-h2-jornada-destaque) * 0.85);
  }

  .cronograma-etapa {
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
  }

  .cronograma-etapa-card {
    padding-bottom: 32px;
  }

  .cronograma-etapa-numero {
    font-size: calc(var(--fs-stat-numero) * 0.7);
  }

  .cronograma-etapa-titulo {
    font-size: calc(var(--fs-item-horario-titulo) * 0.9);
  }

  .cronograma-fechamento {
    margin-top: 40px;
    gap: 24px;
  }
}

@media (max-width: 430px) {
  .cronograma-heading {
    font-size: calc(var(--fs-h2-jornada-destaque) * 0.72);
    line-height: calc(var(--lh-h2-jornada-destaque) * 0.78);
  }

  .cronograma-etapa {
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
  }

  .cronograma-etapa-numero {
    font-size: calc(var(--fs-stat-numero) * 0.55);
  }

  .cronograma-etapa-card {
    padding-bottom: 24px;
  }

  .cronograma-fechamento {
    margin-top: 32px;
  }

  .cronograma-cta-btn {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .cronograma-etapa-card {
    padding-bottom: 20px;
  }
}