/* team.css — Our Team page styles */

/* ---- Team banner image ---- */
.team-banner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  padding: 0 var(--page-px);
}

.team-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Team intro ---- */
.team-intro {
  padding: 0 var(--page-px);
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  width: 100%;
}

.team-intro__heading {
  font-size: 42px;
  font-weight: var(--fw-light);
  line-height: 51px;
  color: var(--color-forest);
  max-width: 1064px;
}

.team-intro__body {
  font-size: 24px;
  font-weight: var(--fw-extralight);
  line-height: 33px;
  letter-spacing: 0.02em;
  color: var(--color-forest);
  max-width: 1063px;
}

/* ---- Divider ---- */
.team-divider {
  border: none;
  border-top: 1px solid var(--color-forest);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page-px);
  /* Use a pseudo-trick for padded hr */
}

.team-divider-wrap {
  padding: 0 var(--page-px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.team-divider-wrap hr {
  border: none;
  border-top: 1px solid var(--color-forest);
  margin: 0;
}

/* ---- Catherine Story ---- */
.team-story {
  padding: 0 var(--page-px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 53px;
}

.team-story__heading {
  font-size: 42px;
  font-weight: var(--fw-light);
  line-height: 51px;
  letter-spacing: -0.005em;
  color: var(--color-forest);
}

.team-story__layout {
  display: flex;
  gap: 133px;
  align-items: flex-start;
}

.team-story__left {
  flex: 0 0 409px;
}

.team-story__tagline {
  font-size: 36px;
  font-weight: var(--fw-extralight);
  line-height: 45px;
  letter-spacing: -0.02em;
  color: var(--color-forest);
}

.team-story__right {
  flex: 0 0 738px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.team-story__img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.team-story__img img {
  width: 100%;
  height: auto;
  display: block;
}

.team-story__chapter {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.team-story__chapter-title {
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 33px;
  color: var(--color-forest);
}

.team-story__chapter-body {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 27px;
  color: var(--color-forest);
}

/* ---- Team Grid ---- */
.team-grid-section {
  background-color: var(--color-beige);
  padding: var(--space-xl) max(var(--page-px), calc((100% - 1280px) / 2));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.team-grid-section__heading {
  font-size: 42px;
  font-weight: var(--fw-light);
  line-height: 51px;
  color: var(--color-forest);
  text-align: center;
  width: 100%;
}

.team-grid-row {
  display: flex;
  gap: 88px;
  align-items: flex-start;
}

.team-card {
  flex: 0 0 368px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.team-card__img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.team-card__img img {
  width: 100%;
  height: auto;
  display: block;
}

.team-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.team-card__name {
  font-size: 36px;
  font-weight: var(--fw-extralight);
  line-height: 45px;
  letter-spacing: -0.02em;
  color: var(--color-forest);
}

.team-card__role {
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 27px;
  color: var(--color-forest);
  margin-top: 9px;
}

.team-card__bio {
  font-size: 21px;
  font-weight: var(--fw-light);
  line-height: 30px;
  color: var(--color-forest);
}

/* ---- CTA ---- */
.team-cta {
  display: flex;
  justify-content: center;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .team-grid-row {
    gap: 40px;
  }

  .team-card {
    flex: 1;
  }
}

@media (max-width: 1024px) {
  .team-intro__heading {
    font-size: 34px;
    line-height: 42px;
  }

  .team-intro__body {
    font-size: 20px;
  }

  .team-story {
    gap: var(--space-md);
  }

  .team-story__layout {
    flex-direction: column;
    gap: var(--space-md);
  }

  .team-story__left {
    flex: none;
    width: 100%;
  }

  .team-story__right {
    flex: none;
    width: 100%;
  }

  .team-story__tagline {
    font-size: 28px;
    line-height: 36px;
  }

  .team-grid-section {
    padding: var(--space-xl) var(--page-px);
  }

  .team-card__name {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 768px) {
  .team-intro__heading {
    font-size: 28px;
    line-height: 36px;
  }

  .team-intro__body {
    font-size: 18px;
    line-height: 28px;
  }

  .team-story__heading {
    font-size: 28px;
    line-height: 36px;
  }

  .team-grid-section {
    padding: var(--space-lg) var(--page-px);
    gap: var(--space-md);
  }

  .team-grid-section__heading {
    font-size: 28px;
    line-height: 36px;
  }

  .team-grid-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .team-card {
    flex: none;
    width: 100%;
  }

}