/*
 * The site's signature grouping (DESIGN.md §5): a rule across the top and a
 * small label under it, instead of a card. The label is the section's
 * heading element carrying .eyebrow.
 */
@layer components {
  .section {
    border-block-start: var(--rule);
    padding-block-start: var(--space-3);

    & > :first-child {
      margin-block-end: var(--space-4);
    }
  }

  /* A lighter rule, for a section inside a page that already has its heavy ones. */
  .section--light {
    border-block-start: var(--border);
  }
}

/* A section's heading with its actions beside it on the same line. */
@layer components {
  .section__header {
    display: flex;
    align-items: center;
    gap: var(--space-5);

    & > h2 {
      margin: 0;
    }
  }
}