/* Vaga Social Media · composição da página sobre o Gambito v1.
   Regra: nada de HEX aqui. Só tokens --gb-* (semânticos por tema) e --cl-* (marca).
   Componentes do sistema (gb-*) não são redefinidos; esta folha só posiciona e compõe. */

/* ---- Abertura ------------------------------------------------------------- */
.vaga-hero {
  min-height: max(760px, 100svh);
  padding-top: calc(var(--gb-altura-cabecalho) + 56px);
  display: grid;
  align-items: center;
}
.vaga-hero__grade { align-items: center; row-gap: 64px; }
.vaga-hero__titulo { font-size: clamp(64px, 8.2vw, 118px); line-height: 0.96; }
.vaga-hero__titulo .gb-mascara { padding-bottom: 0.06em; }
.vaga-hero__titulo [data-reveal] { display: block; }
.vaga-hero__texto .gb-eyebrow { margin-bottom: 28px; }
.vaga-hero__lead { max-width: 28ch; margin-top: 32px; }
.vaga-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.vaga-hero__chips .gb-chip { font-size: 14px; padding: 7px 14px 8px; }
.vaga-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 36px; }

/* Stagger da abertura: o grupo inicial do Gambito aplica --atraso por ordem; a janela entra depois. */
html.js.gb-motion-css .vaga-ciclo [data-reveal] { transition-delay: calc(360ms + var(--atraso, 0ms)); }

.vaga-meta {
  display: grid;
  max-width: 640px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
  border-block: 1px solid var(--gb-linha);
}
.vaga-meta > div { padding: 14px 16px 14px 0; }
.vaga-meta > div + div { padding-left: 18px; border-left: 1px solid var(--gb-linha); }
.vaga-meta dt { color: var(--gb-texto-suave); }
.vaga-meta dd { margin-top: 4px; font-weight: var(--gb-peso-medio); }

/* ---- Ciclo: cinco etapas que levam ao "Dia a dia" -------------------------- */
.vaga-ciclo {
  --corte: 40px;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 48px;
  background: color-mix(in srgb, var(--gb-superficie) 82%, transparent);
}
.vaga-ciclo__legenda {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: var(--gb-peso-medio);
  line-height: 1.15;
  letter-spacing: var(--gb-tracking-display);
  color: var(--gb-texto);
}
.vaga-ciclo__lista { margin-top: auto; padding-top: 56px; }

.vaga-ciclo a {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--gb-linha);
  color: var(--gb-texto-suave);
  text-decoration: none;
  transition: color var(--gb-m-fast) var(--gb-ease-out);
}
.vaga-ciclo li:last-child a { border-bottom: 1px solid var(--gb-linha); }
.vaga-ciclo__nome {
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: var(--gb-peso-medio);
  line-height: 1;
  letter-spacing: var(--gb-tracking-display);
  transition: transform var(--gb-m-enter) var(--gb-ease-out);
}

/* Indicador: cresce durante o passo e sai pela direita quando o ciclo avança. */
.vaga-ciclo a::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gb-realce);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--gb-m-enter) var(--gb-ease-out);
}
.vaga-ciclo a.is-ativa::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--vaga-passo, 2800ms) linear;
}
.vaga-ciclo a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--gb-m-enter); }
.vaga-ciclo a:is(.is-ativa, :hover, :focus-visible) { color: var(--gb-texto); }
.vaga-ciclo a:is(.is-ativa, :hover, :focus-visible) .vaga-ciclo__nome { transform: translateX(6px); }
.vaga-ciclo a:is(.is-ativa, :hover, :focus-visible) .vaga-ciclo__area { color: var(--gb-realce); }
.vaga-ciclo.is-estatico a { color: var(--gb-texto); }

/* ---- Títulos de seção ----------------------------------------------------- */
.vaga-titulo-secao { max-width: 18ch; margin-bottom: 64px; }
.vaga-oportunidade__texto { align-self: end; }

/* ---- Fluxo: etapas do Gambito em sete colunas ----------------------------- */
.vaga-fluxo { margin-top: 88px; }
.vaga-fluxo .gb-etapa__titulo { font-size: clamp(18px, 1.5vw, 22px); }

/* ---- Escopo: lista editorial ---------------------------------------------- */
.vaga-escopo { border-top: 1px solid var(--gb-linha); }
.vaga-escopo__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--gb-col-gap);
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--gb-linha);
}
.vaga-escopo__num { padding-top: 10px; color: var(--gb-texto-suave); }
.vaga-escopo__texto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; color: var(--gb-texto-suave); }
.vaga-escopo__texto p { max-width: 46ch; }
.vaga-escopo__texto p:nth-child(3) { grid-column: 1 / -1; max-width: 80ch; }

/* ---- Ferramentas ---------------------------------------------------------- */
/* Símbolo inteiro como marca-d'água, sem corte pela borda da seção. */
.vaga-simbolo {
  position: absolute;
  left: max(var(--gb-gutter), (100% - var(--gb-container)) / 2);
  bottom: var(--gb-secao-y);
  width: clamp(160px, 15vw, 220px);
  height: auto;
  color: var(--gb-realce);
  opacity: 0.08;
  pointer-events: none;
}
.vaga-ferramentas article { padding: 28px 0 34px; border-top: 1px solid var(--gb-linha); }
.vaga-ferramentas article:last-child { border-bottom: 1px solid var(--gb-linha); }
.vaga-ferramentas .gb-h3 { margin-bottom: 14px; color: var(--gb-realce); }
.vaga-ferramentas p { max-width: 50ch; }

/* ---- Perfil --------------------------------------------------------------- */
.vaga-perfil { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gb-linha); }
.vaga-perfil article { padding: 36px 48px 44px 0; border-bottom: 1px solid var(--gb-linha); }
.vaga-perfil article:nth-child(even) { padding-left: 48px; border-left: 1px solid var(--gb-linha); }
.vaga-perfil .gb-h3 { margin-bottom: 16px; }
.vaga-perfil p { max-width: 48ch; }

/* Princípio em painel Pistache: a capa diagonal do Gambito abre o bloco. */
.vaga-principio {
  position: relative;
  overflow: hidden;
  margin-top: 72px;
  padding: clamp(32px, 4vw, 56px);
  align-items: start;
  font-size: var(--gb-t-m);
  line-height: var(--gb-lh-m);
  font-weight: var(--gb-peso-medio);
  letter-spacing: var(--gb-tracking-display);
}
.vaga-principio strong { font-weight: var(--gb-peso-titulo); }
.vaga-principio > p:last-of-type { color: var(--painel-suave); }

/* ---- Encaixe -------------------------------------------------------------- */
.vaga-encaixe { border-top: 1px solid var(--gb-linha); }
.vaga-encaixe li {
  position: relative;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--gb-linha);
  font-size: 17px;
  font-weight: var(--gb-peso-medio);
}
.vaga-encaixe li::before {
  content: '';
  position: absolute;
  top: calc(16px + 0.85em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--gb-marcador);
}

/* ---- Candidatura ---------------------------------------------------------- */
.vaga-candidatura { align-items: start; }
.vaga-candidatura__texto { position: sticky; top: calc(var(--gb-altura-cabecalho-rolado) + 48px); }
.vaga-candidatura__texto .gb-d-l { margin-bottom: 28px; }
.vaga-formulario { --corte: 32px; }
.vaga-formulario__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; align-items: start; }
.vaga-formulario__grade .gb-campo { align-content: start; }
.vaga-formulario__cheio { grid-column: 1 / -1; }
.vaga-formulario__rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vaga-formulario__nota { margin-top: 24px; }
.vaga-formulario .gb-formulario__acao { margin-top: 16px; }
.vaga-ajuda { font-size: 13px; line-height: 1.45; color: var(--gb-texto-suave); }
.vaga-obrigatorio { color: var(--gb-acento); }
.gb-sucesso .gb-sub { color: var(--gb-texto); }
.gb-sucesso .gb-sub:focus { outline: none; }

/* ---- Navegação: seção em leitura ------------------------------------------ */
.gb-cabecalho__nav ul a[aria-current='true'] { color: var(--gb-texto); }
.gb-cabecalho__nav ul a[aria-current='true']::after { transform: scaleX(1); }

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .vaga-ciclo { padding: 38px; }
  .vaga-escopo__item { grid-template-columns: 54px minmax(0, 2.5fr) minmax(0, 6fr); }
}

@media (max-width: 1023px) {
  .vaga-fluxo { --colunas: 4 !important; row-gap: 40px; }
  .vaga-fluxo .gb-etapa:nth-child(4n)::before,
  .vaga-fluxo .gb-etapa:nth-child(4n)::after { display: none; }
}

@media (max-width: 950px) {
  .vaga-simbolo { display: none; }
  .vaga-hero { min-height: auto; padding-bottom: 80px; }
  .vaga-ciclo { min-height: auto; }
  .vaga-candidatura__texto { position: static; }
  .vaga-fluxo { margin-top: 56px; row-gap: 0; }
  .vaga-fluxo .gb-etapa:nth-child(4n)::before,
  .vaga-fluxo .gb-etapa:nth-child(4n)::after { display: block; }
  .vaga-escopo__item { grid-template-columns: 54px minmax(0, 1fr); }
  .vaga-escopo__texto { grid-column: 2; }
}

@media (max-width: 700px) {
  .vaga-hero { padding-top: calc(var(--gb-altura-cabecalho) + 40px); padding-bottom: 64px; }
  .vaga-hero__titulo { font-size: clamp(56px, 17vw, 72px); }
  .vaga-hero__lead { margin-top: 24px; }
  .vaga-meta { grid-template-columns: 1fr; }
  .vaga-meta > div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; }
  .vaga-meta > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--gb-linha); }
  .vaga-hero__acoes { flex-direction: column; align-items: stretch; }
  .vaga-hero__acoes .gb-botao-ref { width: 100%; }
  .vaga-hero__acoes .gb-link { align-self: center; }
  .vaga-ciclo { padding: 32px 24px 24px; --corte: 22px; }
  .vaga-ciclo__lista { padding-top: 36px; }
  .vaga-ciclo a { grid-template-columns: 30px 1fr; gap: 12px; padding: 15px 0; }
  .vaga-ciclo__area { display: none; }
  .vaga-titulo-secao { margin-bottom: 40px; }
  .vaga-escopo__item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 28px 0 34px; }
  .vaga-escopo__texto { display: block; grid-column: 1 / -1; padding-left: 48px; }
  .vaga-escopo__texto p + p { margin-top: 12px; }
  .vaga-perfil { grid-template-columns: 1fr; }
  .vaga-perfil article, .vaga-perfil article:nth-child(even) { padding: 28px 0 32px; border-left: 0; }
  .vaga-principio { margin-top: 48px; font-size: 24px; }
  .vaga-formulario__grade { grid-template-columns: 1fr; gap: 20px; }
}

/* O formulário usa display:grid (gb-campos); [hidden] precisa vencer. */
.vaga-formulario [hidden] { display: none; }