/* PageHeadingComponent: the one big gesture on a page (DESIGN.md §1, §5). */
@layer components {
  .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    padding-block-end: var(--space-6);
    margin-block-end: var(--space-8);
    border-block-end: var(--rule);

    & h1 {
      grid-column: 1;
      font: var(--text-display-l);
    }

    & p {
      grid-column: 1 / -1;
      font: var(--text-lead);
      color: var(--color-muted);
      max-inline-size: none;
    }

    /* Page actions arrive as links in the description; space them apart. */
    & p a + a {
      margin-inline-start: var(--space-4);
    }
  }

  /* Right of the title, sitting on its baseline row. */
  .page-heading__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    display: flex;
    gap: var(--space-2);

    & > * + * {
      margin-inline-start: 0;
    }
  }

  /* Sections bring their own top rule; two rules in a row read as a mistake. */
  .page-heading:has(+ :is(.section, .split)) {
    border-block-end: 0;
    padding-block-end: 0;
  }

  /* The heading already ends on a rule; a form right under it needs no second one. */
  .page-heading + form > fieldset:first-of-type {
    border-block-start: 0;
    padding-block-start: 0;
  }
}