/* Team page. Tokens come from /styles.css (the Passionfruit design system values). */

.site-nav a[aria-current="page"] { color: var(--purple); }

.team-hero { position: relative; padding: 64px 0 56px; }
.team-title { max-width: 760px; margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; color: var(--eggplant); }
/* The supplied full-colour lockup replaces the live-type name. */
.team-lockup { display: block; width: 100%; max-width: 100%; height: auto; }
.team-fruit { position: absolute; top: 8px; right: 24px; width: clamp(140px, 17vw, 220px); transform: rotate(-18deg); filter: drop-shadow(18px 22px 16px rgba(31, 11, 21, 0.2)); animation: team-fruit-float 7s ease-in-out infinite; pointer-events: none; }
@keyframes team-fruit-float { 0%, 100% { transform: translateY(0) rotate(-18deg); } 50% { transform: translateY(-14px) rotate(-10deg); } }

.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 120px; }

.team-card { --portrait: 160px; display: grid; grid-template-columns: var(--portrait) minmax(0, 1fr); align-items: center; gap: 32px; padding: 32px; border: 1px solid var(--dark-border); border-radius: 24px; background: var(--eggplant); color: var(--cream); opacity: 0; animation: team-rise 600ms cubic-bezier(.2, .7, .2, 1) forwards; transition: transform 180ms ease, box-shadow 180ms ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.team-card:nth-child(2) { animation-delay: 80ms; }
.team-card:nth-child(3) { animation-delay: 160ms; }
.team-card:nth-child(4) { animation-delay: 240ms; }
@keyframes team-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.team-portrait { width: var(--portrait); aspect-ratio: 1; padding: 4px; border-radius: 50%; background: linear-gradient(105deg, var(--purple) 5%, var(--action) 52%, var(--yellow) 100%); }
.team-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface); }

.team-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.team-body h2 { margin: 0 0 12px; color: var(--cream); font-size: 32px; line-height: 36px; letter-spacing: -0.02em; }
.team-role { margin: 0; color: var(--yellow); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.team-contact { display: flex; flex: 0 0 auto; gap: 4px; }
.team-contact a { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 8px; color: var(--dark-brand-text); transition: color 100ms ease, background-color 100ms ease; }
.team-contact a:hover { color: var(--dark-brand-text); background: var(--dark-bg); }
.team-contact a:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.team-contact svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.team-contact svg.linkedin-icon { fill: currentColor; stroke: none; }
.team-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.team-tags li { padding: 6px 12px; border: 1px solid var(--dark-border); border-radius: 999px; color: var(--dark-fg); font-size: 12px; line-height: 16px; font-weight: 600; }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .team-hero { padding: 40px 0 32px; }
  .team-fruit { position: static; display: block; margin: 32px 0 0 auto; width: 96px; opacity: .9; }
  .team-grid { margin-bottom: 72px; }
  .team-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; --portrait: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-contact a { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card { animation: none; opacity: 1; transition: none; }
  .team-fruit { animation: none; }
}