/* ==========================================================================
   AfroChip — A BARRA DE PASSOS E O ECRÃ DE UM PASSO

   Folha própria e não uma secção da `estilo.css`, pela mesma razão que a
   `destino.css` e a `cartao.css` são ficheiros: há três pessoas a mexer no
   fluxo ao mesmo tempo e já se perdeu trabalho aqui com dois lados a guardar
   por cima um do outro. Quando o fluxo assentar, isto funde-se.

   Entra por `@once` a partir de `partials/passos`, porque o molde é
   território de outra pessoa e uma peça que se desenha sozinha traz o seu
   estilo consigo. Vem depois da `estilo.css` no documento: mesma
   especificidade, e a última ganha.

   --------------------------------------------------------------------------
   O QUE ESTA FOLHA TEM DE GARANTIR, E NÃO É BONITEZA:

   1. A BARRA NÃO ROUBA ALTURA AO ECRÃ. A repartição em quatro passos existe
      para o dono deixar de deslizar. Uma barra de progresso alta come
      exactamente o que a repartição poupou. Por isso: sem cartão, sem sombra,
      sem cor de fundo — um traço por cima de cada passo e o nome por baixo.

   2. O ESTADO LÊ-SE SEM COR. Quem não distingue o amarelo do cinzento tem de
      ver onde está: o passo actual leva o número em tinta cheia e o nome a
      negro; os cumpridos levam um visto desenhado; os que faltam ficam
      esbatidos. A cor confirma, não informa.

   3. O AMARELO É SUPERFÍCIE E NUNCA TINTA. É a regra da marca em todo o site:
      aparece no traço de progresso e no fundo do número, com o texto sempre
      em tinta por cima.
   ========================================================================== */

/* ==========================================================================
   1. A BARRA
   ========================================================================== */

.passos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 clamp(18px, 3vw, 30px);
}

.passos__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.4vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.passos__passo {
  min-width: 0;
}

/* O traço por cima é a barra de progresso. Não há barra nenhuma por baixo a
   fingir percentagem: quatro traços, e o que está pintado é o que está
   feito. */
.passos__caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 2px 0;
  border-top: 3px solid var(--linha);
  color: var(--tinta-3);
  text-decoration: none;
  transition: border-color .3s var(--suave), color .3s var(--suave);
}

.passos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--rmax);
  border: 1.5px solid var(--linha-forte);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--tinta-3);
}

.passos__numero svg {
  width: 14px;
  height: 14px;
}

.passos__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.passos__nome {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A resposta que a pessoa deu naquele passo — "Portugal", "10 dias". É o que
   transforma quatro rótulos genéricos num resumo da compra. */
.passos__resumo {
  font-size: 12px;
  line-height: 1.3;
  color: var(--tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- cumprido: respondido, e com o visto a dizê-lo ----------------------- */

.passos__passo--feito .passos__caixa {
  border-top-color: var(--amarelo);
  color: var(--tinta-2);
}

.passos__passo--feito .passos__numero {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--tinta);
}

/* --- anterior: passou-se por lá e não se respondeu ----------------------
   Quem abre `/viagem` directamente está no passo 2 sem ter escolhido destino
   nenhum. O passo 1 ficou para trás e continua por responder: leva o número e
   não o visto, porque o visto é precisamente o que faz alguém não voltar lá.
   Clicável para trás na mesma — é lá que se responde. */

.passos__passo--anterior .passos__caixa {
  border-top-color: var(--linha-forte);
  color: var(--tinta-2);
}

.passos__passo--anterior .passos__numero {
  border-color: var(--linha-forte);
  color: var(--tinta-2);
}

/* --- o que é ligação diz-se ao rato e ao teclado -------------------------
   Pela ETIQUETA e não pela classe de estado: quem é `<a>` é clicável, e é o
   controlador que decide quem é `<a>`. Uma folha de estilo que decidisse isto
   por sua conta acabava a pintar de clicável um `<span>`. */

a.passos__caixa:hover {
  color: var(--tinta);
}

a.passos__caixa:hover .passos__nome {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.passos__caixa:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* --- actual -------------------------------------------------------------- */

.passos__passo--actual .passos__caixa {
  border-top-color: var(--tinta);
  color: var(--tinta);
}

.passos__passo--actual .passos__numero {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--tinta-inv);
}

.passos__passo--actual .passos__nome {
  font-weight: 700;
}

/* --- por fazer: não é ligação, e vê-se que não é ------------------------- */

.passos__passo--futuro .passos__caixa {
  opacity: .55;
}

/* --- a contagem por extenso ---------------------------------------------- */

.passos__conta {
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* --- ecrãs estreitos ------------------------------------------------------
   O número por cima do nome, e o resumo sai. Quatro colunas continuam a ser
   quatro colunas: o que a barra tem de dizer num telemóvel é a mesma coisa
   que diz num portátil — onde estou e quanto falta. */
@media (max-width: 720px) {
  .passos__caixa {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .passos__nome {
    font-size: 12px;
  }

  .passos__resumo {
    display: none;
  }
}

@media (max-width: 420px) {
  .passos__nome {
    font-size: 11px;
  }
}

/* ==========================================================================
   2. O ECRÃ DE UM PASSO

   Estreito de propósito. Uma pergunta que atravessa o ecrã inteiro obriga os
   olhos a atravessá-lo também; a meia largura lê-se de uma vez, e sobra
   altura — que é a moeda desta página.
   ========================================================================== */

.seccao--passo {
  padding: clamp(24px, 4vw, 44px) 0 clamp(40px, 6vw, 72px);
}

.passo__envelope {
  max-width: 760px;
}

.passo__cabeca {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.passo__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.passo__bandeira {
  flex: 0 0 auto;
  width: 38px;
  height: 26px;
  border-radius: var(--r1);
  box-shadow: var(--sombra-1);
  object-fit: cover;
}

.passo__lead {
  margin: 0;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* --- o formulário --------------------------------------------------------- */

.passo__forma {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 26px);
}

.passo__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* A `.campo + .campo` da folha principal empurra 16px entre campos irmãos, e
   aqui quem trata do espaço é a grelha. */
.passo__campo + .passo__campo {
  margin-top: 0;
}

.passo__campo--largo {
  grid-column: 1 / -1;
}

.passo__nota {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r2);
  background: var(--amarelo-luz);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
}

.passo__accoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 3vw, 28px);
}

/* A SAÍDA QUE SALTA O PASSO. Ao lado do botão e não escondida em baixo: quem
   chegou aqui por engano, ou só quer ver quanto custa, sai num clique. Está
   em ligação e não em botão de propósito — não compete com o que se quer que
   a pessoa faça, mas também não se esconde dela. */
.passo__saltar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
}

.passo__saltar a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta);
  text-underline-offset: 3px;
}

.passo__saltar span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinta-3);
}

/* --- telemóvel ------------------------------------------------------------
   As três perguntas empilham, e a partir daí é uma luta por pixels: num ecrã
   de 812 px o botão acabava aos 762 e a SAÍDA que salta o passo caía aos 838,
   fora da vista. Um ecrã que só mostra o caminho para a frente não está a dar
   escolha nenhuma — a saída tem de se ver sem deslizar, como o botão.

   O que se apertou: os espaços entre campos, a entrada da secção e o corpo da
   chamada. Nenhuma palavra foi cortada e nenhum campo foi escondido. */
@media (max-width: 620px) {
  .seccao--passo {
    padding-top: 18px;
  }

  .passo__cabeca {
    margin-bottom: 14px;
  }

  .passo__lead {
    font-size: 14.5px;
    line-height: 1.45;
  }

  .passo__forma {
    gap: 14px;
  }

  .passo__campos {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .passo__accoes {
    align-items: stretch;
    flex-direction: column;
  }

  .passo__accoes .botao {
    justify-content: center;
  }
}