/* These four SSR pages alone opt in; links and browser history stay native. */
.audience-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 20px;
}
.audience-section-links .text-link { white-space: normal; }

.audience-sidebar nav a {
  position: relative;
  isolation: isolate;
  padding-inline: 14px 12px;
}
.audience-sidebar nav a[aria-current="page"] {
  background: transparent;
  border-left: 0;
  padding-left: 14px;
}
.audience-current-marker {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border-left: 2px solid var(--orange);
  pointer-events: none;
}
.audience-link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
}

/* Reserve the longest heading/lead on narrow screens so text changes do not
   move the start of the content. Desktop already has matching hero heights. */
@media (max-width: 960px) {
  .audience-headline { min-block-size: 3lh; }
}
@media (max-width: 700px) {
  .audience-lead { min-block-size: calc(3lh + 3px); }
}
@media (max-width: 360px) {
  .audience-lead { min-block-size: calc(4lh + 3px); }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* Capture only the changing pieces, keeping the live page and link hit areas
     interactive. A root/nav snapshot makes Chrome temporarily hit the HTML root. */
  :root { view-transition-name: none; }

  .audience-breadcrumb-current { view-transition-name: audience-breadcrumb; }
  .audience-kicker { view-transition-name: audience-kicker; }
  .audience-headline { view-transition-name: audience-headline; }
  .audience-lead { view-transition-name: audience-lead; }
  .audience-detail-copy { view-transition-name: audience-copy; }

  /* Another click interrupts immediately instead of waiting for an overlay. */
  ::view-transition {
    pointer-events: none;
    /* Snapshots sit above the live document. Keep scrolled text behind the
       sticky header while leaving the header itself interactive. */
    clip-path: inset(var(--audience-header-edge, 0px) 0 0);
  }

  ::view-transition-group(*) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  /* Text dissolves in place instead of interpolating different block heights. */
  ::view-transition-group(audience-breadcrumb),
  ::view-transition-group(audience-kicker),
  ::view-transition-group(audience-headline),
  ::view-transition-group(audience-lead),
  ::view-transition-group(audience-copy) {
    animation: none;
  }
  ::view-transition-old(audience-breadcrumb),
  ::view-transition-old(audience-kicker),
  ::view-transition-old(audience-headline),
  ::view-transition-old(audience-lead),
  ::view-transition-old(audience-copy) {
    height: auto;
    mix-blend-mode: normal;
    animation: audience-leave 100ms ease-out both;
  }
  ::view-transition-new(audience-breadcrumb),
  ::view-transition-new(audience-kicker),
  ::view-transition-new(audience-headline),
  ::view-transition-new(audience-lead),
  ::view-transition-new(audience-copy) {
    height: auto;
    mix-blend-mode: normal;
    animation: audience-enter 260ms cubic-bezier(.22, 1, .36, 1) 20ms both;
  }
  @keyframes audience-leave {
    to { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes audience-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* The two-column mobile menu keeps a simple fade. Desktop moves its marker
     after audience-navigation.js has restored scroll before the snapshot. */
  @media (min-width: 701px) {
    .audience-current-marker { view-transition-name: audience-selection; }
    .audience-navigation a:nth-child(1) .audience-link-content { view-transition-name: audience-link-providers; }
    .audience-navigation a:nth-child(2) .audience-link-content { view-transition-name: audience-link-patients; }
    .audience-navigation a:nth-child(3) .audience-link-content { view-transition-name: audience-link-organizations; }
    .audience-navigation a:nth-child(4) .audience-link-content { view-transition-name: audience-link-industry; }
    ::view-transition-group(audience-selection) { z-index: 1; }
    /* Capture labels rather than anchors, preserving native click targets. */
    ::view-transition-group(audience-link-providers),
    ::view-transition-group(audience-link-patients),
    ::view-transition-group(audience-link-organizations),
    ::view-transition-group(audience-link-industry) { z-index: 2; animation: none; }
    ::view-transition-old(audience-selection) { animation: none; opacity: 0; }
    ::view-transition-new(audience-selection) { animation: none; }
    ::view-transition-old(audience-link-providers),
    ::view-transition-new(audience-link-providers),
    ::view-transition-old(audience-link-patients),
    ::view-transition-new(audience-link-patients),
    ::view-transition-old(audience-link-organizations),
    ::view-transition-new(audience-link-organizations),
    ::view-transition-old(audience-link-industry),
    ::view-transition-new(audience-link-industry) {
      height: auto;
      mix-blend-mode: normal;
      animation-duration: 140ms;
    }
  }
}