/* ==========================================================================
   Section: team — "The brains behind your campaign" (team-member carousel)
   Figma "Home Page" y 11061→11742 (1920 frame) · "Mobile Home" y 7558→8238 (402)
   Layout notes (desktop): eyebrow at x=100, then a 432px intro column
   (heading 409 wide, green "Meet the team" pill, prev/next pills hanging out
   to x=56) beside a row of 357×555 portrait cards (15px gaps) that starts at
   x=532 and runs off the right edge of the frame — a horizontal scroll-snap
   track that bleeds to the viewport edge. Names (24px display caps) and roles
   (20px body) sit under each card.
   Mobile drops the pill + arrows, shrinks the cards to 258×402 (11px gaps)
   and adds a 315×47 green-outline "Book a discovery call" pill below them.
   ========================================================================== */

.section--team {
  /* Figma draws the prev/next pills and arrows in #000000 on the #0d0d0d page
     (1.1:1 — invisible; the same controls are white in "Our work"). Rendered
     white so the only desktop/tablet carousel controls can be seen (WCAG
     1.4.11 needs 3:1); set var(--black) to match the Figma literally. */
  --team-arrow: var(--fg);
  padding: 110px 0 80px; /* (11061−10840)/2 above; (11912−11742)/2 = 85 below, less the 4.8px the
                            24.8px role line box extends past the Figma text box (h=20) */
}

/* ---- Grid: intro column (100→532) | card carousel (532→edge) -------------- */
.section--team .team__grid {
  display: grid;
  grid-template-columns: 432px minmax(0, 1fr);
  margin-top: 33px; /* eyebrow line box ends ≈11086 → heading / cards 11119 */
}

.section--team .team__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* "The brains behind your campaign": 50px Blauer Nue Medium, sentence case, wraps to 3 lines in 409px */
.section--team .team__title {
  max-width: 409px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4); /* 50 → 40 (≤1440) → 36 (≤1024, and the Figma mobile size) */
  line-height: var(--lh-display);
}

/* Green pill "Meet the team": Rectangle 173 is 266×46 at x=96 */
.section--team .team__cta {
  min-width: 266px;    /* Rectangle 173 — pinned so fallback fonts don't shrink the pill */
  margin-top: 62px;    /* heading (3 × 47.5 line boxes) ends ≈11261.5 → button 11324 */
  padding-right: 27px; /* 17 + text (184) + 12 gap + 26 arrow + 27 = 266 */
  justify-content: space-between; /* label stays at the 17px inset, arrow at the right */
}
.section--team .team__cta { --wipe-fill: var(--bg); --wipe-txt: var(--accent); }
.section--team .team__cta:hover,
.section--team .team__cta:focus-visible { --wipe-edge: var(--accent); }
.section--team .team__cta:hover svg,
.section--team .team__cta:focus-visible svg { color: var(--accent); }
.section--team .team__cta svg { flex: 0 0 auto; width: 26px; height: 15px; }

/* Prev/next: 61×36 pills at x=56 and 127 (10px apart), bottom edge at 11685 — 11px below the cards */
.section--team .team__arrows {
  display: flex;
  gap: 10px;
  margin: auto 0 62px calc(56px - var(--gutter)); /* pushed to the column's bottom; grid row ends ≈11747 */
}
.section--team .team__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 36px;
  border-radius: 46px;
  box-shadow: inset 0 0 0 2px var(--team-arrow);
  color: var(--team-arrow);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.section--team .team__arrow svg { width: 36px; height: 15px; }
.section--team .team__arrow:hover {
  background: var(--accent);
  color: var(--black);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ---- Carousel (scroll-snap track) ---------------------------------------- */
.section--team .team__carousel {
  min-width: 0;
  margin-right: calc(var(--gutter) * -1); /* cards run past x=1820 to the frame edge */
}
.section--team .team__track {
  display: flex;
  align-items: flex-start; /* a wrapped caption must not stretch every card */
  gap: 15px;
  padding-right: var(--gutter); /* gutter after the last card when scrolled to the end */
  padding-bottom: 28px;         /* room for the 28px reveal rise (js/main.js) so nothing clips */
  margin-bottom: -28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.section--team .team__track::-webkit-scrollbar { display: none; }

/* Loop mode (pointer devices, js/main.js adds .is-loop): the track is moved by
   transform one card at a time instead of scrolling; the container clips it
   and feathers the left edge so the outgoing card fades under the intro text. */
.section--team .team__carousel.is-loop {
  overflow: hidden;
  /* The container starts 110px left of the cards (under the intro column's
     right margin) so the feather zone sits before the first card: at rest every
     card is fully visible, and a card leaving to the left fades out there. */
  margin-left: -110px;
  padding-left: 110px;
  padding-bottom: 28px;         /* keep the reveal-rise room on the container instead of the track */
  margin-bottom: -28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px);
  mask-image: linear-gradient(90deg, transparent 0, #000 110px);
}
.section--team .team__carousel.is-loop .team__track {
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.section--team .team__carousel.is-loop .team__track.is-jumping { transition: none; }
/* The card that has just left to the left fades out completely at rest (the
   feather alone would leave its edge ghosting under the intro column). Applied
   to the figure, not the card, so it never fights the GSAP reveal's inline opacity. */
.section--team .team__carousel.is-loop .team__figure { transition: opacity .7s cubic-bezier(.22, .61, .36, 1); }
.section--team .team__carousel.is-loop .team__card.is-prev .team__figure { opacity: 0; }
.section--team .team__carousel.is-loop .team__track.is-jumping .team__figure { transition: none; }

.section--team .team__card {
  flex: 0 0 357px;
  width: 357px;
  scroll-snap-align: start;
}
.section--team .team__figure { margin: 0; }

/* Portrait 357×555, 21px radius (.card-img) */
.section--team .team__media {
  width: 100%;
  aspect-ratio: 357 / 555;
}
.section--team .team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name (24px display caps) + role (20px body) under each card */
.section--team .team__caption {
  margin-top: 20px; /* card bottom 11674 → name 11694 */
}
.section--team .team__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 0.98;
  text-transform: uppercase;
}
.section--team .team__role {
  margin-top: 4.5px; /* name line box ends ≈11717.5 → role 11722 */
  font-size: 20px;
  line-height: 1.24;
}

/* Mobile-only CTA (Group 83) — hidden on desktop, where "Meet the team" + arrows are shown */
.section--team .team__cta-mobile { display: none; }

/* ---- Single column: heading → CTA → cards → arrows ------------------------ */
@media (max-width: 1024px) {
  .section--team .team__grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .section--team .team__intro { display: contents; }
  .section--team .team__title { order: 1; }
  .section--team .team__cta { order: 2; margin-top: 32px; }
  .section--team .team__carousel {
    order: 3;
    align-self: stretch;
    margin: 40px calc(var(--gutter) * -1) 0; /* full-bleed track, cards aligned to the gutter */
  }
  .section--team .team__track {
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .section--team .team__arrows { order: 4; margin: 30px 0 0; }
}

/* ---- Mobile (402 frame, 20px gutters): eyebrow → heading → cards → outline CTA */
@media (max-width: 640px) {
  .section--team { padding: 51px 0 46px; } /* (7558−7457)/2 = 50.5 above, (8330−8238)/2 below */

  .section--team .eyebrow { gap: 16px; }        /* dot x=20, text x=42 */
  .section--team .team__grid { margin-top: 21px; } /* eyebrow line box ends ≈7578 → heading 7599 */
  .section--team .team__title { max-width: 325px; } /* 36px, wraps to "The brains behind / your campaign" */

  .section--team .team__cta,
  .section--team .team__arrows { display: none; }

  .section--team .team__carousel { margin-top: 27px; } /* heading (2 × 34.2) ends ≈7667 → cards 7694 */
  .section--team .team__track { gap: 11px; }
  .section--team .team__card { flex-basis: 258px; width: 258px; }
  .section--team .team__media { aspect-ratio: 258 / 402; }
  .section--team .team__caption { margin-top: 21px; } /* card bottom 8096 → name 8117 */
  /* Figma keeps names and roles on one line even when wider than the 258px card: "Head of SEO and
     Performance" measures 262px in Europa, so it runs 4px into the 11px gap (7px clear of the next
     caption). The overflow guard only bites if a wider fallback font renders (Helvetica: 274px), clipping
     at the gap edge instead of colliding with the next card. */
  .section--team .team__name { white-space: nowrap; }
  .section--team .team__role {
    white-space: nowrap;
    width: calc(100% + 11px); /* card + gap; a block <p> is otherwise capped at the 258px card */
    overflow: hidden;
  }

  /* Group 83: 315×47 green-outline pill, label centred in the 233px between the 24px/20px paddings, arrow at x=290 */
  .section--team .team__cta-mobile {
    display: flex;
    width: 315px;
    max-width: 100%;
    height: 47px;
    margin-top: 21px; /* role line box ends ≈8170 → button 8191 */
    padding: 0 20px 0 24px;
    justify-content: space-between;
    font-size: 20px;
  }
  .section--team .team__cta-label { flex: 1 1 auto; text-align: center; }
  .section--team .team__cta-mobile svg { flex: 0 0 auto; width: 26px; height: 15px; }
}