/* ==========================================================================
   Centre-wise Faculty & Staff  —  /page/centre-wise-faculty/
   --------------------------------------------------------------------------
   Nine schools, each a card of department rows. A row is two things - what
   the department is and the way in - so it is a grid rather than a table:
   there is nothing to scan down a column for, and a table of one value and
   one link reads as a list anyway.

   View keeps the right at every width, so the tap target stays where the
   thumb already is however many lines the department name takes.
   ========================================================================== */

.cwf-lead {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.cwf-school + .cwf-school { margin-top: 30px; }

.cwf-school__name {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 800;
}

.cwf-depts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  overflow: hidden;              /* so the first and last rows take the corners */
}

.cwf-dept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.cwf-dept:last-child { border-bottom: 0; }
.cwf-dept:hover { background: rgb(var(--accent-rgb) / 4%); }

.cwf-dept__name {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
}

.cwf-dept__view {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgb(var(--accent-rgb) / 14%);
  color: var(--accent-deep);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cwf-dept__view:hover { background: var(--accent-deep); color: #fff; }
.cwf-dept__view:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 599.98px) {
  .cwf-dept { gap: 2px 14px; padding: 13px 15px; }
}