/* ==========================================================================
   COMPONENTS · PROVIDER PROFILE — the royal individual clinic page. A named
   provider is a prospective paying customer, so it is given real space: a logo
   header, an exterior/interior photo strip, an address/contact block, the
   merged specialties, the accreditations, and the reports that backlink it.
   Almost every provider is UNENRICHED today, so each block renders only when
   its data is present — the page must read as intentional and complete with
   none of it (name + country + specialties + backlinks alone). The --sponsored
   modifier is the future promoted treatment (provider.sponsored?, false today).
   Composes op-chip, op-glossary (backlinks). ITCSS: 06-components.
   ========================================================================== */

.op-provider {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* — The masthead: logo (when enriched) beside the name + location + website — */
.op-provider__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--rule-strong);
}
.op-provider__logo {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs);
}
.op-provider__identity { min-width: 0; }

/* — The enrichment blurb: a provider bio, when one has been written (absent today). — */
.op-provider__description {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* — The photo strip: exterior/interior CDN images, scroll-snapped on narrow — */
.op-provider__gallery {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2xs);
}
.op-provider__photo {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(22rem, 70%);
}
.op-provider__photo img {
  display: block;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-provider__photo figcaption {
  margin-top: var(--space-3xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* — A titled section (Address, Specialties, Accreditations, Reports) — */
.op-provider__section { display: flex; flex-direction: column; gap: var(--space-sm); }
.op-provider__section-title {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--rule-faint);
}

/* — The address / contact block — */
.op-provider__address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text);
}
.op-provider__address-line { display: block; }
.op-provider__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-xs);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
}
.op-provider__contact a { color: var(--link); text-decoration-color: var(--link-underline); }
.op-provider__contact a:hover { color: var(--link-hover); }

/* — Specialties / accreditations as a chip set — */
.op-provider__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}

/* — Sponsored / promoted treatment (future; provider.sponsored? is false today). — */
.op-provider--sponsored .op-provider__head {
  border-bottom-color: var(--accent);
}