/* ============================================================
   TEAM — text on the left, fan-of-3 image tiles on the right
   ============================================================ */

.team {
  padding: 60px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid #036c4d;
}

.team__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4xl);
  align-items: center;
}

.team__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-lg);
  max-width: 560px;
}

.team__lead {
  margin: 0;
}

.team__cta {
  margin-top: var(--sp-md);
  font-size: calc(var(--fs-caption) * 1.2);
  font-weight: var(--fw-medium);
  padding: 18px 28px;
}

.team__cta .btn__arrow {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

/* ────────────────────────────────────────────────
   Fan of 3 image tiles (right column).
   Ported from a framer-motion component:
     - spring physics → CSS cubic-bezier with overshoot
     - staggerChildren → transition-delay per card
     - whileHover → :hover selector
   IntersectionObserver in js/team-tiles.js adds
   `.is-revealed` when the block scrolls into view.
   ──────────────────────────────────────────────── */

.team-tiles {
  position: relative;
  width: 256px;
  height: 256px;
  margin: 0 auto;
  transform: scale(1.2);
  transform-origin: center;
}

.team-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 192px;
  margin-top: -96px;
  margin-left: -96px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg) translate(0, 0);
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-tile--left  { z-index: 30; transform-origin: bottom right; }
.team-tile--mid   { z-index: 20; transform-origin: center; }
.team-tile--right { z-index: 10; transform-origin: bottom right; }

.team-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reveal — cards fan out with a stagger when the block scrolls into view */
.team-tiles.is-revealed .team-tile--left {
  transform: rotate(-8deg) translate(-150px, 10px);
  transition-delay: 200ms;
}
.team-tiles.is-revealed .team-tile--mid {
  transform: rotate(6deg);
  transition-delay: 400ms;
}
.team-tiles.is-revealed .team-tile--right {
  transform: rotate(-6deg) translate(200px, 20px);
  transition-delay: 600ms;
}

/* Hover per-card variants — higher specificity than reveal so they win
   while the cursor is over the tile. Snappier than the entrance. */
.team-tiles.is-revealed .team-tile--left:hover {
  transform: rotate(1deg) translate(-160px, 0);
  transition-duration: 400ms;
  transition-delay: 0ms;
}
.team-tiles.is-revealed .team-tile--mid:hover {
  transform: rotate(0deg) translate(0, -10px);
  transition-duration: 400ms;
  transition-delay: 0ms;
}
.team-tiles.is-revealed .team-tile--right:hover {
  transform: rotate(3deg) translate(200px, 10px);
  transition-duration: 400ms;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .team-tile { transition: none; }
}

/* ───── Mobile (≤ 720px) — landing TEAM section ───── */
@media (max-width: 720px) {
  .team {
    padding: 60px var(--sp-md);
  }

  /* Stack: text on top, fan below */
  .team__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }

  .team__text {
    max-width: 100%;
    align-items: stretch;
  }

  /* CTA full-width on mobile */
  .team__cta {
    width: 100%;
    justify-content: center;
  }

  /* Orbital animation +20% on mobile (stacked beneath the text) */
  .team-stage {
    transform: scale(1.2);
    transform-origin: center;
  }

  /* Compressed fan — keep the reveal animation, drop touch interactivity */
  .team-tiles {
    transform: scale(0.8);
    pointer-events: none;
    justify-self: center;
    margin: 0 auto;
  }
}

/* ============================================================
   TEAM PAGE — standalone /team.html intro
   ============================================================ */

.team-page {
  padding: var(--section-pad);
  background: var(--color-bg);
}

.team-page__header {
  max-width: 1100px;
}

/* Keep the title on a single line on desktop (allow wrap on mobile below) */
.team-page__header .section-header__title {
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* Team member cards (team.html) ───────────────────────────── */

.team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
  margin-top: var(--sp-4xl);
}

/* Each card: photo on the left, text body on the right */
.team-card {
  background: var(--color-surface);
  padding: var(--sp-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-lg);
  align-items: start;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #d4d4d4;
  display: block;
}

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

.team-card__header {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
}

.team-card__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--color-display);
}

.team-card__position {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono-cap);
  text-transform: uppercase;
  color: var(--color-secondary);
  white-space: nowrap;
}

.team-card__divider {
  height: 1px;
  background: #e8e8e8;
  width: 100%;
}

.team-card__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary);
}

@media (max-width: 720px) {
  .team-page {
    padding: 80px var(--sp-md);
  }

  /* On mobile let the title wrap normally — single line wouldn't fit */
  .team-page__header .section-header__title {
    white-space: normal;
    flex-wrap: wrap;
  }

  /* Cards: 1 per row on mobile, stack photo above text inside the card */
  .team-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .team-card {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

}