/* ==========================================================================
   Team Directory + Team Member — Webflow code component styles
   (each renders inside its own Shadow DOM; both load this file)

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --team-font-primary:   var(--fonts--primary, "Bitter");
  --team-font-secondary: var(--fonts--secondary, "Inter");

  --team-text:      var(--colors--equity-blue, #132c3a);   /* Figma Brand-Navy / Text-Primary */
  --team-slate:     var(--colors--market-slate, #3c6e82);  /* Figma Text-Secondary           */
  --team-tint-blue: var(--colors--soft-trust, #d4f2fa);    /* Figma Brand-Light-Blue-Tint    */
  --team-orange:    var(--colors--dividend-gold, #ff971e); /* Figma Brand-Orange             */
  --team-white:     var(--colors--white, #ffffff);         /* Figma Neutral-White            */
  --team-off-white: var(--colors--clear-ledger, #f5f7fb);  /* Figma Neutral-Off-white        */

  --team-pad-x:     var(--spacing--horizontal-padding, 5rem); /* Figma 80px */
  --team-pad-y:     var(--spacing--vertical-padding, 5rem);   /* Figma 80px */
  --team-max-width: var(--spacing--max-width, 1440px);

  /* Heading: family + weight match H2; mobile uses H2 "M -" (no mobile Figma) */
  --team-h-family: var(--h2--font-family, var(--team-font-primary));
  --team-h-weight: var(--h2--font-weight, 400);
  --team-h-size-m: var(--h2--m-font-size, 2.4rem);
  --team-h-lh-m:   var(--h2--m-line-height, 3rem);

  /* ===== Fixed Figma values (no matching variable) ===== */

  --team-pad-x-tablet: 2rem;      /* 32px sides at 991px and below (as FAQ/CTA) */
  --team-section-gap:  3.5rem;    /* 56px header → grid  */
  --team-header-w:     50rem;     /* 800px               */
  --team-header-gap:   1rem;      /* 16px heading → body */

  --team-h-size: 2.8125rem;       /* 45px (H2 is 44.8px) */
  --team-h-lh:   122%;
  --team-desc-size: 1.125rem;     /* 18px / 300 / 150% (Paragraph Large is 17.6px / 1.9rem) */
  --team-desc-lh:   150%;

  /* Grid: 4 columns → 32px gap (Leadership), 5+ columns → 24px gap (Account Team) */
  --team-gap:       2rem;
  --team-gap-dense: 1.5rem;
  --team-card-min:  13rem;        /* narrowest card before the grid drops a column */

  /* Card */
  --team-card-radius:  1rem;      /* 16px */
  --team-card-pad:     0.75rem 0.75rem 1.25rem; /* 12 12 20 */
  --team-card-gap:     1rem;      /* 16px photo → label */
  --team-card-shadow:  0 1px 3px 0 rgba(0, 0, 0, 0.08);
  --team-card-shadow-hover: 0 8px 24px -8px rgba(19, 44, 58, 0.18);
  --team-photo-radius: 0.75rem;   /* 12px */
  --team-lift:         0.25rem;   /* 4px — the Figma card's top padding */

  --team-name-size: 1.125rem;     /* 18px / 600 / 150% */
  --team-role-size: 0.875rem;     /* 14px / 400 / 150% */
  --team-badge:     2.25rem;      /* 36px arrow badge   */
  --team-icon-btn:  2rem;         /* 32px LinkedIn chip */

  /* Scroll-in animation (not in Figma) */
  --team-reveal-shift: 2rem;      /* cards rise 32px as they fade in */
  --team-reveal-time:  0.6s;

  /* Hover: photo enlarges inside its frame (no tint) */
  --team-zoom:      1.06;
  --team-zoom-time: 0.4s;

  /* Derived */
  --team-border:      color-mix(in srgb, var(--team-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
  --team-photo-bg:    color-mix(in srgb, var(--team-slate) 10%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Team Directory
   ========================================================================== */

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.team-section {
  container: team / inline-size;
  padding-inline: var(--team-pad-x);
}

.team-bg--white       { background: var(--team-white); }
.team-bg--off-white   { background: var(--team-off-white); }
.team-bg--transparent { background: transparent; }

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .team-section {
    padding-inline: var(--team-pad-x-tablet);
  }
}

.team-inner {
  display: flex;
  flex-direction: column;
  gap: var(--team-section-gap);
  width: 100%;
  max-width: var(--team-max-width);
  margin-inline: auto;
  padding-block: var(--team-pad-y);
}

.team-header {
  display: flex;
  flex-direction: column;
  gap: var(--team-header-gap);
  max-width: var(--team-header-w);
}

.team-heading {
  margin: 0;
  color: var(--team-text);
  font-family: var(--team-h-family), Georgia, serif;
  font-size: var(--team-h-size);
  font-weight: var(--team-h-weight);
  line-height: var(--team-h-lh);
  text-wrap: balance;
}

.team-description {
  margin: 0;
  color: var(--team-slate);
  font-family: var(--team-font-secondary), system-ui, sans-serif;
  font-size: var(--team-desc-size);
  font-weight: 300;
  line-height: var(--team-desc-lh);
}

/* Columns come from the "Columns" prop (--team-cols). Each column is at least
   --team-card-min wide, so narrower containers drop columns automatically:
   e.g. 4 → 3 → 2 → 1 as the space shrinks. */
.team-grid {
  --_gap: var(--team-gap);
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      min(100%, max(var(--team-card-min), calc((100% - (var(--team-cols) - 1) * var(--_gap)) / var(--team-cols)))),
      1fr
    )
  );
  gap: var(--_gap);
}

.team-grid--dense {
  --_gap: var(--team-gap-dense);
}

/* Webflow wraps slot content in its own elements. display: contents lets the
   members inside that wrapper become the grid items. */
.team-grid ::slotted(*) {
  display: contents;
}

@container team (max-width: 767px) {
  .team-inner {
    padding-block: 4rem;
    gap: 2.5rem;
  }

  .team-heading {
    font-size: var(--team-h-size-m);
    line-height: var(--team-h-lh-m);
  }

  .team-description {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Team Member card
   ========================================================================== */

/* The 4px top padding (Figma) leaves room for the hover lift */
.member {
  height: 100%;
  padding-top: var(--team-lift);
}

.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--team-card-gap);
  height: 100%;
  padding: var(--team-card-pad);
  border: 1px solid var(--team-border);
  border-radius: var(--team-card-radius);
  background: var(--team-white);
  box-shadow: var(--team-card-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.member-photo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--team-photo-radius);
  background: var(--team-photo-bg);
}

.member-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;   /* keep faces in frame */
  transition: transform var(--team-zoom-time) ease;
}

/* Default image when there's no headshot (Figma: user icon on a slate tint) */
.member-placeholder {
  display: flex;
  color: var(--team-slate);
}

.member-arrow {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--team-badge);
  height: var(--team-badge);
  border-radius: 999px;
  background: var(--team-white);
  color: var(--team-orange);
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.member-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-inline: 0.5rem;
}

.member-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 0;
  min-width: 0;
}

.member-name,
.member-role {
  margin: 0;
  font-family: var(--team-font-secondary), system-ui, sans-serif;
  line-height: 150%;
  overflow-wrap: anywhere;
}

.member-name {
  color: var(--team-text);
  font-size: var(--team-name-size);
  font-weight: 600;
  transition: color 0.2s ease;
}

.member-role {
  color: var(--team-slate);
  font-size: var(--team-role-size);
  font-weight: 400;
}

/* Profile link: the name is the real link; its ::after stretches the click
   area over the whole card. */
.member-link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.member-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--team-card-radius);
}

/* LinkedIn sits above the stretched card link, so it opens LinkedIn instead */
.member-linkedin {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: var(--team-icon-btn);
  height: var(--team-icon-btn);
  border-radius: 999px;
  background: var(--team-tint-blue);
  color: var(--team-text);
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .member-linkedin:hover {
    background: color-mix(in srgb, var(--team-tint-blue) 55%, var(--colors--trust-blue, #7fcada));
  }
}

.member-linkedin:focus-visible {
  outline: 2px solid var(--team-text);
  outline-offset: 2px;
}

/* Hover / focus: lift, enlarge the photo, show the arrow (only cards with a profile link) */
@media (hover: hover) {
  .member-card.is-link:hover {
    transform: translateY(calc(-1 * var(--team-lift)));
    box-shadow: var(--team-card-shadow-hover);
  }

  .member-card.is-link:hover .member-img {
    transform: scale(var(--team-zoom));
  }

  .member-card.is-link:hover .member-arrow {
    opacity: 1;
    transform: none;
  }

  /* Figma hover: name turns Brand-Orange */
  .member-card.is-link:hover .member-name {
    color: var(--team-orange);
  }
}

/* Keyboard focus on the card link outlines the whole card */
.member-card:has(.member-link:focus-visible) {
  outline: 2px solid var(--team-text);
  outline-offset: 3px;
}

.member-card:has(.member-link:focus-visible) .member-name {
  color: var(--team-orange);
}

.member-card:has(.member-link:focus-visible) .member-img {
  transform: scale(var(--team-zoom));
}

.member-card:has(.member-link:focus-visible) .member-arrow {
  opacity: 1;
  transform: none;
}

/* Scroll-in animation (TeamMember.tsx adds these classes when enabled) */
.member.is-hidden {
  opacity: 0;
  transform: translateY(var(--team-reveal-shift));
}

.member.is-shown {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--team-reveal-time) ease var(--team-delay, 0ms),
    transform var(--team-reveal-time) cubic-bezier(0.2, 0.7, 0.2, 1) var(--team-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .member-card,
  .member-img,
  .member-arrow,
  .member.is-shown {
    transition: none;
  }

  .member-card.is-link:hover,
  .member-card.is-link:hover .member-img {
    transform: none;
  }
}