/* =========================================================
   EXPERIÊNCIA PROFISSIONAL — TIMELINE VERTICAL
   Ativa abaixo de 900px (tablet incluso — a leitura horizontal
   fica apertada antes disso). Progressão real por scroll: a
   linha ativa cresce em pixels até o ponto onde uma referência a
   ~75% da altura da viewport cruza a timeline (js/experience.js,
   ramo mobile, completamente separado do sistema pinned do
   desktop). Um único eixo (--exp-line-x) alinha a linha base, a
   linha ativa e todos os nós — nunca valores independentes.
========================================================= */

@media (max-width: 900px) {

  /* sem trava/pin no mobile — só scroll vertical normal */
  .experience-pin-wrapper.has-pin {
    height: auto;
  }

  .experience-pin-wrapper.has-pin .experience-pin-sticky {
    position: static;
    height: auto;
    display: block;
  }

  .experience {
    padding: var(--space-2xl) var(--container-padding);
  }

  .experience-header {
    margin-bottom: var(--space-xl);
  }

  /* eixo único da timeline — tudo abaixo referencia esta variável,
     nunca um valor solto. Relativa à borda de .experience-list (é
     o containing block de .experience-track); os nós vivem dentro
     de .experience-milestone, então descontam o padding-left da
     lista (definido abaixo) para cair exatamente no mesmo X. */
  .experience-list {
    --exp-line-x: 7px;
    --exp-node-x: calc(var(--exp-line-x) - 26px);
    padding-left: 26px;
    padding-right: 0;
  }

  /* legendas ao lado das bolinhas de início/fim — nunca em cima da
     linha (o texto começa depois dela, no mesmo recuo do conteúdo
     dos marcos) */
  .experience-track-label {
    top: auto;
    left: 26px;
    z-index: 2;
  }

  .experience-track-label--start {
    top: -4px;
  }

  .experience-track-label--end {
    left: 26px;
    /* acompanha o fim real da trilha (--exp-m-total-height), mas
       18px ANTES do ponto exato — esse ponto é a borda superior do
       card de "próxima oportunidade" (a ativação usa a posição
       real dele), então ficar exatamente ali colocava o texto por
       baixo do card. 18px acima cai no vão (48px de margem) antes
       do card, sempre visível. z-index garante que nunca fique
       escondido atrás de nada, mesmo em algum caso extremo. */
    top: calc(var(--exp-m-total-height, 100%) - 22px);
    bottom: auto;
    transform: none;
    z-index: 2;
  }

  /* trilha passa a ser vertical, à esquerda — altura real (px) via
     --exp-m-total-height, calculada em js/experience.js a partir da
     posição real do último nó. Sem JS, cai no fallback 100% (a
     seção inteira já nasce visível de qualquer forma). */
  .experience-track {
    top: 0;
    left: var(--exp-line-x);
    right: auto;
    width: 2px;
    height: var(--exp-m-total-height, 100%);
    transform: translateX(-50%);
    /* sem overflow:hidden aqui de propósito: as bolinhas de
       início/fim são filhas deste elemento e ficam centralizadas
       exatamente em top:0 / top:100% (metade acima/abaixo da
       borda) — overflow:hidden cortava metade de cada uma. O
       fallback sem JS/reduced-motion agora calcula a altura real
       (js/experience.js) em vez de depender de clipping. */
  }

  /* linha ativa: mesma largura/eixo do pai, altura real (px) via
     --exp-m-fill-height (0 até JS calcular). Sólida — sem o degradê
     animado do desktop, que não faz sentido numa barra tão fina. */
  .experience-track-fill {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--exp-m-fill-height, 0px);
    transform: none;
    background: var(--blue-accent);
    background-image: none;
    animation: none;
  }

  /* decoração do desktop (fade final, pontilhado, marcador solto)
     não faz sentido no sistema de altura em pixels do mobile */
  .experience-track-fade,
  .experience-track-dots,
  .experience-marker,
  .experience-track-arrow {
    display: none;
  }

  /* bolinhas de início/fim — bem menores e mais discretas que os
     nós das empresas (que representam experiências reais), só
     marcam onde a trilha começa e termina. A do fim é ainda menor
     que a do início (o início é "o começo da jornada"; o fim é só
     um encerramento discreto da linha, não outro marco). */
  .experience-track-start,
  .experience-track-end {
    display: block;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background: var(--border-strong);
    transform: translate(-50%, -50%);
    opacity: 1;
    box-shadow: none;
    transition: none;
    z-index: 2;
  }

  .experience-track-start {
    top: 0;
    width: 6px;
    height: 6px;
  }

  .experience-track-end {
    /* acompanha o mesmo recuo do label — ver .experience-track-label--end */
    top: calc(100% - 22px);
    width: 4px;
    height: 4px;
  }

  .experience-milestones {
    flex-direction: column;
    gap: var(--space-xl);
    /* padding, não margin: margin-top aqui colapsa com o pai
       (.experience-list não tem padding-top/border separando-os) e
       acaba empurrando a lista inteira (e a trilha, que é "top:0"
       relativa a ela) junto — sem criar o vão desejado antes do
       primeiro nó. Padding nunca colapsa. */
    padding-top: 56px;
  }

  .experience-milestone {
    align-items: flex-start;
    text-align: left;
    position: relative;
  }

  .experience-node {
    position: absolute;
    left: var(--exp-node-x);
    top: 2px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
  }

  /* na vertical a própria trilha já faz o papel de conexão */
  .experience-connector {
    display: none;
  }

  .experience-content {
    margin-top: 0;
    max-width: 100%;
  }

  .experience-tags {
    justify-content: flex-start;
  }

  /* "próxima oportunidade" volta ao fluxo normal, como último item —
     some antes de a linha alcançar (mesma regra .is-enhanced
     compartilhada com o desktop: sem JS, fica sempre visível) */
  .experience-milestone--next {
    position: static;
    width: 100%;
    margin-top: var(--space-xl);
  }

  .experience-next {
    text-align: left;
  }

  /* Experience Spotlight vira bottom sheet: preso na base, largura
     total, cantos superiores arredondados. */
  .experience-spotlight {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
  }

  .spotlight-inner {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg) var(--space-lg) calc(var(--space-md) + var(--safe-bottom));
  }

  .spotlight-inner::before {
    left: var(--space-lg);
    right: var(--space-lg);
  }

  .experience-spotlight[open] .spotlight-inner {
    animation: spotlight-in-mobile var(--duration-slow) var(--ease-standard);
  }

  @keyframes spotlight-in-mobile {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}