/* ==========================================================================
   Arbuda Engineering — Leadership & Engineering Team Showcase
   Typography: Playfair Display & Schibsted Grotesk
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Wrapper
   -------------------------------------------------------------------------- */
.section-team {
  background-color: #F5F3ED;
  padding: 4.8rem 0 6rem;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1200px) {
  .section-team {
    padding: 7.2rem 0 9.6rem;
  }
}

/* --------------------------------------------------------------------------
   Header Row — Title left, Slider controls right
   -------------------------------------------------------------------------- */
.section-team__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 2.5rem;
  max-width: 1920px;
  margin: 0 auto 4.8rem;
}

@media (min-width: 1200px) {
  .section-team__header {
    padding: 0 10rem;
    margin-bottom: 5.6rem;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Section Heading — Harmonized with 2nd Service Section Typography
   Font: 'Plus Jakarta Sans' (700 bold) + optional Serif Italic accent
   Colors: Preserved 100% untouched (#1A1A1A)
   -------------------------------------------------------------------------- */
.section-team__heading {
  font-family: 'Plus Jakarta Sans', var(--font-primary), sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1A1A1A;
  margin: 0;
}

.section-team__heading--serif {
  font-family: 'Playfair Display', var(--font-secondary, 'Lora', serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .section-team__heading {
    font-size: 5rem;
  }
}

@media (min-width: 1200px) {
  .section-team__heading {
    font-size: 6.4rem;
  }
}

/* --------------------------------------------------------------------------
   Slider Controls — ← counter →
   -------------------------------------------------------------------------- */
.section-team__controls {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.8rem;
}

@media (min-width: 1200px) {
  .section-team__controls {
    margin-top: 0;
    gap: 1.6rem;
  }
}

/* Counter text "1/70" */
.section-team__counter {
  font-family: 'Schibsted Grotesk', 'Instrument Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: #1A1A1A;
  letter-spacing: 0;
  white-space: nowrap;
  min-width: 4.5rem;
  text-align: center;
}

@media (min-width: 1200px) {
  .section-team__counter {
    font-size: 1.5rem;
  }
}

/* Arrow pill buttons — rounded rectangle, border, icon inside */
.section-team__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.2rem;
  height: 4.4rem;
  border-radius: 10rem;
  border: 1.5px solid rgba(26, 26, 26, 0.65);
  background: transparent;
  color: #1A1A1A;
  cursor: pointer;
  transition:
    background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  padding: 0;
  flex-shrink: 0;
}

.section-team__btn:disabled {
  opacity: 0.28;
  pointer-events: none;
}

@media (pointer: fine) {
  .section-team__btn:not(:disabled):hover {
    background-color: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
    transform: scale(1.05);
  }

  .section-team__btn:active {
    transform: scale(0.97);
  }
}

/* SVG progress ring (animates 6s during auto-advance) */
.section-team__btn-ring {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  overflow: visible;
}

.section-team__btn-ring path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.section-team__btn-ring.is-playing path {
  opacity: 1;
  animation: ringProgress 6s linear forwards;
}

@keyframes ringProgress {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Arrow icon SVG */
.section-team__btn-icon {
  position: relative;
  z-index: 1;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-team__btn-icon svg {
  width: 100%;
  height: 100%;
}

/* Mobile: smaller buttons */
@media (max-width: 767px) {
  .section-team__btn {
    width: 5.6rem;
    height: 4rem;
  }

  .section-team__btn-icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   Body Row — left tabs, right slider
   -------------------------------------------------------------------------- */
.section-team__body {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* --------------------------------------------------------------------------
   Filter Tab Pills — Vertical Category Navigation
   -------------------------------------------------------------------------- */
.section-team__tabs {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  padding-left: 2.5rem;
  width: auto;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  .section-team__tabs {
    padding-left: 10rem;
    justify-content: space-between;
    gap: 0;
    /* space-between distributes pills evenly across exact photo height */
  }
}

/* Single pill tab */
.section-team__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  border-radius: 10rem;
  border: 1.5px solid rgba(26, 26, 26, 0.22);
  background: transparent;
  color: #1A1A1A;
  font-family: 'Schibsted Grotesk', 'Instrument Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition:
    background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 1200px) {
  .section-team__tab {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
}

/* Active state — solid black pill */
.section-team__tab.is-active {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* Hover for non-active */
@media (pointer: fine) {
  .section-team__tab:not(.is-active):hover {
    background-color: rgba(26, 26, 26, 0.06);
    border-color: rgba(26, 26, 26, 0.5);
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   Slider Track — fills rest of width, clips cleanly on left
   -------------------------------------------------------------------------- */
.section-team__slider-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: 3.2rem;
  /* Right: cards bleed to edge with partial peek */
}

@media (max-width: 1199px) {
  .section-team__slider-wrap {
    margin-left: 2rem;
  }
}

/* Scrollable row */
.section-team__track {
  display: flex;
  gap: 1.6rem;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}

.section-team__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* --------------------------------------------------------------------------
   Team Card
   - Aspect-ratio: 19/20 (portrait)
   - Border-radius: 1.6rem
   - Natural typography hierarchy with smooth entrance animations
   -------------------------------------------------------------------------- */
.section-team__card {
  flex: 0 0 auto;
  width: clamp(22rem, 27vw, 42rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

@media (max-width: 1399px) {
  .section-team__card {
    width: clamp(20rem, 38vw, 36rem);
  }
}

/* --------------------------------------------------------------------------
   Mobile Responsive Layout (< 768px)
   Horizontal swipeable tabs with peek slider cards
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section-team {
    padding: 3.6rem 0 4.8rem;
  }

  .section-team__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 0 2rem;
    margin-bottom: 2.4rem;
  }

  .section-team__heading {
    font-size: 3.2rem;
    line-height: 1.15;
  }

  .section-team__controls {
    align-self: flex-end;
    gap: 1.2rem;
    margin-top: 0;
  }

  /* Stack tabs on top, slider below */
  .section-team__body {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  /* Horizontal swipeable scroll row for pills */
  .section-team__tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 0.4rem 2rem 0.8rem;
    gap: 0.8rem;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .section-team__tabs::-webkit-scrollbar {
    display: none;
  }

  .section-team__tab {
    flex-shrink: 0;
    padding: 0.8rem 1.6rem;
    font-size: 1.3rem;
  }

  /* Slider: full width with left padding matching header */
  .section-team__slider-wrap {
    margin-left: 0;
    padding-left: 2rem;
    width: 100%;
  }

  .section-team__track {
    gap: 1.4rem;
  }

  .section-team__card {
    /* ~78vw covers 1 full card + ~20% peek of next card on right */
    width: clamp(23rem, 78vw, 32rem);
    gap: 1.2rem;
  }
}

/* Image container */
.section-team__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 19 / 20;
  background-color: #0D3B2E;
  border-radius: 1.4rem;
  overflow: hidden;
}

/* Photo */
.section-team__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (pointer: fine) {
  .section-team__card:hover .section-team__card-img img {
    transform: scale(1.05);
  }
}

/* Name text below card — Harmonized with Plus Jakarta Sans bold */
.section-team__card-name {
  font-family: 'Plus Jakarta Sans', var(--font-primary), sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #1A1A1A;
  margin: 0;
  padding: 0 0.4rem;
}

@media (min-width: 1200px) {
  .section-team__card-name {
    font-size: 1.55rem;
  }
}

/* Role/designation — shown only when available (CEO etc) */
.section-team__card-role {
  font-family: 'Schibsted Grotesk', 'Instrument Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.5);
  margin: -0.6rem 0 0;
  padding: 0 0.4rem;
}

/* --------------------------------------------------------------------------
   Entrance Animations — IntersectionObserver adds .is-visible
   Production-grade cubic-bezier stagger & cinematic image ease
   -------------------------------------------------------------------------- */

/* Initial hidden state */
.section-team__heading {
  opacity: 0;
  transform: translateY(2.8rem);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-team__controls {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.section-team__tab {
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-team__card {
  opacity: 0;
  transform: translateY(2.8rem);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger card name/role inside visible card for rich layer feel */
.section-team__card-name,
.section-team__card-role {
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state */
.section-team__heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-team__controls.is-visible {
  opacity: 1;
  transform: scale(1);
}

.section-team__tab.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-team__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-team__card.is-visible .section-team__card-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.section-team__card.is-visible .section-team__card-role {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.24s;
}

/* Stagger delays — tabs */
.section-team__tab:nth-child(1) { transition-delay: 0ms; }
.section-team__tab:nth-child(2) { transition-delay: 35ms; }
.section-team__tab:nth-child(3) { transition-delay: 70ms; }
.section-team__tab:nth-child(4) { transition-delay: 105ms; }
.section-team__tab:nth-child(5) { transition-delay: 140ms; }
.section-team__tab:nth-child(6) { transition-delay: 175ms; }
.section-team__tab:nth-child(7) { transition-delay: 210ms; }

/* Stagger delays — cards (first visible set) */
.section-team__card:nth-child(1) { transition-delay: 80ms; }
.section-team__card:nth-child(2) { transition-delay: 150ms; }
.section-team__card:nth-child(3) { transition-delay: 220ms; }
.section-team__card:nth-child(4) { transition-delay: 290ms; }

/* --------------------------------------------------------------------------
   Image scale-in mask animation — triggers when card enters viewport
   -------------------------------------------------------------------------- */
.section-team__card-img {
  transform-origin: center;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-team__card-img.scale-in {
  animation: cardImgScaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardImgScaleIn {
  from {
    opacity: 0;
    clip-path: inset(6% 6% 6% 6% round 1.6rem);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0% round 1.6rem);
  }
}