/*
 * .perma-header — a page (permalink view) header: big title + a toolbar of
 * controls (primary action, filter button-group, sort dropdown, text filter).
 * Structure (BEM): .perma-header > .perma-header__title + .perma-header__content
 *   > .perma-header__toolbar
 */
@layer components {
  .perma-header { margin-block-end: calc(var(--u-pad) * 2); }

  .perma-header__title {
    /* Fluid: full size on wide screens, scaling down so a long single word
       ("Announcements") fits the narrow mobile canvas instead of overflowing.
       break-word is the last-resort fallback if it's still too tight. */
    font-size: clamp(var(--font-size-4), 4vw + 0.9rem, var(--font-size-6));
    font-weight: var(--font-weight-8);
    line-height: var(--font-lineheight-1);
    color: var(--ink);
    overflow-wrap: break-word;
  }

  .perma-header__content { margin-block-start: calc(var(--u-pad) / 2); }

  .perma-header__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u-pad) * 0.75);
  }
}