/*
 * rt-discover-people.css
 * ─────────────────────────────────────────────────────────────────────────────
 * "Discover People" full-page connections grid.
 * Scoped entirely to .rt-discover-people to prevent Elementor / theme bleed.
 *
 * Figma reference: node 79:2275  (frame "Connections ")
 * ─────────────────────────────────────────────────────────────────────────────
 * LAYOUT
 *   Wrapper bg:       #F7F7F8 (--rt-color-bg)
 *   Layout:           flex-row  gap 30px
 *
 * SIDEBAR  (Discover nav)
 *   Card:             267px wide  bg white  radius 10px  shadow card
 *   Title "Discover": SemiBold 14px  #111  padding 16px 14.34px  mb 12px
 *   Items:            same measurements as rt-network-glance
 *                     py-8px  px-14.34px  flex-row  gap 14px  align-center
 *   Indicator:        2px × 20px  pulled to card left edge  hidden unless active/hover
 *   Icon:             20×20px
 *   Label:            SemiBold 14px  color inherit
 *   Count:            SemiBold 14px  #558AF5  ml-auto
 *
 * TOOLBAR
 *   Container:        full-width  66px tall  bg white  radius 10px  shadow card
 *                     px 15px  flex-row  align-center  justify space-between
 *   Search:           292×36px  border 1px solid #707070  radius 5px
 *                     shadow input  pl 38px (icon inside)
 *   Sort:             "Sort by:" label + value button + chevron-down  14px SemiBold
 *
 * CARD  (min-height 345px)
 *   Container:        bg white  radius 10px  shadow card  position relative
 *   Padding:          15px top  20px left/right  20px bottom
 *   Avatar:           65×65px  radius 10px  object-fit cover
 *   Status btn:       absolute  30×30px  top 15px  right 20px
 *                     radius 50%  border 1.5px  flex center
 *     add:            border #558AF5  color #558AF5  bg white
 *     pending:        border #AAAAAA  color #888888   bg white
 *     connected:      bg #558AF5  border #558AF5  color white (checkmark white)
 *   Name:             SemiBold 14px  #111  + 5px gap  + 15×15 verified badge
 *   Meta:             Regular 12px  #585858  "title | company"
 *   Location:         13px  rgba(17,17,17,.8)  pin-icon 15×15 + text  gap 4px
 *   Badges (colored pills):
 *     open-to-network:  bg #E8F5EA  border #86EFAC  color #15803D  12px  py-6px px-10px
 *     contact-info:     bg #EEF2FF  border #93C5FD  color #1D4ED8  12px  py-6px px-10px
 *   Expertise label:    12px SemiBold  #585858
 *   Skill tags:         12px  bg white  border 1px solid #DBDBDC  color #585858
 *                       py-6px  px-10px  radius 5px  flex-wrap  gap 8px
 *   CTA buttons:        2 × 130×28px  border 1px solid #DBDBDC  radius 5px
 *                       bg white  color #111  SemiBold 14px  gap 15px
 *
 * PAGINATION
 *   50×50px square buttons  radius 10px  border 1px solid #DBDBDC
 *   gap 10px  SemiBold 14px
 *   active:   bg #111  color white  border-color #111
 *   next:     bg #558AF5  color white  border-color #558AF5
 *   disabled: opacity 0.4  cursor default
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * ELEMENTOR OVERRIDE NOTES
 * ────────────────────────
 * 1. box-sizing !important         — Elementor global reset can miss nested children.
 * 2. margin/padding !important     — Elementor adds margin-bottom to <p>, <ul>, <li>.
 * 3. font/color !important         — Elementor Kit injects h3, a, p colours at high specificity.
 * 4. width/height !important       — WordPress adds max-width:100% to all <img> tags.
 * 5. font-family !important        — Elementor Kit body-font overrides descendent text.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. Universal box-model + reset
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people,
.rt-discover-people * {
  box-sizing: border-box !important; /* note 1 */
}

.rt-discover-people ul,
.rt-discover-people ol,
.rt-discover-people li {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}

.rt-discover-people p,
.rt-discover-people p:last-child {
  margin:  0 !important; /* note 2 */
  padding: 0 !important;
}

.rt-discover-people h1,
.rt-discover-people h2,
.rt-discover-people h3,
.rt-discover-people h4 {
  margin: 0 !important;
}

.rt-discover-people a {
  text-decoration: none;
}

.rt-discover-people button {
  cursor:     pointer;
  background: none;
  border:     none;
  padding:    0;
  color:      inherit;
  appearance: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. Outer wrapper
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people {
  font-family:      var(--rt-font-primary, 'Inter', sans-serif) !important; /* note 5 */
  font-style:       normal;
  width:            100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. Two-column layout
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__layout {
  display:   flex;
  flex-direction: row;
  gap:       var(--rt-column-gap, 30px);
  align-items: flex-start;
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. Sidebar
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__sidebar {
  flex:       0 0 var(--rt-sidebar-width, 267px);
  width:      var(--rt-sidebar-width, 267px);
}

.rt-discover-people__sidebar-card {
  background-color: var(--rt-color-white, #ffffff);
  border-radius:    var(--rt-radius-md, 10px);
  box-shadow:       var(--rt-shadow-card, 0px 0px 20px 0px rgba(0, 0, 0, 0.05));
  padding:          16px 0 8px;
  overflow:         hidden;
}

/* ── Sidebar heading ─────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-heading {
  font-size:      var(--rt-text-md, 14px)               !important; /* note 3 */
  font-weight:    var(--rt-fw-semibold, 600)             !important;
  line-height:    var(--rt-lh-base, 20px)               !important;
  color:          var(--rt-color-text-primary, #111111)  !important;
  letter-spacing: normal                                 !important;
  text-transform: none                                   !important;
  font-family:    var(--rt-font-primary, 'Inter', sans-serif) !important;
  padding-inline: 14.34px                               !important;
  margin:         0 0 12px                              !important;
}

/* ── Sidebar list ─────────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-list {
  display:        flex;
  flex-direction: column;
}

/* ── Sidebar link (item row) ─────────────────────────────────────────────── */
.rt-discover-people__sidebar-link {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     8px 14.34px;
  min-height:  20px;
  position:    relative;
  color:       var(--rt-color-text-secondary, #585858) !important;
  text-decoration: none !important;
  transition:  background-color 100ms ease, color 100ms ease;
}

.rt-discover-people__sidebar-link:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color:            var(--rt-color-text-primary, #111111) !important;
  text-decoration:  none !important;
}

/* Show indicator on hover */
.rt-discover-people__sidebar-link:hover .rt-discover-people__sidebar-indicator {
  background-color: var(--rt-color-text-primary, #111111);
}

/* ── Active item ─────────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-item--active .rt-discover-people__sidebar-link {
  color: var(--rt-color-text-primary, #111111) !important;
}

.rt-discover-people__sidebar-item--active .rt-discover-people__sidebar-indicator {
  background-color: var(--rt-color-text-primary, #111111);
}

/* ── Left indicator bar ──────────────────────────────────────────────────── */
.rt-discover-people__sidebar-indicator {
  display:          block;
  flex-shrink:      0;
  width:            2px;
  height:           20px;
  border-radius:    1px;
  background-color: transparent;
  margin-left:      -14.34px; /* pull back to card's left edge */
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  color:           inherit !important;
}

.rt-discover-people__sidebar-icon svg {
  width:   20px !important;
  height:  20px !important;
  display: block;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-label {
  font-size:      var(--rt-text-md, 14px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-normal, normal);
  letter-spacing: var(--rt-ls-lg, -0.28px);
  color:          inherit !important;
  white-space:    nowrap;
  flex:           1;
}

/* ── Count ───────────────────────────────────────────────────────────────── */
.rt-discover-people__sidebar-count {
  font-size:      var(--rt-text-md, 14px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-normal, normal);
  letter-spacing: var(--rt-ls-lg, -0.28px);
  color:          var(--rt-color-brand, #558AF5) !important;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-left:    auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. Main content column
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__main {
  flex:       1;
  min-width:  0;
  display:    flex;
  flex-direction: column;
  gap:        20px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. Search + Sort toolbar
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__toolbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              20px;
  width:            100%;
  box-sizing:       border-box;
  background-color: var(--rt-color-white, #ffffff);
  border-radius:    var(--rt-radius-md, 10px);
  box-shadow:       var(--rt-shadow-card, 0px 0px 20px 0px rgba(0, 0, 0, 0.05));
  padding:          15px;
  height:           66px;
}

/* ── Search wrap ─────────────────────────────────────────────────────────── */
.rt-discover-people__search-wrap {
  position:  relative;
  flex:      1 1 0;
  min-width: 0;
}

.rt-discover-people__search-icon {
  position:        absolute;
  left:            10px;
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  color:           var(--rt-color-text-secondary, #585858);
  pointer-events:  none;
}

.rt-discover-people__search-icon svg {
  width:  20px !important;
  height: 20px !important;
  display: block;
}

.rt-discover-people__search-input {
  width:            100% !important;   /* note 4 */
  height:           36px !important;
  padding:          0 36px 0 38px !important;  /* right room for clear btn */
  box-sizing:       border-box !important;
  font-family:      var(--rt-font-primary, 'Inter', sans-serif) !important;
  font-size:        var(--rt-text-lg, 15px);
  font-weight:      var(--rt-fw-normal, 400);
  color:            var(--rt-color-text-primary, #111111) !important;
  background-color: var(--rt-color-white, #ffffff) !important;
  border:           1px solid var(--rt-color-border, #707070) !important;
  border-radius:    var(--rt-radius-sm, 5px) !important;
  box-shadow:       var(--rt-shadow-input, 0px 1px 2px 0px rgba(10, 13, 18, 0.05));
  outline:          none;
  -webkit-appearance: none;
  appearance:       none;
}

.rt-discover-people__search-clear {
  position:        absolute;
  right:           8px;
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   50%;
  color:           var(--rt-color-text-secondary, #585858);
  cursor:          pointer;
  transition:      color 0.15s, background 0.15s;
}

.rt-discover-people__search-clear:hover {
  color:      var(--rt-color-text-primary, #111);
  background: rgba(0, 0, 0, 0.06);
}

.rt-discover-people__search-clear[hidden] {
  display: none !important;
}

.rt-discover-people__search-input::-webkit-search-cancel-button,
.rt-discover-people__search-input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance:         none !important;
}

.rt-discover-people__search-input::placeholder {
  color:   var(--rt-color-text-secondary, #585858);
  opacity: 1;
}

.rt-discover-people__search-input:focus {
  border-color: var(--rt-color-brand, #558AF5) !important;
  box-shadow:   0 0 0 3px rgba(85, 138, 245, 0.15);
}

/* ── Sort wrap ───────────────────────────────────────────────────────────── */
.rt-discover-people__sort-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

.rt-discover-people__sort-dropdown {
  position: relative;
}

/* Chevron rotates when open */
.rt-discover-people__sort-dropdown--open .rt-discover-people__sort-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.rt-discover-people .rt-discover-people__sort-menu,
.rt-discover-people__sort-menu {
  position:         absolute !important;
  top:              calc(100% + 8px) !important;
  right:            0 !important;
  min-width:        190px !important;
  margin:           0 !important;
  padding:          6px !important;
  list-style:       none !important;
  background-color: var(--rt-color-white, #ffffff) !important;
  border:           1px solid var(--rt-color-divider, #DBDBDC) !important;
  border-radius:    var(--rt-radius-md, 10px) !important;
  box-shadow:       0 4px 20px rgba(0,0,0,0.12) !important;
  z-index:          9999 !important;
}

.rt-discover-people__sort-option {
  padding:        10px 14px !important;
  font-size:      var(--rt-text-md, 14px) !important;
  font-weight:    var(--rt-fw-normal, 400) !important;
  line-height:    var(--rt-lh-base, 20px) !important;
  color:          var(--rt-color-text-primary, #111111) !important;
  cursor:         pointer;
  white-space:    nowrap;
  border-radius:  var(--rt-radius-sm, 5px) !important;
  transition:     background-color 120ms ease, color 120ms ease;
}

.rt-discover-people__sort-option:hover {
  background-color: #f0f4ff !important;
  color:            var(--rt-color-brand, #558AF5) !important;
}

.rt-discover-people__sort-option--active {
  font-weight:      var(--rt-fw-semibold, 600) !important;
  color:            var(--rt-color-brand, #558AF5) !important;
  background-color: #f0f4ff !important;
}

.rt-discover-people__sort-label {
  font-size:      var(--rt-text-md, 14px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-base, 20px);
  letter-spacing: var(--rt-ls-lg, -0.28px);
  color:          var(--rt-color-text-primary, #111111) !important;
  white-space:    nowrap;
}

.rt-discover-people__sort-btn {
  display:        flex;
  align-items:    center;
  gap:            4px;
  cursor:         pointer;
  background:     none;
  border:         none;
  padding:        0;
  font-family:    var(--rt-font-primary, 'Inter', sans-serif) !important;
}

.rt-discover-people__sort-value {
  font-size:      var(--rt-text-md, 14px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-base, 20px);
  letter-spacing: var(--rt-ls-lg, -0.28px);
  color:          var(--rt-color-text-primary, #111111) !important;
  white-space:    nowrap;
  transition:     color 150ms ease;
}

.rt-discover-people__sort-chevron {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  color:           var(--rt-color-text-primary, #111111);
  transition:      color 150ms ease;
}

.rt-discover-people__sort-btn:hover .rt-discover-people__sort-value {
  color: var(--rt-color-brand, #558AF5) !important;
}

.rt-discover-people__sort-btn:hover .rt-discover-people__sort-chevron {
  color: var(--rt-color-brand, #558AF5);
}

.rt-discover-people__sort-chevron svg {
  width:  20px !important;
  height: 20px !important;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. Person-cards grid
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  align-items:           start;
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. Individual person card
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__card {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  background-color: var(--rt-color-white, #ffffff);
  border-radius:    var(--rt-radius-md, 10px);
  box-shadow:       var(--rt-shadow-card, 0px 0px 20px 0px rgba(0, 0, 0, 0.05));
  padding:          15px 20px 20px;
  min-height:       345px;
}

/* ── Connection status button ────────────────────────────────────────────── */
.rt-discover-people__status-btn {
  position:         absolute !important;
  top:              15px;
  right:            20px;
  width:            30px !important;
  height:           30px !important;
  border-radius:    50% !important;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  cursor:           pointer;
  transition:       background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rt-discover-people__status-btn svg {
  width:  20px !important;
  height: 20px !important;
  display: block;
  flex-shrink: 0;
}

/* Add state — branded blue circle outline */
.rt-discover-people__status-btn--add {
  background-color: var(--rt-color-white, #ffffff) !important;
  border:           1.5px solid var(--rt-color-brand, #558AF5) !important;
  color:            var(--rt-color-brand, #558AF5) !important;
}

.rt-discover-people__status-btn--add:hover {
  background-color: var(--rt-color-brand, #558AF5) !important;
  color:            var(--rt-color-white, #ffffff) !important;
}

/* Pending state — blue circle outline with spinning clock */
.rt-discover-people__status-btn--pending {
  background-color: transparent !important;
  background:       transparent !important;
  border:           1.5px solid var(--rt-color-brand, #558AF5) !important;
  color:            var(--rt-color-brand, #558AF5) !important;
}

.rt-discover-people__status-btn--pending:hover {
  background-color: #eef3ff !important;
}



/* Connected state — solid blue filled circle with white checkmark */
.rt-discover-people__status-btn--connected {
  background-color: var(--rt-color-brand, #558AF5) !important;
  border:           1.5px solid var(--rt-color-brand, #558AF5) !important;
  color:            var(--rt-color-white, #ffffff) !important;
}

.rt-discover-people__status-btn--connected:hover {
  background-color: #3a72e8 !important;
  border-color:     #3a72e8 !important;
}

/* Icon visibility: hide all, show only the one matching current state */
[data-rt-status-icon] {
  display: none;
}

.rt-discover-people__status-btn--add [data-rt-status-icon="add"],
.rt-discover-people__status-btn--pending [data-rt-status-icon="pending"],
.rt-discover-people__status-btn--connected [data-rt-status-icon="connected"] {
  display:     flex;
  align-items: center;
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.rt-discover-people__avatar {
  width:         65px !important; /* note 4 */
  height:        65px !important;
  border-radius: 50% !important;
  object-fit:    cover;
  display:       block;
  flex-shrink:   0;
  margin-bottom: 10px;
}

/* ── Name link (now contains both text and verified badge) ──────────────── */
.rt-discover-people__name {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  margin-bottom:  5px;
  max-width:      100%;
  text-decoration: none !important;
  color:          var(--rt-color-text-primary, #111111) !important;
}

.rt-discover-people__name:hover {
  text-decoration: none !important;
  color:           var(--rt-color-brand, #558AF5) !important;
}

.rt-discover-people__name:hover .rt-discover-people__name-text {
  text-decoration: underline;
}

.rt-discover-people__name-text {
  font-size:      var(--rt-text-md, 14px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-normal, normal);
  letter-spacing: var(--rt-ls-lg, -0.28px);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  min-width:      0;
}

/* ── Verified badge ──────────────────────────────────────────────────────── */
.rt-discover-people__verified {
  display:    inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.rt-discover-people__verified svg {
  width:   15px !important;
  height:  15px !important;
  display: block;
}

/* ── Meta: title | company ───────────────────────────────────────────────── */
.rt-discover-people__meta {
  font-size:      var(--rt-text-sm, 12px) !important;
  font-weight:    var(--rt-fw-normal, 400) !important;
  line-height:    var(--rt-lh-tight, 16px) !important;
  letter-spacing: var(--rt-ls-md, -0.24px) !important;
  color:          var(--rt-color-text-secondary, #585858) !important;
  margin-bottom:  5px !important;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.rt-discover-people__role {
  font-weight: var(--rt-fw-medium, 500);
}

.rt-discover-people__meta-pipe {
  color: var(--rt-color-text-secondary, #585858);
}

.rt-discover-people__company {
  font-weight: var(--rt-fw-normal, 400);
}

/* ── Location ────────────────────────────────────────────────────────────── */
.rt-discover-people__location {
  display:       flex;
  align-items:   center;
  gap:           4px;
  margin-bottom: 10px;
}

.rt-discover-people__location-icon {
  display:    inline-flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--rt-color-text-dim, rgba(17, 17, 17, 0.80));
}

.rt-discover-people__location-icon svg {
  width:   15px !important;
  height:  15px !important;
  display: block;
}

.rt-discover-people__location-text {
  font-size:      var(--rt-text-base, 13px);
  font-weight:    var(--rt-fw-normal, 400);
  line-height:    var(--rt-lh-base, 20px);
  letter-spacing: var(--rt-ls-md, -0.24px);
  color:          var(--rt-color-text-dim, rgba(17, 17, 17, 0.80)) !important;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.rt-discover-people__badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 10px;
}

.rt-discover-people__badge {
  display:        inline-flex;
  align-items:    center;
  height:         24px;
  padding:        0 10px !important;
  font-size:      var(--rt-text-sm, 12px);
  font-weight:    var(--rt-fw-medium, 500);
  line-height:    1;
  border-radius:  var(--rt-radius-sm, 5px);
  white-space:    nowrap;
  /* default (fallback) */
  background-color: rgba(0, 0, 0, 0.04);
  border:           none !important;
  color:            var(--rt-color-text-secondary, #585858);
}

/* "Open to Network" / legacy "Open to Work" — green */
.rt-discover-people__badge--open-to-network,
.rt-discover-people__badge--open-to-work {
  background-color: #E8F5EA !important;
  border:           none !important;
  color:            #15803D !important;
}

/* "Contact info" — brand blue */
.rt-discover-people__badge--contact-info {
  background-color: #EEF2FF !important;
  border:           none !important;
  color:            #1D4ED8 !important;
}

/* ── Contact Info tooltip ────────────────────────────────────────────────── */

/* Wrapper keeps the tooltip anchored to the button */
.rt-discover-people__contact-wrap {
  position:    relative;
  display:     inline-flex;
}

/* Reset <button> to look exactly like the badge span */
.rt-discover-people__contact-btn {
  cursor:      pointer;
  border:      none;
  font-family: inherit;
  font-size:   var(--rt-text-sm, 12px) !important; /* match badge font-size */
  font-weight: var(--rt-fw-medium, 500) !important;
  padding:     0;
  background:  none;
  line-height: inherit;
}

/* Tooltip card */
.rt-discover-people__contact-tooltip {
  position:       absolute;
  top:            calc(100% + 6px);
  left:           0;
  z-index:        200;
  background:     #fff;
  border:         1px solid #DBDBDC;
  border-radius:  8px;
  box-shadow:     0 4px 16px rgba(0, 0, 0, .12);
  padding:        12px 14px;
  padding-top:    8px;
  min-width:      260px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  white-space:    nowrap;
}

/* Hidden state - ensure tooltips are closed by default */
.rt-discover-people__contact-tooltip[hidden] {
  display: none !important;
}

/* Tooltip header */
.rt-discover-people__contact-header {
  font-size:      14px;
  font-weight:    600;
  color:          #111;
  margin-bottom:  2px;
  padding-right:  24px; /* space for close button */
}

/* Contact item wrapper */
.rt-discover-people__contact-item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

/* Contact label (Email:, Mobile Number:) */
.rt-discover-people__contact-label {
  font-size:      11px;
  font-weight:    600;
  color:          #585858;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Links inside tooltip */
.rt-discover-people__contact-link {
  display:         block;
  font-size:       13px;
  color:           #1D4ED8;
  text-decoration: none;
}
.rt-discover-people__contact-link:hover {
  text-decoration: underline;
}

/* Close button in tooltip */
.rt-discover-people__contact-close {
  position:    absolute;
  top:         8px;
  right:       8px;
  width:       20px;
  height:      20px;
  padding:     0;
  border:      none;
  background:  none;
  color:       #585858;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition:  background-color 0.15s ease;
}
.rt-discover-people__contact-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color:           #111;
}

/* ── Expertise section ───────────────────────────────────────────────────── */
.rt-discover-people__expertise {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  auto; /* pushes CTA to bottom */
  padding-bottom: 20px;
}

.rt-discover-people__expertise-label {
  font-size:      var(--rt-text-sm, 12px);
  font-weight:    var(--rt-fw-semibold, 600);
  line-height:    var(--rt-lh-normal, normal);
  letter-spacing: var(--rt-ls-md, -0.24px);
  color:          var(--rt-color-text-secondary, #585858) !important;
  display:        block;
}

/* ── Skill tags ──────────────────────────────────────────────────────────── */
.rt-discover-people__skills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.rt-discover-people__skill {
  display:          inline-flex;
  align-items:      center;
  height:           24px;
  padding:          0 10px !important;
  font-size:        var(--rt-text-sm, 12px);
  font-weight:      var(--rt-fw-normal, 400);
  line-height:      1;
  color:            var(--rt-color-text-secondary, #585858) !important;
  background-color: var(--rt-color-bg-subtle, #F5F5F5) !important;
  border:           none !important;
  border-radius:    var(--rt-radius-sm, 5px);
  white-space:      nowrap;
}

/* ── CTA action buttons ──────────────────────────────────────────────────── */
.rt-discover-people__actions {
  display: flex;
  gap:     15px;
  margin-top: 0;
}

.rt-discover-people__action-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  flex:             1;
  height:           28px;
  min-width:        0;
  padding:          0 8px !important;
  font-family:      var(--rt-font-primary, 'Inter', sans-serif) !important;
  font-size:        var(--rt-text-md, 14px);
  font-weight:      var(--rt-fw-semibold, 600);
  line-height:      var(--rt-lh-base, 20px);
  letter-spacing:   var(--rt-ls-lg, -0.28px);
  color:            var(--rt-color-text-primary, #111111) !important;
  background-color: var(--rt-color-white, #ffffff);
  border:           1px solid var(--rt-color-text-primary, #111111) !important;
  border-radius:    var(--rt-radius-sm, 5px);
  text-decoration:  none !important;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rt-discover-people__action-btn:hover {
  background-color: #f5f5f5 !important;
  border-color:     #AAAAAA !important;
  color:            var(--rt-color-text-primary, #111111) !important;
  text-decoration:  none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. Pagination
   ══════════════════════════════════════════════════════════════════════════════ */
.rt-discover-people__pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding-top:     10px;
}

.rt-discover-people__page-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            50px  !important;
  height:           50px  !important;
  font-family:      inherit !important;
  font-size:        18px !important;
  font-weight:      600 !important;
  line-height:      20px !important;
  color:            #585858 !important;
  background-color: transparent !important;
  border:           none !important;
  border-radius:    9999px !important;
  cursor:           pointer;
  transition:       background-color 150ms ease, color 150ms ease;
  flex-shrink:      0;
  padding:          0 !important;
}

.rt-discover-people__page-btn svg {
  width:   24px !important;
  height:  24px !important;
  display: block;
}

.rt-discover-people__page-btn:hover:not(:disabled):not(.rt-discover-people__page-btn--active) {
  background-color: #e8e8e9 !important;
}

/* Active (current) page */
.rt-discover-people__page-btn--active {
  background-color: var(--rt-color-text-primary, #111111) !important;
  color:            var(--rt-color-white, #ffffff) !important;
  border-color:     var(--rt-color-text-primary, #111111) !important;
  cursor:           default;
}

/* Next arrow */
.rt-discover-people__page-btn--next {
  background-color: transparent !important;
  color:            #585858 !important;
  border:           none !important;
}

.rt-discover-people__page-btn--next:hover:not(:disabled) {
  background-color: #e8e8e9 !important;
  color:            #111111 !important;
}

/* Dots */
.rt-discover-people__page-btn--dots {
  cursor:         default !important;
  font-size:      18px !important;
  font-weight:    600 !important;
  color:          #585858 !important;
  border:         none !important;
  background:     transparent !important;
  pointer-events: none !important;
}

/* Disabled */
.rt-discover-people__page-btn--disabled,
.rt-discover-people__page-btn:disabled {
  opacity:    0.35;
  cursor:     default;
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. Responsive breakpoints
   ══════════════════════════════════════════════════════════════════════════════ */

/* Prevent any child from bursting out of the page width */
.rt-discover-people,
.rt-discover-people__layout,
.rt-discover-people__main {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2-column card grid on medium screens */
@media (max-width: 1024px) {
  .rt-discover-people__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stack sidebar + main vertically on small screens */
@media (max-width: 768px) {
  .rt-discover-people__layout {
    flex-direction: column;
    gap: 16px;
  }

  .rt-discover-people__sidebar {
    flex:  0 0 auto;
    width: 100%;
  }

  .rt-discover-people__toolbar {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 15px;
  }

  .rt-discover-people__search-wrap {
    flex:      1 1 auto;
    min-width: 0;
    max-width: 100%;
    width:     100%;
  }

  .rt-discover-people__sort-wrap {
    flex-shrink: 0;
  }
}

/* 1-column card grid + further toolbar refinements on narrow screens */
@media (max-width: 560px) {
  .rt-discover-people__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rt-discover-people__toolbar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .rt-discover-people__search-wrap {
    width: 100%;
  }

  .rt-discover-people__sort-wrap {
    justify-content: flex-end;
  }

  /* Pagination: allow wrapping + shrink buttons so they never overflow */
  .rt-discover-people__pagination {
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
  }

  .rt-discover-people__page-btn {
    width:  38px !important;
    height: 38px !important;
  }

  .rt-discover-people__page-btn svg {
    width:  18px !important;
    height: 18px !important;
  }
}