/* team.html — page-specific content only.
   Hero, section shell, intro typography, and dark-mode surfaces come from
   styles/sections.css (.subpage-* system). Everything here builds on the
   --sp-* tokens so it flips with the rest of the page in dark mode. */

/* ========== Leadership grid ============================================== */

.team-section { padding-top: 72px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--sp-rule-strong);
  border-bottom: 1px solid var(--sp-rule-strong);
}

.team-profile {
  min-width: 0;
  min-height: 565px;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 30px;
  border-right: 1px solid var(--sp-rule);
  color: var(--sp-ink);
}

.team-profile:last-child { border-right: 0; }

.team-profile__portrait {
  width: 100%;
  aspect-ratio: 1 / 1.03;
  margin-bottom: 27px;
  overflow: hidden;
  background: #dde5df;
}

.team-profile__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 34%;
  filter: saturate(0.78) contrast(1.03);
}

.team-profile__portrait--initials {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(0, 54, 96, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 54, 96, 0.05) 1px, transparent 1px),
    #dae6e6;
  background-size: 18px 18px;
  color: var(--home-navy);
  font-family: var(--home-serif);
  font-size: clamp(48px, 5vw, 75px);
  letter-spacing: -0.022em;
}

.team-profile__role {
  min-height: 30px;
  color: var(--sp-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}

.team-profile h3 {
  margin: 8px 0 13px;
  color: var(--sp-ink);
  font-family: var(--home-serif);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.team-profile p {
  margin: 0 0 24px;
  color: var(--sp-body);
  font-size: 13px;
  line-height: 1.62;
}

.team-profile__links {
  margin-top: auto;
  display: grid;
  justify-items: start;
  gap: 8px;
}

.team-profile__links a,
.team-profile__cta {
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration-color: var(--home-aqua);
  text-transform: uppercase;
}

.team-profile__links a:hover { color: var(--sp-accent-ink); }

.team-profile__cta { margin-top: auto; }

.team-profile__links .team-profile__email {
  max-width: 100%;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  text-transform: none;
}

.team-profile--join {
  text-decoration: none;
  transition: background 180ms ease;
}

.team-profile--join:hover {
  background: var(--sp-wash);
  color: var(--sp-ink);
  text-decoration: none;
}

.team-profile__plus {
  width: 100%;
  aspect-ratio: 1 / 1.03;
  margin-bottom: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sp-rule-strong);
  color: var(--sp-ink);
  font-family: var(--home-sans);
  font-size: clamp(92px, 9vw, 136px);
  font-weight: 400;
  line-height: 1;
}

/* ========== Dark theme (only what tokens cannot cover) =================== */

:root[data-theme="dark"] .team-profile__portrait--initials {
  background:
    linear-gradient(rgba(131, 211, 204, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 211, 204, 0.07) 1px, transparent 1px),
    #0a2539;
  background-size: 18px 18px;
  color: var(--home-ivory);
}

:root[data-theme="dark"] .team-profile__portrait {
  background: #0a2539;
}

/* ========== Responsive =================================================== */

@media (max-width: 1050px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .team-profile {
    min-height: 590px;
    border-bottom: 1px solid var(--sp-rule);
  }

  .team-profile:nth-child(even) { border-right: 0; }

  .team-profile:nth-child(n + 5) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .team-section { padding-top: 52px; }

  .team-grid { grid-template-columns: 1fr; }

  .team-profile,
  .team-profile:first-child,
  .team-profile:nth-child(3) {
    min-height: 0;
    padding: 24px 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--sp-rule);
  }

  .team-profile:last-child { border-bottom: 0; }

  .team-profile__portrait,
  .team-profile__plus { width: min(68vw, 270px); }

  .team-profile > a,
  .team-profile__cta { margin-top: 8px; }

}