/* ==================================================================
   07 · PERGUNTAS FREQUENTES  (widget fp-faq)

   Copiado do lab (lab/home/secoes/faq/faq.css). A partir daqui, este
   arquivo e o que vale. O widget serve tambem a outras paginas e posts, e
   acrescenta so o que isso pede (no fim do arquivo): formato de uma
   coluna em qualquer largura, espacamento menor, respostas com mais de
   um paragrafo. Com os ajustes padrao, e a secao do lab.

   Papel. Perguntas numa coluna larga a esquerda, separadas por fios claros
   parados; a resposta aberta na coluna da direita, comecando na altura da
   propria pergunta. Uma por vez. Abrir uma resposta nao desloca nenhuma
   pergunta. Sem numeros: as perguntas nao sao sequencia. O indicador e o
   "+" vermelho da Experiencia, que gira e vira "x" quando abre.
   ================================================================== */

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

.faq__h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--navy);
  text-wrap:balance;
}

/* Uma linha por pergunta e uma ultima flexivel. A resposta ocupa da linha
   da sua pergunta ate o fim da grade; quando ela e mais alta que esse
   trecho, a sobra vai so para a linha flexivel (e assim que a grade reparte
   espaco de item que cruza trilha flexivel). Nenhuma pergunta desce. */
.faq__lista{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-rows:repeat(var(--n),auto) 1fr;
  column-gap:clamp(3rem,6vw,8rem);
  margin-top:clamp(3.5rem,9vh,6.5rem);
}
.faq__item{display:contents}

.faq__cab{
  grid-column:1;
  grid-row:var(--i);
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  border-top:1px solid var(--rule-strong);
}
.faq__item:last-child .faq__cab{border-bottom:1px solid var(--rule-strong)}

.faq__botao{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  column-gap:clamp(1rem,2vw,2rem);
  width:100%;
  padding-block:clamp(1.25rem,2.8vh,1.875rem);
  text-align:left;
}
.faq__pergunta{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,1.9vw,1.875rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--navy);
  text-wrap:balance;
}
.faq__sinal{
  display:block;
  margin-top:-.08em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.75rem,2.6vw,2.5rem);
  line-height:1;
  color:var(--red);
  transition:transform .45s var(--ease-out);
}
@media (hover:hover){
  .faq__botao:hover .faq__sinal{transform:translateX(.12em)}
}
.faq__botao[aria-expanded="true"] .faq__sinal,
.faq__botao[aria-expanded="true"]:hover .faq__sinal{transform:rotate(45deg)}

.faq__resposta{
  grid-column:2;
  grid-row:var(--i) / -1;
  align-self:start;
  /* O mesmo respiro de cima do botao: a primeira linha da resposta na
     altura da primeira linha da pergunta. */
  padding-top:clamp(1.25rem,2.8vh,1.875rem);
}
.faq__resposta[hidden]{display:none}
.faq__resposta p{
  max-width:42ch;
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: acordeao com a resposta embaixo da pergunta.
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .faq{padding-block:clamp(4.5rem,14vw,7rem)}
  .faq__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .faq__lista{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    margin-top:clamp(2.5rem,10vw,4rem);
  }
  .faq__item{display:block;border-top:1px solid var(--rule-strong)}
  .faq__item:last-child{border-bottom:1px solid var(--rule-strong)}
  .faq__cab,
  .faq__item:last-child .faq__cab{border:0}
  .faq__pergunta{font-size:clamp(1.125rem,5.2vw,1.375rem)}
  .faq__sinal{font-size:1.75rem}
  /* A altura anima no painel: o respiro fica no ultimo paragrafo (no lab
     so ha um). */
  .faq__resposta{overflow:hidden;padding-top:0}
  .faq__resposta p{font-size:var(--t-body)}
  .faq__resposta p:last-child{padding-bottom:1.5rem}
}

/* ------------------------------------------------------------------
   Opcoes do widget
   ------------------------------------------------------------------ */

/* Resposta com mais de um paragrafo (no lab, sempre um). */
.faq__resposta p + p{margin-top:1em}

/* Link dentro da resposta. A base tira cor e sublinhado de todo link;
   aqui ele precisa se distinguir do texto. */
.faq__resposta a{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:text-decoration-color .3s var(--ease-out);
}
@media (hover:hover){
  .faq__resposta a:hover{text-decoration-color:var(--red)}
}

/* Sem margem lateral propria: para quando o container ja tem a dele
   (coluna de post, container estreito). */
.faq--sem-margem .caixa{padding-inline:0;max-width:none}

/* Espacamento vertical. .faq.faq--x vence o .faq do celular. */
.faq.faq--compacto{padding-block:clamp(3rem,7vh,5rem)}
.faq.faq--sem-respiro{padding-block:0}

/* Formato "uma coluna": o acordeao do celular em qualquer largura, para
   colunas estreitas (post, barra lateral). Repete as regras de layout do
   bloco acima de proposito: la elas dependem da largura da tela, aqui da
   escolha no widget. Abaixo de 1100px o bloco do celular ja cuida dos
   corpos e margens; os de tela larga ficam na media query no fim. O
   titulo mantem o corpo de cada largura. */
.faq--coluna .faq__lista{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:none;
}
.faq--coluna .faq__item{display:block;border-top:1px solid var(--rule-strong)}
.faq--coluna .faq__item:last-child{border-bottom:1px solid var(--rule-strong)}
.faq--coluna .faq__cab,
.faq--coluna .faq__item:last-child .faq__cab{border:0}
.faq--coluna .faq__sinal{font-size:1.75rem}
.faq--coluna .faq__resposta{overflow:hidden;padding-top:0}
.faq--coluna .faq__resposta p{max-width:65ch;font-size:var(--t-body)}
.faq--coluna .faq__resposta p:last-child{padding-bottom:1.5rem}
@media (min-width:1100px){
  .faq--coluna .faq__lista{margin-top:clamp(2rem,5vh,3.5rem)}
  .faq--coluna .faq__pergunta{font-size:clamp(1.125rem,1.6vw,1.5rem)}
}