/* ==========================================================================
   PASSOS — lista que passa sozinha, com a foto acompanhando
   Prefixo: passo- / passos-
   Tokens usados: --fg --fg-2 --fg-muted --rule --rule-2 --accent --display
                  --sans --ease --radius-pill

   Substituiu o conteudo/imagem-lista-numerada em 23/09. Lá os quatro textos
   ficavam abertos ao mesmo tempo e a dobra passava de mil pixels de altura;
   aqui só o item ativo abre, e a dobra cabe numa tela.

   O TEMPO MORA NA BARRA. A barra do item ativo é uma animação de CSS, e o
   script só escuta o fim dela. Três coisas saem de graça daí: pausar é
   `animation-play-state`, a barra nunca sai de sincronia com o passo porque é
   ela que dita o passo, e quem pede menos movimento não recebe animação,
   o que desliga o avanço automático sem nenhuma exceção escrita no script.
   ========================================================================== */

.passos{--passo-dur:6.5s}

/* ---------------------------------------------------------------- grade */
.passos-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(24px,3.2vw,48px);
  /* Perto do cabeçalho de propósito: a moldura e o título são a mesma peça,
     e o vão de 44px que havia aqui os separava em dois blocos. */
  margin-top:clamp(14px,1.6vw,22px);
  align-items:start;
}

/* ---------------------------------------------------------------- lista */
.passos-lista{list-style:none;margin:0;padding:0}

.passo{position:relative;border-top:1px solid var(--rule)}
.passo:last-child{border-bottom:1px solid var(--rule)}

.passo-bt{
  display:flex;align-items:flex-start;gap:16px;
  width:100%;padding:20px 14px;
  text-align:left;color:inherit;cursor:pointer;
  background:none;border:0;-webkit-appearance:none;appearance:none;
  font:inherit;
  transition:background .35s var(--ease);
}
.passo.is-on .passo-bt{background:rgba(255,255,255,.04)}

.passo-n{
  flex:0 0 auto;padding-top:5px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--fg-muted);transition:color .3s;
}
.passo.is-on .passo-n{color:var(--accent)}

.passo-corpo{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}

.passo-titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.6vw,21px);line-height:1.2;letter-spacing:-.02em;
  color:var(--fg);
}

/* Fechado, o texto não tem altura. max-height animável em vez de height:auto,
   que não interpola — mesma receita do acordeão da casa. O teto é folgado de
   propósito: o texto mais longo tem quatro linhas. */
.passo-desc{
  font-size:15px;line-height:1.6;color:var(--fg-2);
  max-width:46ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease);
}
.passo.is-on .passo-desc{max-height:14em;opacity:1;margin-top:8px}

.passo-seta{
  flex:0 0 auto;width:15px;height:15px;margin-top:6px;
  color:var(--fg-muted);
  transition:color .25s,transform .25s var(--ease);
}
.passo-bt:hover .passo-seta{color:var(--fg-2);transform:translate(2px,-2px)}

/* A barra fica POR CIMA do fio de baixo do item, e não no lugar dele: sem o
   fio embaixo, o item ativo pareceria perder a borda enquanto a barra corre. */
.passo-barra{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  display:block;overflow:hidden;pointer-events:none;
}
.passo-barra i{
  display:block;height:100%;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
}
.passo.is-on .passo-barra i{animation:passo-enche var(--passo-dur) linear forwards}
.passos.esta-pausado .passo.is-on .passo-barra i{animation-play-state:paused}

@keyframes passo-enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------------------------------------------------------------- mídia */
/* 5/4, um passo em direção ao retrato e não mais que isso (23/09). Foto em pé
   de verdade jogava a dobra para mil pixels de altura, que é o que esta
   remontagem veio resolver; 4/3 deixava a coluna deitada demais ao lado de uma
   lista que é vertical. */
.passos-midia{
  position:relative;
  aspect-ratio:5/4;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--rule);
  background:var(--bg);
}

/* As quatro fotos ocupam o mesmo quadro; só a .is-on aparece. Trocar `src`
   piscaria enquanto a próxima decodifica. */
.passo-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity .8s var(--ease);
}
.passo-slide.is-on{opacity:1}
.passo-slide img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------------------------------------------------------------- telas estreitas */
@media(max-width:900px){
  .passos-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  /* A foto vem primeiro: ela é o que dá contexto antes de a lista fazer
     sentido, e empilhada embaixo ela viraria rodapé da dobra. */
  .passos-midia{order:-1;aspect-ratio:3/2}
}

@media(max-width:600px){
  /* Mais ar que no desktop, e não menos: no celular o item fechado é só uma
     linha de texto, e com 18px em cima e embaixo os quatro viravam uma parede
     de títulos colados. O alvo de toque agradece junto. */
  .passo-bt{padding:26px 8px;gap:12px}
}

@media(prefers-reduced-motion:reduce){
  /* Sem animação não há fim de animação, e sem fim de animação o passo não
     vira sozinho: a dobra fica manual, que é o que a preferência pede. */
  .passo.is-on .passo-barra i{animation:none;transform:scaleX(1)}
  .passo-desc,.passo-slide,.passo-bt{transition-duration:.01s}
}

/* ==========================================================================
   A MOLDURA (23/09)

   Pedido do Gabriel, do exemplo que ele mandou: "um border nessa seção, para
   ficar mais organizado". É um fio só em volta da grade inteira, com respiro
   por dentro. O efeito é o de uma peça fechada: lista e foto param de ser dois
   blocos soltos na página e passam a ser duas colunas de uma mesma caixa.

   O fio é o --rule da página, o mesmo dos cards do bento e dos filetes: existe
   um valor só para tudo que separa superfície aqui.
   ========================================================================== */

.passos-grid{
  border:1px solid var(--rule);
  border-radius:8px;
  padding:clamp(24px,3.2vw,46px);
}

/* ---------------------------------------------------------------- cabeçalho
   TÍTULO E APOIO LADO A LADO (23/09), na formatação que o Gabriel aprovou.
   Empilhados, o apoio empurrava a moldura 60px para baixo e a dobra crescia
   sem ganhar nada; ombro a ombro, os dois ocupam a mesma faixa de altura.

   As duas colunas são iguais, e é o que mantém o apoio com uma medida de
   leitura confortável: no lugar inteiro ele passaria de 100 caracteres por
   linha.

   ALINHADOS PELA BASE, e não pelo topo (23/09). São dois blocos de altura
   diferente, um com duas linhas de 48px e outro com duas de 27px; presos pelo
   topo, sobrava um degrau embaixo, e era ele que o Gabriel marcou. Pela base,
   a última linha dos dois pousa na mesma régua, que é a mesma régua em que a
   moldura começa. */
.passos-topo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
}
/* Alinhado à direita (23/09), fechando a caixa pela borda externa: com as duas
   colunas alinhadas à esquerda, a segunda ficava com o lado direito esfarrapado
   bem em cima da borda da moldura. */
/* O deslocamento de 3px acerta a base VISUAL: a caixa de linha do título é
   muito mais alta que a do apoio, então bases de caixa alinhadas deixam as
   letras desencontradas por alguns pixels. */
/* text-wrap:balance: o navegador distribui as palavras para as duas linhas
   ficarem com larguras parecidas, em vez de encher a primeira e deixar o
   resto na segunda. É a mesma propriedade que o core já dá a todo h1..h4;
   aqui ela vale para o apoio porque ele é bloco curto, e bloco curto com
   linhas desiguais lê como sobra, não como parágrafo. */
.passos-apoio{
  text-align:right;margin-left:auto;margin-bottom:3px;
  text-wrap:balance;
}

@media(max-width:900px){
  .passos-topo{grid-template-columns:minmax(0,1fr);gap:14px}
  /* Empilhado, alinhar à direita seria só desalinho: volta para a esquerda. */
  .passos-apoio{margin-top:0;text-align:left}
}

/* No celular ele acompanha o título, que é centralizado como o resto da
   página. A regra fica aqui, e não no pagina.css, porque esta folha carrega
   depois e venceria a de lá de qualquer jeito. */
@media(max-width:680px){
  .passos-apoio{text-align:center;margin-inline:auto}
}

/* Dentro da moldura, o primeiro item não precisa de fio em cima: a própria
   moldura já é o fio. O último também não, pelo mesmo motivo. */
.passo:first-child{border-top:0}
.passo:last-child{border-bottom:0}