/* ==========================================================================
   Page — Country Rankings
   ========================================================================== */

.country-page {
  width: 100%;

  h2 {
    text-align: center;
  }

  p {
    text-align: center;
    color: var(--color-text-muted);
  }
}

.country-page .ranking {
  margin-block-start: var(--space-lg);
}

/* --- Fame Gap Section --- */
.fame-gap-section {
  width: 100%;
  margin-block: var(--space-xl);

  h3 {
    text-align: center;
    margin-block-end: var(--space-xs);
  }
}

.fame-gap-section__subtitle {
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-md);
}

.fame-gap-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.fame-gap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: background var(--transition-fast);

  &:hover {
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
  }
}

.fame-gap-item__person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  .person-image-frame {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    flex-shrink: 0;

    img {
      border-radius: var(--radius-full);
    }
  }
}

.fame-gap-item__info {
  display: flex;
  flex-direction: column;
}

.fame-gap-item__name {
  font-weight: 600;
  font-size: var(--font-size-body);
  text-decoration: none;
  transition: color var(--transition-fast);

  &:hover {
    color: var(--color-primary);
  }
}

.fame-gap-item__rank {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.fame-gap-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;

  &--positive {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg));
    color: var(--color-success);
  }

  &--negative {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg));
    color: var(--color-danger);
  }
}