/* The head of a page: the eyebrow naming the area (or the way back), the
   title, a line under it, and what the page offers first; then the dashed
   rule across the whole width that sets the head off from the content. */

@layer components {
  .page-header {
    padding: 2.5rem 0;

    /* The native apps set the page title natively, right above the page, so
       a full gap would leave it floating far from what it names. */
    [data-platform~="native"] & {
      padding-block-start: 1rem;
    }
  }

  .page-header__label {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 0.375rem;
    text-transform: uppercase;
  }

  .page-header__title {
    color: var(--color-ink);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;

    @media (width < 480px) {
      font-size: 1.75rem;
    }

    @media (width >= 768px) {
      font-size: 2.25rem;
    }
  }

  .page-header__subtitle {
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0.5rem 0 0;
  }

  .page-header__actions {
    margin-block-start: 2rem;

    /* The native shell shows no title above the actions, so nothing to stand
       off from. */
    [data-platform~="native"] & {
      margin-block-start: 0;
    }
  }

  /* Full-bleed: cancels `main`'s gutter on a phone; on a wide display, where
     `main` is a centred column, spans the viewport from its middle. */
  .page-separator {
    border-block-start: 1.5px dashed var(--color-border-strong);
    margin-inline: calc(-1 * var(--gutter));

    @media (width >= 1024px) {
      inline-size: 100vw;
      inset-inline-start: 50%;
      margin: 0;
      position: relative;
      transform: translateX(-50%);
    }
  }
}