/* ============================================================
   PROTOCOLO M.E.T.T.A. NO CELULAR — variante A, "vitrine presa"

   Escolha do Renan em 08/09, desenhada em lab-protocolo/a.html. Abaixo
   de 1024 a dobra presa da consultoria estava desligada: o sticky virava
   relative e o trilho sumia, entao as cinco etapas viravam leitura
   corrida com uma figura parada em cima. Aqui ela volta a ser presa, com
   a composicao que cabe numa tela de 390.

   A marcacao continua sendo a do desktop, a do gerador. O que muda e a
   leitura dela: as tres colunas viram duas camadas empilhadas na mesma
   celula da grade. A de baixo (.cs-figuras) e o cabecote branco com a
   arte da etapa e o rotulo; a de cima (.cs-rail) traz o trilho de cinco
   segmentos e o contador. As duas ficam presas no topo e o texto passa
   por baixo.

   Por que duas camadas e nao uma: rotulo e trilho precisam ficar na
   mesma coluna, um sobre o outro, mas na marcacao eles sao irmaos
   distantes (o rotulo mora dentro de cada <figure>, o trilho e um bloco
   proprio). Em vez de mexer no gerador, cada camada reserva em branco a
   altura que a outra ocupa: e por isso que as medidas viram variaveis
   logo abaixo, e nao numeros soltos espalhados pelas regras.

   Tudo aqui esta preso a #csTrilha de proposito. Alem de sumir sozinho
   quando a dobra nao existe, o id ganha das regras de classe de v2.css
   sem precisar de !important, inclusive de `.cs-figura:first-child`, que
   e quem hoje segura a figura de abertura acesa no celular.

   Quem decide de quem e a vez continua sendo o bloco 9 do js/v2.js, o
   mesmo do desktop: ele escreve --ativo em #csTrilha e as classes
   esta-ativa / esta-aceso. Este arquivo so desenha o resultado.
   ============================================================ */

@media (max-width:1023px){

  /* As medidas da variante A, do lab. Ficam nomeadas porque a mesma
     altura aparece dos dois lados: o que e conteudo numa camada e vao
     reservado na outra, e um numero solto aqui viraria desalinho la. */
  #csTrilha{
    --pm-arte:132px;     /* caixa da arte da etapa, deitada a partir do 366x441 do Figma */
    --pm-cabeca:160px;   /* faixa util do cabecote */
    --pm-folga:12px;     /* respiro acima da faixa */
    --pm-rotulo:52px;    /* bloco da letra com o nome */
    --pm-vao:8px;        /* vao entre rotulo, trilho e contador */
    --pm-trilho:4px;
    --pm-conta:14px;     /* linha do contador */
    /* 172: e a altura que o texto perde de tela, e a conta do
       scroll-margin das etapas mais abaixo */
    --pm-palco:calc(var(--pm-folga) + var(--pm-cabeca));
  }

  /* o respiro de 56 do desktop era para a figura nao nascer colada no
     bloco de cima; presa no topo ela ja nao precisa dele */
  #csTrilha{ padding:32px 0 0; }

  /* as tres colunas do desktop viram duas linhas: cabecote e texto. As
     duas camadas presas dividem a mesma celula, por isso 1/1 nas duas */
  #csTrilha .cs-trilha-in{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:0;
  }
  #csTrilha .cs-figuras,
  #csTrilha .cs-rail{ grid-area:1 / 1; }
  #csTrilha .cs-textos{ grid-area:2 / 1; }

  /* ---------- camada de baixo: o cabecote branco ---------- */
  /* sangra ate a borda da tela para a sombra fechar de canto a canto: a
     dobra e branca, entao so a sombra denuncia onde o cabecote acaba.
     E o mesmo recorte que as cinco letras usam logo acima, em v2.css. */
  #csTrilha .cs-figuras{
    position:sticky; top:0; z-index:5;
    height:var(--pm-palco);
    width:100vw; margin-left:calc(50% - 50vw);
    padding:var(--pm-folga) var(--gutter) 0;
    background:var(--branco);
    box-shadow:0 10px 20px -18px rgba(12,22,27,.5);
  }

  /* inset:0 do desktop ignora o padding do pai, que aqui e quem segura o
     recuo lateral: as cinco figuras sairiam coladas na borda da tela.
     row-reverse poe a arte a esquerda sem inverter a marcacao, onde o
     rotulo vem primeiro: a ordem de leitura continua nome, depois arte */
  #csTrilha .cs-figura{
    inset:var(--pm-folga) var(--gutter) 0;
    display:flex; flex-direction:row-reverse; justify-content:flex-end;
    align-items:center; gap:var(--e-4);
    opacity:0; transform:scale(.96);
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  /* a que sai apaga rapido e a que entra acende com atraso: com o mesmo
     tempo nos dois lados as duas figuras ficam visiveis no meio da troca
     e o cabecote vira borrao */
  #csTrilha .cs-figura.esta-ativa{
    opacity:1; transform:none;
    transition:opacity .42s var(--suave) .1s, transform .42s var(--suave) .1s;
  }

  /* a arte de 366x441 do Figma cabe deitada em 132x160 quase sem sobra,
     mas o contain fica como garantia: exportacao nova com outra proporcao
     encolhe em vez de estourar a faixa */
  #csTrilha .cs-figura-card{
    flex:none; margin-top:0;
    width:var(--pm-arte); height:var(--pm-cabeca);
    object-fit:contain;
  }

  /* a margem embaixo nao e respiro: e a altura do trilho e do contador,
     que moram na outra camada. Sem ela o rotulo centraliza sozinho e as
     duas camadas nascem em centros diferentes */
  #csTrilha .cs-figura-rotulo{
    flex:1; min-width:0;
    height:var(--pm-rotulo);
    margin-bottom:calc(var(--pm-trilho) + var(--pm-conta) + var(--pm-vao) * 2);
    justify-content:flex-start; gap:11px;
  }
  #csTrilha .cs-figura-letra{ font-size:34px; }
  #csTrilha .cs-figura-nome{
    padding-left:11px;
    font-size:var(--fs-corpo-s); line-height:1.2; max-width:150px;
  }

  /* ---------- camada de cima: trilho e contador ---------- */
  /* grade de cinco colunas em vez de flex porque os cinco pontos sao
     irmaos diretos do trilho, sem caixa em volta: a grade poe os cinco
     na linha 2 e o contador atravessando a linha 3, sem wrapper novo.
     A linha 1 fica vazia de proposito, reservando o rotulo. */
  #csTrilha .cs-rail{
    display:grid; position:sticky; top:0; z-index:6;
    grid-template-columns:repeat(5, 1fr);
    grid-template-rows:var(--pm-rotulo) var(--pm-trilho) auto;
    align-content:center;
    gap:var(--pm-vao) 6px;
    height:var(--pm-palco);
    width:100vw; margin-left:calc(50% - 50vw);
    padding:var(--pm-folga) var(--gutter) 0;
    /* a coluna do texto comeca onde a arte acaba */
    padding-left:calc(var(--gutter) + var(--pm-arte) + var(--e-4));
    /* a camada cobre o cabecote inteiro: sem isto ela roubaria o toque
       da area da arte sem ter nada para fazer com ele */
    pointer-events:none;
  }
  /* a linha vertical e o cheio dela sao a versao de pe do trilho; aqui
     quem acende e cada segmento */
  #csTrilha .cs-rail-linha{ display:none; }

  #csTrilha .cs-rail-ponto{
    grid-row:2;
    width:auto; height:var(--pm-trilho); margin-top:0;
    border:0; border-radius:var(--pm-trilho);
    /* o amarelo entra por cima do trilho apagado crescendo da esquerda:
       e o mesmo "enche" do trilho de pe do desktop, deitado.
       O apagado e escrito a mao, e nao com --linha: v2.css reserva esse
       nome para a LARGURA da coluna do site (`body{--linha:min(...)}`),
       entao aqui ele resolve para um comprimento e a regra inteira cai.
       Este rgba e o mesmo do trilho de pe, em v2.css */
    background:linear-gradient(var(--amarelo), var(--amarelo)) left center / 0 100% no-repeat,
               rgba(12,22,27,.12);
    transition:background-size .5s var(--suave);
    pointer-events:auto;
    transform:none;
  }
  #csTrilha .cs-rail-ponto.esta-aceso{ background-size:100% 100%; }
  /* o destaque da etapa da vez e a arte inteira trocando; crescer o
     segmento em cima disso so engrossaria o risco */
  #csTrilha .cs-rail-ponto.e-agora{ transform:none; }
  /* o segmento tem 4 de altura e o dedo tem 40: a area de toque cresce
     por fora, sem mudar o desenho */
  #csTrilha .cs-rail-ponto::after{
    content:''; position:absolute; inset:-14px -3px;
  }

  /* o contador nasce do js/protocolo-mobile.js, porque o gerador nao tem
     este elemento e o gerador nao e deste lado da conversa */
  #csTrilha .pm-legenda{
    grid-row:3; grid-column:1 / -1;
    display:flex; justify-content:space-between; align-items:baseline; gap:var(--e-3);
    font-family:var(--display); font-size:var(--fs-rotulo); font-weight:var(--peso-medio);
    line-height:1.2; letter-spacing:.04em; color:var(--muted);
  }
  #csTrilha .pm-legenda b{ color:var(--ink); font-weight:var(--peso-semi); }
  #csTrilha .pm-legenda span:last-child{ white-space:nowrap; }

  /* ---------- a coluna de texto, passando por baixo ---------- */
  /* o vao entre etapas vira o proprio recuo do bloco mais o fio: assim o
     fio fica no meio do vao e nao encostado num dos lados */
  #csTrilha .cs-textos{ gap:0; padding:0; }
  #csTrilha .cs-passo{
    padding:40px 0 44px;
    /* mesmo caso do trilho: --linha aqui dentro e largura, nao cor */
    border-bottom:1px solid rgba(12,22,27,.12);
    /* o toque no trilho leva o topo da etapa para logo abaixo do
       cabecote, senao ela pararia escondida atras dele */
    scroll-margin-top:calc(var(--pm-palco) + var(--e-6));
    opacity:.3; transform:none;
    transition:opacity .5s var(--suave);
  }
  #csTrilha .cs-passo.esta-ativa{ opacity:1; }
  #csTrilha .cs-passo:last-child{ border-bottom:0; padding-bottom:0; }

  /* 21 e nao 24, e a esquerda e nao centrado: no lab o titulo divide a
     tela com o cabecote, e centrado ele briga com o rotulo logo acima */
  #csTrilha .cs-passo h3{
    font-size:21px; line-height:1.1; text-align:left;
    margin-bottom:22px;
  }
  #csTrilha .cs-passo-lista{ margin-top:0; gap:10px; }
  /* item de duas linhas com a seta centralizada fica torto: a seta
     acompanha a primeira linha */
  #csTrilha .cs-passo-lista li{
    align-items:flex-start; gap:9px;
    font-size:var(--fs-corpo-s); line-height:1.35;
  }
  #csTrilha .cs-passo-icone{ width:24px; height:24px; margin-top:-2px; }

  /* no celular o cabecote fica na cara de quem le e troca a cada etapa:
     para quem pediu menos movimento no sistema, a troca acontece seca.
     A regra de styles.css so alcanca [data-anima] e [data-sobe], e esta
     dobra nao usa nenhum dos dois */
  @media (prefers-reduced-motion:reduce){
    /* .esta-ativa precisa estar escrito: sem ele a regra do estado ativo
       tem uma classe a mais e continua ganhando com a transicao dela */
    #csTrilha .cs-figura,
    #csTrilha .cs-figura.esta-ativa,
    #csTrilha .cs-rail-ponto,
    #csTrilha .cs-passo,
    #csTrilha .cs-passo.esta-ativa{ transition:none; }
    #csTrilha .cs-figura{ transform:none; }
  }
}

/* Entre o tablet em pe e o limite do desktop a coluna da direita passa
   dos 500 e o trilho vira um fio de ponta a ponta, com o contador num
   canto e a frase no outro. Os segmentos param de crescer e o bloco fica
   com a medida de leitura do celular, ancorado no rotulo. Decisao de
   desenho tomada aqui, nao veio do lab: o lab so foi desenhado em 390. */
@media (min-width:600px) and (max-width:1023px){
  #csTrilha .cs-rail{
    grid-template-columns:repeat(5, minmax(0, 72px));
    justify-content:start;
  }
}

/* em 320 a arte de 132 mais o rotulo nao cabem lado a lado sem o nome
   quebrar em quatro linhas: a arte encolhe e o nome vai junto */
@media (max-width:374px){
  #csTrilha{ --pm-arte:108px; }
  #csTrilha .cs-figura-letra{ font-size:30px; }
  #csTrilha .cs-figura-nome{ font-size:var(--fs-nota); max-width:none; }
  #csTrilha .pm-legenda{ font-size:11px; letter-spacing:.02em; }
}

/* abaixo de 340 a coluna da direita fica com menos de 160 e o contador
   quebra em duas linhas para caber ao lado da frase. Some a frase, e nao
   o contador: o trilho continua respondendo ao toque, so deixa de ser
   anunciado, e em 320 quem chega ali ja rolou a dobra inteira */
@media (max-width:339px){
  #csTrilha .pm-legenda span:last-child{ display:none; }
}