/* ============================================================
   VelorHR — Mentors listing + profile pages
   Kept in its own file so it always loads fresh (never served
   from a stale cached styles.css). Colors are hard-coded here
   for the same reason.
   ============================================================ */

/* ---- Listing hero ---- */
.lead-hero { text-align: center; padding: 80px 0 6px; }
.lead-hero .eyebrow { margin-bottom: 12px; }
.lead-hero h1 { max-width: 20ch; margin: 0 auto 16px; }
.lead-hero p { color: #6c6c78; font-size: 1.08rem; line-height: 1.6; max-width: 56ch; margin: 0 auto; }

/* ---- Mentor cards ---- */
.team-section { padding: 46px 0 100px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 28px;
  justify-content: center;
}
.team-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #ffffff;
  border: 1px solid rgba(21, 21, 27, 0.10);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(21, 21, 27, 0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(21, 21, 27, 0.14); }
.team-card__img { width: 100%; height: 300px; overflow: hidden; background: #ece9e3; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.team-card__body { padding: 20px 22px 24px; text-align: center; }
.team-card__body h3 { margin: 0 0 4px; font-family: "Sora", "Inter", sans-serif; font-size: 1.2rem; }
.team-card__role { color: #5b4cd6; font-weight: 600; font-size: .92rem; margin-bottom: 14px; }
.team-card__link { color: #15151b; font-weight: 600; font-size: .92rem; }
.team-card:hover .team-card__link { color: #5b4cd6; }

@media (max-width: 640px) {
  .team-grid { grid-template-columns: minmax(0, 340px); }
}

/* ---- Profile page ---- */
.profile-hero { text-align: center; padding: 76px 0 28px; }
.profile-hero .eyebrow { margin-bottom: 12px; }
.profile-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 0 0 10px; }
.profile-role { color: #6c6c78; font-size: 1.12rem; }
.profile-body { padding: 16px 0 100px; }
.profile-inner {
  display: grid; grid-template-columns: 280px 1fr; gap: 50px;
  align-items: start; max-width: 940px; margin: 0 auto;
}
.profile-photo { border-radius: 18px; overflow: hidden; background: #ece9e3; box-shadow: 0 8px 24px rgba(21, 21, 27, 0.10); }
.profile-photo img { width: 100%; height: auto; display: block; }
.profile-text p { color: #34343f; font-size: 1.05rem; line-height: 1.78; margin-bottom: 16px; }
.profile-back { display: inline-block; margin-top: 8px; text-decoration: none; color: #5b4cd6; font-weight: 600; }
.profile-back:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .profile-inner { grid-template-columns: 1fr; gap: 28px; }
  .profile-photo { max-width: 260px; margin: 0 auto; }
}