/* ============================================================================
   Meet the team — team cards inside the Safe hands band (MKTG-19)
   ----------------------------------------------------------------------------
   Ported from 3sidedcube.com/about (3sc-website: TeamSection/TeamCard.tsx):
   black-outlined card on a dotted grey ground, the person's sticker portrait,
   a white name bar, a tilted department pill, and a flip to a candid photo
   with a fun fact.

   Differences from the 3SC card, each on purpose:
   - The card is a real <button> with aria-expanded, so keyboard and
     screen-reader users can reach the fun fact. 3SC's is a div that only
     hover or tap can open.
   - Hover flips the card only on devices that can hover (@media (hover:
     hover)); touch devices tap. 3SC sniffs window width and touch in JS.
   - Pill text is black on every colour. 3SC uses white on pink and purple,
     which is 3.96:1 at 14px bold, under WCAG AA's 4.5:1.
   - Names and roles wrap instead of truncating, so nobody is cut off on a
     phone.
   - Four across on desktop (3SC: three) so eight people fill two rows.

   No reduced-motion branch, per DECISIONS.md §1. The flip only moves when the
   reader asks it to (hover, tap or key), never on its own.

   Used by index.html only. The schools page keeps the original side-by-side
   Safe hands layout because it does not carry .creds--team.
   ========================================================================== */

/* ---- Band layout: intro copy -> team -> accreditations, stacked ---------- */
/* width: creds-inner is centred with auto margins inside a flex column, so it
   shrink-wraps its content, and the team cards (all absolutely positioned
   inside) have no content width to give it. */
.creds--team .creds-inner { flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; }
.creds--team .creds-head { flex: none; }
/* the sub runs to two sentences here; creds.css's 34ch made it six lines */
.creds--team .creds-sub { max-width: 52ch; text-wrap: pretty; }

.creds--team .creds-badges { align-self: flex-start; }
@media (max-width: 820px) {
  .creds--team .creds-badges { align-self: center; }
}

/* ---- Annotation onto the team ---------------------------------------------
   Same voice as the daily grind's closing note (index.html .grind-note):
   mono, bold, black, tilted. Black on the band's pink is 5.8:1. The arrow
   asset sweeps from top-right down to bottom-left, so it hangs off the end of
   the note and lands on the first row of cards. */
.kos-team-note {
  width: fit-content; margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 16px; font-weight: 700; line-height: 1.55; color: #0a0a0a;
  transform: rotate(-2deg);
}
.kos-team-arrow { display: block; width: clamp(48px, 4.5vw, 64px); margin: 6px 0 0 clamp(150px, 16vw, 230px); }
/* above 820px creds-inner's gap (creds.css) is 5vw, up to 72px, which left
   the arrowhead hanging well short of the cards. Drop it into the gap so it
   always ends 18px above them. */
@media (min-width: 821px) {
  .kos-team-arrow { position: relative; top: calc(clamp(28px, 5vw, 72px) - 18px); }
}
.kos-team-arrow img { display: block; width: 100%; height: auto; transform: rotate(8deg); opacity: .85; }
@media (max-width: 820px) {
  .creds--team .creds-sub { max-width: 40ch; margin-left: auto; margin-right: auto; }
  .kos-team-note { margin-left: auto; margin-right: auto; font-size: 14px; transform: rotate(-4deg); }
  .kos-team-arrow { margin: 4px auto 0; translate: 48px 0; }
}

/* joins the heading's Fade up 40 chain (creds.css), after the sub */
.kos-stamp #safe-hands .kos-team-note,
.kos-stamp #safe-hands .kos-team-arrow { opacity: 0; translate: 0 20px; }
.kos-stamp #safe-hands.is-in .kos-team-note,
.kos-stamp #safe-hands.is-in .kos-team-arrow {
  opacity: 1; translate: 0 0;
  transition: opacity .5s ease var(--d, 0s), translate .8s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)) var(--d, 0s);
}
.kos-stamp #safe-hands .kos-team-note  { --d: .4s; }
.kos-stamp #safe-hands .kos-team-arrow { --d: .6s; }
@media (max-width: 820px) {
  .kos-stamp #safe-hands .kos-team-arrow { translate: 48px 20px; }
  .kos-stamp #safe-hands.is-in .kos-team-arrow { translate: 48px 0; }
}

/* The badges now sit below the team, often a screen or more under the band's
   top edge, so they stamp in on their own trigger (.creds-badges.is-in, set by
   the observer in index.html) rather than the band's. */
.kos-stamp #safe-hands.creds--team.is-in .creds-badge img { animation: none; }
.kos-stamp #safe-hands.creds--team .creds-badges.is-in .creds-badge img {
  animation: kos-stamp .72s linear both;
  animation-delay: calc(.2s + var(--i, 0) * .12s);
}

/* ---- Grid ----------------------------------------------------------------- */
.kos-team {
  list-style: none; margin: 0 auto; padding: 0;
  width: 100%; max-width: 560px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 960px) {
  .kos-team { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* ---- Card ----------------------------------------------------------------- */
.kos-team-card { position: relative; isolation: isolate; text-align: center; }

.kos-team-face {
  all: unset;
  box-sizing: border-box; position: relative;
  display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 4 / 5.5; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  border: 4px solid #000; border-radius: 16px;
  /* 3SC's diamond dot grid on gray-300 */
  background-color: var(--cube-gray-300, #eaeaea);
  background-image:
    radial-gradient(circle, rgba(187,187,187,.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(187,187,187,.5) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  /* Tailwind shadow-xl, as on 3SC */
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}
@media (min-width: 960px) { .kos-team-face { aspect-ratio: 4 / 5; } }
.kos-team-face:focus-visible { outline: 3px solid #000; outline-offset: 4px; }

/* department pill, tilted like 3SC's; colour comes from --pill on the card */
.kos-team-pill {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  max-width: calc(100% - 20px);
  padding: 3px 10px; border-radius: 999px;
  background: var(--pill, #fff); color: #000;
  font: 700 12px/1.4 var(--cube-font-primary, 'Poppins', sans-serif);
  transform: rotate(2deg);
}
@media (min-width: 960px) { .kos-team-pill { top: 12px; right: 12px; padding: 4px 12px; font-size: 14px; } }

/* sticker portrait, sat on the name bar. As on 3SC, the art fills the card
   and stops a fixed 44/70px short of the bottom; the name bar is laid over it
   and is taller than that, so its black rule cuts across every sticker's
   shoulders. Flat-bottomed and round-bottomed stickers then read the same,
   and a name or role that wraps never shrinks the portrait. */
.kos-team-art {
  position: absolute; inset: 0; display: block;
  box-sizing: border-box; padding: 4px 0 44px;
}
@media (min-width: 960px) { .kos-team-art { padding-bottom: 70px; } }
.kos-team-art img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.15));
}

/* white name bar with a black rule across the top */
.kos-team-id {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block;
  background: #fff; border-top: 4px solid #000;
  padding: 10px 8px 12px;
  transition: transform .5s ease, opacity .5s ease;
}
.kos-team-name {
  display: block; color: #000;
  font: 700 15px/1.3 var(--cube-font-primary, 'Poppins', sans-serif); letter-spacing: .02em;
}
.kos-team-role {
  display: block; margin-top: 2px; color: #000;
  font: 400 13px/1.4 var(--cube-font-primary, 'Poppins', sans-serif); letter-spacing: .01em;
}
@media (min-width: 960px) {
  .kos-team-id { padding: 16px 12px 18px; }
  .kos-team-name, .kos-team-role { font-size: 16px; }
  .kos-team-role { margin-top: 6px; line-height: 1.5; }
}

/* ---- Back: candid photo + fun fact --------------------------------------- */
.kos-team-back {
  position: absolute; inset: 4px; z-index: 3;
  border-radius: 12px; overflow: hidden; background: #000;
  pointer-events: none;   /* clicks fall through to the button underneath */
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.kos-team-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kos-team-fact {
  position: absolute; left: 10px; right: 10px; bottom: 16px; margin: 0;
  transform: translateY(40px); transition: transform .7s ease;
}
.kos-team-fact > span {
  background: #fff; color: #000; padding: 3px 10px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font: 700 14px/1.75 var(--cube-font-primary, 'Poppins', sans-serif); letter-spacing: .02em;
}
@media (min-width: 960px) {
  .kos-team-fact { bottom: 28px; left: 14px; right: 14px; }
  .kos-team-fact > span { font-size: 16px; padding: 4px 12px; }
}

/* flipped: by tap / click / key (all devices) ... */
.kos-team-card.is-flipped .kos-team-back { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.kos-team-card.is-flipped .kos-team-fact { transform: none; transition: transform .7s ease .3s; }
.kos-team-card.is-flipped .kos-team-id { transform: translateY(100%); opacity: 0; }
/* ... or by hover, only where the device can hover. Escape sets .is-dismissed
   to put a hovered card back until the pointer leaves (WCAG 1.4.13). */
@media (hover: hover) {
  .kos-team-card:hover:not(.is-dismissed) .kos-team-back { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
  .kos-team-card:hover:not(.is-dismissed) .kos-team-fact { transform: none; transition: transform .7s ease .3s; }
  .kos-team-card:hover:not(.is-dismissed) .kos-team-id { transform: translateY(100%); opacity: 0; }
}