@layer components {
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-s);
  }

  .page-header__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);

    & p {
      color: var(--color-text-muted);
    }
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    align-self: flex-start;
    color: var(--color-text-muted);
    font-size: var(--step--1);
    font-weight: 560;
    text-decoration: none;

    & svg {
      inline-size: 1.1em;
      block-size: 1.1em;
      transition: translate var(--duration-fast) var(--ease-out);
    }

    &:hover {
      color: var(--color-text);

      & svg { translate: -2px 0; }
    }
  }

  /* Small icon + text line, e.g. dates */
  .event-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--step--1);

    & svg {
      inline-size: 1.1em;
      block-size: 1.1em;
      flex-shrink: 0;
    }
  }
}