/*
 * 07-vivencia.css
 * Seção: "O que você vai vivenciar nesta formação" (6 cards)
 *
 * [ADAPTADO] Copy real trocada — ver copy/03-copy-clonagem-estrutura-
 * -referencia_1.md §7 e comentário no topo de sections/07-vivencia.html.
 * Layout/estrutura (grid 2 colunas, coluna esquerda sticky, 6 cards)
 * herdado de docs/recon-visual-tokens.md (b).6 e
 * docs/recon-animacoes-responsividade.md — observação geral #8
 * ("Padrão de layout '2 colunas com esquerda sticky'") — preservado sem
 * alteração; só o conteúdo textual mudou.
 * Marcação HTML correspondente: sections/07-vivencia.html
 *
 * Layout: grid de 2 colunas — a coluna esquerda (.vivencia__coluna-fixa) usa
 * `position: sticky` para permanecer visível enquanto a coluna direita
 * (.vivencia__lista, 6 cards empilhados) rola por dentro do mesmo container.
 * O offset de `top` usa --header-fixo-altura-total (ver styles/tokens.css)
 * para não ficar escondida sob o ticker + barra fixa do topo da página.
 */

.vivencia {
  background-color: var(--cor-fundo-preto-puro);
}

.vivencia__grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: var(--space-secao-horizontal);
  align-items: start;
}

.vivencia__coluna-fixa {
  position: sticky;
  top: calc(var(--header-fixo-altura-total) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vivencia__titulo {
  font-size: var(--fs-h2-escuro);
  font-weight: var(--fw-h2-escuro);
  line-height: var(--lh-h2-escuro);
  color: var(--cor-texto-branco);
  max-width: 20ch;
}

.vivencia__subtitulo {
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-medio);
  max-width: 36ch;
}

.vivencia__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  height: var(--botao-height-sm);
  padding: var(--botao-padding);
  border-radius: var(--botao-radius-sm);
  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);
  margin-top: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

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

.vivencia__cta:focus-visible {
  outline: 2px solid var(--cor-fundo-claro);
  outline-offset: 3px;
}

.vivencia__cta-seta {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.vivencia__lista {
  display: flex;
  flex-direction: column;
  gap: var(--card-feature-gap-linha);
}

.vivencia__card {
  display: flex;
  flex-direction: column;
  gap: var(--card-feature-gap-interno);
  width: 100%;
  padding: var(--card-feature-padding);
  border-radius: var(--card-feature-radius);
  background-color: var(--card-feature-bg);
}

.vivencia__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: var(--cor-fundo-preto-puro);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cor-destaque-em-verde);
}

.vivencia__icone svg {
  width: 22px;
  height: 22px;
}

.vivencia__card-titulo {
  font-size: var(--fs-card-titulo);
  font-weight: var(--fw-card-titulo);
  line-height: var(--lh-card-titulo);
  color: var(--cor-texto-branco);
}

.vivencia__divisor {
  display: block;
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.16);
}

.vivencia__card-corpo {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-claro);
}

/* --- Breakpoints (ver convenção em styles/base.css) --------------------- */

@media (max-width: 1024px) {
  .vivencia__grid {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 40px;
  }

  .vivencia__titulo {
    max-width: 18ch;
  }
}

@media (max-width: 768px) {
  /* Ponto de quebra estrutural: a coluna esquerda deixa de ser sticky e passa
     a fluir normalmente acima da lista de cards — não há espaço horizontal
     suficiente para manter as 2 colunas lado a lado neste breakpoint
     (comportamento inferido; o recon não detalha o breakpoint exato de
     quebra do padrão sticky, apenas confirma que grids de cards colapsam
     para 1–2 colunas em ~768px — ver docs/recon-animacoes-responsividade.md). */
  .vivencia__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vivencia__coluna-fixa {
    position: static;
    top: auto;
  }

  .vivencia__titulo,
  .vivencia__subtitulo {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .vivencia__grid {
    gap: 24px;
  }

  .vivencia__card {
    padding: 20px;
  }

  .vivencia__cta {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .vivencia__card {
    padding: 16px;
  }
}