/**
 * Team grid.
 *
 * `.team-card`, `.team-card__photo`, `.team-card__qr`, `.team-card__body`,
 * `.team-card__role`, `.team-card__links` and `.qr-mock` are all owned by
 * pages.css §15 and are not repeated here. `.grid--4`, `.section-head--row`,
 * `.eyebrow`, `.section-title` and `.lede` come from the kit too.
 *
 * This file adds only the four things the kit does not carry: the hover
 * behaviour the mock-up gives the grid, the QR badge size, the lead card, and
 * the typographic card a member with no photograph gets.
 */

/* Hover: the portrait eases in, the QR lifts and tilts. Both are transform
   only, so neither costs a layout pass. */
.team-grid .team-card__photo img {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.team-grid .team-card:hover .team-card__photo img { transform: scale(1.05); }

/* The badge keeps the kit's size and corner position (`.team-card__qr`,
   pages.css) and becomes a real button. The SVG carries its own quiet zone,
   so the kit's padding comes off. */
.team-grid .team-card__qr {
  padding: 0;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  transition:
    transform var(--dur-normal) var(--ease-out-soft),
    box-shadow var(--dur-normal) var(--ease-out-soft);
}
.team-grid .team-card:hover .team-card__qr {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: var(--shadow-m);
}
.team-grid .team-card__qr .finas-qr { display: block; inline-size: 100%; block-size: 100%; }

/* The full-size code. The UA popover rules centre it in the top layer and
   hide it while closed, so `display` is only ever set on the open state –
   setting it on the closed element would show every popover at once. */
.team-grid__qr-pop {
  /* The UA centres a popover with margin: auto, which the global reset strips. */
  margin: auto;
  inline-size: min(calc(var(--s-8) * 3), calc(100vw - var(--s-5) * 2));
  padding: var(--s-5);
  border: 0;
  border-radius: var(--r-m);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.team-grid__qr-pop:popover-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
.team-grid__qr-pop::backdrop { background: color-mix(in srgb, var(--navy) 55%, transparent); }

.team-grid__qr-code {
  inline-size: 100%;
  aspect-ratio: 1;
  background: var(--white);
  color: var(--navy);
}
.team-grid__qr-code .finas-qr { display: block; inline-size: 100%; block-size: 100%; }

.team-grid__qr-text { display: flex; flex-direction: column; gap: var(--s-1); }
.team-grid__qr-text p { margin: 0; }
.team-grid__qr-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--navy);
}
.team-grid__qr-hint { font-size: var(--text-s); color: var(--ink-soft); }

/* 44px minimum tap target on the two links at the foot of every card. */
.team-grid .team-card__links a {
  min-height: 44px;
  align-items: center;
}

.team-grid .lede { font-size: var(--text-base); }

/* The first card leads the grid, quietly – a gold rule and a slightly larger
   name, not a different component. */
.team-grid__card--lead {
  border-block-start: 4px solid var(--gold);
  box-shadow: var(--shadow-s);
}
.team-grid__card--lead .team-card__role { color: var(--gold-deep); }
.team-grid__card--lead h3 { font-size: var(--text-lg); }

/* A member with no photograph. Their initials on the same blue wash the kit
   already puts behind a portrait, at the same 4:5 so the row stays level.
   Never a stock face, never a silhouette. */
.team-grid__monogram {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--blue-tint-05);
  color: var(--blue);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-3xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

/* The arrow is drawn rather than typed, so the Arabic build turns it round
   without touching the markup. */
.team-grid__profile::after {
  content: "→";
  margin-inline-start: 0.35em;
}
[dir="rtl"] .team-grid__profile::after { content: "←"; }