/* /var/www/relyn/static_src/css/team.css */

.team-section {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ✅ No background fill (ONLY blur layer should be visible) */
  background: transparent;

  /* ✅ Section height control (removes extra bottom space) */
  height: 869px;

  /* ✅ Allow blur to extend without getting clipped */
  overflow: visible;
}

.team-shell {
  position: relative;
  width: 100%;
  max-width: 1920px;

  /* ✅ EXACT HEIGHT */
  height: 869px;

  /* ✅ Allow blur to extend without getting clipped */
  overflow: visible;

  --blur-top: 56%;
  --blur-h: 1100px;

  /* side padding */
  --team-side-pad: 152px;
}

.team-blur-layer {
  position: absolute;
  left: 50%;
  top: var(--blur-top);
  transform: translate(-50%, -50%);
  width: 1920px;
  max-width: 100%;

  /* ✅ slightly larger so it never feels cut */
  height: calc(var(--blur-h) + 220px);

  background: radial-gradient(
    circle at 50% 50%,
    rgba(99, 62, 178, 0.34) 0%,
    rgba(99, 62, 178, 0.20) 35%,
    rgba(0, 0, 0, 0.00) 72%
  );
  filter: blur(34px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.team-header {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-top: 77px;
}

.team-kicker {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.team-title {
  margin: 22px 0 0;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.18;
  color: #FFFFFF;
  padding: 0 24px;
}

/* ✅ Wrap with exact spacing so nothing spills and no extra bottom space */
.team-slider-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 80px; /* ✅ reduced to fit height 869 perfectly */
  padding-left: var(--team-side-pad);
  padding-right: var(--team-side-pad);
  box-sizing: border-box;
}

/* Slider */
.team-slider {
  width: 100%;
  overflow: hidden;
}

/* Track */
.team-track {
  display: flex;
  gap: 30px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.55s ease;
}

/* CARD */
.team-card {
  flex: 0 0 330px;
  width: 330px;
  height: 400px;
  border-radius: 20px;
  border: 3px solid #633EB2;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
}

.has-js .team-card {
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.85s ease, opacity 0.85s ease;
}

.has-js .team-card.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* INNER */
.team-card-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

/* IMAGE */
.team-img-wrap {
  width: 100%;
  height: 265px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-img {
  width: 294px;
  height: 265px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* NAME + ROLE */
.team-name {
  margin: 40px 0 0;
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
}

.team-role {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  opacity: 0.95;
}

/* ✅ Premium nav buttons (CENTER OF CARDS) - CIRCULAR OUTLINE, NO FILL */
.team-nav {
  position: absolute;
  top: calc(80px + 200px); /* middle of 400px cards area */
  transform: translateY(-50%);
  z-index: 5;

  width: 72px;
  height: 72px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
  cursor: pointer;

  /* ✅ no fill/background */
  background: transparent;
  border: 0;
  padding: 0;

  transition:
    transform 0.18s ease-out,
    filter 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* ✅ gradient ring border (still transparent inside) */
.team-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(166, 151, 224, 0.85) 0%,
    rgba(99, 62, 178, 0.95) 45%,
    rgba(60, 67, 132, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.95;
}

/* ✅ soft outer glow (no fill behind icon) */
.team-nav::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 62, 178, 0.28), rgba(0, 0, 0, 0.00) 62%);
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
}

.team-nav-glow {
  /* ✅ keep markup but remove any “button fill” look */
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.team-nav-ico {
  position: relative;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
}

.team-nav:hover {
  transform: translateY(-50%) translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}

.team-nav:active {
  transform: translateY(-50%) scale(0.99);
}

.team-nav:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(166, 151, 224, 0.22),
    0 26px 70px rgba(0, 0, 0, 0.55);
}

.team-nav-left {
  left: calc(var(--team-side-pad) - 96px);
}

.team-nav-right {
  right: calc(var(--team-side-pad) - 96px);
}

/* ✅ Portrait-only nav row UNDER the slider */
.team-nav-row {
  display: none;
  width: 100%;
  margin-top: 18px;
  justify-content: center;
  gap: 14px;
}

.team-nav-row-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
  cursor: pointer;

  /* ✅ no fill/background */
  background: transparent;
  border: 0;
  padding: 0;

  transition:
    transform 0.18s ease-out,
    filter 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.team-nav-row-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(166, 151, 224, 0.85) 0%,
    rgba(99, 62, 178, 0.95) 45%,
    rgba(60, 67, 132, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.95;
}

.team-nav-row-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 62, 178, 0.24), rgba(0, 0, 0, 0.00) 62%);
  filter: blur(10px);
  opacity: 0.52;
  pointer-events: none;
}

.team-nav-row-btn .team-nav-glow {
  border-radius: 999px;
  background: transparent;
  opacity: 0;
}

.team-nav-row-btn .team-nav-ico {
  font-size: 30px;
}

.team-nav-row-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.50);
}

.team-nav-row-btn:active {
  transform: scale(0.99);
}

/* Responsive */
@media (max-width: 1500px) {
  .team-shell {
    --team-side-pad: 72px;
  }

  .team-nav-left {
    left: 16px;
  }

  .team-nav-right {
    right: 16px;
  }

  /* ✅ reduce subtitle/title for laptop */
  .team-kicker {
    font-size: 18px;
    letter-spacing: 0.16em;
  }

  .team-title {
    font-size: 42px;
  }

  /* ✅ make the circles smaller so they don’t touch the boxes */
  .team-nav {
    width: 60px;
    height: 60px;
  }

  .team-nav-ico {
    font-size: 30px;
  }

  .team-nav::after {
    inset: -10px;
  }
}

@media (max-width: 1024px) {
  /* ✅ reduce title/subtitle for tablet (landscape) */
  .team-kicker {
    font-size: 17px;
    letter-spacing: 0.15em;
  }

  .team-title {
    font-size: 36px;
  }

  .team-shell {
    --team-side-pad: 48px;
  }

  /* ✅ make circles smaller for tablet landscape too */
  .team-nav {
    width: 56px;
    height: 56px;
    border-radius: 999px;
  }

  .team-nav::before {
    border-radius: 999px;
    padding: 2px;
  }

  .team-nav::after {
    border-radius: 999px;
    inset: -9px;
  }

  .team-nav-ico {
    font-size: 28px;
  }

  .team-nav-left {
    left: 12px;
  }

  .team-nav-right {
    right: 12px;
  }
}

/* ✅ Mobile + Tablet portrait ONLY */
@media (max-width: 768px) and (orientation: portrait) {
  /* ✅ reduce title/subtitle for mobile portrait */
  .team-kicker {
    font-size: 16px;
    letter-spacing: 0.14em;
  }

  .team-title {
    font-size: 28px;
  }

  .team-shell {
    --team-side-pad: 18px;
  }

  .team-slider-wrap {
    margin-top: 60px;
  }

  /* ✅ hide side buttons ONLY in portrait */
  .team-nav {
    display: none;
  }

  /* ✅ show buttons under the box ONLY in portrait */
  .team-nav-row {
    display: flex;
  }
}

@media (max-width: 480px) {
  .team-title {
    font-size: 26px;
  }

  .team-nav-row-btn {
    width: 60px;
    height: 60px;
    border-radius: 999px;
  }

  .team-nav-row-btn .team-nav-ico {
    font-size: 28px;
  }
}