/* ==========================================================================
   Perguntas — a secao 04 da home.

   Cartao branco sobre o palco, na mesma gramatica da secao Indices:
   cabecalho numerado, manifesto a esquerda e, a direita, as perguntas em
   acordeao. O acordeao (.qa) e componente, em components.css; aqui vive so
   a composicao.
   ========================================================================== */

.perguntas__card {
  display: grid;
  gap: var(--section-gap);
}

/* --------------------------------------------------------------------------
   Cabecalho editorial
   -------------------------------------------------------------------------- */
.perguntas__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.perguntas__meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Manifesto + lista
   -------------------------------------------------------------------------- */
.perguntas__grid {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem);
  align-items: start;
}

.perguntas__manifesto {
  display: grid;
  gap: clamp(1.125rem, 0.8rem + 1.6vw, 2rem);
  min-width: 0;
}

.perguntas__headline {
  margin-left: -0.035em; /* alinhamento optico da haste */
}

.perguntas__prose {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.125rem);
  max-width: 46ch;
}

.perguntas__lead {
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

.perguntas__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(0.25rem, 1vw, 0.625rem);
}

.perguntas__list {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Desktop: manifesto a esquerda, perguntas a direita. O manifesto acompanha
   a leitura da lista, como os valores de referencia nas tabelas.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .perguntas__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 5rem);
  }

  .perguntas__manifesto {
    position: sticky;
    top: calc(var(--header-h) + 3 * var(--shell-pad));
  }
}