/*
  Person page (MB-106; module page umbraco/modules/person-pages.md). Mobile first: the back link (when on, across the top),
  the photo, then the text; from 768 px
  the text on the left and the photo on the right, top-aligned, as the FuelChief profile pages (capture 21 Oct 2026).
  Site hooks: --person-page-gap, --person-page-photo-max, --person-page-radius, --person-page-border, --person-page-name-fs,
  --person-page-role-fs.
  MB-135 (LR-FP): the photo takes master's card corners and border by default and stays square (Q4 b; FuelChief sets
  --person-page-radius: 0 and --person-page-border: 0 to keep its sharp photo); on phones the email and phone links are
  44 px rows 8 px apart and the back link is a 44 px row too (D14).
  FC-MFIX7: appsettings Site:Team:PagePhotoShape sets the photo's shape (style --person-page-photo-ratio: W / H, or the
  --original class for the photo's own shape); empty: square, as before.
*/
.person-page {
  display: grid;
  gap: var(--person-page-gap, var(--space-8));
  padding: var(--section-space) 0;
}
.person-page__photo {
  aspect-ratio: var(--person-page-photo-ratio, 1 / 1);
  max-width: var(--person-page-photo-max, 36rem);
  width: 100%;
  background: var(--color-hairline);
  border: var(--person-page-border, var(--border-width, 1px) solid var(--card-border));
  border-radius: var(--person-page-radius, var(--card-radius));
  overflow: hidden;
}
.person-page__photo picture { display: block; width: 100%; height: 100%; }
.person-page__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* FC-MFIX7 (M-FIX6-1): Site:Team:PagePhotoShape "original": the photo in its own shape, uncropped (only with a photo). */
.person-page__photo--original { aspect-ratio: auto; }
.person-page__photo--original picture, .person-page__photo--original .person-page__img { height: auto; }
.person-page__initials { display: grid; place-items: center; height: 100%; font-size: var(--fs-h1); font-weight: var(--fw-semibold); color: var(--color-text); }

.person-page__text { min-width: 0; overflow-wrap: break-word; }
.person-page__back { margin: 0; font-size: var(--fs-body); grid-column: 1 / -1; }
.person-page__back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); text-underline-offset: 0.15em; }
.person-page__back a::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; } /* left arrow, not read out (empty alternative text) */
.person-page__back a:hover { color: var(--color-link-hover); }
.person-page__name { margin: 0; font-size: var(--person-page-name-fs, var(--fs-h1)); line-height: var(--lh-heading); color: var(--color-heading); }
.person-page__role { margin: var(--space-3) 0 0; font-size: var(--person-page-role-fs, var(--fs-body-lg)); line-height: var(--lh-body); color: var(--color-muted); }
.person-page__bio { margin: var(--space-5) 0 0; max-width: 40rem; line-height: var(--lh-body); }
.person-page__bio + .person-page__bio { margin-top: var(--space-3); }
.person-page__contact { margin: var(--space-6) 0 0; display: grid; justify-items: start; gap: var(--space-2); line-height: var(--lh-body); }
.person-page__contact-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); overflow-wrap: anywhere; text-underline-offset: 0.15em; }
.person-page__contact-link:hover { color: var(--color-link-hover); }
.person-page__button { margin: var(--space-8) 0 0; }
.person-page a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.person-page__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 768px) {
  .person-page__back { font-size: var(--fs-body-sm); }
  .person-page__back a, .person-page__contact-link { display: inline-block; min-height: 24px; }
  .person-page__contact { gap: var(--space-1); }
  .person-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--person-page-gap, var(--space-12)); }
  .person-page__back { order: 0; }
  .person-page__photo { order: 2; justify-self: end; }
  .person-page__text { order: 1; }
}

/*
  CASE-STAFF-1 (#194, draft 4-staff.png): Expertise tags under the bio, and "Projects <first name> delivered" (a Grey band
  after the profile: label, heading, line, then case study cards: one per row on phones, two from 640 px, three from
  992 px). The whole card is the title link (stretched); focus ring on the card. Nothing here applies without them.
*/
.person-page__label { margin: var(--space-6) 0 0; color: var(--color-eyebrow); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); line-height: var(--lh-label); text-transform: uppercase; }
.person-page__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.person-page__tag { padding: var(--space-1) var(--space-3); border: var(--border-width, 1px) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-quiet); font-size: var(--fs-body-sm); line-height: var(--lh-body); }

.person-work { padding: var(--section-space) var(--page-gutter); }
.person-work__inner { max-width: var(--container-max); margin: 0 auto; }
.person-work__eyebrow { margin: 0; }
.person-work__heading { margin: var(--space-3) 0 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.person-work__intro { margin: var(--space-4) 0 0; line-height: var(--lh-body); }
/* CASE-STAFF-2: the link to the Our work list for this person, under the cards. */
.person-work__all { margin: var(--space-8) 0 0; font-weight: var(--fw-semibold); }
.person-work__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap, var(--space-6)); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.person-work__card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card-bg); border: var(--border-width, 1px) solid var(--card-border); border-radius: var(--card-radius); color: var(--color-text); }
.person-work__photo { aspect-ratio: 3 / 2; background: var(--color-hairline); }
.person-work__photo picture { display: block; width: 100%; height: 100%; }
.person-work__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-work__body { display: flex; flex: 1; flex-direction: column; padding: var(--card-padding, var(--space-6)); overflow-wrap: break-word; }
.person-work__sector { margin: 0 0 var(--space-2); color: var(--color-eyebrow); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); line-height: var(--lh-label); text-transform: uppercase; }
.person-work__title { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-heading); }
.person-work__link { color: var(--color-link); text-decoration: none; }
.person-work__link::after { content: ""; position: absolute; inset: 0; }
.person-work__link:hover { text-decoration: underline; }
.person-work__card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.person-work__link:focus-visible { outline: none; }
.person-work__figure { margin: var(--space-4) 0 0; color: var(--color-heading); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.person-work__text { margin: var(--space-4) 0 0; line-height: var(--lh-body); }
.person-work__more { margin: auto 0 0; padding-top: var(--space-5); color: var(--color-link); font-weight: var(--fw-bold); }

@media (min-width: 640px) {
  .person-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .person-work__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}