/**
 * Members Page Styles
 *
 * @package WPFolks
 * @since 1.0.0
 */

/* --- Members Page Hero --- */
.members-hero {
  background: var(--surface-dark, #101517);
  color: #ffffff;
  padding: 56px 0;
  text-align: center;
}

.members-hero h1 {
  font-size: 40px;
  margin-bottom: 8px;
}

.members-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
}

.members-hero .stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.members-hero .stat-item {
  text-align: center;
}

.members-hero .stat-number {
  font-family: var(--font-heading, 'Fraunces'), serif;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

.members-hero .stat-label {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 480px) {
  .members-hero .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .members-hero .stat-number {
    font-size: 22px;
  }
}

/* --- Spotlight Member (legacy — can remove) --- */
.member-card--spotlight,
.member-spotlight-badge {
  display: none;
}

/* --- Filter Sidebar --- */
.filter-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.filter-sidebar h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.filter-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-group-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.filter-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-off-white);
  color: var(--color-text);
  transition: border-color 0.2s;
}

.filter-search:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,115,170,0.1);
  background: var(--color-white);
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filter-toggle-label {
  font-size: 14px;
  color: var(--color-text);
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-border);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--color-white);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.filter-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.filter-radio input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.filter-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
}

.clear-filters {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 16px;
  cursor: pointer;
}

.clear-filters:hover {
  color: var(--color-primary-hover);
}

/* --- Member Grid --- */
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.member-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.member-card .avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.member-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-text);
}

/* Verified + Expert badges + tooltip live in assets/css/main.css so
 * they render globally (folks card, speaker card, profile hero, any
 * future feed/comment surface). Don't duplicate the rules here. */

/* Avatar halo ring — mirrors the speaker-card treatment but tuned
 * for the lighter /folks/ card background (lower-opacity brand blue
 * instead of the purple-neon used against the dark stage). Ambient
 * breath at rest, intensifies on hover. Motion gated. */
.member-card__avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.member-card__avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.18);
  transition: box-shadow 0.3s ease;
  pointer-events: none;
}
.member-card:hover .member-card__avatar-wrap::before {
  box-shadow: 0 0 0 3px rgba(33, 69, 230, 0.4), 0 0 22px rgba(33, 69, 230, 0.22);
}
@media (prefers-reduced-motion: no-preference) {
  .member-card__avatar-wrap::before {
    animation: wpfolks-member-halo 3.5s ease-in-out infinite;
  }
  @keyframes wpfolks-member-halo {
    0%, 100% { box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.18); }
    50%      { box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.32); }
  }
}

.member-username {
  font-size: 13px;
  color: var(--color-primary);
  margin-top: -8px;
}

.member-location {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.member-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.member-contributions {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.member-card .btn {
  margin-top: auto;
  width: 100%;
}

/* --- Spotlight Member --- */
.member-card--spotlight {
  background: linear-gradient(135deg, #f5f7fe 0%, #eef1fd 100%);
  border-color: var(--brand-primary, #2145e6);
  box-shadow: 0 0 0 1px var(--brand-primary, #2145e6), 0 4px 16px rgba(33, 69, 230, 0.1);
  position: relative;
}

.member-card--spotlight:hover {
  box-shadow: 0 0 0 1px var(--brand-primary, #2145e6), 0 8px 24px rgba(33, 69, 230, 0.15);
}

.member-spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
  margin-bottom: 8px;
}

/* --- Map View --- */
.map-view {
  margin-top: 16px;
}

.map-radius-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.map-radius-filters .map-filter-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface-light-2, #f0f0f1);
  color: var(--text-secondary, #50575e);
  border: 1px solid var(--border-default, #dcdcde);
  cursor: pointer;
  transition: all 0.15s;
}

.map-radius-filters .map-filter-pill:hover {
  background: var(--brand-primary-light, #eef1fd);
  color: var(--brand-primary, #2145e6);
  border-color: var(--brand-primary, #2145e6);
}

.map-radius-filters .map-filter-pill.active {
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
  border-color: var(--brand-primary, #2145e6);
}

#wpfolksMap {
  height: 650px;
  width: 100%;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-default, #dcdcde);
  z-index: 1;
}

/* In map view, hide the result count + sort widgets since they don't
   apply to a map (every consenting member is shown; no pagination, no
   list to sort). Keep .view-tabs visible so the user can switch back
   to Grid. justify-content flips to flex-end so the now-only child
   (.view-tabs) sits flush right instead of being centered. */
.results-bar--map .results-count,
.results-bar--map .members-sort,
.results-bar--map .members-sort-mobile {
  display: none;
}
.results-bar--map {
  justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────────────
 * Map view — full-width layout with floating filter overlay.
 *
 * When `?view=map` is active the layout drops its sidebar column and
 * the map fills the row. The .page-sidebar is reused as-is — same
 * filter form, same DOM — but we re-position it as a compact floating
 * card top-left of the map. The existing JS toggle (.page-sidebar__toggle)
 * collapses the filter list by default; clicking it expands the form
 * inline within the floating card.
 *
 * `position: absolute` over the map keeps the card pinned even as the
 * user pans/zooms; `max-height` + `overflow-y: auto` lets the form
 * scroll inside the card on long filter lists without pushing the
 * map down.
 * ───────────────────────────────────────────────────────────────── */
.page-layout--map-overlay {
  position: relative;
  display: block;
  padding: 0;
}
.page-layout--map-overlay > div {
  width: 100%;
}
/* Sidebar entirely hidden in map view — the map experience is
   "look at the community", filters would clutter it. If filtering
   the map becomes a real ask later, the cheap re-add is a small
   "Filters" icon button → modal (same form, different shell). */
.page-layout--map-overlay .page-sidebar {
  display: none;
}
/* Force the existing collapsible behaviour to apply at every viewport
   when in map view (it's normally mobile-only via the @media at 768px). */
.page-layout--map-overlay .page-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 0;
  background: var(--surface-light-2, #f0f0f1);
  border: 1px solid var(--border-default, #dcdcde);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.page-layout--map-overlay .page-sidebar__toggle-chevron {
  transition: transform 150ms ease;
  font-size: 16px;
}
.page-layout--map-overlay .page-sidebar.is-expanded .page-sidebar__toggle-chevron {
  transform: rotate(180deg);
}
.page-layout--map-overlay .page-sidebar > *:not(.page-sidebar__toggle) {
  display: none;
}
.page-layout--map-overlay .page-sidebar.is-expanded > * {
  display: block;
}
.page-layout--map-overlay .page-sidebar.is-expanded > .page-sidebar__toggle {
  display: flex;
}
.page-layout--map-overlay .page-sidebar.is-expanded > form {
  padding: 14px 16px 4px;
}

/* Map view goes edge-to-edge. The .map-view wrapper breaks out of
   the parent .container's 1200px max-width using the standard
   "100vw breakout" trick: pull margins left/right to the viewport
   edges. Pairs with the height bump so the map reads as a hero
   section, not a content card. */
.page-layout--map-overlay .map-view {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.page-layout--map-overlay #wpfolksMap {
  height: calc(100vh - 240px);
  min-height: 520px;
  width: 100%;
  /* Full-bleed look — drop the rounded corners + border so the map
     sits flush against the viewport edges like a hero. */
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* Phones: stay full-bleed but drop a bit of height. */
@media (max-width: 600px) {
  .page-layout--map-overlay #wpfolksMap {
    height: 60vh;
    min-height: 420px;
  }
}

#mapMemberCount {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-secondary, #50575e);
}

/* --- Results Bar --- */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-top: 24px;
}

.results-count {
  font-size: 14px;
  color: var(--text-secondary, #50575e);
}

.results-count strong {
  color: var(--text-primary, #1e1e1e);
}

.results-bar-right {
  display: flex;
  align-items: start;
  gap: 12px;
}

@media (max-width: 768px) {
  .results-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .results-bar-right {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* --- Sort & View — unified button group style --- */
.members-sort,
.view-tabs,
.resources-sort,
.plugins-sort {
  display: flex;
  gap: 0;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--border-default, #dcdcde);
  height: 34px;
}

.sort-btn,
.view-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  background: var(--surface-white, #ffffff);
  color: var(--text-secondary, #50575e);
  border: none;
  border-right: 1px solid var(--border-default, #dcdcde);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sort-btn:last-child,
.view-tab:last-child {
  border-right: none;
}

.sort-btn:hover,
.view-tab:hover {
  background: var(--surface-light-2, #f0f0f1);
  color: var(--text-primary, #1e1e1e);
}

.sort-btn.active,
.view-tab.active {
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
}

/* Mobile sort dropdown — hidden on desktop, shown below 768px. The
   button row above uses a non-scrolling layout up there because all
   four options fit; on phones we swap in a native <select> so users
   get the OS picker instead of a cramped/scrolled button strip. */
.members-sort-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Desktop button row hides on mobile — replaced by .members-sort-mobile. */
  .members-sort {
    display: none;
  }
  /* The OTHER sort containers (resources/plugins/deals don't yet
     have a mobile dropdown variant, so they keep the
     horizontal-scroll fallback we used to apply to .members-sort.
     Swap them in later if needed. */
  .view-tabs,
  .resources-sort,
  .plugins-sort {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .view-tabs::-webkit-scrollbar,
  .resources-sort::-webkit-scrollbar,
  .plugins-sort::-webkit-scrollbar {
    display: none;
  }
  .sort-btn,
  .view-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Show the <details> dropdown. */
  .members-sort-mobile {
    position: relative;
    display: block;
    width: 100%;
  }
  /* Trigger pill — looks like a button. We strip the default <summary>
     disclosure marker so we can render our own caret. */
  .members-sort-mobile__trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 14px;
    height: 38px;
    background: var(--surface-white, #ffffff);
    border: 1px solid var(--border-default, #dcdcde);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e1e1e);
    cursor: pointer;
    user-select: none;
  }
  .members-sort-mobile__trigger::-webkit-details-marker {
    display: none;
  }
  .members-sort-mobile__trigger:hover {
    border-color: color-mix(in srgb, var(--brand-primary, #2145e6) 35%, var(--border-default, #dcdcde));
  }
  .members-sort-mobile[open] .members-sort-mobile__trigger {
    border-color: var(--brand-primary, #2145e6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #2145e6) 18%, transparent);
  }
  .members-sort-mobile__label {
    color: var(--text-secondary, #50575e);
    flex-shrink: 0;
  }
  .members-sort-mobile__current {
    flex: 1;
    text-align: left;
  }
  .members-sort-mobile__caret {
    color: var(--text-secondary, #50575e);
    flex-shrink: 0;
    transition: transform 0.15s;
  }
  .members-sort-mobile[open] .members-sort-mobile__caret {
    transform: rotate( 180deg );
  }

  /* Popover — anchored under the trigger. Floats above adjacent
     content with z-index, full-width to match the trigger. */
  .members-sort-mobile__menu {
    position: absolute;
    top: calc( 100% + 6px );
    left: 0;
    right: 0;
    z-index: 25;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--surface-white, #ffffff);
    border: 1px solid var(--border-default, #dcdcde);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 12px 32px -12px rgba( 0, 0, 0, 0.18 );
  }
  .members-sort-mobile__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e1e1e);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
  }
  .members-sort-mobile__option:hover,
  .members-sort-mobile__option:focus-visible {
    background: var(--surface-light-2, #f0f0f1);
    outline: none;
  }
  .members-sort-mobile__option.is-active {
    background: color-mix(in srgb, var(--brand-primary, #2145e6) 8%, transparent);
    color: var(--brand-primary, #2145e6);
    font-weight: 600;
  }
  .members-sort-mobile__option.is-active svg {
    color: var(--brand-primary, #2145e6);
  }
}

/* --- Radius Pills --- */
.filter-radius-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.radius-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface-light-2, #f0f0f1);
  color: var(--text-secondary, #50575e);
  border: 1px solid var(--border-default, #dcdcde);
  cursor: pointer;
  transition: all 0.15s;
}

.radius-pill:hover {
  background: var(--brand-primary-light, #eef1fd);
  color: var(--brand-primary, #2145e6);
  border-color: var(--brand-primary, #2145e6);
}

.radius-pill.active {
  background: var(--brand-primary, #2145e6);
  color: #ffffff;
  border-color: var(--brand-primary, #2145e6);
}

.radius-pill.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Loader --- */
.wpfolks-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 0;
  font-size: 14px;
  color: var(--text-secondary, #50575e);
  font-family: var(--font-body, 'Figtree'), sans-serif;
}

.wpfolks-loader-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-default, #dcdcde);
  border-top-color: var(--brand-primary, #2145e6);
  border-radius: 50%;
  animation: wpfolks-spin 0.7s linear infinite;
}

@keyframes wpfolks-spin {
  to { transform: rotate(360deg); }
}

#membersLoader {
  display: none;
  align-items: center;
  justify-content: center;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  /* row-gap is non-zero so wrapped rows on mobile breathe; column gap
     stays tight for the desktop one-line layout. */
  gap: 8px 4px;
  flex-wrap: wrap;
  margin-top: 32px;
  /* Defensive — if a child somehow refuses to shrink, the wrapper won't
     push the page wider than its grid column. */
  max-width: 100%;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.pagination-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination-ellipsis {
  width: 40px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* --- Results Count --- */
.results-bar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 0px;
  margin-top: 24px;
}

.results-count {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.results-count strong {
  color: var(--color-text);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .members-hero h1 {
    font-size: 30px;
  }

  .members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .map-view {
    height: 360px;
  }

  /* Leaflet map container is a sibling div with hardcoded 650px on
     desktop — shrink it on mobile too so the map doesn't eat the
     whole viewport. Keeps the map usable without dominating the page. */
  #wpfolksMap {
    height: 320px;
  }

  .results-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .members-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * Spotlight card — featured member, rendered as first item in the
 * members grid. Spans 2 columns on desktop (3-col grid) so the rest
 * of the row holds one regular member card; spans full width on
 * smaller screens to match the existing grid behaviour.
 * The legacy `.spotlight-row` wrapper is no longer rendered (1.22.0)
 * but the rule below keeps margin if it ever surfaces in cached HTML.
 * ===================================================================== */
.spotlight-row {
  margin: 24px 0;
}

/* 2-column row of featured-folk cards below the hero. Wraps the
   Folk Spotlight (left) and All-time Top Contributor (right) on
   /folks/. Collapses to a single column on narrow screens.
   margin-top creates breathing room between the dark hero and the
   cards so the row doesn't visually crash into the hero edge. */
.folks-features-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
  margin-bottom: 24px;
}
@media (max-width: 760px) {
  .folks-features-row {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }
}

/* --- Folk feature card (Spotlight + Top Contributor) -------------
   Vertical layout, ~half-width. Each card stacks: eyebrow row,
   avatar + identity row, WPFolks badge chips (labeled), wp.org team
   chips (icon-only), View Profile CTA pinned bottom-right. The
   .feature-card class is shared by both modes; per-mode look is
   driven by the user's --sp-color (Spotlight = pseudo-randomised per
   user; Top = its own color). */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sp-color, #2145e6) 6%, #fff) 0%,
    #fff 60%
  );
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sp-color, #2145e6) 30%, var(--color-border, #dcdcde));
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--sp-color, #2145e6) 45%, transparent);
}
.feature-card__halo {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sp-color, #2145e6) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.feature-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-color, #2145e6), color-mix(in srgb, var(--sp-color, #2145e6) 60%, #000));
}

/* Eyebrow row — pill-style label + (for top contributor) score pill,
   plus an archive link to the matching directory page on the right.
   `flex-wrap` lets the archive link drop to a 2nd line when the
   eyebrow + score pill don't leave room (narrow mobile cards) — much
   cleaner than the old space-between layout where the score pill got
   visually squeezed between two competing flex items. */
.feature-card__top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.feature-card__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;        /* score pill wraps under the label if cramped */
  align-items: center;
  row-gap: 4px;
  gap: 6px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sp-color, #2145e6);
}
.feature-card__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-color, #2145e6);
  animation: feature-pulse 2s ease-in-out infinite;
}
@keyframes feature-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.feature-card__score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sp-color, #2145e6) 12%, #fff);
  color: var(--sp-color, #2145e6);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.feature-card__archive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #50575e);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.feature-card__archive:hover { color: var(--sp-color, #2145e6); }

/* Avatar + identity row. */
.feature-card__identity-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  position: relative;
}
.feature-card__avatar-wrap {
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-color, #2145e6), color-mix(in srgb, var(--sp-color, #2145e6) 50%, #fff));
}
.feature-card__avatar {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
}
.feature-card__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  border: 3px solid #fff;
}
.feature-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.feature-card__name {
  font-family: var(--font-display, 'Fraunces'), serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  color: var(--sp-color, var(--color-primary, #2145e6));
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.feature-card__name .wpfolks-verified-badge,
.feature-card__name .wpfolks-expert-badge {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  top: 1px;
}
.feature-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  color: var(--color-text-secondary, #50575e);
}
.feature-card__meta svg { opacity: 0.7; }
.feature-card__tagline {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text, #1e1e1e);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* All contribution badges — WPFolks-internal + wp.org team — render
   as icon-only circular chips inside a single wrapping flex row, so
   they flow as one continuous list instead of two awkwardly-separated
   rows. Per-chip color comes from --chip-color set inline. No cap and
   no "+N" overflow pill: prolific contributors just get a wrapped
   second/third row, which reads cleaner than truncation. */
.feature-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px; /* breathing room from the tagline above */
}
.feature-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--chip-color, #2145e6);
  color: var(--chip-color, #2145e6);
  background: #fff;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative; /* anchor for the data-tooltip pseudo-element */
  outline: none;
}

/* Hover/focus tooltip — pulls copy from data-tooltip. Mirrors the
   .contrib-badge tooltip on the profile page so the experience is
   consistent across surfaces. Sits above the chip with an arrow,
   hidden by default + revealed on hover OR keyboard focus so a11y
   stays intact. The pointer-events:none keeps the tooltip from
   intercepting clicks on adjacent chips. */
.feature-card__chip[data-tooltip]::after,
.feature-card__chip[data-tooltip]::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
  z-index: 30;
}
.feature-card__chip[data-tooltip]::after {
  content: attr(data-tooltip);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  background: #1e1e1e;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  border-radius: 6px;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.feature-card__chip[data-tooltip]::before {
  content: '';
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: #1e1e1e;
}
.feature-card__chip[data-tooltip]:hover::after,
.feature-card__chip[data-tooltip]:hover::before,
.feature-card__chip[data-tooltip]:focus-visible::after,
.feature-card__chip[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* WPFolks-internal chips get a tinted fill to stand apart from the
   plain-white wp.org team chips. Different fill, same outline weight
   so they sit comfortably together in the same row. */
.feature-card__chip--wpfolks {
  background: color-mix(in srgb, var(--chip-color, #2145e6) 14%, #fff);
}
.feature-card__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px color-mix(in srgb, var(--chip-color, #2145e6) 40%, transparent);
}
.feature-card__chip .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 1;
}
.feature-card__chip .dashicons::before {
  font-size: 14px;
  line-height: 1;
}
.feature-card__chip .wpfolks-team-icon-img {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}

/* CTA pinned bottom-right via margin-top: auto + align-self. */
.feature-card__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  margin-top: auto;
  padding: 7px 14px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--sp-color, #2145e6);
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.feature-card__cta-btn:hover {
  filter: brightness(0.92);
  transform: translateX(2px);
}

@media (max-width: 420px) {
  .feature-card { padding: 14px 14px 12px; }
  .feature-card__avatar,
  .feature-card__avatar--fallback { width: 52px; height: 52px; }
  .feature-card__name { font-size: 17px; }
}