/* Team (/team) — Kakadu people template. Hero padding 100/0 (D) 80/0 (T) 60/0 (M);
   grid 3 -> 2 -> 1 columns (kernel .grid-3); join card = green value card (ink body
   text on the warm card measured 3.8:1, below AA). */

/* ---------- hero (C07, Display H1 variant) ---------- */
.tm-hero { padding-bottom: 0; }
.tm-hero .lead { max-width: 758px; }
.split-title { display: flex; flex-direction: column; align-items: center; }
.split-title .line { display: block; text-wrap: balance; }
.split-title .grad-text { white-space: nowrap; }
/* Display H1 is 48/48 on phone in the Kakadu people template (C07), not the home H1's 56 */
@media (max-width: 767.98px) { .tm-hero .t-h1 { font-size: 48px; } }

/* ---------- person cards (C17) ---------- */
.tm-card .well img { object-position: 50% 30%; }
/* LinkedIn circle over the photo: same chip as the creator cards (ink, cream glyph; hover ink-80) */
.tm-chips { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tm-chip {
  width: 40px; height: 40px; border-radius: 40px; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-80);
  transition: background-color 400ms var(--spring-b02);
}
.tm-chip:hover { background: var(--ink-80); }
.tm-card .tm-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--cream-80), 0 0 0 2px var(--cream); }
.tm-chip svg { width: 18px; height: 18px; }
@media (max-width: 767.98px) { .tm-chip { width: 44px; height: 44px; } } /* 44×44 touch target */
@media (max-width: 1279.98px) { .tm-card .well img { object-position: 50% 20%; } } /* landscape wells: keep heads in frame */
.tm-card .ph-alt { opacity: 0; transition: opacity 200ms var(--ease-framer); }
/* tablet well is landscape in the Kakadu people template: 435x326 @1024, 307x230 @768 */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .tm-card .well { aspect-ratio: 435 / 326; flex: 1 0 auto; }
  /* a taller join card in the same row stretches the person card: the photo takes the extra
     height so name + role stay at the bottom without a gap under the photo */
  .tm-card .info { flex: none; }
}
@media (hover: hover) and (min-width: 1280px) {
  .tm-card.has-alt:hover .ph-alt { opacity: 1; }
  /* the well only shrinks to make room for a profile chip; without one it keeps its size */
  .tm-card:not(.has-social):hover .well { aspect-ratio: 342 / 429; }
}

/* ---------- join card: last grid item ----------
   desktop: own row, 120px from the cards (row gap 20 + 100) like a section break;
   tablet: fills the empty cell next to an odd last card, otherwise its own row;
   phone: stacked, 40px from the cards. */
.join-card { grid-column: 1 / -1; margin-top: 100px; display: flex; flex-direction: column; gap: 40px; }
.join-card h2 { max-width: 948px; }
.join-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.join-row p { max-width: 593px; }
.join-row .btn { flex: none; }
.join-card :focus-visible { outline-color: var(--ink); } /* teal ring is ~1.4:1 on the green card */
@media (max-width: 1279.98px) {
  .join-card { margin-top: 0; }
  .join-card:nth-child(even) { grid-column: auto; justify-content: space-between; }
  .join-card:nth-child(even) .join-row { flex-direction: column; align-items: flex-start; gap: 40px; } /* text -> button 40 */
}
@media (max-width: 767.98px) {
  .tm-team { padding-top: 60px; }
  .join-card, .join-card:nth-child(even) { grid-column: auto; margin-top: 30px; gap: 20px; }
  .join-row, .join-card:nth-child(even) .join-row { flex-direction: column; align-items: flex-start; gap: 40px; }
}
/* the longest title word (FR "Rejoignez" ≈ 6.25em) must fit the card's content box: the half-width tablet
   card near 768 and phones below 375 were too narrow for it at the preset size */
@media (max-width: 1279.98px) {
  .join-card { container-type: inline-size; }
  .join-card h2 { font-size: min(48px, 100cqi / 6.4); }
}
@media (max-width: 767.98px) { .join-card h2 { font-size: min(40px, 100cqi / 6.4); } }