/**
 * Fluid Framework - People (opt-in module)
 * @layer components
 *
 * dist/fluid-people.min.css (package export "./people"). Link it after core,
 * as fluid-toc.min.css is. Its own file because core has no room for it
 * under the gzip budget. Without it the markup below is plain HTML: a
 * heading, a paragraph, a definition list.
 *
 * PERSON CARD (a name, a role, optionally a photo or initials)
 *
 *   <article class="person-card" data-layout="wide|compact|line">
 *     <img class="avatar" src="jane.webp" alt="" width="240" height="300">
 *     <!-- or: <span class="avatar" data-initials="JD" aria-hidden="true"></span> -->
 *     <!-- or nothing: the card closes up and starts at the text -->
 *     <div class="person-card__body">
 *       <h3 class="person-card__name"><a href="/team/jane/">Jane Doe</a></h3>
 *       <p class="person-card__role">Skipper</p>
 *       <p class="person-card__bio">Two lines at most.</p>
 *     </div>
 *   </article>
 *
 *   wide      a portrait at the start, name, role, bio and links beside it
 *   compact   a row for a directory or a grid: small avatar, name, role
 *   line      one line under an article title: "By Jane Doe · Skipper"
 *
 * The avatar is the existing .avatar (avatar.css); the card only sizes it.
 * A decorative avatar has alt="" or aria-hidden; the name is already text.
 *
 * PERSON PAGE (one layout for an author, a team member and an artist)
 *
 *   <article class="person" data-kind="author|team|artist">
 *     <header class="person__head"> eyebrow, h1, lede </header>
 *     <div class="person__side">
 *       <figure class="person__portrait"> img + figcaption </figure>   (optional)
 *       <aside class="infobox" aria-labelledby="facts"> h2 + dl </aside>  (optional)
 *     </div>
 *     <div class="person__body prose"> ... </div>
 *   </article>
 *
 * The kind only changes which facts the infobox lists. With no portrait the
 * infobox is the top of the side column; with neither, the page is one
 * reading column. Narrow, the order is head, portrait, facts, body.
 */

@layer components {
  /* ========================================
     PERSON CARD
     ======================================== */

  .person-card {
    --_photo: 7.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-s) var(--space-m);
    margin: 0;
  }

  .person-card__body {
    flex: 1 1 14rem;
    min-inline-size: 0;
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
  }

  /* avatar.css sets object-fit on an img inside .avatar, not on <img class="avatar">:
     a photo given as the avatar itself would be squashed to the box. */
  .person-card img.avatar { object-fit: cover; }

  .person-card__body > * { margin: 0; }

  .person-card__name {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: calc(500 + var(--_dark-weight, 0));
    line-height: var(--leading-heading);
  }

  .person-card__name a { color: inherit; text-decoration-color: var(--color-border-strong); }
  .person-card__name a:hover, .person-card:hover .person-card__name a { color: var(--accent-ink); }

  /* The whole card is the target for the name's link (wide and compact; the
     author line stays a line). Other links in the card sit above it. */
  .person-card:not([data-layout="line"]) { position: relative; }
  .person-card:not([data-layout="line"]) .person-card__name a::after { content: ""; position: absolute; inset: 0; }
  /* Text and other links paint above the overlay, so the bio can be selected and its links clicked. */
  .person-card__body > :not(.person-card__name) { position: relative; }

  .person-card__role {
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .person-card__bio { color: var(--color-text-muted); max-inline-size: var(--measure); }

  .person-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
  }

  .person-card__links li { margin: 0; }

  /* A plain link is 18px tall: give it the same 2.75rem target as .team-member__social. */
  .person-card__links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

  /* WIDE: a rule over it, the portrait at the start */
  .person-card[data-layout="wide"] {
    border-block-start: var(--border-width-thick) solid var(--color-border-strong);
    padding-block-start: var(--space-m);
  }

  .person-card[data-layout="wide"] .avatar {
    --_avatar-size: var(--_photo);
    inline-size: var(--_photo);
    block-size: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
  }

  .person-card[data-layout="wide"] .avatar[data-initials]::before { font-size: calc(var(--_photo) * 0.34); }

  .person-card[data-layout="wide"] .person-card__name { font-size: var(--step-2); }

  /* COMPACT: a directory row */
  .person-card[data-layout="compact"] {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .person-card[data-layout="compact"] .avatar { --_avatar-size: 3rem; }
  .person-card[data-layout="compact"] .person-card__body { flex-basis: 0; gap: 0; }

  /* LINE: inline, under a title */
  .person-card[data-layout="line"] {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--step--1);
  }

  .person-card[data-layout="line"] .avatar { --_avatar-size: 2rem; }

  .person-card[data-layout="line"] .person-card__body {
    flex: 0 1 auto;
    display: block;
  }

  .person-card[data-layout="line"] .person-card__name {
    display: inline;
    font: inherit;
    font-weight: var(--weight-semibold);
  }

  .person-card[data-layout="line"] .person-card__role { display: inline; font-size: inherit; }
  .person-card[data-layout="line"] .person-card__role::before { content: " · " / ""; }

  /* A grid of cards: .grid from core sets the columns */
  .people-grid {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--people-min, 18rem)), 1fr));
  }


  /* ========================================
     PERSON PAGE
     ======================================== */

  .person {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    inline-size: min(100% - 2 * var(--page-edge), var(--container-content, var(--container-xl)));
    margin-inline: auto;
    padding-block: var(--space-xl) var(--space-section);
  }

  .person__head > * { margin: 0; }
  .person__head { display: grid; gap: var(--space-s); }

  .person__dates {
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text-muted);
  }

  /* Narrow: the wrapper steps aside so portrait and facts take the grid's order */
  .person__side { display: contents; }

  .person__portrait { margin: 0; }

  .person__portrait img {
    display: block;
    inline-size: 100%;
    max-inline-size: 22rem;
    block-size: auto;
    border-radius: var(--radius-card);
  }

  .person__portrait figcaption {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .person__body { max-inline-size: none; }

  @media (min-width: 60rem) {
    .person:has(.person__side > *) {
      grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
      grid-template-rows: auto 1fr;
      column-gap: var(--space-2xl);
      align-items: start;
    }

    .person:has(.person__side > *) .person__head { grid-column: 1; grid-row: 1; }
    .person:has(.person__side > *) .person__body { grid-column: 1; grid-row: 2; }

    .person:has(.person__side > *) .person__side {
      display: grid;
      gap: var(--space-m);
      grid-column: 2;
      grid-row: 1 / span 2;
      /* Not sticky: a column taller than the screen would hide its lower rows
         until the article ends, and a scroll box inside it fails axe
         (scrollable-region-focusable). */
    }
  }


  /* ========================================
     INFOBOX: the wiki-style fact box
     ======================================== */

  .infobox {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-block-start: var(--border-width-thick) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-s) var(--space-m) var(--space-m);
  }

  .infobox__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--step-0);
  }

  .infobox dl { margin: 0; }

  .infobox dl > div {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.8fr) minmax(0, 1.4fr);
    gap: var(--space-xs) var(--space-s);
    padding-block: var(--space-xs);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .infobox dt, .infobox dd { margin: 0; }
  .infobox dd { font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
  .infobox dd > :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
  .infobox dd li { margin: 0; }
}