.w-ui-page-hero {
  container: kp-page-heading / inline-size;
  min-inline-size: 0;
  margin-block: 0 var(--kp-space-4);
}

.w-ui-page-hero__row,
.w-ui-page-hero__identity,
.w-ui-page-hero__actions {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.w-ui-page-hero__row {
  min-block-size: 52px;
  justify-content: space-between;
  gap: var(--kp-space-3);
}

.w-ui-page-hero__identity {
  flex: 1 1 auto;
  gap: var(--kp-space-3);
}

.w-ui-page-hero__icon {
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--kp-radius-md);
  background: var(--n-accent-soft);
  color: var(--n-accent-ink, var(--kp-accent));
  font-size: var(--kp-text-lg);
}

.w-ui-page-hero__leading { flex: none; }
.w-ui-page-hero__main { min-inline-size: 0; }

.w-ui-page-hero__title {
  margin: 0;
  color: var(--kp-color-text);
  font-size: var(--kp-title-page, 22px);
  font-weight: var(--kp-title-weight, 700);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.w-ui-page-hero__eyebrow,
.w-ui-page-hero__subtitle {
  margin: 0;
  color: var(--kp-color-text-muted);
  font-size: var(--kp-text-sm);
  overflow-wrap: anywhere;
}

.w-ui-page-hero__eyebrow { margin-block-end: 2px; }
.w-ui-page-hero__subtitle,
.w-ui-page-hero__details { margin-block-start: 4px; }

.w-ui-page-hero__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
}

.w-ui-page-hero__actions > * { min-inline-size: 0; }

/* Only the artwork is clipped. Menus and focus rings can extend beyond the plaque. */
.w-ui-page-hero.has-cover {
  position: relative;
  display: grid;
  align-content: end;
}

.w-ui-page-hero__cover {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  background: var(--kp-color-surface-muted);
}

.w-ui-page-hero__cover > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.w-ui-page-hero__cover.kp-mlb-trigger { cursor: zoom-in; }
.w-ui-page-hero__cover:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }

.w-ui-page-hero.has-cover > .w-ui-page-hero__row {
  position: relative;
  z-index: 1;
  margin: clamp(64px, 13cqi, 142px) var(--kp-space-3) var(--kp-space-3);
  padding: var(--kp-space-3);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface);
  background: color-mix(in srgb, var(--kp-color-surface) 96%, transparent);
  box-shadow: var(--kp-shadow-sm);
}

.w-ui-page-hero.has-cover > .w-ui-page-hero__stats { position: relative; z-index: 1; }
.w-ui-page-hero.has-cover:has(details[open]) { z-index: 8; }

.w-ui-page-hero.has-cover .w-ui-page-hero__subtitle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.w-ui-page-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin: var(--kp-space-3) 0 0;
}

.w-ui-page-hero__stat {
  min-inline-size: 0;
  padding: var(--kp-space-2) var(--kp-space-3);
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface-muted);
}

.w-ui-page-hero__stat-label,
.w-ui-page-hero__stat-sub { color: var(--kp-color-text-muted); font-size: var(--kp-text-xs); }
.w-ui-page-hero__stat-value { margin: 0; font-weight: var(--n-w-bold); font-variant-numeric: tabular-nums; }

@container kp-page-heading (max-width: 560px) {
  .w-ui-page-hero__row { flex-wrap: wrap; align-content: center; }
  .w-ui-page-hero__identity { flex-basis: 100%; }
  .w-ui-page-hero__actions { justify-content: flex-start; }
}

/* Native cross-document transitions keep ordinary links and browser history. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 150ms; }
}