/* ============================================
   OSBORN ASSOCIATES - Senior Team
   ============================================ */


/* ============================================
   INTRO - Heading + body two-column
   ============================================ */

.team-intro { background-color: var(--charcoal-deep); }

.team-intro__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px); align-items: end;
}

.team-intro__inner h2 {
  font-family: var(--font-serif); font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 400; line-height: 1.22; color: var(--warm-off-white); max-width: 520px;
}

.team-intro__inner p {
  font-family: var(--font-sans); font-size: clamp(0.84rem, 0.92vw, 0.9rem);
  font-weight: 300; line-height: 1.85; color: var(--warm-stone); max-width: 420px;
}


/* ============================================
   LEADERSHIP - Phil featured card
   ============================================ */

.team-leadership { background-color: var(--charcoal-deep); padding-top: 0; }

.leader-card {
  display: grid; grid-template-columns: 0.42fr 0.58fr;
  min-height: clamp(380px, 34vw, 480px); overflow: hidden;
  border-radius: var(--radius-sm); background-color: var(--charcoal-card);
}

.leader-card__img { position: relative; overflow: hidden; }
.leader-card__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; filter: saturate(0.75) contrast(1.02);
}
.leader-card__img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--charcoal-card) 100%);
}

.leader-card__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); }

.leader-card__role {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-blue); opacity: 0.7; margin-bottom: 12px;
}
.leader-card__name {
  font-family: var(--font-serif); font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  font-weight: 400; color: var(--warm-off-white); line-height: 1.2; margin-bottom: 8px;
}
.leader-card__title {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 24px;
}
.leader-card__bio {
  font-family: var(--font-sans); font-size: clamp(0.82rem, 0.9vw, 0.875rem);
  font-weight: 300; line-height: 1.85; color: var(--warm-stone);
  max-width: 440px; opacity: 0.8;
}
.leader-card__bio + .leader-card__bio { margin-top: 14px; }

.leader-card__contact {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(122,154,181,0.06);
  display: flex; flex-direction: column; gap: 4px;
}
.leader-card__contact a {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 300;
  color: var(--warm-stone); opacity: 0.6;
  transition: all var(--dur-base) var(--ease);
}
.leader-card__contact a:hover { opacity: 1; color: var(--warm-off-white); }


/* ============================================
   TEAM GRID
   ============================================ */

.team-grid-section { background-color: var(--warm-off-white); }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }

/* Member card */
.team-member { position: relative; }

.team-member__img {
  position: relative; width: 100%; aspect-ratio: 3 / 3.6;
  overflow: hidden; border-radius: var(--radius-sm);
  margin-bottom: 20px; background-color: var(--cream);
}
.team-member__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; filter: saturate(0.8) contrast(1.02);
  transition: transform 1.2s var(--ease);
}
.team-member:hover .team-member__img img { transform: scale(1.03); }

/* Placeholder for members without photos */
.team-member__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--cream) 0%, #ddd8d0 100%);
}
.team-member__initials {
  font-family: var(--font-serif); font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400; color: var(--charcoal); opacity: 0.12;
  letter-spacing: 0.05em; user-select: none;
}

.team-member__quote {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 300;
  font-style: italic; line-height: 1.65; color: var(--slate-mid);
  margin-bottom: 14px; padding-left: 12px;
  border-left: 2px solid rgba(122,154,181,0.2);
}

.team-member__name {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400; color: var(--charcoal); margin-bottom: 4px;
}
.team-member__role {
  font-family: var(--font-sans); font-size: 0.625rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-blue); margin-bottom: 14px;
}

.team-member__contact {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 12px; border-top: 1px solid rgba(42,45,50,0.06);
}
.team-member__contact a {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 300;
  color: var(--slate-mid); transition: color var(--dur-base) var(--ease);
}
.team-member__contact a:hover { color: var(--charcoal); }


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 960px) {
  .team-intro__inner { grid-template-columns: 1fr; gap: 20px; }
  .leader-card { grid-template-columns: 1fr; }
  .leader-card__img { height: clamp(300px, 50vw, 400px); }
  .leader-card__img-overlay { background: linear-gradient(180deg, transparent 50%, var(--charcoal-card) 100%); }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; max-width: 400px; }
}