/* Alder: profile sub-pages, /provider/{slug}/{page} and /clinic/{slug}/{page}.
   Loaded after alder-pages.css, alder-profile.css and alder-clinic.css (the
   compact hero is the profile hero with the --sub name). This sheet is the
   article under it: one reading column, picture, title, summary, byline,
   body and the card back to the profile. Mobile first. */

.al-sp { padding: 28px 0 var(--al-rhythm, 64px); }
.al-sp__art { max-width: 820px; }

/* ---------- Head ---------- */
.al-sp__pic {
  display: block; width: 100%; height: auto; aspect-ratio: 15 / 8; margin-bottom: 24px;
  border-radius: var(--al-r); object-fit: cover; background: var(--al-sand);
}
/* A picture that fails to load becomes the wireframe article art. */
.al-sp__pic[data-fell] { background: #6FBF85; }
.al-sp__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.al-sp__h { flex: 1 1 18rem; min-width: 0; font: 800 30px/1.12 var(--al-display); letter-spacing: -.025em; color: var(--al-ink); text-wrap: balance; overflow-wrap: anywhere; }
.al-sp__sum { margin-top: 12px; max-width: 62ch; font: italic 400 18px/1.5 var(--al-serif); color: var(--al-body); }

/* Byline: avatar, name and credentials link to the profile; the date after. */
.al-sp__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; font: 400 14px/1.4 var(--al-sans); color: var(--al-muted); }
.al-sp__au { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--al-ink); }
.al-sp__au img, .al-sp__au svg { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.al-sp__au-n { font-weight: 600; }
.al-sp__au-c { color: var(--al-muted); }
@media (hover: hover) { .al-sp__au:hover .al-sp__au-n { color: var(--al-moss); } }
.al-sp__ini {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--al-pill); font: 700 11px/1 var(--al-sans); color: #fff;
}
.al-sp__ini--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }

/* ---------- Body ---------- */
.al-sp__body { margin-top: 28px; }

/* ---------- Back to the profile ---------- */
.al-sp__back {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px 14px;
  margin-top: 48px; padding: 20px; border-radius: var(--al-r); background: var(--al-sand);
}
.al-sp__back-pic { display: block; width: 56px; height: 56px; }
.al-sp__back-pic img, .al-sp__back-pic svg { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.al-sp__back-pic img.al-sp__logo { object-fit: contain; background: #fff; padding: 6px; }
.al-sp__back-t { display: grid; gap: 2px; min-width: 0; }
.al-sp__back-t strong { font: 700 16px/1.3 var(--al-display); color: var(--al-ink); overflow-wrap: anywhere; }
.al-sp__back-t span { font: 400 14px/1.45 var(--al-sans); color: var(--al-body); }
.al-sp__back .al-pill { grid-column: 1 / -1; justify-self: start; }

@media (min-width: 640px) {
  .al-sp__back { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .al-sp__back .al-pill { grid-column: auto; }
}
@media (min-width: 921px) {
  .al-sp { padding-top: 40px; }
  .al-sp__h { font-size: 40px; }
  .al-sp__sum { font-size: 19px; }
  .al-sp__body { margin-top: 36px; }
}