/* ============================================================
   TEAM.CSS  — "The Minds Driving Innovation at Sodel"

   FIGMA MEASUREMENTS (section inner = 1035px wide):
   ┌─────────────────────────────────────────────────────────┐
   │  Text block    x=11.25  y=15   w=417.75  h=367.48      │
   │  Right panel   x=517.5  y=39   w=517.5                 │
   │  Top cards     x=14.25  y=15.07 (within right panel)   │
   │  Card size     w=228.75  h=357.11                       │
   │  Photo area    h=235.61                                  │
   │  Top gap (between 2 cards): 30.75px                     │
   │  Mayank stagger: 47.93px                                │
   │  Bottom row: gap=30px, pad=15px each side               │
   │  Sughosh stagger: 52.5px  |  Namit stagger: 50.4px     │
   └─────────────────────────────────────────────────────────┘

   GRID LAYOUT
   Col 1: 417.75px (text)
   Col 2: 1fr      (~99.75px, the gap between text & cards)
   Col 3: 517.5px  (right cards panel)

   Row 1: text (col 1) + two staggered cards (col 3)
   Row 2: four cards spanning all three columns
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.team {
  padding: 30px 0 75px;
  width: 100%;
  margin-top: var(--sp-4);
}

.team__canvas {
  max-width: 1035px;
  margin: 0 auto;
  /* CSS Grid mirrors Figma's absolute-position layout */
  display: grid;
  grid-template-columns: 417.75px 1fr 517.5px;
  grid-template-rows: auto auto;
}


/* ------------------------------------------------------------
   2. TEXT COLUMN  (grid col 1, row 1)
   Figma: x=11.25, y=15, w=417.75, h=367.48
   ------------------------------------------------------------ */
.team__text {
  grid-column: 1;
  grid-row: 1;
  padding-left: 11.25px;   /* Figma x=11.25 within 1035px inner */
  padding-top: 15px;        /* Figma y=15 */
  display: flex;
  flex-direction: column;
  gap: 18.75px;
  align-self: start;
}

.team__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #111111;
}

.team__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -0.05em;
  color: #111111;
  margin-top: 2px;
}

.team__desc {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 22.5px;
  color: #111111;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.team__cta {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.team__cta-label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 22.5px;
  color: #111111;
}

/* "View our team" gradient pill button
   Figma: w=115.73px h=37.49px, gradient 261.9deg #ff4664→#386bb7 */
.team__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 115.73px;
  height: 37.49px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(261.9deg, #ff4664 14.51%, #386bb7 95.96%);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 10.5px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--ease-default);
}

.team__btn:hover {
  opacity: 0.88;
}

.team__btn-icon {
  width: 6.5px;
  height: 9.75px;
  display: block;
  flex-shrink: 0;
  transform: scaleY(-1);
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------
   3. RIGHT CARDS PANEL  (grid col 3, row 1)
   Figma right panel: x=517.5, y=39, w=517.5
   Top cards row inside: x=14.25, y=15.07 (within right panel)
   → combined top offset = 39 + 15.07 = 54.07px
   ------------------------------------------------------------ */
.team__right-col {
  grid-column: 3;
  grid-row: 1;
  padding-top: 54px;      /* 39px (panel y) + 15.07px (cards y within panel) */
  padding-left: 14.25px;  /* Figma cards row x=14.25 within panel */
}

/* Two cards side-by-side
   Container: 488.25px = 228.75 + 30.75 gap + 228.75
   gap = 488.25 − (228.75 × 2) = 30.75px  */
.team__top-cards {
  display: flex;
  gap: 30.75px;
  align-items: flex-start;
}

/* Mayank: card background y=47.93 within its container */
.team-card--top-offset {
  margin-top: 47.93px;
}


/* ------------------------------------------------------------
   4. BOTTOM ROW  (grid cols 1–3, row 2)
   Figma: y=435.7px from section top (39+396.7)
   Cards: 228.75px × 4, gap=30px, pad=15px each side
   Sughosh stagger 52.5px, Namit stagger 50.4px
   ------------------------------------------------------------ */
.team__bottom-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 0 15px;
  margin-top: 15px;
}

.team__bottom-row .team-card {
  flex: 1;
}

/* Sughosh: y=52.5 within bottom row (vs Krupa/Prachi y=0) */
.team-card--sughosh-offset {
  margin-top: 52.5px;
}

/* Namit: y offset from right panel = 447.1 − 396.7 = 50.4px */
.team-card--namit-offset {
  margin-top: 50.4px;
}


/* ── Reset about.css rules that leak onto the homepage ──────────
   about.css defines bare .team-card rules (height:412px, position
   overrides, etc.) for the about-page team grid. Those rules also
   apply here because both stylesheets load on index.html. We
   reset the conflicting declarations inside the .team scope.
   ──────────────────────────────────────────────────────────────── */
.team .team-card {
  height: auto;          /* about.css: height:412px  */
}

.team .team-card__role {
  position: static;      /* about.css: position:absolute; top:347px */
  top: auto;
  left: auto;
  display: block;        /* about.css: display:flex  */
  font-size: 10.5px;     /* about.css: 12.1px        */
  line-height: 22.5px;   /* about.css: 26px          */
  white-space: normal;   /* about.css: nowrap         */
}


/* ------------------------------------------------------------
   5. TEAM CARD
   Figma: w=228.75px  h=357.11px  r=18.75px  border 0.75px #e0e0e0
   ------------------------------------------------------------ */
.team-card {
  width: 228.75px;
  background: #ffffff;
  border-radius: 18.75px;
  border: 0.75px solid #e0e0e0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* Bottom-row cards are flex:1 so override fixed width */
.team__bottom-row .team-card {
  width: auto;
}


/* ------------------------------------------------------------
   6. PHOTO AREA
   Figma: h=235.61px, overflow clip, border-radius only on top
   ------------------------------------------------------------ */
.team-card__photo {
  position: relative;
  height: 235.61px;
  overflow: hidden;
  /* overflow:clip stops CSS transforms from painting outside this box */
  clip-path: inset(0 0 0 0 round 18.75px 18.75px 0 0);
  background: #edeff0;
  border-radius: 18.75px 18.75px 0 0;
}

.team-card__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  max-width: none;
}


/* ------------------------------------------------------------
   7. FIRST-NAME WATERMARK
   Figma: Sora SemiBold 60px white, letter-spacing -3px,
          rotated -90deg, in a 36px-wide right strip.
          line-height = 36px (matches strip width exactly).
   ------------------------------------------------------------ */
.team-card__name-tag {
  position: absolute;
  right: 0;
  bottom: 0;
  /* height is set per-card via inline style (= natural text width at 60px Sora SemiBold,
     -3px letter-spacing) so the container's bottom edge pins to the photo bottom — Figma exact */
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* clip-path clips painted CSS-transform overflow that overflow:hidden misses */
  clip-path: inset(0);
  pointer-events: none;
}

.team-card__name-tag span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 36px;
  letter-spacing: -3px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: center center;
}


/* ------------------------------------------------------------
   8. SOCIAL TRIGGER BUTTON
   Figma: position within card = bottom 110.25px from card bottom
          → top from card = 357.11 − 110.25 − 43.5 = 203.36px
          → inside photo area (235.61px) → top = 192px from card
          left=33.69px, w=49.5px, h=43.5px
          white pill (rounded-top) + dark circle + curved "wings"
   ------------------------------------------------------------ */
.team-card__social-trigger {
  position: absolute;
  /* Figma: card_h(357.11) − bottom_offset(110.25) − trigger_h(43.5) = 203.36px
     This puts the trigger bottom 11.25px into the white content area so the
     wing shadows (15px tall) appear only at the very BASE of the photo,
     not mid-circle like the incorrect top:192px value did. */
  top: 203.36px;
  left: 33.69px;
  width: 49.5px;
  height: 43.5px;
  background: #ffffff;
  border-radius: 37.5px 37.5px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  z-index: 2;
}

/* Left curved wing
   Figma: right=48.75px within 49.5px trigger → right edge at 0.75px from
   trigger-left, left edge at -14.25px (extends 14.25px left of trigger).
   box-shadow drops 15px down forming a white quarter-circle cutout. */
.team-card__social-trigger::before {
  content: '';
  position: absolute;
  bottom: 11.25px;
  right: 48.75px;              /* Figma exact value */
  width: 15px;
  height: 30px;
  background: transparent;
  border-bottom-right-radius: 15px;
  box-shadow: 0 15px 0 0 #ffffff;
  pointer-events: none;
}

/* Right curved wing
   Figma: left=48.75px → left edge at 48.75px, right edge at 63.75px
   (extends 14.25px right of the 49.5px trigger). */
.team-card__social-trigger::after {
  content: '';
  position: absolute;
  bottom: 11.25px;
  left: 48.75px;               /* Figma exact value */
  width: 15px;
  height: 30px;
  background: transparent;
  border-bottom-left-radius: 15px;
  box-shadow: 0 15px 0 0 #ffffff;
  pointer-events: none;
}

.team-card__social-circle {
  width: 37.5px;
  height: 37.5px;
  background: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--ease-default);
}

.team-card__social-circle:hover {
  background: #111111;
}

.team-card__social-icon {
  width: 6.5px;
  height: 9.75px;
  display: block;
  transform: scaleY(-1);
  filter: brightness(0) invert(1);
}


/* ------------------------------------------------------------
   9. CARD CONTENT AREA
   Figma: name at y=273.06 within card → y=37.45 from content top
          role at y=300.86 → gap between name & role = 5.3px
          content bottom = 357.11 − 300.86 − 22.5 = 33.75px
   ------------------------------------------------------------ */
.team-card__content {
  padding: 37px 27px 34px;
}

.team-card__member-name {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.45px;
  color: #111111;
  margin-bottom: 5px;
}

.team-card__role {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 10.5px;
  line-height: 22.5px;
  color: #9b9b9b;
}


/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */

/* Constrain to viewport on narrower desktops */
@media (max-width: 1095px) {
  .team__canvas {
    grid-template-columns: 1fr 0 minmax(0, 517.5px);
    padding: 0 24px;
  }

  .team__text {
    padding-left: 0;
  }
}

/* Tablet — collapse to single column */
@media (max-width: 1024px) {
  .team__canvas {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
  }

  .team__text {
    padding: 0;
    width: 100%;
  }

  .team__right-col {
    padding: 0;
    width: 100%;
  }

  .team__top-cards {
    width: 100%;
    justify-content: flex-start;
  }

  .team__top-cards .team-card {
    flex: 1;
    width: auto;
  }

  .team__bottom-row {
    width: 100%;
    padding: 0;
    margin-top: 0;
  }

  .team__bottom-row .team-card {
    flex: 1;
    width: auto;
  }

  .team__title {
    font-size: 36px;
    line-height: 44px;
  }
}

/* Mobile — 2 columns */
@media (max-width: 767px) {
  .team {
    padding: 48px 0;
  }

  .team__canvas {
    padding: 0 16px;
    gap: 16px;
  }

  .team__top-cards,
  .team__bottom-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .team__top-cards .team-card,
  .team__bottom-row .team-card {
    flex: 0 0 calc(50% - 8px);
  }

  /* remove stagger on small screens */
  .team-card--top-offset,
  .team-card--sughosh-offset,
  .team-card--namit-offset {
    margin-top: 0;
  }

  .team__title {
    font-size: 30px;
    line-height: 38px;
  }
}

/* Very small mobile — single column */
@media (max-width: 480px) {
  .team__top-cards .team-card,
  .team__bottom-row .team-card {
    flex: 0 0 100%;
    width: 100%;
  }
}