Release HeaderBLK

/* -- Release Header (website · Docs & Help) -------------------------------

   Introduces a release with its version, date, and summary - the version tag, kind of release, a headline, what it brings and where to get it. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-release-header, .mk-release-header *, .mk-release-header ::before, .mk-release-header ::after) { box-sizing: border-box; }

  .mk-release-header { container: mk-release-header / inline-size; display: grid; gap: 1rem; width: 100%; padding-block-end: 1.75rem; border-block-end: 1px solid var(--border); }

  .mk-release-header-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }

  .mk-release-header-version { padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: var(--foreground); color: var(--background); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }

  .mk-release-header-title { margin: 0; font-size: clamp(1.75rem, 5cqi, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }

  .mk-release-header-summary { margin: 0; max-width: 42rem; color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }

  .mk-release-header-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0.5rem 0 0; padding: 0; list-style: none;

    & li { display: grid; gap: 0.25rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--muted); font-size: 0.875rem; }

    & svg { width: 1.125rem; height: 1.125rem; color: var(--primary); }

    & span { color: var(--muted-foreground); }

  }

  .mk-release-header-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .mk-release-header[data-variant="compact"] { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding-block: 0.875rem;

    & .mk-release-header-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

    & time { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-release-header-version { border: 1px solid CanvasText; }

  }

}