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

/* --- Leaderboard Hero --- */
.lb-hero {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 48px 0;
  text-align: center;
}
.lb-hero h1 {
  font-size: 40px;
  margin-bottom: 8px;
}
.lb-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
}

/* --- Spotlight Card --- */
.spotlight-section {
  padding: 32px 0;
}
/* Two-column layout: main column carries the trophy + avatar +
   identity + stats (existing flow); sidebar carries the badge groups.
   The previous single-flex layout left ~40% empty whitespace on the
   right of the card, so we lift the badges out of the info block and
   into their own column. Below the responsive breakpoint the columns
   stack and the layout reverts to a single flow. */
.spotlight-card {
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 32px;
  border: 2px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(240,165,0,0.04) 0%, var(--color-white) 100%);
}
.spotlight-card__main {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 1 60%;
  min-width: 0;
}
.spotlight-card__sidebar {
  flex: 0 1 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 28px;
  border-left: 1px solid color-mix( in srgb, var( --color-accent, #f0a900 ) 18%, var( --color-border, #dcdcde ) );
}
.spotlight-badges-group__label {
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var( --color-text-secondary, #8c8f94 );
  margin: 0 0 8px;
}
/* Override the badge row's prior `margin-top: 14px` (which spaced it
   below the stats in the old single-column layout) — now it sits
   directly under the group label. */
.spotlight-card__sidebar .spotlight-badges {
  margin-top: 0;
}
.spotlight-trophy {
  font-size: 56px;
  flex-shrink: 0;
}
.spotlight-avatar {
  flex-shrink: 0;
}
.spotlight-info {
  flex: 1;
  min-width: 0;
}
.spotlight-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.spotlight-name {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 4px;
}
.spotlight-username {
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: block;
}
.spotlight-stats {
  display: flex;
  /* row-gap × column-gap split: when there are too many stats to fit
     on one line (5+ stats in the narrowed 2-col layout), the wrapped
     row sits 6px below — close enough to read as part of the same
     cluster instead of a stranded second block. Column gap stays at
     20px so individual stats keep breathing room. */
  gap: 6px 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.spotlight-stat {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.spotlight-stat strong {
  color: var(--color-text);
  font-weight: 700;
}
.spotlight-quote {
  font-size: 15px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.6;
  border-left: 3px solid var(--color-accent);
  padding-left: 16px;
  margin-top: 12px;
}

/* --- Tabs --- */
.lb-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
  gap: 0;
}
.lb-tab {
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.lb-tab:hover {
  color: var(--color-text);
}
.lb-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.lb-tab-panel {
  display: none;
}
.lb-tab-panel.active {
  display: block;
}

/* --- Leaderboard Table --- */
.lb-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lb-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  padding: 14px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-off-white);
  white-space: nowrap;
}
.lb-table thead th:first-child {
  width: 50px;
  text-align: center;
}
.lb-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}
.lb-table tbody tr:hover {
  background: var(--color-off-white);
}
.lb-table tbody td {
  padding: 14px 12px;
  vertical-align: middle;
}
.lb-table tbody td:first-child {
  text-align: center;
  font-weight: 700;
}

/* Rank badges for top 3 */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.rank-badge--gold {
  background: #fef3c7;
  color: #b45309;
}
.rank-badge--silver {
  background: #f1f5f9;
  color: #475569;
}
.rank-badge--bronze {
  background: #fef2e8;
  color: #9a3412;
}
.rank-number {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Top 3 row highlight */
.lb-table tbody tr.top-1 {
  background: rgba(254,243,199,0.3);
}
.lb-table tbody tr.top-2 {
  background: rgba(241,245,249,0.5);
}
.lb-table tbody tr.top-3 {
  background: rgba(254,242,232,0.3);
}

/* Member cell */
.lb-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lb-member-cell .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
  flex-shrink: 0;
}
.lb-member-name {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.lb-member-name a {
  color: var(--color-text);
}
.lb-member-name a:hover {
  color: var(--color-primary);
}
.lb-member-location {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Score column */
.lb-score {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 15px;
}

/* Numeric cells */
.lb-table tbody td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-table thead th.num {
  text-align: center;
}

/* Rank-movement indicator. Renders inline beneath the rank number /
   badge in the Rank column, gated to score-ordered tabs (All Time +
   This Month). The snapshot it compares against is updated once per
   24h, so the arrow shows "movement since yesterday morning" — see
   wpfolks_maybe_snapshot_ranks() in inc/leaderboard/scoring.php. */
.lb-rank-delta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.lb-rank-delta--up   { color: #16a34a; }
.lb-rank-delta--down { color: #dc2626; }
.lb-rank-delta--flat { color: #94a3b8; }
.lb-rank-delta--new  {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2145e6;
  background: rgba(33,69,230,0.08);
  padding: 2px 6px;
  border-radius: 999px;
}

/* --- Hall of Fame --- */
.hof-section {
  padding: 48px 0 64px;
  background: var(--color-off-white);
}
.hof-header {
  text-align: center;
  margin-bottom: 32px;
}
.hof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hof-card {
  padding: 24px;
  text-align: center;
  background: var(--color-white);
}
.hof-card .avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
  margin: 0 auto 12px;
}
.hof-card-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.hof-card-years {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.hof-card-contribution {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .lb-hero h1 {
    font-size: 30px;
  }
  .spotlight-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  /* On mobile, both columns stack. Sidebar drops the left border +
     padding (becomes a top divider instead) and the main column
     re-centers the trophy + avatar + info. */
  .spotlight-card__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 100%;
  }
  .spotlight-card__sidebar {
    flex: 1 1 100%;
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid color-mix( in srgb, var( --color-accent, #f0a900 ) 18%, var( --color-border, #dcdcde ) );
    align-items: center;
  }
  .spotlight-card__sidebar .spotlight-badges {
    justify-content: center;
  }
  .spotlight-stats {
    justify-content: center;
  }
  .spotlight-quote {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid var(--color-accent);
    padding-top: 12px;
  }
  /* Tabs scroll horizontally on mobile — "Most WPFolks Badges" is too
     long to fit alongside 5 other tabs at any reasonable font size. */
  .lb-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .lb-tabs::-webkit-scrollbar {
    display: none;
  }
  .lb-tab {
    padding: 10px 14px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Card layout for the leaderboard on mobile. Horizontal scroll
     across 7 numeric columns is hostile on phones — column headers
     scroll out of sync with data, alignment confusion, etc. So we
     break the table into a stack of per-row cards using the data-label
     attribute on each <td> to render its label inline. */
  .lb-table-wrapper {
    overflow-x: visible;
  }
  .lb-table,
  .lb-table tbody,
  .lb-table tr,
  .lb-table td {
    display: block;
    width: 100%;
  }
  .lb-table thead {
    display: none;
  }
  .lb-table tbody tr {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 14px;
    background: #fff;
  }
  .lb-table tbody tr.top-1 { background: rgba(254,243,199,0.4); }
  .lb-table tbody tr.top-2 { background: rgba(241,245,249,0.6); }
  .lb-table tbody tr.top-3 { background: rgba(254,242,232,0.4); }

  .lb-table tbody td {
    border: none;
    padding: 8px 0;
    text-align: right;
  }

  /* Rank + Contributor: card header — flex row, no labels, no border.
     Rank pill on the left, avatar+name takes remaining space. */
  .lb-table tbody td:nth-child(1) {
    display: inline-block;
    width: auto;
    padding: 0;
    margin-right: 12px;
    vertical-align: middle;
    text-align: left;
  }
  .lb-table tbody td:nth-child(2) {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 0 0 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
  }

  /* Avatar protection inside the contributor cell. The flex container
     `.lb-member-cell` has two children — the link wrapping the <img>,
     and the <div> with name/username. By default both have flex-shrink:1,
     which on narrow phones with long names squishes the avatar's link
     and the photo gets clipped or compressed. Pinning the avatar wrapper
     to flex-shrink:0 keeps the photo at 32×32 regardless of name length;
     pairing with min-width:0 on the text block lets long names truncate
     instead of pushing layout. */
  .lb-table tbody .lb-member-cell > a:first-child {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
  }
  .lb-table tbody .lb-member-cell .avatar {
    flex-shrink: 0;
  }
  .lb-table tbody .lb-member-cell > div {
    min-width: 0;
    overflow: hidden;
  }
  .lb-table tbody .lb-member-cell .lb-member-name,
  .lb-table tbody .lb-member-cell .lb-member-location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Stat rows (cols 3+): label on left, value on right. */
  .lb-table tbody td:nth-child(n+3) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
  }
  .lb-table tbody td:nth-child(n+3)::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
  }
  .lb-table tbody td.num {
    text-align: right;
  }

  .hof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .hof-grid {
    grid-template-columns: 1fr;
  }
  .spotlight-stats {
    flex-direction: column;
    gap: 8px;
  }
}

/* ────────────────────────────────────────────────────────────────
 * Spotlight badge row — fills the empty space below the stats on
 * the All-Time Top Contributor card. WPFolks-internal badges first
 * (filled background, more prominent), then wp.org team chips
 * (white background, outlined). Capped at 10 visible by the
 * template so the row stays a single line on most screens.
 * ──────────────────────────────────────────────────────────────── */

.spotlight-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.spotlight-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var( --badge-color, #2145e6 );
  color: var( --badge-color, #2145e6 );
  background: #fff;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.spotlight-badge--wpfolks {
  /* Tinted fill so platform-earned badges stand apart from the
     plain-white wp.org chips beside them. Same outline weight. */
  background: color-mix( in srgb, var( --badge-color, #2145e6 ) 14%, #fff );
}
.spotlight-badge:hover {
  transform: translateY( -1px );
  box-shadow: 0 4px 8px -2px color-mix( in srgb, var( --badge-color, #2145e6 ) 40%, transparent );
}
.spotlight-badge .dashicons {
  font-size: 15px;
  width: 15px;
  height: 15px;
  line-height: 1;
}
.spotlight-badge .dashicons::before {
  font-size: 15px;
  line-height: 1;
}
.spotlight-badge .wpfolks-team-icon-img {
  width: 15px;
  height: 15px;
  display: block;
  object-fit: contain;
}

@media (max-width: 640px) {
  .spotlight-badges { gap: 5px; margin-top: 12px; }
  .spotlight-badge { width: 26px; height: 26px; }
  .spotlight-badge .dashicons { font-size: 13px; width: 13px; height: 13px; }
  .spotlight-badge .dashicons::before { font-size: 13px; }
}

/* =====================================================================
 * 1.22.149 — Two-up row: rank card + "How is this calculated?" callout.
 * Auto-fits to a single column when only one child is present (logged-
 * out viewers don't see the rank card) or on narrow viewports.
 * ===================================================================== */
.lb-top-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
}
/* The rank card and the callout drop their individual bottom margins
 * inside the row — the row's own margin-bottom takes over. */
.lb-top-row .lb-rank-card,
.lb-top-row .lb-howitworks {
  margin: 0;
  /* Stretch both children to the same height so the row reads as a
   * pair rather than mismatched heights. */
  height: 100%;
}

/* =====================================================================
 * 1.22.149 — "How is this calculated?" callout banner.
 * Sits above the tabs on /leaderboard/. Soft primary tint so it reads
 * as a useful callout, not an alert.
 * ===================================================================== */
.lb-howitworks {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: rgba(33, 69, 230, 0.05);
  border: 1px solid rgba(33, 69, 230, 0.18);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lb-howitworks:hover {
  background: rgba(33, 69, 230, 0.09);
  border-color: rgba(33, 69, 230, 0.35);
  transform: translateY(-1px);
}
.lb-howitworks__icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary, #2145e6);
  color: #fff;
}
.lb-howitworks__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-howitworks__body strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.lb-howitworks__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.lb-howitworks__cta {
  flex: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary, #2145e6);
  margin-left: 6px;
  transition: transform 0.15s ease;
}
.lb-howitworks:hover .lb-howitworks__cta {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .lb-howitworks { padding: 12px 14px; gap: 10px; }
  .lb-howitworks__icon { width: 30px; height: 30px; }
  .lb-howitworks__icon svg { width: 16px; height: 16px; }
  .lb-howitworks__body strong { font-size: 14px; }
  .lb-howitworks__sub { font-size: 12.5px; }
}

/* 1.23.101 — "You are here" footer row, appended below the visible
   25 when the viewer's rank falls past the cutoff. Soft brand-purple
   background so it reads as a callout without competing visually
   with the medal-coloured top rows. The dashed gap row above it
   carries no fill on either side so it visually separates the top
   from the viewer without a hard divider. */
.lb-table tbody tr.lb-viewer-row td {
  background: rgba(33, 69, 230, 0.06);
  border-top: 2px solid rgba(33, 69, 230, 0.18);
}
.lb-table tbody tr.lb-viewer-row .rank-number {
  color: var(--color-primary, #2145e6);
  font-weight: 700;
}
.lb-table tbody tr.lb-viewer-gap td {
  background: transparent;
}
[data-theme="dark"] .lb-table tbody tr.lb-viewer-row td {
  background: rgba(138, 155, 255, 0.10);
  border-top-color: rgba(138, 155, 255, 0.30);
}