/* ==================================================================
   LISTA DE H3  (widget fp-lista; secoes 03 e 04 da pagina Especialista
   WordPress)

   Copiado do lab (lab/especialista/secoes/lista/lista.css), que fica
   congelado como referencia aprovada. O formato "frases" do lab, recusado
   para a 03, nao veio.

   Dois formatos da mesma marcacao, cada um com o seu fundo:
     .lista--grade  (papel)  duas colunas com eixo e o fechamento numa
                             placa navy (ver o bloco GRADE);
     .lista--presa  (navy)   titulo e abertura presos a esquerda, a lista
                             rola a direita e o item na altura de leitura
                             acende (marca laranja, como a de Como
                             trabalhamos).
   Nenhum dos dois repete a FAQ (pergunta a esquerda, resposta ao lado) nem
   a Base (grade de tres).
   ================================================================== */

.lista{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem);
}

.lista__h2{
  font-family:var(--font-display);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--fg);
  text-wrap:balance;
}
.lista__abertura{
  display:grid;
  gap:1em;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}
.lista__h3{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--fg);
  text-wrap:balance;
}
.lista__texto{
  display:grid;
  gap:1em;
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* Fio de cada item: pseudo-elemento, para ser desenhado da esquerda para
   a direita na entrada (--fio de 0 a 1). */
.lista__item{position:relative}
.lista__item::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--linha-forte);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.lista__marca{display:none}

/* ------------------------------------------------------------------
   PRESA
   ------------------------------------------------------------------ */

.lista--presa .lista__caixa{
  --vao:clamp(3rem,6vw,8rem);
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:var(--vao);
  align-items:start;
}
.lista--presa .lista__topo{
  position:sticky;
  top:calc(var(--topo) + clamp(1rem,3vh,2rem));
}
.lista--presa .lista__h2{font-size:clamp(2.25rem,4.2vw,4.75rem)}
.lista--presa .lista__abertura{margin-top:clamp(1.25rem,3vh,2rem);max-width:44ch}

.lista--presa .lista__item{padding-block:clamp(1.75rem,4vh,2.5rem) clamp(2.5rem,6vh,3.75rem)}
.lista--presa .lista__item:first-child{padding-top:clamp(1.75rem,4vh,2.5rem)}
.lista--presa .lista__marca{
  display:block;
  position:absolute;
  z-index:1;
  top:-4px;
  left:0;
  width:9px;
  height:9px;
  background:var(--orange);
  transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.lista--presa .lista__h3{
  font-size:clamp(1.5rem,2.3vw,2.5rem);
  line-height:1.05;
  letter-spacing:-.025em;
  transition:color .5s var(--ease-out);
}
.lista--presa .lista__texto{
  max-width:52ch;
  margin-top:clamp(.875rem,2vh,1.25rem);
  transition:color .5s var(--ease-out);
}

/* Estado apagado: so existe com movimento ligado (.anima, posto pelo JS).
   Sem JS ou com movimento reduzido, tudo aceso. */
.lista--presa.anima .lista__marca{background:var(--bg);box-shadow:inset 0 0 0 1px rgba(251,251,250,.5)}
.lista--presa.anima .lista__item:not(.is-ativo) .lista__h3{color:rgba(251,251,250,.45)}
.lista--presa.anima .lista__item:not(.is-ativo) .lista__texto{color:rgba(251,251,250,.5)}
.lista--presa.anima .lista__item.is-ativo .lista__marca{background:var(--orange);box-shadow:none}

/* ------------------------------------------------------------------
   GRADE
   Duas colunas, tres linhas: as cinco situacoes e, na sexta celula, a
   resposta (o fechamento numa placa navy chapada, a unica celula com
   fundo). Fio vertical no eixo e fio horizontal em cada linha, desenhados
   na entrada. A lista vira "display:contents" para os itens e a placa
   dividirem a mesma grade.
   ------------------------------------------------------------------ */

.lista--grade .lista__caixa{
  --vao:clamp(3rem,6vw,6rem);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--vao);
}
/* Abertura na mesma grade: o texto comeca na coluna da direita, alinhado
   pela base com o titulo. */
.lista--grade .lista__topo{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  align-items:end;
  margin-bottom:clamp(3.5rem,9vh,6.5rem);
}
.lista--grade .lista__h2{max-width:11em;font-size:clamp(2.5rem,5vw,5.5rem)}
.lista--grade .lista__abertura{max-width:44ch}

.lista--grade .lista__itens{display:contents}
/* Cada celula ocupa duas linhas da grade e as herda: numa mesma linha os
   textos comecam na mesma altura, mesmo quando um H3 quebra e o vizinho
   nao. */
.lista--grade .lista__item,
.lista--grade .lista__fim{
  grid-row:span 2;
  display:grid;
  grid-template-rows:subgrid;
  row-gap:clamp(.75rem,1.6vh,1.125rem);
  align-content:start;
  padding-block:clamp(1.5rem,3.2vh,2.25rem) clamp(2.75rem,6.5vh,4.5rem);
}
/* Fio horizontal: o da coluna da esquerda atravessa o vao ate o da direita,
   e os dois formam uma linha so. */
.lista--grade .lista__item::before{background:var(--navy)}
.lista--grade .lista__item:nth-child(odd)::before{right:calc(-1 * var(--vao))}
/* Fio vertical no eixo: desenhado pela celula da esquerda, no meio do vao. */
.lista--grade .lista__item:nth-child(odd)::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  right:calc(-.5 * var(--vao));
  width:1px;
  background:var(--navy);
  transform:scaleY(var(--fio-v,1));
  transform-origin:top;
}
.lista--grade .lista__h3{
  font-size:clamp(1.5rem,2.4vw,2.5rem);
  line-height:1.05;
  letter-spacing:-.025em;
}
.lista--grade .lista__texto{max-width:46ch}

/* A resposta: placa navy do eixo ate a borda da caixa, com o texto na
   mesma coluna dos textos da direita e centrado na altura da placa. */
.lista--grade .lista__fim{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-left:calc(-.5 * var(--vao));
  padding-inline:calc(.5 * var(--vao)) clamp(1.5rem,3vw,3rem);
  padding-block:clamp(1.75rem,4vh,2.75rem);
  background:var(--navy);
  color:var(--paper);
  clip-path:inset(0 calc(100% - 100% * var(--placa,1)) 0 0);
}
.lista--grade .lista__fechamento{
  max-width:30ch;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.75rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--paper);
  text-wrap:pretty;
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: uma coluna; nada preso, tudo aceso
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .lista{padding-block:clamp(4.5rem,14vw,7rem)}
  .lista--presa .lista__h2{font-size:clamp(2.25rem,9.5vw,4rem)}

  .lista--presa .lista__caixa{grid-template-columns:minmax(0,1fr)}
  .lista--presa .lista__topo{position:static}
  .lista--presa .lista__itens{margin-top:clamp(2.5rem,10vw,4rem)}
  .lista--presa .lista__item{padding-block:1.5rem 2.25rem}
  .lista--presa .lista__h3{font-size:clamp(1.375rem,6.4vw,2rem)}

  .lista--grade .lista__caixa{grid-template-columns:minmax(0,1fr)}
  .lista--grade .lista__topo{display:block;margin-bottom:clamp(2.5rem,10vw,4rem)}
  .lista--grade .lista__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .lista--grade .lista__abertura{margin-top:clamp(1.25rem,5vw,2rem)}
  .lista--grade .lista__item,.lista--grade .lista__fim{display:block;grid-row:auto;padding-block:1.5rem 2.25rem}
  .lista--grade .lista__item:nth-child(odd)::before{right:0}
  .lista--grade .lista__item:nth-child(odd)::after{display:none}
  .lista--grade .lista__h3{font-size:clamp(1.375rem,6.4vw,2rem)}
  .lista--grade .lista__texto{margin-top:.75rem}
  .lista--grade .lista__fim{margin:1rem calc(-1 * var(--margem)) 0;padding:2rem var(--margem)}
}