/* About & contact page — team section. Centred intro over a card grid
   (DESIGN.md) on the `bg-soft` band, so it alternates with the cream about
   section above. Mobile-first: one column, fluid widths only — no fixed pixel
   layout widths, no 100vw, no horizontal scroll at 320px. Tablet (>=48em):
   two-up cards. Desktop (>=64em): four-up. */

.team {
  padding-block: var(--space-section);
  background-color: var(--color-bg-soft);
  color: var(--color-text-body);
}

.team__container {
  display: grid;
  gap: var(--space-10);
}

.team__intro {
  display: grid;
  justify-items: start;
  max-width: var(--measure);
}

/* Scroll-reveal: intro, cards and the closing note settle in once in view. */
.team__intro,
.team__member,
.team__note {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* The hidden start state is opt-in: only JS that can reveal it adds
   `is-animated`, so with JS off the section is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .team.is-animated .team__intro,
  .team.is-animated .team__member,
  .team.is-animated .team__note {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }

  .team.is-animated.is-ready .team__intro,
  .team.is-animated.is-ready .team__member,
  .team.is-animated.is-ready .team__note {
    opacity: 1;
    transform: none;
  }

  .team.is-animated.is-ready .team__member:nth-child(1) { transition-delay: var(--stagger-step); }
  .team.is-animated.is-ready .team__member:nth-child(2) { transition-delay: calc(var(--stagger-step) * 2); }
  .team.is-animated.is-ready .team__member:nth-child(3) { transition-delay: calc(var(--stagger-step) * 3); }
  .team.is-animated.is-ready .team__member:nth-child(4) { transition-delay: calc(var(--stagger-step) * 4); }
  .team.is-animated.is-ready .team__note { transition-delay: calc(var(--stagger-step) * 5); }
}

/* Intro -------------------------------------------------------------------- */

.team__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}

.team__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw + 0.75rem, 2.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.team__subheading {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

/* Member cards ------------------------------------------------------------- */

.team__members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
}

.team__member {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.team__member-media {
  position: relative;
  background-color: var(--color-bg-strong);
}

.team__member-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Monogram badge: the one terracotta highlight on the card. */
.team__monogram {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-end: calc(var(--space-4) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-600);
  color: var(--color-text-on-primary);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-normal);
  box-shadow: var(--shadow-md);
}

.team__member-body {
  padding: var(--space-8) var(--space-5) var(--space-6);
}

.team__member-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.team__member-role {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--color-primary-600);
}

.team__member-bio {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

@media (prefers-reduced-motion: no-preference) {
  .team__member {
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-default);
  }
  .team.is-ready .team__member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

/* Closing note ------------------------------------------------------------- */

.team__note {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.team__body {
  max-width: var(--measure);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.team__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.team__ctas .btn {
  transition: background-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}

.team__ctas .btn--primary:hover { background-color: var(--color-primary-700); }
.team__ctas .btn--secondary:hover { background-color: var(--color-bg-soft); }
.team__ctas .btn:hover { transform: translateY(-2px); }

/* Tablet */
@media (min-width: 48em) {
  .team__container { gap: var(--space-12); }
  .team__members { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .team__note {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10);
  }

  .team__ctas { justify-self: end; }
}

/* Desktop: centred intro, four-up cards. */
@media (min-width: 64em) {
  .team__intro {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .team__members { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}