/* ──────────────────────────────────────────────────────────────────────────
   Clinic list — the "clinics our research names" roster
   ──────────────────────────────────────────────────────────────────────────
   A shared object (rendered by app/views/shared/_clinic_list.html.erb) listing
   the named providers cited across a set of reports — each a link to its
   /clinics/:slug profile, a country ISO tag, and the merged specialties.

   Promoted out of `op-glossary__*` (06-components/_glossary.css): that object is
   glossary-semantic (a <dl> of term/definition pairs), which a clinic roster is
   not. These rules reproduce the borrowed list/term/definition styling and fold
   in the country tag that used to live as the page-scoped `.tr-clinic__iso`, so
   the widget is self-contained and portable across surfaces (the factor page
   today, the hub next). */

.op-clinic-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }

.op-clinic {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule-faint);
}
.op-clinic:last-child { border-bottom: 0; }

/* The provider name (a link to its profile) + trailing country tag. */
.op-clinic__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* The country tag trailing a clinic name — a non-hue place marker, not a score. */
.op-clinic__iso {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-left: 0.5em;
}

/* The specialties run, hung and indented under the name in the reading voice. */
.op-clinic__specialties {
  display: block;
  margin: var(--space-3xs) 0 0;
  padding-inline-start: var(--space-md);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}