/* ==========================================================================
   Single Team Member page (team-single.html)
   ========================================================================== */

.team-single-main {
  /* No overflow:hidden here: it would establish a scroll container that
     breaks position:sticky on .team-profile-media below. */
  max-width: 1290px;
  margin: 0 auto;
  padding: 110px 0;
}

.team-profile {
  display: flex;
  align-items: flex-start;
  gap: 0 30px;
  border: 1px solid rgba(2, 8, 66, 0.1);
  border-radius: 20px;
  padding: 45px 35px;
  background-image: linear-gradient(180deg, #e3f2fb 0%, rgba(227, 242, 251, 0) 56%);
}

.team-profile-media {
  flex: 0 0 40%;
  min-width: 0;
  position: sticky;
  top: 120px;
  padding-right: 50px;
}

.team-profile-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.team-profile-content {
  flex: 0 0 60%;
  min-width: 0;
}

.team-profile-name {
  margin: 0;
}

.team-profile-role {
  margin: 0 0 30px;
}

.team-profile-bio {
  margin: 0 0 30px;
}

.team-profile-bio:last-of-type {
  margin-bottom: 90px;
}

.team-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  margin: 50px 0;
  padding-bottom: 45px;
  border-bottom: 1px solid rgba(2, 8, 66, 0.1);
}

.team-info-title {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-text-paragraph);
  margin: 0 0 6px;
}

.team-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 500;
}

.team-info-list a {
  color: var(--color-text-title);
  text-decoration: none;
}

.team-info-list a:hover {
  color: var(--color-software-primary);
}

.team-skills-title {
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 20px;
}

.team-skills-title .highlight {
  color: var(--color-text-title);
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}

.team-skills-text {
  margin: 0 0 30px;
}

.team-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.team-skill-card {
  width: 170px;
  max-width: 170px;
  padding: 20px 20px 25px;
  border: 1px solid #e5e5e5;
  border-radius: 35px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.team-skill-card:hover {
  background-color: rgba(235, 235, 235, 0.7);
}

.team-skill-card img {
  display: inline-block;
  margin-bottom: 30px;
}

.team-skill-card h3 {
  font-size: 20px;
  text-transform: capitalize;
  color: #000000;
  margin: 0;
}

/* ===== Responsive ==========================================================
   Breakpoints below were measured directly against the live WordPress build
   (demo.bravisthemes.com/itzen/team-single), which uses Elementor's custom
   breakpoints (1440 / 1200 / 880 / 767) rather than the site's usual
   1024/768/480 set.
   ========================================================================== */

@media (max-width: 1440px) {
  .team-single-main { padding: 70px 0; }
  .team-profile { padding: 30px 15px; }
  .team-profile-media { padding-right: 0; }
  .team-skills-title { font-size: 35px; }
}

@media (max-width: 1200px) {
  .team-profile-media { flex: 0 0 50%; }
  .team-profile-content { flex: 0 0 50%; }
  .team-profile-name { font-size: 45px; line-height: 49.5px; }
  .team-info-grid { grid-template-columns: repeat(2, 1fr); column-gap: 30px; row-gap: 30px; }
}

@media (max-width: 880px) {
  .team-profile { padding: 15px; border-radius: 10px; gap: 0 20px; }
  .team-profile-name { font-size: 35px; line-height: 38.5px; }
  .team-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .team-profile { flex-direction: column; }
  .team-profile-media { position: static; flex: 1 1 auto; padding-right: 0; width: 100%; }
  .team-profile-content { flex: 1 1 auto; }
}