/* Bike Fit Lab — faq.css (agente FAQ, v7)
 * A secção #perguntas (templates/partials/sections/faq.php) na home e em /guias.
 * Uma coluna por omissão: título, lead, grupos como chips, filtro (só com JS), e os grupos com <details>.
 * Em ≥ 64em e quando a secção tem pelo menos 38rem de largura útil (container query), duas colunas: a primeira
 * fica sticky (título, lead, lista dos grupos, filtro), a segunda tem os grupos. Em /guias (.page--cols) as
 * colunas são as da página (34rem | resto). Sem JS nada disto depende de classes: o filtro fica escondido.
 * Só tokens de site.css; sem gradientes, sombras ou filetes a 1 px; a zebra é a cor --surface nas linhas ímpares.
 */

.faq { container: faq / inline-size; }
.faq__grid > * + * { margin-top: 2rem; }
.faq__aside > * + * { margin-top: 1.25rem; }
.faq h2 + .faq__lead { margin-top: 1.5rem; }
.faq__lead { max-width: 36ch; line-height: 1.5; }

/* Grupos: chips numa coluna só (em duas colunas passam a lista vertical, ver em baixo). */
.faq__groups { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq__groups a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: max(1rem, var(--step-small)); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.faq__groups .faq__n { font-weight: 400; color: var(--muted); }
.faq__groups a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.faq__groups a[aria-current="true"] .faq__n { color: inherit; }
.faq__groups .is-empty a { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
  .faq__groups a:hover { background: var(--accent); color: var(--accent-ink); }
  .faq__groups a:hover .faq__n { color: inherit; }
}

/* Filtro: só aparece quando o JS corre (faq.js); o rótulo é .sr-only, o placeholder repete-o. */
.faq__search { display: none; }
.js .faq__search { display: block; }
.faq__search .field { max-width: 24rem; }
.faq__count { margin-top: 0.6rem; }
.faq__count:empty { display: none; }

/* Corpo: um h3 por grupo e a lista de <details>. A lista sai 1rem para fora para o texto alinhar com o h3. */
.faq__group + .faq__group { margin-top: 3rem; }
.faq__group h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.faq__group h3 + .faq__list { margin-top: 1rem; }
.faq__list { margin: 1rem -1rem 0; max-width: none; line-height: 1.5; }
.faq__item { background: none; }
.faq__item:nth-child(odd) { background: var(--surface); }
.faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 1.75rem; column-gap: 1rem; align-items: center; min-height: 3.25rem; padding: 0.8rem 1rem; font-size: var(--step-body); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; transition: color var(--t-hover) ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.faq__q { min-width: 0; }

/* Marcador: quadrado na cor contrária à linha; o "+" são dois traços de 2 px que rodam 45° para "×" (o quadrado fica quieto). */
.faq__marker { position: relative; width: 1.75rem; height: 1.75rem; background: var(--surface); color: var(--ink); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.faq__item:nth-child(odd) .faq__marker { background: var(--bg); }
.faq__marker::before, .faq__marker::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%) rotate(0deg); transition: transform var(--t-ui) var(--ease-out); }
.faq__marker::before { width: 0.875rem; height: 2px; }
.faq__marker::after { width: 2px; height: 0.875rem; }
.faq__item[open] .faq__marker { background: var(--ink); color: var(--bg); }
.faq__item[open] .faq__marker::before, .faq__item[open] .faq__marker::after { transform: translate(-50%, -50%) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { color: var(--accent); }
  .faq__item summary:hover .faq__marker { background: var(--accent); color: var(--accent-ink); }
}

.faq__answer { padding: 0 3.75rem 1.25rem 1rem; }
.faq__answer p { max-width: 60ch; line-height: 1.55; }

/* Filtro ativo (faq.js): escondidos saem do fluxo; a zebra é refeita por classe para não saltar. */
.faq__item[hidden], .faq__group[hidden] { display: none; }
.faq.is-filtering .faq__item { background: none; }
.faq.is-filtering .faq__item .faq__marker { background: var(--surface); }
.faq.is-filtering .faq__item.is-alt { background: var(--surface); }
.faq.is-filtering .faq__item.is-alt .faq__marker { background: var(--bg); }
.faq.is-filtering .faq__item[open] .faq__marker { background: var(--ink); }

/* Página /guias: a secção não usa a grelha .page__text | .page__figs; a grelha é a de .faq__grid. */
.page .faq__item > * + *, .page .faq__answer > * + * { margin-top: 0; }

/* Duas colunas: em ≥ 64em e só quando a secção tem largura para isso (na home a coluna de leitura é mais estreita). */
@media (min-width: 64em) {
  .page--cols .page__inner > .faq { display: block; }
  @container faq (min-width: 38rem) {
    .faq__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2.5rem; align-items: start; }
    .page--cols .faq__grid { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: var(--page-gap, clamp(2rem, 4vw, 4.5rem)); }
    .faq__grid > * + * { margin-top: 0; }
    .faq__aside { position: sticky; top: 5.5rem; }
    .faq__body { padding-top: 0.5rem; }
    .faq__groups { display: block; margin-inline: -0.85rem; }
    .faq__groups li + li { margin-top: 0.125rem; }
    .faq__groups a { display: flex; justify-content: space-between; gap: 1rem; padding: 0 0.85rem; background: none; font-weight: 400; font-size: var(--step-body); }
    .faq__groups a[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
    .faq__groups a[aria-current="true"] .faq__n { color: var(--muted); }
    .faq__groups .is-empty a { opacity: 0.45; }
    .faq__search { margin-top: 1.75rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__marker, .faq__marker::before, .faq__marker::after, .faq__groups a, .faq__item summary { transition: none; }
}