/* styles/sections/help-topics.css
 * Support page: the hero's spacing, the six help topics as cards in a 1152px block (one
 * column on M, two from D) and the FAQ column on the shared accordion. */
@layer sections {
  .help-intro {
    padding-block: var(--space-48) var(--space-64);
  }

  .help-topics {
    --cols: 2;
    --grid-gap: var(--space-16);

    max-width: 1152px;
    margin-inline: auto;
  }

  .help-topic {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-24);
  }

  .help-topic > :where(h3, p) {
    margin: 0;
  }

  .help-faq {
    max-width: calc(var(--measure) + 2 * var(--page-gutter));
  }

  .help-faq .accordion__panel p {
    margin: 0;
  }

  @media (min-width: 900px) {
    .help-intro {
      padding-block: var(--space-64) var(--space-32);
    }

    /* 160px from the hero's actions to the next heading at every D and W width. */
    .help-intro + .section {
      padding-top: calc(var(--space-96) + var(--space-32));
    }

    .help-topics {
      --grid-gap: var(--space-24);
    }
  }
}