/* ==========================================================================
   COMPONENTS · PROVIDER CARD — a named clinic as it appears in the clinics
   directory: a leaf sheet carrying the provider's identity at a small scale
   (logo or a struck monogram, name, location, the merged specialties, and a
   backlink tally). It is the index-scale sibling of the provider profile, and
   degrades gracefully — an unenriched provider falls back to monogram + name +
   country + specialties with nothing missing-looking. Composes op-chip.
   The --sponsored modifier is the future promoted treatment (gated on
   provider.sponsored?, false for all today). ITCSS: 06-components.
   ========================================================================== */

.op-provider-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: var(--shadow-raised);
  transition: var(--transition-ink), transform var(--duration-fast) var(--ease-standard);
}
.op-provider-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-page);
}

/* — The identity row: a logo (or struck monogram) beside name + location — */
.op-provider-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.op-provider-card__mark {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-provider-card__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The fallback when there is no logo: the provider's initial, struck in serif. */
.op-provider-card__monogram {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  line-height: 1;
}

.op-provider-card__name {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.op-provider-card__name a { text-decoration: none; color: var(--text); }
.op-provider-card__name a:hover { color: var(--link-hover); }

.op-provider-card__where {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.op-provider-card__specialties {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.op-provider-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-provider-card__meta [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}

/* — Sponsored / promoted treatment (future; provider.sponsored? is false today).
     Left in place as the styling hook so enabling the predicate lights it up. — */
.op-provider-card--sponsored {
  border-color: var(--accent-keyline);
  background: var(--accent-wash);
}