/* centre-view: the roster as a map of the hospital (By centre view) */

/* 1 · Hovering a centre brings it forward; the other centres step back */
.cgroup .dgrid,
.cgroup .ghead { transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out); }
#results.cv-focus .cgroup:not(.cv-on) .dgrid { opacity: .35; filter: grayscale(1); }
#results.cv-focus .cgroup:not(.cv-on) .ghead { opacity: .5; }

/* 3 · Each centre's name and count rise out of a soft blur, word by word */
.cv-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; font: inherit; }
.cv-w > i { display: inline-block; font: inherit; font-style: normal; letter-spacing: inherit; text-transform: inherit;
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out), opacity 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + var(--wd, 0ms)); }
.cgroup .ghead > span { --wd: 160ms; }
.js .cgroup .ghead.cv-split:not(.cv-in) .cv-w > i { transform: translateY(108%); filter: blur(8px); opacity: 0; }
.cgroup .ghead.cv-quiet .cv-w > i { transition: none; }

/* 2 · Phones: one horizontal row per centre, the next card peeking */
@media (max-width: 680px) {
  .cgroup .dgrid {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); padding-block: 4px 14px; scrollbar-width: none;
  }
  .cgroup .dgrid::-webkit-scrollbar { display: none; }
  .cgroup .dgrid > .doc { flex: 0 0 70vw; max-width: 300px; scroll-snap-align: start; }
  .cgroup .dgrid::after { content: ""; flex: 0 0 1px; margin-inline-start: -1px; }
  .cgroup { margin-top: 32px; }
  .cgroup .ghead { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cgroup .dgrid, .cgroup .ghead, .cv-w > i { transition: none !important; }
  .js .cgroup .ghead.cv-split:not(.cv-in) .cv-w > i { transform: none; filter: none; opacity: 1; }
  .cgroup .dgrid { scroll-behavior: auto; }
}
html.rm .cgroup .dgrid, html.rm .cgroup .ghead, html.rm .cv-w > i { transition: none !important; }
html.rm.js .cgroup .ghead.cv-split:not(.cv-in) .cv-w > i { transform: none; filter: none; opacity: 1; }