/* ==========================================================================
   Page: instructors
   ========================================================================== */

/* Instructors page (instructors.html) — namespace: team- */

.team-hero .page-hero__inner { padding-bottom: 44px; }
.team-hero .page-hero__lead { max-width: 760px; }

.team-list { padding-block: 48px 72px; }
.team-grid { --min: 340px; --gap: 24px; list-style: none; }

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.team-card__photo {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DCEBF7;
  color: #4F7FA6;
}
.team-card__body { display: flex; flex-direction: column; flex-grow: 1; gap: 12px; padding: 22px; }
.team-card__head { display: flex; flex-direction: column; gap: 2px; }
.team-card__name { font-size: 21px; font-weight: 800; line-height: normal; }
.team-card__name-link { color: var(--c-ink); text-decoration: none; }
.team-card__name-link:hover { color: var(--c-primary); text-decoration: underline; }
.team-card__role { font-size: 15px; line-height: normal; color: var(--c-text-2); }

.team-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.team-tag {
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--c-pale);
  color: #105A8D;
  font-size: 12.5px;
  font-weight: 600;
  line-height: normal;
}

.team-card__lead { font-size: 14.5px; line-height: 1.7; color: var(--c-text-2); }
.team-card__link { margin-top: auto; }

@media (max-width: 720px) {
  .team-list { padding-block: 32px 56px; }
  .team-card__body { padding: 20px 18px; }
}

/* ==========================================================================
   Instructor profile (instructor-khaled.html)
   ========================================================================== */

/* Header band: breadcrumb, photo placeholder, name, role, tags, lead */
.team-profile-hero .page-hero__inner { gap: 24px; padding-block: 32px 44px; }
.team-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.team-profile__photo {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: #DCEBF7;
  color: #4F7FA6;
}
.team-profile__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.team-profile__name { font-size: 40px; font-weight: 900; line-height: 1.3; }
.team-profile__role { font-size: 18px; line-height: normal; color: var(--c-text-2); }
.team-profile__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.team-profile__tags .team-tag { padding: 5px 11px; border-radius: var(--radius-sm); font-size: 13.5px; }
.team-profile__lead { max-width: 680px; font-size: 16.5px; line-height: 1.8; color: var(--c-ink); }

/* Body: bio, courses, back link */
.team-profile-body { display: flex; flex-direction: column; gap: 56px; padding-block: 56px 72px; }
.team-profile-body__title { font-size: 28px; font-weight: 800; line-height: normal; }
.team-bio { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.team-bio__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-inline-start: 20px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--c-text-2);
}
.team-courses { display: flex; flex-direction: column; gap: 18px; }
.team-courses__grid { --min: 320px; --gap: 16px; max-width: 820px; list-style: none; }
.team-courses__grid > li { display: flex; }
.team-course {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  line-height: normal;
}
.team-course__kind { font-size: 12.5px; font-weight: 700; color: var(--c-primary); }
.team-course__title { font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.4; }
.team-course__meta { font-size: 14px; color: var(--c-text-2); }
.team-course__more { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--c-primary); font-size: 14.5px; font-weight: 700; }
.team-back { align-self: flex-start; font-size: 15.5px; }

@media (max-width: 720px) {
  .team-profile-hero .page-hero__inner { gap: 20px; padding-block: 24px 32px; }
  .team-profile { gap: 20px; }
  .team-profile__photo { width: 120px; height: 120px; border-radius: var(--radius-xl); }
  .team-profile__photo svg { width: 56px; height: 56px; }
  .team-profile__text { flex-basis: 100%; }
  .team-profile__name { font-size: 30px; }
  .team-profile__role { font-size: 16.5px; }
  .team-profile__lead { font-size: 16px; }
  .team-profile-body { gap: 44px; padding-block: 40px 56px; }
  .team-profile-body__title { font-size: 24px; }
  .team-bio__list { font-size: 16px; }
  .team-course { padding: 20px 18px; }
}

/* Trainer photos from the dashboard (instructors page, trainer profile). On the
   profile the photo fills the whole rounded box; the box clips its corners. */
.trainer-photo {
  width: min(150px, 62%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-white);
  box-shadow: 0 8px 22px rgba(10, 63, 101, 0.16);
}
.team-profile__photo.has-photo { overflow: hidden; }
.team-profile__photo .trainer-photo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Instructors page: the photo is a rounded square beside the name and role
   (replaces the design's wide photo banner). */
.team-card__top { display: flex; align-items: center; gap: 14px; }
.team-card__top .team-card__head { flex: 1 1 auto; min-width: 0; }
.team-card__top .team-card__photo {
  flex: none;
  width: 92px;
  height: 92px;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 16px;
}
.team-card__top .trainer-photo {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}