/* A request on a landing page: what happens next beside the form, which reuses the contact form's fields. */
@layer components {
  .inquiry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    padding: var(--section-padding);
    scroll-margin-top: 80px;
    line-height: 1.7;

    @media (max-width: 680px) { padding: 40px 20px 60px; }
  }

  .inquiry__heading {
    margin-block-end: var(--space-block);
    color: var(--color-ink);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  .inquiry__steps {
    display: grid;
    gap: var(--space-block);
    margin-block-start: calc(var(--space-block) * 1.5);
    list-style: none;
    counter-reset: step;

    li {
      display: flex;
      align-items: center;
      gap: var(--space-block);
      counter-increment: step;

      &::before {
        content: counter(step);
        display: grid;
        flex: none;
        place-items: center;
        inline-size: 2.2rem;
        block-size: 2.2rem;
        border-radius: 50%;
        background: color-mix(in oklab, var(--color-accent) 35%, var(--color-canvas));
        color: var(--color-accent-ink);
      }
    }
  }

  .inquiry__form {
    background: var(--color-canvas);
    box-shadow: var(--shadow-raised);
  }

  .inquiry__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    column-gap: var(--space-block);
  }

  .contact__field .inquiry__message {
    min-block-size: 5rem;
  }

  .inquiry__note {
    margin-block-start: 0.75rem;
    color: var(--color-subtle);
    font-size: var(--text-small);
    text-align: center;
  }
}