/*
 * Éclore Aesthetics — Team card (VISUAL-DESIGN §5.6)
 * ─────────────────────────────────────────────────────────────────────────────
 * Portrait → name → role → optional credential. Restrained and static: a warm
 * 4:5 portrait on a plain Stone ground, a Familjen name, a Familjen caps role
 * line, an Inter credential and bio. Per §5.6 there is NO zoom on team portraits
 * (people read as less "product" when static) — the only hover is a subtle
 * warm-grade brightness lift plus the name shifting to Terracotta. Structure is
 * drawn with the grid and a 1px hairline; squared corners, no shadow.
 *
 * The card renders inside the About .team-grid and the single-service provider
 * spotlight; both style the wrapper only, never the card internals (those live
 * here). The global compound focus ring (global.css) is inherited, not redefined.
 *
 * Motion: only filter/colour animate, gated to non-reduced-motion users so the
 * reduced-motion path keeps every static style and applies hover state instantly.
 *
 * Breakpoints (literal): md 768px.
 */

.team-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* ─── Portrait (4:5 reserved frame — protects CLS) ───────────────────────────── */
/*
 * The img also carries width/height attrs, but the CSS aspect-ratio + width:100%
 * is what reserves a consistent 4:5 box at layout time, so the frame holds and
 * mixed source dimensions never shift. object-fit: cover crops to the frame.
 */
.team-card__photo {
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: var(--color-stone);
}

.team-card__photo img,
.team-card__photo-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Editorial grayscale on the portrait; hover reveals natural colour (below). */
.team-card__photo img {
  filter: var(--img-filter);
}

/* Imageless member — a Stone fill holds the same 4:5 space (no collapse, no CLS). */
.team-card__photo-placeholder {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 8%, var(--color-stone)),
      var(--color-stone));
}

/* ─── Body ───────────────────────────────────────────────────────────────────── */

.team-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
}

/* Name — Familjen H3, Ink (role and credential read as subordinate to it). */
.team-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); /* H3 scale */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* Credential — inline after the name; the markup carries the leading ", ". Set
   in Inter, smaller and muted so it sits quietly beside the Familjen name. */
.team-card__credentials {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Role — Familjen caps, tracked, muted Ink (the label/eyebrow treatment, §5.6). */
.team-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Bio — Inter body, Ink, held to a readable measure. */
.team-card__bio {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text);
}

/* ─── Hover (no zoom, §5.6) — warm-grade lift + name → Terracotta ─────────────── */
/*
 * State is declared unconditionally; only the transition is gated, so reduced-
 * motion users get the hover state instantly (no animation) while keeping every
 * static style and the inherited focus ring.
 */
/* Hover lifts the grayscale to reveal the portrait's natural colour — a quiet
   editorial reward, no zoom (§5.6). */
.team-card:hover .team-card__photo img {
  filter: grayscale(0) brightness(1.02);
}

.team-card:hover .team-card__name {
  color: var(--color-terracotta); /* large H3 text — clears AA at this size (§4) */
}

@media (prefers-reduced-motion: no-preference) {
  .team-card__photo img {
    transition: filter var(--dur-short) var(--ease-standard);
  }
  .team-card__name {
    transition: color var(--dur-micro) var(--ease-standard);
  }
}