/* ==========================================================================
   /perguntas-frequentes: CSS exclusivo da pagina

   Quase tudo aqui e kit: .secao-cabecalho--dividido, .painel-dados,
   .especificacoes, .acordeao e .aviso vem prontos de site.css e pagina.css.
   Este arquivo so resolve tres coisas que nao existem em lugar nenhum:

     01. o mapa de assuntos que ocupa o painel da capa;
     02. a medida de leitura dos acordeoes, que aqui sao o corpo da pagina
         inteira e nao a coluna estreita que sec-duvidas.css desenha, e o
         link dentro da resposta, que o kit ainda nao cobria;
     03. um ajuste de escopo na secao da home reaproveitada no fim.

   Nenhum valor escrito a mao: so var(). Pontos de quebra do sistema
   (980, 680, 380); 1200 nao foi preciso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Mapa de assuntos: painel da capa

   Serve de sumario: quem chega da busca ve os quatro blocos, quantas
   perguntas cada um tem, e salta direto para o seu. E uma lista de ancoras,
   nao um cartao decorativo.
   -------------------------------------------------------------------------- */
.mapa-respostas {
    display: grid;
    gap: var(--e4);
}

.mapa-respostas ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-respostas li + li {
    border-top: 1px solid var(--borda);
}

.mapa-respostas a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--e3);
    padding-block: var(--e3);
    color: var(--suave);
    transition: color var(--dur-1) var(--ease);
}

.mapa-respostas a:hover {
    color: var(--texto);
}

.mapa-indice {
    font-family: var(--fonte);
    font-size: var(--c5);
    font-weight: var(--p-max);
    letter-spacing: var(--tk-largo);
    font-variant-numeric: tabular-nums;
    color: var(--verde);
}

.mapa-nome {
    font-size: var(--c3);
    line-height: 1.55;
    letter-spacing: var(--tk3);
}

.mapa-conta {
    font-size: var(--c5);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tenue);
}

.mapa-rodape {
    margin: 0;
    font-size: var(--c4);
    line-height: 1.6;
    color: var(--tenue);
}

/* --------------------------------------------------------------------------
   02. Blocos de assunto

   O .acordeao do site foi desenhado para caber na coluna de 1.18fr da secao
   "Duvidas" da home. Aqui ele ocupa o .container inteiro, e a mil e duzentos
   pixels a pergunta ficaria longe demais do sinal de mais. Dois limites de
   medida resolvem: um para a linha clicavel, outro para a resposta.
   -------------------------------------------------------------------------- */
.bloco-assunto .acordeao {
    max-width: 104ch;
}

.bloco-assunto .acordeao p {
    max-width: 76ch;
}

/* Link dentro da resposta: nada aqui. O .acordeao entrou na regra de "link em
   texto corrido" de css/pagina.css, que era o lugar certo. Esta pagina foi so
   a primeira a ter link dentro de acordeao. */

/* --------------------------------------------------------------------------
   03. A secao "Duvidas" da home, reaproveitada

   Nao da para editar o componente: ele pertence a home, onde o <b> do
   sobretitulo e o numero do capitulo ("10 Duvidas"). Nesta pagina o numero
   nao significa nada e ainda se le como quantidade: a secao traz dezesseis
   perguntas, nao dez. O lugar certo do ajuste seria o proprio componente;
   como ele e compartilhado, o conserto mora aqui, preso a classe de slug.
   -------------------------------------------------------------------------- */
.pagina-perguntas-frequentes .duvidas-intro .sobretitulo b {
    display: none;
}

/* --------------------------------------------------------------------------
   04. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .bloco-assunto .acordeao {
        max-width: none;
    }
}

@media (max-width: 680px) {
    /* Alvo de toque: o padding vertical maior leva a linha do mapa para
       alem dos 44px sem precisar de altura minima escrita a mao. */
    .mapa-respostas a {
        padding-block: var(--e4);
    }

    .bloco-assunto .acordeao p {
        max-width: none;
    }
}

@media (max-width: 380px) {
    /* Sem espaco para tres colunas: a contagem desce para a linha de baixo,
       alinhada com o nome do bloco. */
    .mapa-respostas a {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--e1) var(--e3);
    }

    .mapa-conta {
        grid-column: 2;
    }
}