/**
 * Team member – page-scoped only.
 *
 * Ported from the `p-*` block in _mockups/team-member.html. Everything
 * structural comes from the kit: `.page-hero`, `.with-aside` and
 * `.with-aside__side` (pages.css §5), `.qr-mock` (§15), `.placeholder-note`
 * (§11), `.cta-band` (§13), `.route-line` (base.css §4). This file adds only
 * the vCard panel, the portrait and the two print refinements the kit's §21
 * cannot know about.
 *
 * VALUES. Every colour, radius, shadow, type size and space resolves to a
 * token; tokens.css is not edited here. Where the mock-up carries a dimension
 * the token scale has no name for, it is composed from the spacing scale and
 * the comment says whether the composition is exact. The only remaining
 * literals are the ones the signed-off kit already uses the same way: icon
 * glyph sizes, the 44px tap-target floor, hairline and keyline widths, and
 * breakpoints. See assets/css/sections/trust-ribbon.css and base.css §3 for
 * the precedent.
 */

/* The breadcrumb sits above the role eyebrow. finas_breadcrumb() emits its own
   markup, so the spacing hangs off this wrapper rather than a class on it. */
.team-member__crumb { margin-block-end: var(--s-4); }

/* Overlap: the portrait and the vCard panel lift into the hero gradient. */
.team-member__lift {
  margin-block-start: calc(-1 * clamp(var(--s-5), 4vw, calc(var(--s-6) + var(--s-1))));
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------
   PORTRAIT – a printed photo, and the typographic card that replaces
   it when a member deliberately has none.
   ---------------------------------------------------------------- */
.team-member__portrait {
  /* 24rem. The mock-up's 380px on the spacing scale, 4px wider. */
  max-inline-size: calc(var(--s-8) * 3 + var(--s-6));
  margin-block-end: var(--s-5);
}
.team-member__portrait img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 5px solid var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}

/* No photo is a design, not a gap. Same block, same lift, initials set in the
   display face over the navy ground – never a stock face, never a broken img. */
.team-member__monogram {
  aspect-ratio: 4 / 5;
  border: 5px solid var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  background: linear-gradient(150deg, var(--navy), var(--blue-deep));
  color: var(--white);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-5);
  text-align: center;
}
/* The dashed route arc, as on every other navy ground in the design. */
.team-member__monogram::after {
  --team-member-arc: calc(var(--s-8) * 3);
  content: "";
  position: absolute;
  inline-size: var(--team-member-arc);
  block-size: var(--team-member-arc);
  border-radius: 50%;
  border: 1.5px dashed var(--on-dark-arc);
  inset-block-start: calc(var(--team-member-arc) * -0.55);
  inset-inline-end: calc(var(--team-member-arc) * -0.35);
  pointer-events: none;
}
.team-member__monogram > * { position: relative; z-index: 1; }
.team-member__monogram-initials {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--gold);
}
.team-member__monogram-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--white);
  text-wrap: balance;
}
.team-member__monogram-role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* Opt-in inside the profile body: a language or skill list as pills rather
   than prose bullets. Add class="team-member__langs" to a list in the editor. */
.prose .team-member__langs { flex-direction: row; flex-wrap: wrap; gap: var(--s-1); }
.prose .team-member__langs li { padding-inline-start: 0; }
.prose .team-member__langs li::before { content: none; }

/* Back to the team grid. */
.team-member__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-block-size: 44px;
  font-weight: 700;
  font-size: var(--text-s);
  color: var(--blue);
  transition: color var(--dur-fast) ease;
}
.team-member__back svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.team-member__back:hover { color: var(--blue-deep); }
.team-member__back:hover svg { transform: translateX(-4px); }
[dir="rtl"] .team-member__back svg { transform: scaleX(-1); }

/* ----------------------------------------------------------------
   THE VCARD PANEL – a business card that happens to be a web page
   ---------------------------------------------------------------- */
.team-member__vcard-wrap { position: relative; }
/* A second card in the stack, peeking out behind. */
.team-member__vcard-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: var(--s-2);
  inset-block-end: calc(var(--s-1) * -1);
  inset-inline-start: var(--s-2);
  inset-inline-end: calc(var(--s-1) * -1);
  background: var(--gold-tint-15);
  /* The kit's gold card edge is a literal in pages.css §18 and has no token.
     The display gold reads the same at 1px on a gold tint. */
  border: 1px solid var(--gold);
  border-radius: var(--r-card);
  transform: rotate(1.4deg);
}
.team-member__vcard {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* Brand band – navy, gold keyline, dashed route arc. */
.team-member__vcard-band {
  --team-member-arc: calc(var(--s-8) * 2);
  background: linear-gradient(150deg, var(--navy), var(--blue-deep));
  border-block-end: 3px solid var(--gold);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  position: relative;
  overflow: hidden;
}
.team-member__vcard-band::after {
  content: "";
  position: absolute;
  inline-size: var(--team-member-arc);
  block-size: var(--team-member-arc);
  border-radius: 50%;
  border: 1.5px dashed var(--on-dark-arc);
  inset-block-start: calc(var(--team-member-arc) * -0.68);
  inset-inline-end: calc(var(--team-member-arc) * -0.32);
  pointer-events: none;
}
.team-member__vcard-band img {
  block-size: var(--s-5);
  inline-size: auto;
  position: relative;
  z-index: 1;
}
.team-member__vcard-kind {
  position: relative;
  z-index: 1;
  max-inline-size: 11ch;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: end;
  line-height: var(--leading-snug);
}

/* QR zone – the hero of the panel. */
.team-member__vcard-qr {
  background: var(--blue-tint-05);
  border-block-end: 1px solid var(--line-soft);
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}
/* 11rem, exactly the mock-up's 176px. */
/* The scannable code (inc/finas/qr.php), in the 11rem square the mock-up's
   `.qr-mock` drew. The SVG carries its own quiet zone, so the wrapper only
   paints the light ground the modules need and the frame around it. */
.team-member__qr {
  inline-size: calc(var(--s-8) + var(--s-5) * 2);
  aspect-ratio: 1;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-s);
}
.team-member__qr .finas-qr { display: block; inline-size: 100%; block-size: 100%; }
.team-member__vcard-scan {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--navy);
}
.team-member__vcard-scan svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

/* Detail rows. */
.team-member__vcard-rows { padding: var(--s-2) var(--s-4); }
.team-member__vcard-rows > div {
  display: grid;
  /* 5.5rem, exactly the mock-up's 88px label column. */
  grid-template-columns: calc(var(--s-8) - var(--s-4)) 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-1);
}
.team-member__vcard-rows > div + div { border-block-start: 1px solid var(--line-soft); }
.team-member__vcard-rows dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.team-member__vcard-rows dd {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Actions and small print. */
.team-member__vcard-actions {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-3);
}
.team-member__vcard-actions .btn { inline-size: 100%; }
.team-member__vcard-note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-body);
  padding-inline: var(--s-4);
  padding-block-end: var(--s-3);
}
.team-member__vcard-flag {
  padding-inline: var(--s-4);
  padding-block-end: var(--s-4);
  display: flex;
  justify-content: center;
}

/* ----------------------------------------------------------------
   PRINT – these get printed in the office. pages.css §21 already
   strips the chrome; what follows is what the card itself needs.
   ---------------------------------------------------------------- */
@media print {
  .team-member__lift { margin-block-start: 0; grid-template-columns: 1fr; }
  /* The hero loses its navy ground in print, so gold-on-white would fail. */
  .team-member__role { color: var(--blue) !important; }
  .team-member__role::before { background: var(--red) !important; }
  .team-member__back { display: none; }
  .team-member__portrait img,
  .team-member__monogram { box-shadow: none; border: 1px solid var(--line); }
  .team-member__vcard-wrap::before { display: none; }
  .team-member__vcard {
    box-shadow: none;
    border: 1.5px solid var(--navy);
    break-inside: avoid;
  }
  /* The card has to survive a printer that drops backgrounds by default. */
  .team-member__vcard,
  .team-member__vcard-band,
  .team-member__vcard-qr,
  .team-member__qr,
  .team-member__monogram {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* A download button and a chat link are both dead ink on paper. */
  .team-member__vcard-actions { display: none; }
}